使用 vue-test-util 更改 v-select 的 selected 选项
change selected option of v-select using vue-test-util
我正在尝试测试使用 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>
设置数据第一次测试ok:
componentWrapper.setData({items: storesList})
expect(componentWrapper.vm.$data.items).toHaveLength(2)
我现在想更改 selected 我尝试的值:
componentWrapper.findAll('#option').at(1).setSelected()
还有
componentWrapper.find('el-select')
有人可以帮我检索 select 然后更改 selected 值吗?
感谢您的支持。
我也一直在为此苦苦挣扎,终于找到了一种方法。我正在使用 Jest 和 vue-test-utils。基本上,您必须通过两个单独的步骤来完成。将选项标记为 selected,然后在 select.
上触发更改
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('');
});
使用wrapper.vm.selectItem('foo')
。它对我有用。
我在 vuetify v-select
测试中发现了这个:
编辑:已更新 link。
wrapper.findAll('.v-list__tile__title').at(0).trigger('click')
对我有用。
通过此代码,选择了第一个选项。
这里是ref.
我使用了 Vuetify v1.5.5。
这是我在 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
终于让这个适用于 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 的选项很好
我的解决方案。这与 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-item').at(0).trigger('click');
我正在尝试测试使用 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>
设置数据第一次测试ok:
componentWrapper.setData({items: storesList})
expect(componentWrapper.vm.$data.items).toHaveLength(2)
我现在想更改 selected 我尝试的值:
componentWrapper.findAll('#option').at(1).setSelected()
还有
componentWrapper.find('el-select')
有人可以帮我检索 select 然后更改 selected 值吗? 感谢您的支持。
我也一直在为此苦苦挣扎,终于找到了一种方法。我正在使用 Jest 和 vue-test-utils。基本上,您必须通过两个单独的步骤来完成。将选项标记为 selected,然后在 select.
上触发更改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('');
});
使用wrapper.vm.selectItem('foo')
。它对我有用。
我在 vuetify v-select
测试中发现了这个:
编辑:已更新 link。
wrapper.findAll('.v-list__tile__title').at(0).trigger('click')
对我有用。 通过此代码,选择了第一个选项。
这里是ref.
我使用了 Vuetify v1.5.5。
这是我在 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
终于让这个适用于 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 的选项很好
我的解决方案。这与 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-item').at(0).trigger('click');