Added listbox options support in selectOptions

src/__tests__/helpers/utils.js

@@ -55,6 +55,32 @@ function setupSelect({
   }
 }
 
+function setupListbox() {
+  const wrapper = document.createElement('div')
+  wrapper.innerHTML = `
+    <button id="button" aria-haspopup="listbox">
+      Some label
+    </button>
+    <ul
+      role="listbox"
+      name="listbox"
+      aria-labelledby="button"
+    >
+      <li role="option" aria-selected="false">1</li>
+      <li role="option" aria-selected="false">2</li>
+      <li role="option" aria-selected="false">3</li>
+    </ul>
+  `
+  document.body.append(wrapper)
+  const listbox = wrapper.querySelector('[role="listbox"]')
+  const options = Array.from(wrapper.querySelectorAll('[role="option"]'))
+  return {
+    ...addListeners(listbox),
+    listbox,
+    options,
+  }
+}
+
 const eventLabelGetters = {
   KeyboardEvent(event) {
     return [
@@ -278,4 +304,4 @@ afterEach(() => {
   document.body.innerHTML = ''
 })
 
-export {setup, setupSelect, addEventListener, addListeners}
+export {setup, setupSelect, setupListbox, addEventListener, addListeners}

src/__tests__/select-options.js

@@ -1,5 +1,5 @@
 import userEvent from '../'
-import {setupSelect, addListeners} from './helpers/utils'
+import {setupSelect, addListeners, setupListbox} from './helpers/utils'
 
 test('fires correct events', () => {
   const {select, options, getEventSnapshot} = setupSelect()
@@ -29,6 +29,53 @@ test('fires correct events', () => {
   expect(o3.selected).toBe(false)
 })
 
+test('fires correct events on listBox select', () => {
+  const {listbox, options, getEventSnapshot} = setupListbox()
+  userEvent.selectOptions(listbox, '2')
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: ul
+
+    ul - pointerover
+    ul - pointerenter
+    ul - mouseover: Left (0)
+    ul - mouseenter: Left (0)
+    ul - pointermove
+    ul - mousemove: Left (0)
+    ul - pointerdown
+    ul - mousedown: Left (0)
+    ul - pointerup
+    ul - mouseup: Left (0)
+    ul - click: Left (0)
+    li[value=0] - pointerover
+    ul - pointerenter
+    li[value=0] - mouseover: Left (0)
+    ul - mouseenter: Left (0)
+    li[value=0] - pointermove
+    li[value=0] - mousemove: Left (0)
+    li[value=0] - pointerover
+    ul - pointerenter
+    li[value=0] - mouseover: Left (0)
+    ul - mouseenter: Left (0)
+    li[value=0] - pointermove
+    li[value=0] - mousemove: Left (0)
+    li[value=0] - pointerdown
+    li[value=0] - mousedown: Left (0)
+    li[value=0] - pointerup
+    li[value=0] - mouseup: Left (0)
+    li[value=0] - click: Left (0)
+    li[value=0] - pointermove
+    li[value=0] - mousemove: Left (0)
+    li[value=0] - pointerout
+    ul - pointerleave
+    li[value=0] - mouseout: Left (0)
+    ul - mouseleave: Left (0)
+  `)
+  const [o1, o2, o3] = options
+  expect(o1).toHaveAttribute('aria-selected', 'false')
+  expect(o2).toHaveAttribute('aria-selected', 'true')
+  expect(o3).toHaveAttribute('aria-selected', 'false')
+})
+
 test('fires correct events on multi-selects', () => {
   const {select, options, getEventSnapshot} = setupSelect({multiple: true})
   userEvent.selectOptions(select, ['1', '3'])
@@ -79,6 +126,15 @@ test('sets the selected prop on the selected option using option html elements',
   expect(o3.selected).toBe(false)
 })
 
+test('sets the selected prop on the selected listbox option using option html elements', () => {
+  const {listbox, options} = setupListbox()
+  const [o1, o2, o3] = options
+  userEvent.selectOptions(listbox, o1)
+  expect(o1).toHaveAttribute('aria-selected', 'true')
+  expect(o2).toHaveAttribute('aria-selected', 'false')
+  expect(o3).toHaveAttribute('aria-selected', 'false')
+})
+
 test('a previously focused input gets blurred', () => {
   const button = document.createElement('button')
   document.body.append(button)

src/select-options.js

@@ -1,6 +1,7 @@
 import {createEvent, getConfig, fireEvent} from '@testing-library/dom'
 import {click} from './click'
 import {focus} from './focus'
+import {hover, unhover} from './hover'
 
 function selectOptionsBase(newValue, select, values, init) {
   if (!newValue && !select.multiple) {
@@ -10,13 +11,17 @@ function selectOptionsBase(newValue, select, values, init) {
     )
   }
   const valArray = Array.isArray(values) ? values : [values]
-  const allOptions = Array.from(select.querySelectorAll('option'))
+  const allOptions = Array.from(
+    select.querySelectorAll('option, [role="option"]'),
+  )
   const selectedOptions = valArray
     .map(val => {
       if (allOptions.includes(val)) {
         return val
       } else {
-        const matchingOption = allOptions.find(o => o.value === val)
+        const matchingOption = allOptions.find(
+          o => o.value === val || o.innerHTML === val,
+        )
         if (matchingOption) {
           return matchingOption
         } else {
@@ -59,17 +64,25 @@ function selectOptionsBase(newValue, select, values, init) {
   }
 
   function selectOption(option) {
-    option.selected = newValue
-    fireEvent(
-      select,
-      createEvent('input', select, {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-        ...init,
-      }),
-    )
-    fireEvent.change(select, init)
+    if (option.getAttribute('role') === 'option') {
+      option?.setAttribute?.('aria-selected', newValue)
+
+      hover(option, init)
+      click(option, init)
+      unhover(option, init)
+    } else {
+      option.selected = newValue
+      fireEvent(
+        select,
+        createEvent('input', select, {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+          ...init,
+        }),
+      )
+      fireEvent.change(select, init)
+    }
   }
 }