diff --git a/README.md b/README.md index 8b298443..c3903968 100644 --- a/README.md +++ b/README.md @@ -272,6 +272,15 @@ test('selectOptions', () => { The `values` parameter can be either an array of values or a singular scalar value. +It also accepts option nodes: + +```js +userEvent.selectOptions(screen.getByTestId('select-multiple'), [ + screen.getByText('A'), + screen.getByText('B'), +]) +``` + ### `tab({shift, focusTrap})` Fires a tab event changing the document.activeElement in the same way the diff --git a/src/__tests__/selectoptions.js b/src/__tests__/selectoptions.js index 05fe624e..899b3a50 100644 --- a/src/__tests__/selectoptions.js +++ b/src/__tests__/selectoptions.js @@ -168,6 +168,33 @@ test('sets the selected prop on the selected OPTION', () => { expect(screen.getByTestId('val3').selected).toBe(true) }) +test('sets the selected prop on the selected OPTION using nodes', () => { + render( +
{}}> + +
, + ) + + userEvent.selectOptions(screen.getByTestId('element'), [ + screen.getByText('second option'), + screen.getByText('third option'), + ]) + + expect(screen.getByTestId('val1').selected).toBe(false) + expect(screen.getByTestId('val2').selected).toBe(true) + expect(screen.getByTestId('val3').selected).toBe(true) +}) + test('sets the selected prop on the selected OPTION using htmlFor', () => { const onSubmit = jest.fn() diff --git a/src/index.js b/src/index.js index 4d74d6cd..390a3f77 100644 --- a/src/index.js +++ b/src/index.js @@ -270,7 +270,7 @@ function selectOptions(element, values, init) { const valArray = Array.isArray(values) ? values : [values] const selectedOptions = Array.from( element.querySelectorAll('option'), - ).filter(opt => valArray.includes(opt.value)) + ).filter(opt => valArray.includes(opt.value) || valArray.includes(opt)) if (selectedOptions.length > 0) { if (element.multiple) { diff --git a/typings/index.d.ts b/typings/index.d.ts index cf3cc768..e61d5725 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -22,7 +22,11 @@ declare const userEvent: { clear: (element: TargetElement) => void click: (element: TargetElement, init?: MouseEventInit) => void dblClick: (element: TargetElement, init?: MouseEventInit) => void - selectOptions: (element: TargetElement, values: string | string[], init?: MouseEventInit) => void + selectOptions: ( + element: TargetElement, + values: string | string[] | HTMLElement | HTMLElement[], + init?: MouseEventInit, + ) => void upload: ( element: TargetElement, files: FilesArgument,