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 201e20dc..4a5870e4 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": "15.12.5", "@types/polka": "0.5.2", @@ -4147,9 +4147,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", @@ -4158,6 +4158,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" }, @@ -24911,9 +24912,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", @@ -24922,6 +24923,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 4a2f3b56..06e1c16c 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": "15.12.5", "@types/polka": "0.5.2", diff --git a/src/extend-expect.ts b/src/extend-expect.ts index f7df0772..6186b6db 100644 --- a/src/extend-expect.ts +++ b/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; + /** + * 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 @@ -381,12 +393,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(''); - }), -);