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

[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:

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.

[cexbrayat]

@splanard Interesting. Would you like to open a PR to support this use-case? We would gladly review it.

[lmiller1990]

Just grab it from https://github.com/vuejs/vue-test-utils/pull/1554/files#diff-5c5637ddf50cba4f86e96ebb7854bb165fadf227f94d056fef19923be0a60e48R747-R762 👍