使用 vue-test-util 更改 v-select 的选定选项 [英] change selected option of v-select using vue-test-util
问题描述
我正在尝试测试使用 vuetify 构建的组件.为此，我正在使用 vue-test-utils.我的目标是在 v-select 字段中执行更改，并断言执行了突变.这是我的代码:
<v-app id="inspire"><v-容器流体><v-layout row wrap><v-flex xs6><v-subheader>标准</v-subheader></v-flex><v-flex xs6><v-选择:项目=项目"v-model="e1"标签=选择"单线></v-select></v-flex></v-layout></v-容器></v-app>当我设置数据时，第一次测试没问题:
componentWrapper.setData({items: storesList})期望(componentWrapper.vm.$data.items).toHaveLength(2)我现在想更改我尝试的选定值:
componentWrapper.findAll('#option').at(1).setSelected()还有
componentWrapper.find('el-select')有人可以帮我检索选择然后更改所选值吗?感谢您的支持.
我也一直在为此苦苦挣扎，终于找到了解决方案.我正在使用 Jest 和 vue-test-utils.基本上，您必须通过两个单独的步骤来完成.将选项标记为选中，然后触发选择上的更改.
HTML 部分是:
测试是:
it('选择组时应该填充子组列表', () => {期望(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');期望(cmp.vm.groupID).not.toBe('');});I'm trying to test a component builded with vuetify. For that I'm using vue-test-utils. My goal is to perform a change in the v-select field, and assert hat a mutation is performed. here is my code:
<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>
The first test is ok when i set the data:
componentWrapper.setData({items: storesList})
expect(componentWrapper.vm.$data.items).toHaveLength(2)
I now want to change the selected value I try:
componentWrapper.findAll('#option').at(1).setSelected()
And also
componentWrapper.find('el-select')
Can someone help me to retrieve the select and then change the selected value? Thanks for your support.
I have been struggling with this as well and finally found a way to do it. I'm using Jest and vue-test-utils. Basically, you have to do it with two separate steps. Mark the option as selected and then trigger the change on the select.
The HTML part is:
<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>
And the test is:
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('');
});
这篇关于使用 vue-test-util 更改 v-select 的选定选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
