Update dependency @testing-library/jest-dom to v5.14.1

.changeset/lovely-pumpkins-kiss.md

@@ -0,0 +1,5 @@
+---
+'pleasantest': minor
+---
+
+Remove toHaveDescription, toBeInTheDOM, and toBeEmpty (they are deprecated by jest-dom)

.changeset/purple-colts-work.md

@@ -0,0 +1,5 @@
+---
+'pleasantest': minor
+---
+
+Add toHaveAccessibleDescription and toHaveAccessibleName from jest-dom matchers

README.md

@@ -689,7 +689,7 @@ Pleasantest adds [`jest-dom`'s matchers](https://github.com/testing-library/jest
 
 List of matchers:
 
-[`toBeDisabled`](https://github.com/testing-library/jest-dom#tobedisabled), [`toBeEnabled`](https://github.com/testing-library/jest-dom#tobeenabled), [`toBeEmpty`](https://github.com/testing-library/jest-dom#tobeempty), [`toBeEmptyDOMElement`](https://github.com/testing-library/jest-dom#tobeemptydomelement), [`toBeInTheDocument`](https://github.com/testing-library/jest-dom#tobeinthedocument), [`toBeInvalid`](https://github.com/testing-library/jest-dom#tobeinvalid), [`toBeRequired`](https://github.com/testing-library/jest-dom#toberequired), [`toBeValid`](https://github.com/testing-library/jest-dom#tobevalid), [`toBeVisible`](https://github.com/testing-library/jest-dom#tobevisible), [`toContainElement`](https://github.com/testing-library/jest-dom#tocontainelement), [`toContainHTML`](https://github.com/testing-library/jest-dom#tocontainhtml), [`toHaveAttribute`](https://github.com/testing-library/jest-dom#tohaveattribute), [`toHaveClass`](https://github.com/testing-library/jest-dom#tohaveclass), [`toHaveFocus`](https://github.com/testing-library/jest-dom#tohavefocus), [`toHaveFormValues`](https://github.com/testing-library/jest-dom#tohaveformvalues), [`toHaveStyle`](https://github.com/testing-library/jest-dom#tohavestyle), [`toHaveTextContent`](https://github.com/testing-library/jest-dom#tohavetextcontent), [`toHaveValue`](https://github.com/testing-library/jest-dom#tohavevalue), [`toHaveDisplayValue`](https://github.com/testing-library/jest-dom#tohavedisplayvalue), [`toBeChecked`](https://github.com/testing-library/jest-dom#tobechecked), [`toBePartiallyChecked`](https://github.com/testing-library/jest-dom#tobepartiallychecked), [`toHaveDescription`](https://github.com/testing-library/jest-dom#tohavedescription), [`toHaveErrorMessage`](https://github.com/testing-library/jest-dom#tohaveerrormessage).
+[`toBeDisabled`](https://github.com/testing-library/jest-dom#tobedisabled), [`toBeEnabled`](https://github.com/testing-library/jest-dom#tobeenabled), [`toBeEmptyDOMElement`](https://github.com/testing-library/jest-dom#tobeemptydomelement), [`toBeInTheDocument`](https://github.com/testing-library/jest-dom#tobeinthedocument), [`toBeInvalid`](https://github.com/testing-library/jest-dom#tobeinvalid), [`toBeRequired`](https://github.com/testing-library/jest-dom#toberequired), [`toBeValid`](https://github.com/testing-library/jest-dom#tobevalid), [`toBeVisible`](https://github.com/testing-library/jest-dom#tobevisible), [`toContainElement`](https://github.com/testing-library/jest-dom#tocontainelement), [`toContainHTML`](https://github.com/testing-library/jest-dom#tocontainhtml), [`toHaveAccessibleDescription`](https://github.com/testing-library/jest-dom#tohaveaccessibledescription), [`toHaveAccessibleName`](https://github.com/testing-library/jest-dom#tohaveaccessiblename), [`toHaveAttribute`](https://github.com/testing-library/jest-dom#tohaveattribute), [`toHaveClass`](https://github.com/testing-library/jest-dom#tohaveclass), [`toHaveFocus`](https://github.com/testing-library/jest-dom#tohavefocus), [`toHaveFormValues`](https://github.com/testing-library/jest-dom#tohaveformvalues), [`toHaveStyle`](https://github.com/testing-library/jest-dom#tohavestyle), [`toHaveTextContent`](https://github.com/testing-library/jest-dom#tohavetextcontent), [`toHaveValue`](https://github.com/testing-library/jest-dom#tohavevalue), [`toHaveDisplayValue`](https://github.com/testing-library/jest-dom#tohavedisplayvalue), [`toBeChecked`](https://github.com/testing-library/jest-dom#tobechecked), [`toBePartiallyChecked`](https://github.com/testing-library/jest-dom#tobepartiallychecked), [`toHaveErrorMessage`](https://github.com/testing-library/jest-dom#tohaveerrormessage).
 .
 
 > :warning: **Don't forget to `await` matchers!** This is necessary because the matchers execute in the browser. If you forget, your matchers may execute after your test finishes, and you may get obscure errors.

package.json

@@ -20,7 +20,7 @@
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-node-resolve": "13.0.0",
     "@testing-library/dom": "8.1.0",
-    "@testing-library/jest-dom": "5.13.0",
+    "@testing-library/jest-dom": "5.14.1",
     "@types/jest": "26.0.23",
     "@types/node": "15.12.5",
     "@types/polka": "0.5.2",

src/extend-expect.ts

@@ -4,12 +4,12 @@ import { deserialize, serialize } from './serialize';
 import { jsHandleToArray, removeFuncFromStackTrace } from './utils';
 
 const methods = [
-  'toBeInTheDOM',
   'toBeInTheDocument',
-  'toBeEmpty',
   'toBeEmptyDOMElement',
   'toContainElement',
   'toContainHTML',
+  'toHaveAccessibleDescription',
+  'toHaveAccessibleName',
   'toHaveTextContent',
   'toHaveAttribute',
   'toHaveClass',
@@ -26,7 +26,6 @@ const methods = [
   'toHaveDisplayValue',
   'toBeChecked',
   'toBePartiallyChecked',
-  'toHaveDescription',
   'toHaveErrorMessage',
 ] as const;
 
@@ -310,6 +309,19 @@ declare global {
        * https://github.com/testing-library/jest-dom#tocontainhtml
        */
       toContainHTML(html: string): Promise<R>;
+      /**
+       * Assert that an element has the expected [accessible description](https://www.w3.org/TR/accname-1.1/#dfn-accessible-description).
+       * You can pass the exact string, or you can make a partial match passing a regular expression
+       * https://github.com/testing-library/jest-dom#tohaveaccessibledescription
+       */
+      toHaveAccessibleDescription(text?: string | RegExp): Promise<R>;
+      /**
+       * Assert that an element has the expected [accessible description](https://www.w3.org/TR/accname-1.1/#dfn-accessible-name).
+       * It is useful, for instance, to assert that form elements and buttons are properly labelled.
+       * You can pass the exact string, or you can make a partial match passing a regular expression
+       * https://github.com/testing-library/jest-dom#tohaveaccessibledescription
+       */
+      toHaveAccessibleName(text?: string | RegExp): Promise<R>;
       /**
        * Check whether the given element has an attribute or not.
        * You can also optionally check that the attribute has a specific expected value
@@ -381,12 +393,6 @@ declare global {
        */
       toBePartiallyChecked(): Promise<R>;
 
-      /**
-       * Check whether the given element has a description (via aria-describedby)
-       * https://github.com/testing-library/jest-dom#tohavedescription
-       */
-      toHaveDescription(text?: string | RegExp): Promise<R>;
-
       /**
        * Check whether the given element has an ARIA error message (via aria-errormessage)
        * https://github.com/testing-library/jest-dom#tohaveerrormessage

tests/jest-dom-matchers/toHaveAccessibleDescription.test.ts

@@ -0,0 +1,60 @@
+import { withBrowser } from 'pleasantest';
+
+test(
+  'toHaveAccessibleDescription',
+  withBrowser(async ({ screen, utils }) => {
+    await utils.injectHTML(`
+      <a
+        data-testid="link"
+        href="/"
+        aria-label="Home page"
+        title="A link to start over"
+        >Start</a
+      >
+      <a data-testid="extra-link" href="/about" aria-label="About page">About</a>
+      <img src="" data-testid="avatar" alt="User profile pic" />
+      <img
+        src=""
+        data-testid="logo"
+        alt="Company logo"
+        aria-describedby="t1"
+      />
+      <span id="t1" role="presentation">The logo of Our Company</span>
+    `);
+
+    const link = await screen.getByTestId('link');
+    await expect(link).toHaveAccessibleDescription();
+    await expect(expect(link).not.toHaveAccessibleDescription()).rejects
+      .toThrowErrorMatchingInlineSnapshot(`
+            "expect(element).not.toHaveAccessibleDescription()
+
+            Expected element not to have accessible description:
+              null
+            Received:
+              A link to start over"
+          `);
+    await expect(link).toHaveAccessibleDescription('A link to start over');
+    await expect(link).not.toHaveAccessibleDescription('Home page');
+    await expect(expect(link).toHaveAccessibleDescription('Home page')).rejects
+      .toThrowErrorMatchingInlineSnapshot(`
+            "expect(element).toHaveAccessibleDescription()
+
+            Expected element to have accessible description:
+              Home page
+            Received:
+              A link to start over"
+          `);
+
+    await expect(
+      await screen.getByTestId('extra-link'),
+    ).not.toHaveAccessibleDescription();
+
+    await expect(
+      await screen.getByTestId('avatar'),
+    ).not.toHaveAccessibleDescription();
+
+    const logo = await screen.getByTestId('logo');
+    await expect(logo).not.toHaveAccessibleDescription('Company logo');
+    await expect(logo).toHaveAccessibleDescription('The logo of Our Company');
+  }),
+);

tests/jest-dom-matchers/toHaveAccessibleName.test.ts

@@ -0,0 +1,84 @@
+import { withBrowser } from 'pleasantest';
+
+test(
+  'toHaveAccessibleName',
+  withBrowser(async ({ screen, utils }) => {
+    await utils.injectHTML(`
+      <img data-testid="img-alt" src="" alt="Test alt" />
+      <img data-testid="img-empty-alt" src="" alt="" />
+      <svg data-testid="svg-title"><title>Test title</title></svg>
+      <button data-testid="button-img-alt"><img src="" alt="Test" /></button>
+      <p><img data-testid="img-paragraph" src="" alt="" /> Test content</p>
+      <button data-testid="svg-button"><svg><title>Test</title></svg></p>
+      <div><svg data-testid="svg-without-title"></svg></div>
+      <input data-testid="input-title" title="test" />
+    `);
+
+    await expect(await screen.getByTestId('img-alt')).toHaveAccessibleName(
+      'Test alt',
+    );
+
+    await expect(await screen.getByTestId('img-alt')).not.toHaveAccessibleName(
+      'not test alt',
+    );
+    await expect(
+      expect(await screen.getByTestId('img-alt')).toHaveAccessibleName(
+        'not test alt',
+      ),
+    ).rejects.toThrowErrorMatchingInlineSnapshot(`
+            "expect(element).toHaveAccessibleName()
+
+            Expected element to have accessible name:
+              not test alt
+            Received:
+              Test alt"
+          `);
+
+    await expect(
+      expect(await screen.getByTestId('img-empty-alt')).toHaveAccessibleName(),
+    ).rejects.toThrowErrorMatchingInlineSnapshot(`
+                  "expect(element).toHaveAccessibleName()
+
+                  Expected element to have accessible name:
+                    null
+                  Received:
+                  "
+              `);
+
+    await expect(
+      await screen.getByTestId('img-empty-alt'),
+    ).not.toHaveAccessibleName();
+    await expect(
+      expect(await screen.getByTestId('img-empty-alt')).toHaveAccessibleName(),
+    ).rejects.toThrowErrorMatchingInlineSnapshot(`
+                  "expect(element).toHaveAccessibleName()
+
+                  Expected element to have accessible name:
+                    null
+                  Received:
+                  "
+              `);
+
+    await expect(await screen.getByTestId('svg-title')).toHaveAccessibleName(
+      'Test title',
+    );
+
+    await expect(
+      await screen.getByTestId('button-img-alt'),
+    ).toHaveAccessibleName();
+
+    await expect(
+      await screen.getByTestId('img-paragraph'),
+    ).not.toHaveAccessibleName();
+
+    await expect(await screen.getByTestId('svg-button')).toHaveAccessibleName();
+
+    await expect(
+      await screen.getByTestId('svg-without-title'),
+    ).not.toHaveAccessibleName();
+
+    await expect(
+      await screen.getByTestId('input-title'),
+    ).toHaveAccessibleName();
+  }),
+);