feat: add toHaveFocus functionality (#32)

feat: add toHaveFocus functionality

Author: smacpherson64

README.md

@@ -52,6 +52,7 @@ to maintain.
   - [`toHaveAttribute`](#tohaveattribute)
   - [`toHaveClass`](#tohaveclass)
   - [`toHaveStyle`](#tohavestyle)
+  - [`toHaveFocus`](#tohavefocus)
   - [`toBeVisible`](#tobevisible)
 - [Inspiration](#inspiration)
 - [Other Solutions](#other-solutions)
@@ -252,6 +253,28 @@ This also works with rules that are applied to the element via a class name for
 which some rules are defined in a stylesheet currently active in the document.
 The usual rules of css precedence apply.
 
+### `toHaveFocus`
+
+This allows you to assert whether an element has focus or not.
+
+```javascript
+// add the custom expect matchers once
+import 'jest-dom/extend-expect'
+
+// ...
+// <div><input id="focused" type="text" data-testid="focused" /></div>
+// const { container } = render(...)
+// const input = container.querySelector('#focused');
+
+// input.focus()
+expect(queryByTestId(container, 'focused')).toHaveFocus()
+
+// input.blur()
+expect(queryByTestId(container, 'focused')).not.toHaveFocus()
+
+// ...
+```
+
 ### `toBeVisible`
 
 This allows you to check if an element is currently visible to the user.

extend-expect.d.ts

@@ -8,5 +8,6 @@ declare namespace jest {
     toHaveClass(className: string): R
     toHaveStyle(css: string): R
     toHaveTextContent(text: string | RegExp): R
+    toHaveFocus(): R
   }
 }

src/__tests__/index.js

@@ -322,6 +322,26 @@ test('.toHaveStyle', () => {
   document.body.removeChild(container)
 })
 
+test('.toHaveFocus', () => {
+  const {container} = render(`
+      <div>
+        <label for="focused">test</label>
+        <input id="focused" type="text" />
+        <button type="submit" id="not-focused">Not Focused</button>
+      </div>`)
+
+  const focused = container.querySelector('#focused')
+  const notFocused = container.querySelector('#not-focused')
+
+  focused.focus()
+
+  expect(focused).toHaveFocus()
+  expect(notFocused).not.toHaveFocus()
+
+  expect(() => expect(focused).not.toHaveFocus()).toThrowError()
+  expect(() => expect(notFocused).toHaveFocus()).toThrowError()
+})
+
 test('.toBeVisible', () => {
   const {container} = render(`
     <div>

src/index.js

@@ -5,6 +5,7 @@ import {toHaveTextContent} from './to-have-text-content'
 import {toHaveAttribute} from './to-have-attribute'
 import {toHaveClass} from './to-have-class'
 import {toHaveStyle} from './to-have-style'
+import {toHaveFocus} from './to-have-focus'
 import {toBeVisible} from './to-be-visible'
 
 export {
@@ -15,5 +16,6 @@ export {
   toHaveAttribute,
   toHaveClass,
   toHaveStyle,
+  toHaveFocus,
   toBeVisible,
 }

src/to-have-focus.js

@@ -0,0 +1,18 @@
+import {matcherHint, printReceived} from 'jest-matcher-utils'
+import {checkHtmlElement} from './utils'
+
+export function toHaveFocus(element) {
+  checkHtmlElement(element, toHaveFocus, this)
+
+  return {
+    pass: document.activeElement === element,
+    message: () => {
+      return [
+        matcherHint(`${this.isNot ? '.not' : ''}.toHaveFocus`, 'element', ''),
+        '',
+        'Received:',
+        `  ${printReceived(document.activeElement)}`,
+      ].join('\n')
+    },
+  }
+}