Is multiselect testable?

[Maidomax]

I am using Laravel Dusk to test my website. I am having problems testing vue-multiselect components. I can click the multiselect itself, but I can not click a particular option as the <li></li> is not marked by the value of the option, so I can't pinpoint it with a css selector.

Is there a way to pinpoint a specific option in vue-multiselect?

Seems like a common problem, strange that it isn't already addressed.

[tapickell]

It would be nice to be able to pass it something that it can build css with so testing with headless frameworks can be easier. Every time we add another multiselect to the view it breaks our integration tests.

[shentao]

Working on it :)

[tapickell]

@shentao that's awesome news, any eta yet? and anything we can do to help with this feature?

[shentao]

Hopefully it will be released this weekend :)

[tapickell]

@shentao thats amazing. We are so stoked as this will address a major pain point for us right now. You guys rock 👍

[jdanino]

Any news on this?

[shentao]

If this is really what you need you can pass a custom option slot and make it add whatever data you need in the DOM node. Similar to this: https://monterail.github.io/vue-multiselect/#sub-custom-option-template
but you would write something like:

<multiselect config_here>
    <template slot="option" scope="props">
      <span :data-value="props.option.id"> {{ props.option.label }}</span>
    </template>
  </multiselect>

Wdyt?

[jdanino]

Works for me! Thanks!

[shentao]

No problem. Happy to help! :)

[luizmanoelf]

I haven't still being able to dusk test a form that uses vue-multiselect. If I pass a custom option using @shentao sugestion, how do I use to select the option in a dusk test?
Thanks for the help.

[pelletiermaxime]

Same for me. I don't understand what that answer does and how it helps.

[svenssontobias]

If someone needs to use cypress with vue-multiselect

<multiselect
data-cy='select-field'
name="field"
v-model="field"
:options="subfield"
:multiple="true"
:taggable="false"

Cypress test
cy.get('[data-cy=select-field]').click().type('{downarrow}{enter}{esc}');

https://stackoverflow.com/questions/58298675/how-to-find-element-and-select-by-cypress-io-with-vue-js-v-select

[ncortex]

If someone needs to use cypress with vue-multiselect

<multiselect
data-cy='select-field'
name="field"
v-model="field"
:options="subfield"
:multiple="true"
:taggable="false"

Cypress test
cy.get('[data-cy=select-field]').click().type('{downarrow}{enter}{esc}');

https://stackoverflow.com/questions/58298675/how-to-find-element-and-select-by-cypress-io-with-vue-js-v-select

You can also create a custom command for cypress like this:

Cypress.Commands.add('multiselectChoose', { prevSubject: true}, (subject, option) => {
    cy.wrap(subject).click();
    let found=false;
    subject.find('li.multiselect__element').each( function() {
        if(this.innerText.slice(0, -1) == option){      // Slice to remove the last space in innerText.
            cy.wrap(this).click();
            found= true;
        }
    });
    if(!found){
        throw new Error("No option "+option+" found in "+subject.selector) // To make the test fail
    }
});

then, you can call it like this:
cy.get('[data-cy=select-field]').multiselectChoose('option');

[octoquad]

@svenssontobias thanks for guiding me to a solution for Dusk, which is

$browser->keys('.multiselect[data-dusk="job-type"]', 'Option', '{enter}')

and

 <multiselect
    data-dusk="job-type"
    :allow-empty="false"
    class="form-control"
    :class="{ 'is-invalid': errors[0] }"
    v-model="job.type"
    :options="types"
    @close="validateStatus()"
  ></multiselect>

[th1nkgr33n]

You can also create a custom command for cypress like this:

Cypress.Commands.add('multiselectChoose', { prevSubject: true}, (subject, option) => {
    cy.wrap(subject).click();
    let found=false;
    subject.find('li.multiselect__element').each( function() {
        if(this.innerText.slice(0, -1) == option){      // Slice to remove the last space in innerText.
            cy.wrap(this).click();
            found= true;
        }
    });
    if(!found){
        throw new Error("No option "+option+" found in "+subject.selector) // To make the test fail
    }
});

then, you can call it like this:
cy.get('[data-cy=select-field]').multiselectChoose('option');

Be aware if you run this command on the same field multiple times, the slice() will have a strange behaviour for each following call. It would be better to use trim() instead.

[alexgil1994]

A solution that I found was working for me (after trying the solutions mentioned above) was to set a data-cy attribute and then simply

cy.get("[data-cy=name]").click({ force: true });
    cy.contains("option").click({ force: true });

Basically, the idea is to initially open the multiselect and then to find the element we want to select based on it's text instead of a non existent id or using child element searching.
Hope it helps someone

[Phanindra5810]

Thanks @alexgil1994 !! this solution works for me as well