change selected option of v-select using vue-test-util

Question

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.

Just come update i just found that vuetify create another div and some input for the filter of options. i have chage the behaviour in order to trigger a selection — EFOE
– EFOE, Commented Jun 26, 2018 at 13:41

Anonsage · Accepted Answer · 2020-02-10 20:25:25Z

11

Use wrapper.vm.selectItem('foo'). It works for me.

I found this in vuetify v-select tests:

Old: ~~https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/test/unit/components/VSelect/VSelect.spec.js#L533~~

New: https://github.com/vuetifyjs/vuetify/blob/b2abe9fa274feeb0c5033bf12cc48276d4ac5a78/packages/vuetify/test/unit/components/VSelect/VSelect.spec.js#L28

Edit: Updated link.

edited Feb 10, 2020 at 20:25

Anonsage

8,3406 gold badges54 silver badges54 bronze badges

answered Jul 26, 2018 at 3:02

Liang Zhou

2,16322 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Admiral Potato Over a year ago

For newcomers to this issue, here's an updated link since the above has moved: github.com/vuetifyjs/vuetify/blob/…

izumeroot Over a year ago

Excellent answer! It must be marked as correct. This works for me. Thanks @Liang Zhou

js const select = wrapper.findComponent({ ref: "myselectref" }); expect(select.exists()).toBeTruthy(); select.vm.selectItem("foo"); expect(wrapper.vm.getMyData()).toStrictEqual("foo");

YoungSeon Ahn · Accepted Answer · 2019-07-15 06:38:34Z

2

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

It works for me. By this code, first option is selected.

Here is ref.

I used Vuetify v1.5.5.

answered Jul 15, 2019 at 6:38

YoungSeon Ahn

5554 silver badges4 bronze badges

Comments

Adrii · Accepted Answer · 2022-01-04 07:57:08Z

2

My solution. It's very equivalent to YounSeon Ahn's response, just the options selector changed. I'm using 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');

edited Jan 4, 2022 at 7:57

answered Jan 28, 2021 at 10:41

Adrii

1,7701 gold badge14 silver badges21 bronze badges

2 Comments

Noe Lopez Over a year ago

Just a minor typo in your selector you are missing the I in findAll('.v-list-item')

Adrii Over a year ago

I fix it, thank you ! :)

Jar · Accepted Answer · 2020-06-11 16:26:47Z

0

finally got this working for vuetify 1.5. If your v-select looks like this:

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

then do this:

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

this works, but for some reason if i do at(1) it does not work. Thankfully for my test case the option at position 0 is fine

answered Jun 11, 2020 at 16:26

Jar

2,0402 gold badges28 silver badges30 bronze badges

Comments

saike · Accepted Answer · 2019-11-06 09:41:25Z

-1

This is my final solution to test Vuetify VSelect component in cypressjs:

  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

answered Nov 6, 2019 at 9:41

saike

1,06510 silver badges17 bronze badges

1 Comment

Dónal Over a year ago

This question is asking about Vue Test Utils, not Cypress

andrunix · Accepted Answer · 2018-07-24 16:33:46Z

-4

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('');
});

answered Jul 24, 2018 at 16:33

andrunix

1,7541 gold badge14 silver badges23 bronze badges

7 Comments

Desprit Over a year ago

But <v-select> doesn't render default browser <select> markup. Where did you get your <select> and <option>s from?

andrunix Over a year ago

I wasn't using vuetify. Just plain HTML + Vue as shown in my HTML answer above.

saike Over a year ago

lowered this answer, because qusetion is about Vuetify component V-Select, not simple html select element

tomfl Over a year ago

It didn't work for me. I had to use ` click` instead of change.

TwoD Over a year ago

This does not answer the question as many testing suites already have methods for interacting with plain HTML <select> elements. What's requested is the equivalent method for Vuetify's <v-select> widget which only uses an <input type=text"> element internally and simulates the drop-down menu with a separate menu widget attached elsewhere in the DOM.

|

Collectives™ on Stack Overflow

change selected option of v-select using vue-test-util

6 Answers 6

2 Comments

Comments

2 Comments

Comments

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

2 Comments

Comments

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related