From 69fd00b285e9a1ed4cf21cdf5cfefd29a642cd5b Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 8 Jul 2021 13:34:35 -0700 Subject: [PATCH] Update dependency @testing-library/jest-dom to v5.14.1 (#104) Co-authored-by: Renovate Bot Co-authored-by: Caleb Eby --- .changeset/lovely-pumpkins-kiss.md | 5 ++ .changeset/purple-colts-work.md | 5 ++ README.md | 2 +- package-lock.json | 16 ++-- package.json | 2 +- src/extend-expect.ts | 24 ++++-- .../toHaveAccessibleDescription.test.ts | 60 +++++++++++++ .../toHaveAccessibleName.test.ts | 84 +++++++++++++++++++ .../toHaveDescription.test.ts | 57 ------------- 9 files changed, 180 insertions(+), 75 deletions(-) create mode 100644 .changeset/lovely-pumpkins-kiss.md create mode 100644 .changeset/purple-colts-work.md create mode 100644 tests/jest-dom-matchers/toHaveAccessibleDescription.test.ts create mode 100644 tests/jest-dom-matchers/toHaveAccessibleName.test.ts delete mode 100644 tests/jest-dom-matchers/toHaveDescription.test.ts diff --git a/.changeset/lovely-pumpkins-kiss.md b/.changeset/lovely-pumpkins-kiss.md new file mode 100644 index 00000000..8169c9ac --- /dev/null +++ b/.changeset/lovely-pumpkins-kiss.md @@ -0,0 +1,5 @@ +--- +'pleasantest': minor +--- + +Remove toHaveDescription, toBeInTheDOM, and toBeEmpty (they are deprecated by jest-dom) diff --git a/.changeset/purple-colts-work.md b/.changeset/purple-colts-work.md new file mode 100644 index 00000000..782c0b75 --- /dev/null +++ b/.changeset/purple-colts-work.md @@ -0,0 +1,5 @@ +--- +'pleasantest': minor +--- + +Add toHaveAccessibleDescription and toHaveAccessibleName from jest-dom matchers diff --git a/README.md b/README.md index 5df66012..af1eb67a 100644 --- a/README.md +++ b/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. diff --git a/package-lock.json b/package-lock.json index 95eb8964..362d437e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,7 +33,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": "16.0.0", "@types/polka": "0.5.2", @@ -4168,9 +4168,9 @@ } }, "node_modules/@testing-library/jest-dom": { - "version": "5.13.0", - "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.13.0.tgz", - "integrity": "sha512-+jXXTn8GjRnZkJfzG/tqK/2Q7dGlBInR412WE7Aml7CT3wdSpx5dMQC0HOwVQoZ3cNTmQUy8fCVGUV/Zhoyvcw==", + "version": "5.14.1", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz", + "integrity": "sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ==", "dev": true, "dependencies": { "@babel/runtime": "^7.9.2", @@ -4179,6 +4179,7 @@ "chalk": "^3.0.0", "css": "^3.0.0", "css.escape": "^1.5.1", + "dom-accessibility-api": "^0.5.6", "lodash": "^4.17.15", "redent": "^3.0.0" }, @@ -24967,9 +24968,9 @@ } }, "@testing-library/jest-dom": { - "version": "5.13.0", - "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.13.0.tgz", - "integrity": "sha512-+jXXTn8GjRnZkJfzG/tqK/2Q7dGlBInR412WE7Aml7CT3wdSpx5dMQC0HOwVQoZ3cNTmQUy8fCVGUV/Zhoyvcw==", + "version": "5.14.1", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz", + "integrity": "sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ==", "dev": true, "requires": { "@babel/runtime": "^7.9.2", @@ -24978,6 +24979,7 @@ "chalk": "^3.0.0", "css": "^3.0.0", "css.escape": "^1.5.1", + "dom-accessibility-api": "^0.5.6", "lodash": "^4.17.15", "redent": "^3.0.0" }, diff --git a/package.json b/package.json index ac6ae778..bdf84892 100644 --- a/package.json +++ b/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": "16.0.0", "@types/polka": "0.5.2", diff --git a/src/extend-expect.ts b/src/extend-expect.ts index 5c7aff20..621618ef 100644 --- a/src/extend-expect.ts +++ b/src/extend-expect.ts @@ -9,12 +9,12 @@ import { } from './utils'; const methods = [ - 'toBeInTheDOM', 'toBeInTheDocument', - 'toBeEmpty', 'toBeEmptyDOMElement', 'toContainElement', 'toContainHTML', + 'toHaveAccessibleDescription', + 'toHaveAccessibleName', 'toHaveTextContent', 'toHaveAttribute', 'toHaveClass', @@ -31,7 +31,6 @@ const methods = [ 'toHaveDisplayValue', 'toBeChecked', 'toBePartiallyChecked', - 'toHaveDescription', 'toHaveErrorMessage', ] as const; @@ -319,6 +318,19 @@ declare global { * https://github.com/testing-library/jest-dom#tocontainhtml */ toContainHTML(html: string): Promise; + /** + * 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; + /** + * 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; /** * Check whether the given element has an attribute or not. * You can also optionally check that the attribute has a specific expected value @@ -390,12 +402,6 @@ declare global { */ toBePartiallyChecked(): Promise; - /** - * Check whether the given element has a description (via aria-describedby) - * https://github.com/testing-library/jest-dom#tohavedescription - */ - toHaveDescription(text?: string | RegExp): Promise; - /** * Check whether the given element has an ARIA error message (via aria-errormessage) * https://github.com/testing-library/jest-dom#tohaveerrormessage diff --git a/tests/jest-dom-matchers/toHaveAccessibleDescription.test.ts b/tests/jest-dom-matchers/toHaveAccessibleDescription.test.ts new file mode 100644 index 00000000..d56176e2 --- /dev/null +++ b/tests/jest-dom-matchers/toHaveAccessibleDescription.test.ts @@ -0,0 +1,60 @@ +import { withBrowser } from 'pleasantest'; + +test( + 'toHaveAccessibleDescription', + withBrowser(async ({ screen, utils }) => { + await utils.injectHTML(` + Start + About + User profile pic + Company logo + The logo of Our Company + `); + + 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'); + }), +); diff --git a/tests/jest-dom-matchers/toHaveAccessibleName.test.ts b/tests/jest-dom-matchers/toHaveAccessibleName.test.ts new file mode 100644 index 00000000..0e4ec60c --- /dev/null +++ b/tests/jest-dom-matchers/toHaveAccessibleName.test.ts @@ -0,0 +1,84 @@ +import { withBrowser } from 'pleasantest'; + +test( + 'toHaveAccessibleName', + withBrowser(async ({ screen, utils }) => { + await utils.injectHTML(` + Test alt + + Test title + +

Test content

+ -
- Closing will discard any changes -
- - - `); - - const closeButton = await screen.getByRole('button', { name: 'Close' }); - - await expect(closeButton).toHaveDescription( - 'Closing will discard any changes', - ); - await expect(closeButton).toHaveDescription(/will discard/); - await expect( - expect(closeButton).toHaveDescription( - expect.stringContaining('will discard'), - ), - ).rejects.toThrowErrorMatchingInlineSnapshot(` - "Pleasantest does not support using asymmetric matchers in browser-based matchers - - Received StringContaining \\"will discard\\"" - `); - await expect(closeButton).toHaveDescription(/^closing/i); - await expect(closeButton).not.toHaveDescription('Other description'); - await expect(expect(closeButton).toHaveDescription('Other description')) - .rejects.toThrowErrorMatchingInlineSnapshot(` - "expect(element).toHaveDescription() - - Expected the element to have description: -  \\"Other description\\" - Received: -  \\"Closing will discard any changes\\"" - `); - await expect(expect(closeButton).not.toHaveDescription()).rejects - .toThrowErrorMatchingInlineSnapshot(` - "expect(element).not.toHaveDescription() - - Expected the element not to have description: -  null - Received: -  \\"Closing will discard any changes\\"" - `); - - const deleteButton = await screen.getByRole('button', { name: 'Delete' }); - await expect(deleteButton).not.toHaveDescription(); - await expect(deleteButton).toHaveDescription(''); - }), -);