feat: toBeValid supports <form/> element

src/__tests__/to-be-invalid.js

@@ -19,74 +19,113 @@ import {render} from './helpers/test-utils'
  * @link https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
  * @link https://github.com/jsdom/jsdom
  */
-function getDOMInput(htmlString) {
-  const dom = new JSDOM(htmlString)
-
-  return dom.window.document.querySelector('input')
+function getDOMElement(htmlString, selector) {
+  return new JSDOM(htmlString).window.document.querySelector(selector)
 }
 
-const invalidInputNode = getDOMInput(
-  `<input pattern="[a-z]{1,3}" value="test+">`,
-)
-
-test('.toBeInvalid', () => {
-  const {queryByTestId} = render(`
-    <div>
-      <input data-testid="no-aria-invalid">
-      <input data-testid="aria-invalid" aria-invalid>
-      <input data-testid="aria-invalid-value" aria-invalid="true">
-      <input data-testid="aria-invalid-false" aria-invalid="false">
-    </div>
-    `)
-
-  expect(queryByTestId('no-aria-invalid')).not.toBeInvalid()
-  expect(queryByTestId('aria-invalid')).toBeInvalid()
-  expect(queryByTestId('aria-invalid-value')).toBeInvalid()
-  expect(queryByTestId('aria-invalid-false')).not.toBeInvalid()
-  expect(invalidInputNode).toBeInvalid()
-
-  // negative test cases wrapped in throwError assertions for coverage.
-  expect(() =>
-    expect(queryByTestId('no-aria-invalid')).toBeInvalid(),
-  ).toThrowError()
-  expect(() =>
-    expect(queryByTestId('aria-invalid')).not.toBeInvalid(),
-  ).toThrowError()
-  expect(() =>
-    expect(queryByTestId('aria-invalid-value')).not.toBeInvalid(),
-  ).toThrowError()
-  expect(() =>
-    expect(queryByTestId('aria-invalid-false')).toBeInvalid(),
-  ).toThrowError()
-  expect(() => expect(invalidInputNode).not.toBeInvalid()).toThrowError()
+const invalidInputHtml = `<input pattern="[a-z]{1,3}" value="test+">`
+
+const invalidInputNode = getDOMElement(invalidInputHtml, 'input')
+
+// A form is invalid if it contains an invalid input
+const invalidFormHtml = `<form>${invalidInputHtml}</form>`
+
+const invalidFormNode = getDOMElement(invalidFormHtml, 'form')
+
+describe('.toBeInvalid', () => {
+  test('handles <input/>', () => {
+    const {queryByTestId} = render(`
+      <div>
+        <input data-testid="no-aria-invalid">
+        <input data-testid="aria-invalid" aria-invalid>
+        <input data-testid="aria-invalid-value" aria-invalid="true">
+        <input data-testid="aria-invalid-false" aria-invalid="false">
+      </div>
+      `)
+
+    expect(queryByTestId('no-aria-invalid')).not.toBeInvalid()
+    expect(queryByTestId('aria-invalid')).toBeInvalid()
+    expect(queryByTestId('aria-invalid-value')).toBeInvalid()
+    expect(queryByTestId('aria-invalid-false')).not.toBeInvalid()
+    expect(invalidInputNode).toBeInvalid()
+
+    // negative test cases wrapped in throwError assertions for coverage.
+    expect(() =>
+      expect(queryByTestId('no-aria-invalid')).toBeInvalid(),
+    ).toThrowError()
+    expect(() =>
+      expect(queryByTestId('aria-invalid')).not.toBeInvalid(),
+    ).toThrowError()
+    expect(() =>
+      expect(queryByTestId('aria-invalid-value')).not.toBeInvalid(),
+    ).toThrowError()
+    expect(() =>
+      expect(queryByTestId('aria-invalid-false')).toBeInvalid(),
+    ).toThrowError()
+    expect(() => expect(invalidInputNode).not.toBeInvalid()).toThrowError()
+  })
+
+  test('handles <form/>', () => {
+    const {queryByTestId} = render(`
+      <form data-testid="valid">
+        <input>
+      </form>
+      `)
+
+    expect(queryByTestId('valid')).not.toBeInvalid()
+    expect(invalidFormNode).toBeInvalid()
+
+    // negative test cases wrapped in throwError assertions for coverage.
+    expect(() => expect(queryByTestId('valid')).toBeInvalid()).toThrowError()
+    expect(() => expect(invalidFormNode).not.toBeInvalid()).toThrowError()
+  })
 })
 
-test('.toBeValid', () => {
-  const {queryByTestId} = render(`
-    <div>
-      <input data-testid="no-aria-invalid">
-      <input data-testid="aria-invalid" aria-invalid>
-      <input data-testid="aria-invalid-value" aria-invalid="true">
-      <input data-testid="aria-invalid-false" aria-invalid="false">
-    </div>
-    `)
-
-  expect(queryByTestId('no-aria-invalid')).toBeValid()
-  expect(queryByTestId('aria-invalid')).not.toBeValid()
-  expect(queryByTestId('aria-invalid-value')).not.toBeValid()
-  expect(queryByTestId('aria-invalid-false')).toBeValid()
-  expect(invalidInputNode).not.toBeValid()
-
-  // negative test cases wrapped in throwError assertions for coverage.
-  expect(() =>
-    expect(queryByTestId('no-aria-invalid')).not.toBeValid(),
-  ).toThrowError()
-  expect(() => expect(queryByTestId('aria-invalid')).toBeValid()).toThrowError()
-  expect(() =>
-    expect(queryByTestId('aria-invalid-value')).toBeValid(),
-  ).toThrowError()
-  expect(() =>
-    expect(queryByTestId('aria-invalid-false')).not.toBeValid(),
-  ).toThrowError()
-  expect(() => expect(invalidInputNode).toBeValid()).toThrowError()
+describe('.toBeValid', () => {
+  test('handles <input/>', () => {
+    const {queryByTestId} = render(`
+      <div>
+        <input data-testid="no-aria-invalid">
+        <input data-testid="aria-invalid" aria-invalid>
+        <input data-testid="aria-invalid-value" aria-invalid="true">
+        <input data-testid="aria-invalid-false" aria-invalid="false">
+      </div>
+      `)
+
+    expect(queryByTestId('no-aria-invalid')).toBeValid()
+    expect(queryByTestId('aria-invalid')).not.toBeValid()
+    expect(queryByTestId('aria-invalid-value')).not.toBeValid()
+    expect(queryByTestId('aria-invalid-false')).toBeValid()
+    expect(invalidInputNode).not.toBeValid()
+
+    // negative test cases wrapped in throwError assertions for coverage.
+    expect(() =>
+      expect(queryByTestId('no-aria-invalid')).not.toBeValid(),
+    ).toThrowError()
+    expect(() =>
+      expect(queryByTestId('aria-invalid')).toBeValid(),
+    ).toThrowError()
+    expect(() =>
+      expect(queryByTestId('aria-invalid-value')).toBeValid(),
+    ).toThrowError()
+    expect(() =>
+      expect(queryByTestId('aria-invalid-false')).not.toBeValid(),
+    ).toThrowError()
+    expect(() => expect(invalidInputNode).toBeValid()).toThrowError()
+  })
+
+  test('handles <form/>', () => {
+    const {queryByTestId} = render(`
+      <form data-testid="valid">
+        <input>
+      </form>
+      `)
+
+    expect(queryByTestId('valid')).toBeValid()
+    expect(invalidFormNode).not.toBeValid()
+
+    // negative test cases wrapped in throwError assertions for coverage.
+    expect(() => expect(queryByTestId('valid')).not.toBeValid()).toThrowError()
+    expect(() => expect(invalidFormNode).toBeValid()).toThrowError()
+  })
 })

src/to-be-invalid.js

@@ -1,7 +1,7 @@
 import {matcherHint, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement, getTag} from './utils'
 
-const FORM_TAGS = ['input', 'select', 'textarea']
+const FORM_TAGS = ['form', 'input', 'select', 'textarea']
 
 function isElementHavingAriaInvalid(element) {
   return (