Skip to content

Support multiple values in wrapper<select[multiple]>.setValue #1768

@splanard

Description

@splanard

Is your feature request related to a problem? Please describe.
I want to simulate a user selection on a multi-select element (a select element which have the mulitple attribute).

<select multiple @change="doSomething">
    <option value="1">value 1</option>
    <option value="2">value 2</option>
    <option value="3">value 3</option>
</select>

Currently, if I do this in my test:
await wrapper.find('select').setValue('1');

My doSomething function receives an event, whose target.selectedOptions contains the selection of a single element.

But when I do this:
await wrapper.find('select').setValue(['1', '2']);

My doSomething function receives an event, whose target.selectedOptions is an empty array.

It's like setValue accepts an array as argument, but does not process it properly. I found no way to simulate a multiple selection.

EDIT:
Checking the source code, the multiple select is not handled at all:
image

It has been done in test-utils v1 though : https://github.com/vuejs/vue-test-utils/pull/1554/files

Describe the solution you'd like
I'd like that, when I gave several values to setValue, all the matching options are selected inside the select element.

Describe alternatives you've considered
Looking at what has been done in test-utils v1, I created this Typescript utility function that does the trick:

function setSelected(...values: string[]): Promise<void> {
  const select = wrapper.find('select');
  Array.from((select.element as HTMLSelectElement).options).forEach((option: HTMLOptionElement) => {
    option.selected = values.includes(option.value);
  });
  return select.trigger('change');
}

I can use it like this: await setSelected('1', '2'); and my doSomething function receives the right selected options.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions