fix: traverse shadow roots in toHaveFocus

src/__tests__/to-have-focus.js

@@ -21,3 +21,36 @@ test('.toHaveFocus', () => {
   expect(() => expect(focused).not.toHaveFocus()).toThrowError()
   expect(() => expect(notFocused).toHaveFocus()).toThrowError()
 })
+
+test('.toHaveFocus with element in shadow root', () => {
+  const host = document.createElement('div')
+  const shadowRoot = host.attachShadow({mode: 'open'})
+  const input = document.createElement('input')
+  shadowRoot.appendChild(input)
+  document.body.innerHTML = ''
+  document.body.appendChild(host)
+
+  input.focus()
+
+  expect(input).toHaveFocus()
+  expect(host).not.toHaveFocus()
+  expect(() => expect(input).not.toHaveFocus()).toThrowError()
+})
+
+test('.toHaveFocus with element in nested shadow root', () => {
+  const outerHost = document.createElement('div')
+  const outerShadow = outerHost.attachShadow({mode: 'open'})
+  const innerHost = document.createElement('div')
+  outerShadow.appendChild(innerHost)
+  const innerShadow = innerHost.attachShadow({mode: 'open'})
+  const input = document.createElement('input')
+  innerShadow.appendChild(input)
+  document.body.innerHTML = ''
+  document.body.appendChild(outerHost)
+
+  input.focus()
+
+  expect(input).toHaveFocus()
+  expect(outerHost).not.toHaveFocus()
+  expect(innerHost).not.toHaveFocus()
+})

src/to-have-focus.js

@@ -1,10 +1,20 @@
 import {checkHtmlElement} from './utils'
 
+function getDeepActiveElement(doc) {
+  let active = doc.activeElement
+  while (active && active.shadowRoot && active.shadowRoot.activeElement) {
+    active = active.shadowRoot.activeElement
+  }
+  return active
+}
+
 export function toHaveFocus(element) {
   checkHtmlElement(element, toHaveFocus, this)
 
+  const activeElement = getDeepActiveElement(element.ownerDocument)
+
   return {
-    pass: element.ownerDocument.activeElement === element,
+    pass: activeElement === element,
     message: () => {
       return [
         this.utils.matcherHint(
@@ -22,9 +32,7 @@ export function toHaveFocus(element) {
               'Expected element with focus:',
               `  ${this.utils.printExpected(element)}`,
               'Received element with focus:',
-              `  ${this.utils.printReceived(
-                element.ownerDocument.activeElement,
-              )}`,
+              `  ${this.utils.printReceived(activeElement)}`,
             ]),
       ].join('\n')
     },