web-dev-qa-db-ja.com

vue-test-utilを使用してv-selectの選択されたオプションを変更します

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')

誰かが選択を取得してから選択された値を変更するのを手伝ってもらえますか？ご協力ありがとうございました。

vuetify.jsvue-test-utils
5
EFOE

私もこれに苦労していて、ついにそれを行う方法を見つけました。 Jestとvue-test-utilsを使用しています。基本的に、2つの別々のステップでそれを行う必要があります。オプションを選択済みとしてマークし、選択時に変更をトリガーします。

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('');
});
0
andrunix
wrapper.findAll('.v-list__tile__title').at(0).trigger('click')

わたしにはできる。このコードにより、最初のオプションが選択されます。

これが ref です。

Vuetifyv1.5.5を使用しました。

1
YoungSeon Ahn

wrapper.vm.selectItem('foo')を使用します。わたしにはできる。

私はこれをvuetifyで見つけましたv-selectテスト： https://github.com/vuetifyjs/vuetify/blob/dev/test/unit/components/VSelect/VSelect.spec.js#L496

1
Liang Zhou

これは、cypressjsでVuetifyVSelectコンポーネントをテストするための私の最終的な解決策です。

  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
0
saike