-
Notifications
You must be signed in to change notification settings - Fork 271
Description
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.