Increase test coverage

Author: sbaechler

docusaurus/pages/shadow-dom/useMultipleCombobox.js

@@ -5,11 +5,19 @@ import {ReactShadowRoot} from '../../../test/react-shadow'
 
 export default function MultipleComboboxShadow() {
   return (
-    <div data-testid="shadow-root">
-      <ReactShadowRoot>
-        <h2>Shadow DOM</h2>
-        <DropdownMultipleCombobox />
-      </ReactShadowRoot>
+    <div>
+      <div>
+        <button>Button before shadow root</button>
+      </div>
+      <h2>Shadow DOM</h2>
+      <div data-testid="shadow-root">
+        <ReactShadowRoot>
+          <DropdownMultipleCombobox />
+        </ReactShadowRoot>
+      </div>
+      <div>
+        <button>Button after shadow root</button>
+      </div>
     </div>
   )
 }

docusaurus/pages/shadow-dom/useSelect.js

@@ -4,7 +4,9 @@ import DropdownSelect from '../useSelect'
 import {ReactShadowRoot} from '../../../test/react-shadow'
 
 export default function DropdownSelectShadow() {
-  return <ReactShadowRoot>
-    <DropdownSelect />
-  </ReactShadowRoot>
+  return (
+    <ReactShadowRoot>
+      <DropdownSelect />
+    </ReactShadowRoot>
+  )
 }

src/__tests__/.eslintrc

@@ -5,6 +5,7 @@
     "react/prop-types": "off",
     "react/display-name": "off",
     "react/no-deprecated": "off",
-    "no-console": "off"
-  }
+    "no-console": "off",
+    "no-unused-vars": "off",
+  },
 }

src/__tests__/downshift.shadow-root.js

@@ -7,29 +7,32 @@ import DropdownCombobox, {colors} from '../../test/useCombobox.test'
 import DropdownMultipleSelect from '../../test/useMultipleSelect.test'
 import {ReactShadowRoot} from '../../test/react-shadow'
 
-
 function _queryAllByRoleDeep(container, ...rest) {
-    // eslint-disable-next-line testing-library/prefer-screen-queries
-    const result = queryAllByRole(container, ...rest) // replace here with different queryAll* variants.
-    for (const element of container.querySelectorAll('*')) {
-      if (element.shadowRoot) {
-        result.push(..._queryAllByRoleDeep(element.shadowRoot, ...rest))
-      }
+  // eslint-disable-next-line testing-library/prefer-screen-queries
+  const result = queryAllByRole(container, ...rest) // replace here with different queryAll* variants.
+  for (const element of container.querySelectorAll('*')) {
+    if (element.shadowRoot) {
+      result.push(..._queryAllByRoleDeep(element.shadowRoot, ...rest))
     }
-  
-    return result
   }
-  
-  // eslint-disable-next-line no-unused-vars
-  const [_queryByRoleDeep, _getAllByRoleDeep, _getByRoleDeep, _findAllByRoleDeep, _findByRoleDeep] = buildQueries(
-    _queryAllByRoleDeep,
-    (_, role) => `Found multiple elements with the role ${role}`,
-    (_, role) => `Unable to find an element with the role ${role}`
-  )
 
-  const getAllByRoleDeep = _getAllByRoleDeep.bind(null, document.body)
-  const getByRoleDeep = _getByRoleDeep.bind(null, document.body)
+  return result
+}
 
+const [
+  _queryByRoleDeep,
+  _getAllByRoleDeep,
+  _getByRoleDeep,
+  _findAllByRoleDeep,
+  _findByRoleDeep,
+] = buildQueries(
+  _queryAllByRoleDeep,
+  (_, role) => `Found multiple elements with the role ${role}`,
+  (_, role) => `Unable to find an element with the role ${role}`,
+)
+
+const getAllByRoleDeep = _getAllByRoleDeep.bind(null, document.body)
+const getByRoleDeep = _getByRoleDeep.bind(null, document.body)
 
 const Wrapper = ({children}) => {
   return <ReactShadowRoot>{children}</ReactShadowRoot>
@@ -65,37 +68,37 @@ test('DropdownSelect works correctly in shadow DOM', async () => {
 
   // Verify shadow root exists
   expect(container.shadowRoot).toBeDefined()
-  
+
   // Get elements within the shadow root
   const toggleButton = getByRoleDeep('combobox')
   const menu = getByRoleDeep('listbox')
   expect(toggleButton).toBeInTheDocument()
   expect(menu).toBeInTheDocument()
-  
+
   // Initially menu should be closed
   expect(toggleButton).toHaveAttribute('aria-expanded', 'false')
-  
+
   // Open the dropdown
   await user.click(toggleButton)
-  
+
   // Menu should now be open
   expect(toggleButton).toHaveAttribute('aria-expanded', 'true')
-  
+
   // Select an item
   const blackOption = getByRoleDeep('option', {name: 'Black'})
   await user.click(blackOption)
-  
+
   // Menu should close and selected item should appear in button
   expect(toggleButton).toHaveAttribute('aria-expanded', 'false')
   expect(toggleButton).toHaveTextContent('Black')
-  
+
   // Open it again
   await user.click(toggleButton)
   expect(toggleButton).toHaveAttribute('aria-expanded', 'true')
-  
+
   // Click outside (this tests our targetWithinDownshift with composedPath)
   await user.click(document.body)
-  
+
   // Menu should close
   expect(toggleButton).toHaveAttribute('aria-expanded', 'false')
 })
@@ -106,65 +109,53 @@ test('DropdownCombobox works correctly in shadow DOM', async () => {
 
   // Verify shadow root exists
   expect(container.shadowRoot).toBeDefined()
-  
+
   // Get elements within the shadow root
   const input = getByRoleDeep('combobox')
   const toggleButton = getByRoleDeep('button', {name: 'toggle menu'})
   const clearButton = getByRoleDeep('button', {name: 'clear'})
   const menu = getByRoleDeep('listbox')
-  
+
   expect(input).toBeInTheDocument()
   expect(toggleButton).toBeInTheDocument()
   expect(clearButton).toBeInTheDocument()
   expect(menu).toBeInTheDocument()
-  
+
   // Initially menu should be closed
   expect(input).toHaveAttribute('aria-expanded', 'false')
   expect(toggleButton).toHaveAttribute('aria-expanded', 'false')
-  
+
   // Open the dropdown
   await user.click(toggleButton)
-  
+
   // Menu should now be open
   expect(input).toHaveAttribute('aria-expanded', 'true')
-  
+
   // All colors should initially be visible
   const items = getAllByRoleDeep('option')
   expect(items).toHaveLength(colors.length)
-  
-//   // Type in the input to filter items
-//   await user.click(input)
-//   input.focus()
-//   expect(input).toHaveFocus()
-//   await user.type(input, 'bl')
-  
-//   // Only Black and Blue should be visible
-//   items = getAllByRoleDeep('option')
-//   await waitFor(() => expect(items).toHaveLength(2))
-//   expect(items[0]).toHaveTextContent('Black')
-//   expect(items[1]).toHaveTextContent('Blue')
-  
+
   // Select an item
   await user.click(items[0])
-  
+
   // Menu should close and input should have selected value
   expect(input).toHaveAttribute('aria-expanded', 'false')
   expect(toggleButton).toHaveAttribute('aria-expanded', 'false')
   expect(input).toHaveValue('Black')
-  
+
   // Clear the selection
   await user.click(clearButton)
-  
+
   // Input should be empty
   expect(input).toHaveValue('')
-  
+
   // Open it again
   await user.click(toggleButton)
   expect(input).toHaveAttribute('aria-expanded', 'true')
-  
+
   // Click outside to close
   await user.click(document.body)
-  
+
   // Menu should close
   expect(input).toHaveAttribute('aria-expanded', 'false')
 })

src/__tests__/utils.target-within-downshift.js

@@ -0,0 +1,59 @@
+import {targetWithinDownshift} from '../utils'
+
+test('returns false if environment is not defined', () => {
+  expect(targetWithinDownshift(null, [], null)).toBe(false)
+})
+
+test('returns false if the target is not within the downshift', () => {
+  const downshift = document.createElement('div')
+  downshift.innerHTML = '<div id="target"></div>'
+  expect(targetWithinDownshift(null, [downshift], window)).toBe(false)
+})
+
+test('correctly identifies active elements nested in shadow DOM', () => {
+  // Create a host element for the shadow DOM
+  const hostElement = document.createElement('div')
+  document.body.appendChild(hostElement)
+
+  // Attach a shadow root to the host element
+  const shadowRoot = hostElement.attachShadow({mode: 'open'})
+
+  // Create an element inside the shadow root
+  const innerElement = document.createElement('button')
+  innerElement.setAttribute('data-testid', 'inner-button')
+  shadowRoot.appendChild(innerElement)
+
+  // Create another nested level with another shadow root
+  const nestedHost = document.createElement('div')
+  shadowRoot.appendChild(nestedHost)
+
+  const nestedShadowRoot = nestedHost.attachShadow({mode: 'open'})
+
+  const deepActiveElement = document.createElement('button')
+
+  // Create some downshift elements
+  const downshiftElement = document.createElement('div')
+  nestedShadowRoot.appendChild(downshiftElement)
+  downshiftElement.appendChild(deepActiveElement)
+
+  // Focus the deep element to make it the active element
+  deepActiveElement.focus()
+
+  expect(hostElement.shadowRoot).toBe(shadowRoot)
+  expect(nestedHost.shadowRoot).toBe(nestedShadowRoot)
+  expect(nestedShadowRoot.activeElement).toBe(deepActiveElement)
+
+  // Test the function with the active element in the shadow DOM
+  expect(
+    targetWithinDownshift(deepActiveElement, [downshiftElement], window, true),
+  ).toBe(true)
+
+  // Test with a non-related element
+  const unrelatedElement = document.createElement('div')
+  expect(
+    targetWithinDownshift(unrelatedElement, [downshiftElement], window, true),
+  ).toBe(true) // Should still be true because of activeElement check
+
+  // Cleanup
+  document.body.removeChild(hostElement)
+})

src/utils.js

@@ -417,7 +417,7 @@ function getNonDisabledIndex(
  * @param {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc).
  * @param {Window} environment The window context where downshift renders.
  * @param {boolean} checkActiveElement Whether to also check activeElement.
- * @param {boolean} composedPath Whether to check the composed path.
+ * @param {EventTarget[]} composedPath The composed path of the event.
  *
  * @returns {boolean} Whether or not the target is within downshift elements.
  */