Add toHaveAccessibleErrorMessage to @testing-library/jest-dom Types

Created in response to (and thus depends on): - testing-library/jest-dom#503
ITenthusiasm · Jul 18, 2023 · 9c32d6e · 9c32d6e
1 parent b0312dc
commit 9c32d6e
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 1 deletion.
diff --git a/types/testing-library__jest-dom/index.d.ts b/types/testing-library__jest-dom/index.d.ts
@@ -17,6 +17,6 @@ declare global {
     }
 }
 
-declare module "expect" {
+declare module 'expect' {
     interface Matchers<R = void, T = unknown> extends TestingLibraryMatchers<typeof expect.stringContaining, R> {}
 }
diff --git a/types/testing-library__jest-dom/matchers.d.ts b/types/testing-library__jest-dom/matchers.d.ts
@@ -503,6 +503,47 @@ declare namespace matchers {
          * [testing-library/jest-dom#tohaveaccessibledescription](https://github.com/testing-library/jest-dom#tohaveaccessibledescription)
          */
         toHaveAccessibleDescription(text?: string | RegExp | E): R;
+
+        /**
+         * @description
+         * This allows you to assert that an element has the expected
+         * [accessible error message](https://w3c.github.io/aria/#aria-errormessage).
+         *
+         * You can pass the exact string of the expected accessible error message.
+         * Alternatively, you can perform a partial match by passing a regular expression
+         * or by using either
+         * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring)
+         * or [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp).
+         *
+         * @example
+         * <input aria-label="Has Error" aria-invalid="true" aria-errormessage="error-message" />
+         * <div id="error-message" role="alert">This field is invalid</div>
+         *
+         * <input aria-label="No Error Attributes" />
+         * <input aria-label="Not Invalid" aria-invalid="false" aria-errormessage="error-message" />
+         *
+         * // Inputs with Valid Error Messages
+         * expect(getByRole('textbox', {name: 'Has Error'})).toHaveAccessibleErrorMessage()
+         * expect(getByRole('textbox', {name: 'Has Error'})).toHaveAccessibleErrorMessage('This field is invalid')
+         * expect(getByRole('textbox', {name: 'Has Error'})).toHaveAccessibleErrorMessage(/invalid/i)
+         * expect(
+         *   getByRole('textbox', {name: 'Has Error'}),
+         * ).not.toHaveAccessibleErrorMessage('This field is absolutely correct!')
+         *
+         * // Inputs without Valid Error Messages
+         * expect(
+         *   getByRole('textbox', {name: 'No Error Attributes'}),
+         * ).not.toHaveAccessibleErrorMessage()
+         *
+         * expect(
+         *   getByRole('textbox', {name: 'Not Invalid'}),
+         * ).not.toHaveAccessibleErrorMessage()
+         *
+         * @see
+         * [testing-library/jest-dom#tohaveaccessibleerrormessage](https://github.com/testing-library/jest-dom#tohaveaccessibleerrormessage)
+         */
+        toHaveAccessibleErrorMessage(text?: string | RegExp | E): R;
+
         /**
          * @description
          * This allows to assert that an element has the expected [accessible name](https://w3c.github.io/accname/).
@@ -573,6 +614,8 @@ declare namespace matchers {
          */
         toBePartiallyChecked(): R;
         /**
+         * @deprecated
+         *
          * @description
          *
          * Check whether the given element has an [ARIA error message](https://www.w3.org/TR/wai-aria/#aria-errormessage) or not.

diff --git a/types/testing-library__jest-dom/test/testing-library__jest-dom-extend-matchers-tests.ts b/types/testing-library__jest-dom/test/testing-library__jest-dom-extend-matchers-tests.ts
@@ -56,6 +56,12 @@ customExpect(element).toHaveAccessibleDescription('some description');
 customExpect(element).toHaveAccessibleDescription(/some description/);
 customExpect(element).toHaveAccessibleDescription(expect.stringContaining('partial'));
 customExpect(element).toHaveAccessibleDescription();
+
+customExpect(element).toHaveAccessibleErrorMessage();
+customExpect(element).toHaveAccessibleErrorMessage('Invalid time: the time must be between 9:00 AM and 5:00 PM');
+customExpect(element).toHaveAccessibleErrorMessage(/invalid time/i);
+customExpect(element).toHaveAccessibleErrorMessage(expect.stringContaining('Invalid time'));
+
 customExpect(element).toHaveAccessibleName('a label');
 customExpect(element).toHaveAccessibleName(/a label/);
 customExpect(element).toHaveAccessibleName(expect.stringContaining('partial label'));
@@ -105,6 +111,11 @@ customExpect(element).not.toHaveDescription('some description');
 customExpect(element).not.toHaveDescription();
 customExpect(element).not.toHaveAccessibleDescription('some description');
 customExpect(element).not.toHaveAccessibleDescription();
+
+customExpect(element).not.toHaveAccessibleErrorMessage();
+customExpect(element).not.toHaveAccessibleErrorMessage('There is no date');
+customExpect(element).not.toHaveAccessibleErrorMessage(/everything is valid/i);
+
 customExpect(element).not.toHaveAccessibleName('a label');
 customExpect(element).not.toHaveAccessibleName();
 customExpect(element).not.toBePartiallyChecked();