Question

我正在尝试测试使用vuetify构建的组件。为此，我正在使用vue-test-utils。我的目标是在v-select字段中进行更改，并声明执行了突变。这是我的代码：

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-layout row wrap>
        <v-flex xs6>
          <v-subheader>Standard</v-subheader>
        </v-flex>
        <v-flex xs6>
          <v-select
            :items="items"
            v-model="e1"
            label="Select"
            single-line
          ></v-select>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

设置数据后，第一次测试就可以了：

componentWrapper.setData({items: storesList})
expect(componentWrapper.vm.$data.items).toHaveLength(2)

我现在想更改我尝试的选定值：

componentWrapper.findAll('#option').at(1).setSelected()

还有

componentWrapper.find('el-select')

有人可以帮助我检索选择，然后更改选择的值吗？感谢您的支持。

Answer 1

使用wrapper.vm.selectItem('foo')。它对我有用。

我在vuetify v-select测试中发现了这一点：https://github.com/vuetifyjs/vuetify/blob/dev/test/unit/components/VSelect/VSelect.spec.js#L496

Answer 2

我也一直在为此苦苦挣扎，终于找到了解决之道。我正在使用Jest和vue-test-utils。基本上，您必须执行两个单独的步骤。将选项标记为选中，然后在选择上触发更改。

HTML部分是：

      <select id="groupid" v-model="groupID">
        <option value="">-Select group-</option>
        <option v-for="g in groupList" 
          v-bind:value="g.groupId">{{g.groupId}} - {{g.groupName}}
        </option>
      </select>

测试是：

it('should populate the subgroup list when a group is selected', () => {
  expect(cmp.vm.groupID).toBe('');
  expect(cmp.findAll('select#groupid > option').length).toBe(3);
  cmp.findAll('select#groupid > option').at(1).element.selected = true;
  cmp.find('select#groupid').trigger('change');
  expect(cmp.vm.groupID).not.toBe('');
});

Answer 3

wrapper.findAll('.v-list__tile__title').at(0).trigger('click')

对我有用。通过此代码，选择了第一个选项。

这里是ref。

我使用了Vuetify v1.5.5。

Answer 4

这是我测试cypressjs中的Vuetify VSelect组件的最终解决方案：

  cy.get('#YourVSelectComponentId', { timeout: 20000 }).should('not.have.attr', 'disabled', 'disabled').click({ force: true }); //find v-select, verify it's visible and then click.

  cy.get('.menuable__content__active').first().find('.v-list__tile').first().should('be.visible').click(); //find opened dropdown, then find first item in options, then click

Answer 5

最终使它适用于vuetify 1.5。如果您的v-select看起来像这样：

 <v-select      
        :items="projectManagers"
        :value="selectedProjectManager"
        key="UserId"
        label="Choose Name"
        item-text="FirstName"
        item-value="UserId"        
        id="nameSelect"
        @input="(val)=>{this.handleNameChange(val)}"
 />

然后执行以下操作：

wrapper.findAll('#nameSelect').at(0).trigger('input')

这行得通，但是由于某种原因，如果我在（1）做它不行。幸运的是，对于我的测试用例，位置0处的选项很好

Answer 6

我的解决方案。这与 YounSeon Ahn 的回应非常相似，只是选项选择器发生了变化。我使用的是 Vuetify 2.2.11。

// Found the v-select
wrapper.find('[data-testid="mySelect"]').trigger('click'); 
// Wait for DOM updating after the click
await localVue.nextTick();
// Find all options and select the first. If you are multiple v-select in your form, the class ".menuable__content__active" represents the current opened menu
wrapper.find('.menuable__content__active').findAll('.v-list-tem').at(0).trigger('click');

使用vue-test-util更改v-select的选定选项

6 个答案: