Skip to content

Commit 69fd00b

Browse files
renovate[bot]renovate-botcalebeby
authored
Update dependency @testing-library/jest-dom to v5.14.1 (#104)
Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Caleb Eby <caleb.eby01@gmail.com>
1 parent 0e65178 commit 69fd00b

9 files changed

Lines changed: 180 additions & 75 deletions

‎.changeset/lovely-pumpkins-kiss.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'pleasantest': minor
3+
---
4+
5+
Remove toHaveDescription, toBeInTheDOM, and toBeEmpty (they are deprecated by jest-dom)

‎.changeset/purple-colts-work.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'pleasantest': minor
3+
---
4+
5+
Add toHaveAccessibleDescription and toHaveAccessibleName from jest-dom matchers

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -689,7 +689,7 @@ Pleasantest adds [`jest-dom`'s matchers](https://github.com/testing-library/jest
689689

690690
List of matchers:
691691

692-
[`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).
692+
[`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).
693693
.
694694

695695
> :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-lock.json‎

Lines changed: 9 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"@rollup/plugin-babel": "5.3.0",
2121
"@rollup/plugin-node-resolve": "13.0.0",
2222
"@testing-library/dom": "8.1.0",
23-
"@testing-library/jest-dom": "5.13.0",
23+
"@testing-library/jest-dom": "5.14.1",
2424
"@types/jest": "26.0.23",
2525
"@types/node": "16.0.0",
2626
"@types/polka": "0.5.2",

‎src/extend-expect.ts‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ import {
99
} from './utils';
1010

1111
const methods = [
12-
'toBeInTheDOM',
1312
'toBeInTheDocument',
14-
'toBeEmpty',
1513
'toBeEmptyDOMElement',
1614
'toContainElement',
1715
'toContainHTML',
16+
'toHaveAccessibleDescription',
17+
'toHaveAccessibleName',
1818
'toHaveTextContent',
1919
'toHaveAttribute',
2020
'toHaveClass',
@@ -31,7 +31,6 @@ const methods = [
3131
'toHaveDisplayValue',
3232
'toBeChecked',
3333
'toBePartiallyChecked',
34-
'toHaveDescription',
3534
'toHaveErrorMessage',
3635
] as const;
3736

@@ -319,6 +318,19 @@ declare global {
319318
* https://github.com/testing-library/jest-dom#tocontainhtml
320319
*/
321320
toContainHTML(html: string): Promise<R>;
321+
/**
322+
* Assert that an element has the expected [accessible description](https://www.w3.org/TR/accname-1.1/#dfn-accessible-description).
323+
* You can pass the exact string, or you can make a partial match passing a regular expression
324+
* https://github.com/testing-library/jest-dom#tohaveaccessibledescription
325+
*/
326+
toHaveAccessibleDescription(text?: string | RegExp): Promise<R>;
327+
/**
328+
* Assert that an element has the expected [accessible description](https://www.w3.org/TR/accname-1.1/#dfn-accessible-name).
329+
* It is useful, for instance, to assert that form elements and buttons are properly labelled.
330+
* You can pass the exact string, or you can make a partial match passing a regular expression
331+
* https://github.com/testing-library/jest-dom#tohaveaccessibledescription
332+
*/
333+
toHaveAccessibleName(text?: string | RegExp): Promise<R>;
322334
/**
323335
* Check whether the given element has an attribute or not.
324336
* You can also optionally check that the attribute has a specific expected value
@@ -390,12 +402,6 @@ declare global {
390402
*/
391403
toBePartiallyChecked(): Promise<R>;
392404

393-
/**
394-
* Check whether the given element has a description (via aria-describedby)
395-
* https://github.com/testing-library/jest-dom#tohavedescription
396-
*/
397-
toHaveDescription(text?: string | RegExp): Promise<R>;
398-
399405
/**
400406
* Check whether the given element has an ARIA error message (via aria-errormessage)
401407
* https://github.com/testing-library/jest-dom#tohaveerrormessage

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { withBrowser } from 'pleasantest';
2+
3+
test(
4+
'toHaveAccessibleDescription',
5+
withBrowser(async ({ screen, utils }) => {
6+
await utils.injectHTML(`
7+
<a
8+
data-testid="link"
9+
href="/"
10+
aria-label="Home page"
11+
title="A link to start over"
12+
>Start</a
13+
>
14+
<a data-testid="extra-link" href="/about" aria-label="About page">About</a>
15+
<img src="" data-testid="avatar" alt="User profile pic" />
16+
<img
17+
src=""
18+
data-testid="logo"
19+
alt="Company logo"
20+
aria-describedby="t1"
21+
/>
22+
<span id="t1" role="presentation">The logo of Our Company</span>
23+
`);
24+
25+
const link = await screen.getByTestId('link');
26+
await expect(link).toHaveAccessibleDescription();
27+
await expect(expect(link).not.toHaveAccessibleDescription()).rejects
28+
.toThrowErrorMatchingInlineSnapshot(`
29+
"expect(element).not.toHaveAccessibleDescription()
30+
31+
Expected element not to have accessible description:
32+
 null
33+
Received:
34+
 A link to start over"
35+
`);
36+
await expect(link).toHaveAccessibleDescription('A link to start over');
37+
await expect(link).not.toHaveAccessibleDescription('Home page');
38+
await expect(expect(link).toHaveAccessibleDescription('Home page')).rejects
39+
.toThrowErrorMatchingInlineSnapshot(`
40+
"expect(element).toHaveAccessibleDescription()
41+
42+
Expected element to have accessible description:
43+
 Home page
44+
Received:
45+
 A link to start over"
46+
`);
47+
48+
await expect(
49+
await screen.getByTestId('extra-link'),
50+
).not.toHaveAccessibleDescription();
51+
52+
await expect(
53+
await screen.getByTestId('avatar'),
54+
).not.toHaveAccessibleDescription();
55+
56+
const logo = await screen.getByTestId('logo');
57+
await expect(logo).not.toHaveAccessibleDescription('Company logo');
58+
await expect(logo).toHaveAccessibleDescription('The logo of Our Company');
59+
}),
60+
);

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { withBrowser } from 'pleasantest';
2+
3+
test(
4+
'toHaveAccessibleName',
5+
withBrowser(async ({ screen, utils }) => {
6+
await utils.injectHTML(`
7+
<img data-testid="img-alt" src="" alt="Test alt" />
8+
<img data-testid="img-empty-alt" src="" alt="" />
9+
<svg data-testid="svg-title"><title>Test title</title></svg>
10+
<button data-testid="button-img-alt"><img src="" alt="Test" /></button>
11+
<p><img data-testid="img-paragraph" src="" alt="" /> Test content</p>
12+
<button data-testid="svg-button"><svg><title>Test</title></svg></p>
13+
<div><svg data-testid="svg-without-title"></svg></div>
14+
<input data-testid="input-title" title="test" />
15+
`);
16+
17+
await expect(await screen.getByTestId('img-alt')).toHaveAccessibleName(
18+
'Test alt',
19+
);
20+
21+
await expect(await screen.getByTestId('img-alt')).not.toHaveAccessibleName(
22+
'not test alt',
23+
);
24+
await expect(
25+
expect(await screen.getByTestId('img-alt')).toHaveAccessibleName(
26+
'not test alt',
27+
),
28+
).rejects.toThrowErrorMatchingInlineSnapshot(`
29+
"expect(element).toHaveAccessibleName()
30+
31+
Expected element to have accessible name:
32+
 not test alt
33+
Received:
34+
 Test alt"
35+
`);
36+
37+
await expect(
38+
expect(await screen.getByTestId('img-empty-alt')).toHaveAccessibleName(),
39+
).rejects.toThrowErrorMatchingInlineSnapshot(`
40+
"expect(element).toHaveAccessibleName()
41+
42+
Expected element to have accessible name:
43+
 null
44+
Received:
45+
"
46+
`);
47+
48+
await expect(
49+
await screen.getByTestId('img-empty-alt'),
50+
).not.toHaveAccessibleName();
51+
await expect(
52+
expect(await screen.getByTestId('img-empty-alt')).toHaveAccessibleName(),
53+
).rejects.toThrowErrorMatchingInlineSnapshot(`
54+
"expect(element).toHaveAccessibleName()
55+
56+
Expected element to have accessible name:
57+
 null
58+
Received:
59+
"
60+
`);
61+
62+
await expect(await screen.getByTestId('svg-title')).toHaveAccessibleName(
63+
'Test title',
64+
);
65+
66+
await expect(
67+
await screen.getByTestId('button-img-alt'),
68+
).toHaveAccessibleName();
69+
70+
await expect(
71+
await screen.getByTestId('img-paragraph'),
72+
).not.toHaveAccessibleName();
73+
74+
await expect(await screen.getByTestId('svg-button')).toHaveAccessibleName();
75+
76+
await expect(
77+
await screen.getByTestId('svg-without-title'),
78+
).not.toHaveAccessibleName();
79+
80+
await expect(
81+
await screen.getByTestId('input-title'),
82+
).toHaveAccessibleName();
83+
}),
84+
);

‎tests/jest-dom-matchers/toHaveDescription.test.ts‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

0 commit comments

Comments
 (0)
⚡