40 |
41 |
42 |
43 |
44 |
45 | `)
46 |
47 | expect(queryByTestId('no-aria-invalid')).not.toBeInvalid()
48 | expect(queryByTestId('aria-invalid')).toBeInvalid()
49 | expect(queryByTestId('aria-invalid-value')).toBeInvalid()
50 | expect(queryByTestId('aria-invalid-false')).not.toBeInvalid()
51 | expect(invalidInputNode).toBeInvalid()
52 |
53 | // negative test cases wrapped in throwError assertions for coverage.
54 | expect(() =>
55 | expect(queryByTestId('no-aria-invalid')).toBeInvalid(),
56 | ).toThrowError()
57 | expect(() =>
58 | expect(queryByTestId('aria-invalid')).not.toBeInvalid(),
59 | ).toThrowError()
60 | expect(() =>
61 | expect(queryByTestId('aria-invalid-value')).not.toBeInvalid(),
62 | ).toThrowError()
63 | expect(() =>
64 | expect(queryByTestId('aria-invalid-false')).toBeInvalid(),
65 | ).toThrowError()
66 | expect(() => expect(invalidInputNode).not.toBeInvalid()).toThrowError()
67 | })
68 |
69 | test('handles ', () => {
70 | const {queryByTestId} = render(`
71 |
74 | `)
75 |
76 | expect(queryByTestId('valid')).not.toBeInvalid()
77 | expect(invalidFormNode).toBeInvalid()
78 |
79 | // negative test cases wrapped in throwError assertions for coverage.
80 | expect(() => expect(queryByTestId('valid')).toBeInvalid()).toThrowError()
81 | expect(() => expect(invalidFormNode).not.toBeInvalid()).toThrowError()
82 | })
83 |
84 | test('handles any element', () => {
85 | const {queryByTestId} = render(`
86 | -
87 |
- 88 |
- 89 |
- 90 |
- 91 |
121 |
122 |
123 |
124 |
125 |
126 | `)
127 |
128 | expect(queryByTestId('no-aria-invalid')).toBeValid()
129 | expect(queryByTestId('aria-invalid')).not.toBeValid()
130 | expect(queryByTestId('aria-invalid-value')).not.toBeValid()
131 | expect(queryByTestId('aria-invalid-false')).toBeValid()
132 | expect(invalidInputNode).not.toBeValid()
133 |
134 | // negative test cases wrapped in throwError assertions for coverage.
135 | expect(() =>
136 | expect(queryByTestId('no-aria-invalid')).not.toBeValid(),
137 | ).toThrowError()
138 | expect(() =>
139 | expect(queryByTestId('aria-invalid')).toBeValid(),
140 | ).toThrowError()
141 | expect(() =>
142 | expect(queryByTestId('aria-invalid-value')).toBeValid(),
143 | ).toThrowError()
144 | expect(() =>
145 | expect(queryByTestId('aria-invalid-false')).not.toBeValid(),
146 | ).toThrowError()
147 | expect(() => expect(invalidInputNode).toBeValid()).toThrowError()
148 | })
149 |
150 | test('handles ', () => {
151 | const {queryByTestId} = render(`
152 |
155 | `)
156 |
157 | expect(queryByTestId('valid')).toBeValid()
158 | expect(invalidFormNode).not.toBeValid()
159 |
160 | // negative test cases wrapped in throwError assertions for coverage.
161 | expect(() => expect(queryByTestId('valid')).not.toBeValid()).toThrowError()
162 | expect(() => expect(invalidFormNode).toBeValid()).toThrowError()
163 | })
164 |
165 | test('handles any element', () => {
166 | const {queryByTestId} = render(`
167 | -
168 |
- 169 |
- 170 |
- 171 |
- 172 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | `)
18 |
19 | expect(queryByTestId('required-input')).toBeRequired()
20 | expect(queryByTestId('aria-required-input')).toBeRequired()
21 | expect(queryByTestId('conflicted-input')).toBeRequired()
22 | expect(queryByTestId('not-required-input')).not.toBeRequired()
23 | expect(queryByTestId('basic-input')).not.toBeRequired()
24 | expect(queryByTestId('unsupported-type')).not.toBeRequired()
25 | expect(queryByTestId('select')).toBeRequired()
26 | expect(queryByTestId('textarea')).toBeRequired()
27 | expect(queryByTestId('supported-role')).not.toBeRequired()
28 | expect(queryByTestId('supported-role-aria')).toBeRequired()
29 |
30 | // negative test cases wrapped in throwError assertions for coverage.
31 | expect(() =>
32 | expect(queryByTestId('required-input')).not.toBeRequired(),
33 | ).toThrowError()
34 | expect(() =>
35 | expect(queryByTestId('aria-required-input')).not.toBeRequired(),
36 | ).toThrowError()
37 | expect(() =>
38 | expect(queryByTestId('conflicted-input')).not.toBeRequired(),
39 | ).toThrowError()
40 | expect(() =>
41 | expect(queryByTestId('not-required-input')).toBeRequired(),
42 | ).toThrowError()
43 | expect(() =>
44 | expect(queryByTestId('basic-input')).toBeRequired(),
45 | ).toThrowError()
46 | expect(() =>
47 | expect(queryByTestId('unsupported-type')).toBeRequired(),
48 | ).toThrowError()
49 | expect(() =>
50 | expect(queryByTestId('select')).not.toBeRequired(),
51 | ).toThrowError()
52 | expect(() =>
53 | expect(queryByTestId('textarea')).not.toBeRequired(),
54 | ).toThrowError()
55 | expect(() =>
56 | expect(queryByTestId('supported-role')).toBeRequired(),
57 | ).toThrowError()
58 | expect(() =>
59 | expect(queryByTestId('supported-role-aria')).not.toBeRequired(),
60 | ).toThrowError()
61 | })
62 |
--------------------------------------------------------------------------------
/src/__tests__/to-contain-element.js:
--------------------------------------------------------------------------------
1 | import {render} from './helpers/test-utils'
2 |
3 | const {queryByTestId} = render(`
4 |
5 |
6 |
7 |
8 |
9 |
10 | `)
11 |
12 | const grandparent = queryByTestId('grandparent')
13 | const parent = queryByTestId('parent')
14 | const child = queryByTestId('child')
15 | const svgElement = queryByTestId('svg-element')
16 | const nonExistantElement = queryByTestId('not-exists')
17 | const fakeElement = {thisIsNot: 'an html element'}
18 |
19 | test('.toContainElement positive test cases', () => {
20 | expect(grandparent).toContainElement(parent)
21 | expect(grandparent).toContainElement(child)
22 | expect(grandparent).toContainElement(svgElement)
23 | expect(parent).toContainElement(child)
24 | expect(parent).not.toContainElement(grandparent)
25 | expect(parent).not.toContainElement(svgElement)
26 | expect(child).not.toContainElement(parent)
27 | expect(child).not.toContainElement(grandparent)
28 | expect(child).not.toContainElement(svgElement)
29 | expect(grandparent).not.toContainElement(nonExistantElement)
30 | })
31 |
32 | test('.toContainElement negative test cases', () => {
33 | expect(() =>
34 | expect(nonExistantElement).not.toContainElement(child),
35 | ).toThrowError()
36 | expect(() => expect(parent).toContainElement(grandparent)).toThrowError()
37 | expect(() =>
38 | expect(nonExistantElement).toContainElement(grandparent),
39 | ).toThrowError()
40 | expect(() =>
41 | expect(grandparent).toContainElement(nonExistantElement),
42 | ).toThrowError()
43 | expect(() =>
44 | expect(nonExistantElement).toContainElement(nonExistantElement),
45 | ).toThrowError()
46 | expect(() =>
47 | expect(nonExistantElement).toContainElement(fakeElement),
48 | ).toThrowError()
49 | expect(() =>
50 | expect(fakeElement).toContainElement(nonExistantElement),
51 | ).toThrowError()
52 | expect(() =>
53 | expect(fakeElement).not.toContainElement(nonExistantElement),
54 | ).toThrowError()
55 | expect(() => expect(fakeElement).toContainElement(grandparent)).toThrowError()
56 | expect(() => expect(grandparent).toContainElement(fakeElement)).toThrowError()
57 | expect(() => expect(fakeElement).toContainElement(fakeElement)).toThrowError()
58 | expect(() => expect(grandparent).not.toContainElement(child)).toThrowError()
59 | expect(() =>
60 | expect(grandparent).not.toContainElement(svgElement),
61 | ).toThrowError()
62 | expect(() =>
63 | expect(grandparent).not.toContainElement(undefined),
64 | ).toThrowError()
65 | })
66 |
--------------------------------------------------------------------------------
/src/__tests__/to-contain-html.js:
--------------------------------------------------------------------------------
1 | import {render} from './helpers/test-utils'
2 |
3 | /* eslint-disable max-statements */
4 | describe('.toContainHTML', () => {
5 | test('handles positive and negative cases', () => {
6 | const {queryByTestId} = render(`
7 |
8 |
9 |
10 |
11 |
12 |
13 | `)
14 |
15 | const grandparent = queryByTestId('grandparent')
16 | const parent = queryByTestId('parent')
17 | const child = queryByTestId('child')
18 | const nonExistantElement = queryByTestId('not-exists')
19 | const fakeElement = {thisIsNot: 'an html element'}
20 | const stringChildElement = ''
21 | const stringChildElementSelfClosing = ''
22 | const incorrectStringHtml = ''
23 | const nonExistantString = ' Does not exists '
24 | const svgElement = queryByTestId('svg-element')
25 |
26 | expect(grandparent).toContainHTML(stringChildElement)
27 | expect(parent).toContainHTML(stringChildElement)
28 | expect(child).toContainHTML(stringChildElement)
29 | expect(child).toContainHTML(stringChildElementSelfClosing)
30 | expect(grandparent).not.toContainHTML(nonExistantString)
31 | expect(parent).not.toContainHTML(nonExistantString)
32 | expect(child).not.toContainHTML(nonExistantString)
33 | expect(child).not.toContainHTML(nonExistantString)
34 | expect(grandparent).toContainHTML(incorrectStringHtml)
35 | expect(parent).toContainHTML(incorrectStringHtml)
36 | expect(child).toContainHTML(incorrectStringHtml)
37 |
38 | // negative test cases wrapped in throwError assertions for coverage.
39 | expect(() =>
40 | expect(nonExistantElement).not.toContainHTML(stringChildElement),
41 | ).toThrowError()
42 | expect(() =>
43 | expect(nonExistantElement).not.toContainHTML(nonExistantElement),
44 | ).toThrowError()
45 | expect(() =>
46 | expect(stringChildElement).not.toContainHTML(fakeElement),
47 | ).toThrowError()
48 | expect(() =>
49 | expect(svgElement).toContainHTML(stringChildElement),
50 | ).toThrowError()
51 | expect(() =>
52 | expect(grandparent).not.toContainHTML(stringChildElement),
53 | ).toThrowError()
54 | expect(() =>
55 | expect(parent).not.toContainHTML(stringChildElement),
56 | ).toThrowError()
57 | expect(() =>
58 | expect(child).not.toContainHTML(stringChildElement),
59 | ).toThrowError()
60 | expect(() =>
61 | expect(child).not.toContainHTML(stringChildElement),
62 | ).toThrowError()
63 | expect(() =>
64 | expect(child).not.toContainHTML(stringChildElementSelfClosing),
65 | ).toThrowError()
66 | expect(() => expect(child).toContainHTML(nonExistantString)).toThrowError()
67 | expect(() => expect(parent).toContainHTML(nonExistantString)).toThrowError()
68 | expect(() =>
69 | expect(grandparent).toContainHTML(nonExistantString),
70 | ).toThrowError()
71 | expect(() => expect(child).toContainHTML(nonExistantElement)).toThrowError()
72 | expect(() =>
73 | expect(parent).toContainHTML(nonExistantElement),
74 | ).toThrowError()
75 | expect(() =>
76 | expect(grandparent).toContainHTML(nonExistantElement),
77 | ).toThrowError()
78 | expect(() =>
79 | expect(nonExistantElement).not.toContainHTML(incorrectStringHtml),
80 | ).toThrowError()
81 | expect(() =>
82 | expect(grandparent).not.toContainHTML(incorrectStringHtml),
83 | ).toThrowError()
84 | expect(() =>
85 | expect(child).not.toContainHTML(incorrectStringHtml),
86 | ).toThrowError()
87 | expect(() =>
88 | expect(parent).not.toContainHTML(incorrectStringHtml),
89 | ).toThrowError()
90 | })
91 |
92 | test('throws with an expected text', () => {
93 | const {queryByTestId} = render('')
94 | const htmlElement = queryByTestId('child')
95 | const nonExistantString = ' non-existant element
'
96 |
97 | let errorMessage
98 | try {
99 | expect(htmlElement).toContainHTML(nonExistantString)
100 | } catch (error) {
101 | errorMessage = error.message
102 | }
103 |
104 | expect(errorMessage).toMatchInlineSnapshot(`
105 | non-existant element
108 | Received:
109 |
33 | 
34 | 
35 | The logo of Our Company
36 |
37 | `)
38 |
39 | const avatar = queryByTestId('avatar')
40 | expect(avatar).not.toHaveAccessibleDescription()
41 | expect(() => {
42 | expect(avatar).toHaveAccessibleDescription('User profile pic')
43 | }).toThrow(/expected element to have accessible description/i)
44 |
45 | const logo = queryByTestId('logo')
46 | expect(logo).not.toHaveAccessibleDescription('Company logo')
47 | expect(logo).toHaveAccessibleDescription('The logo of Our Company')
48 | expect(logo).toHaveAccessibleDescription(/logo of our company/i)
49 | expect(logo).toHaveAccessibleDescription(
50 | expect.stringContaining('logo of Our Company'),
51 | )
52 | expect(() => {
53 | expect(logo).toHaveAccessibleDescription("Our company's logo")
54 | }).toThrow(/expected element to have accessible description/i)
55 | expect(() => {
56 | expect(logo).not.toHaveAccessibleDescription('The logo of Our Company')
57 | }).toThrow(/expected element not to have accessible description/i)
58 | })
59 |
60 | it('works with aria-description attribute', () => {
61 | const {queryByTestId} = render(`
62 |
34 |
35 | The logo of Our Company
36 |
63 | `)
64 |
65 | const logo = queryByTestId('logo')
66 | expect(logo).not.toHaveAccessibleDescription('Company logo')
67 | expect(logo).toHaveAccessibleDescription('The logo of Our Company')
68 | expect(logo).toHaveAccessibleDescription(/logo of our company/i)
69 | expect(logo).toHaveAccessibleDescription(
70 | expect.stringContaining('logo of Our Company'),
71 | )
72 | expect(() => {
73 | expect(logo).toHaveAccessibleDescription("Our company's logo")
74 | }).toThrow(/expected element to have accessible description/i)
75 | expect(() => {
76 | expect(logo).not.toHaveAccessibleDescription('The logo of Our Company')
77 | }).toThrow(/expected element not to have accessible description/i)
78 | })
79 |
80 | it('handles multiple ids', () => {
81 | const {queryByTestId} = render(`
82 |
83 |
89 | `)
90 |
91 | expect(queryByTestId('multiple')).toHaveAccessibleDescription(
92 | 'First description Second description Third description',
93 | )
94 | expect(queryByTestId('multiple')).toHaveAccessibleDescription(
95 | /Second description Third/,
96 | )
97 | expect(queryByTestId('multiple')).toHaveAccessibleDescription(
98 | expect.stringContaining('Second description Third'),
99 | )
100 | expect(queryByTestId('multiple')).toHaveAccessibleDescription(
101 | expect.stringMatching(/Second description Third/),
102 | )
103 | expect(queryByTestId('multiple')).not.toHaveAccessibleDescription(
104 | 'Something else',
105 | )
106 | expect(queryByTestId('multiple')).not.toHaveAccessibleDescription('First')
107 | })
108 |
109 | it('normalizes whitespace', () => {
110 | const {queryByTestId} = render(`
111 | First description
84 | Second description
85 | Third description
86 |
87 |
88 |
112 | Step
113 | 1
114 | of
115 | 4
116 |
117 |
118 | And
119 | extra
120 | description
121 |
122 |
123 | `)
124 |
125 | expect(queryByTestId('target')).toHaveAccessibleDescription(
126 | 'Step 1 of 4 And extra description',
127 | )
128 | })
129 | })
130 |
--------------------------------------------------------------------------------
/src/__tests__/to-have-attribute.js:
--------------------------------------------------------------------------------
1 | import {render} from './helpers/test-utils'
2 |
3 | test('.toHaveAttribute', () => {
4 | const {queryByTestId} = render(`
5 |
8 |
9 | `)
10 |
11 | expect(queryByTestId('ok-button')).toHaveAttribute('disabled')
12 | expect(queryByTestId('ok-button')).toHaveAttribute('type')
13 | expect(queryByTestId('ok-button')).not.toHaveAttribute('class')
14 | expect(queryByTestId('ok-button')).toHaveAttribute('type', 'submit')
15 | expect(queryByTestId('ok-button')).not.toHaveAttribute('type', 'button')
16 | expect(queryByTestId('svg-element')).toHaveAttribute('width')
17 | expect(queryByTestId('svg-element')).toHaveAttribute('width', '12')
18 | expect(queryByTestId('ok-button')).not.toHaveAttribute('height')
19 |
20 | expect(() =>
21 | expect(queryByTestId('ok-button')).not.toHaveAttribute('disabled'),
22 | ).toThrowError()
23 | expect(() =>
24 | expect(queryByTestId('ok-button')).not.toHaveAttribute('type'),
25 | ).toThrowError()
26 | expect(() =>
27 | expect(queryByTestId('ok-button')).toHaveAttribute('class'),
28 | ).toThrowError()
29 | expect(() =>
30 | expect(queryByTestId('ok-button')).not.toHaveAttribute('type', 'submit'),
31 | ).toThrowError()
32 | expect(() =>
33 | expect(queryByTestId('ok-button')).toHaveAttribute('type', 'button'),
34 | ).toThrowError()
35 | expect(() =>
36 | expect(queryByTestId('svg-element')).not.toHaveAttribute('width'),
37 | ).toThrowError()
38 | expect(() =>
39 | expect(queryByTestId('svg-element')).not.toHaveAttribute('width', '12'),
40 | ).toThrowError()
41 | expect(() =>
42 | expect({thisIsNot: 'an html element'}).not.toHaveAttribute(),
43 | ).toThrowError()
44 |
45 | // Asymmetric matchers
46 | expect(queryByTestId('ok-button')).toHaveAttribute(
47 | 'type',
48 | expect.stringContaining('sub'),
49 | )
50 | expect(queryByTestId('ok-button')).toHaveAttribute(
51 | 'type',
52 | expect.stringMatching(/sub*/),
53 | )
54 | expect(queryByTestId('ok-button')).toHaveAttribute('type', expect.anything())
55 |
56 | expect(() =>
57 | expect(queryByTestId('ok-button')).toHaveAttribute(
58 | 'type',
59 | expect.not.stringContaining('sub'),
60 | ),
61 | ).toThrowError()
62 | })
63 |
--------------------------------------------------------------------------------
/src/__tests__/to-have-description.js:
--------------------------------------------------------------------------------
1 | import {render} from './helpers/test-utils'
2 |
3 | describe('.toHaveDescription', () => {
4 | let spy
5 | beforeAll(() => {
6 | // @deprecated intentionally hiding warnings for test clarity
7 | spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
8 | })
9 |
10 | afterAll(() => {
11 | spy.mockRestore()
12 | })
13 |
14 | test('handles positive test cases', () => {
15 | const {queryByTestId} = render(`
16 | The description
17 |
18 |
19 |
20 |
21 | `)
22 |
23 | expect(queryByTestId('single')).toHaveDescription('The description')
24 | expect(queryByTestId('single')).toHaveDescription(
25 | expect.stringContaining('The'),
26 | )
27 | expect(queryByTestId('single')).toHaveDescription(/The/)
28 | expect(queryByTestId('single')).toHaveDescription(
29 | expect.stringMatching(/The/),
30 | )
31 | expect(queryByTestId('single')).toHaveDescription(/description/)
32 | expect(queryByTestId('single')).not.toHaveDescription('Something else')
33 | expect(queryByTestId('single')).not.toHaveDescription('The')
34 |
35 | expect(queryByTestId('invalid_id')).not.toHaveDescription()
36 | expect(queryByTestId('invalid_id')).toHaveDescription('')
37 |
38 | expect(queryByTestId('without')).not.toHaveDescription()
39 | expect(queryByTestId('without')).toHaveDescription('')
40 | })
41 |
42 | test('handles multiple ids', () => {
43 | const {queryByTestId} = render(`
44 | First description
45 | Second description
46 | Third description
47 |
48 |
49 | `)
50 |
51 | expect(queryByTestId('multiple')).toHaveDescription(
52 | 'First description Second description Third description',
53 | )
54 | expect(queryByTestId('multiple')).toHaveDescription(
55 | /Second description Third/,
56 | )
57 | expect(queryByTestId('multiple')).toHaveDescription(
58 | expect.stringContaining('Second description Third'),
59 | )
60 | expect(queryByTestId('multiple')).toHaveDescription(
61 | expect.stringMatching(/Second description Third/),
62 | )
63 | expect(queryByTestId('multiple')).not.toHaveDescription('Something else')
64 | expect(queryByTestId('multiple')).not.toHaveDescription('First')
65 | })
66 |
67 | test('handles negative test cases', () => {
68 | const {queryByTestId} = render(`
69 | The description
70 |
71 | `)
72 |
73 | expect(() =>
74 | expect(queryByTestId('other')).toHaveDescription('The description'),
75 | ).toThrowError()
76 |
77 | expect(() =>
78 | expect(queryByTestId('target')).toHaveDescription('Something else'),
79 | ).toThrowError()
80 |
81 | expect(() =>
82 | expect(queryByTestId('target')).not.toHaveDescription('The description'),
83 | ).toThrowError()
84 | })
85 |
86 | test('normalizes whitespace', () => {
87 | const {queryByTestId} = render(`
88 |
89 | Step
90 | 1
91 | of
92 | 4
93 |
94 |
95 | And
96 | extra
97 | description
98 |
99 |
100 | `)
101 |
102 | expect(queryByTestId('target')).toHaveDescription(
103 | 'Step 1 of 4 And extra description',
104 | )
105 | })
106 |
107 | test('can handle multiple levels with content spread across decendants', () => {
108 | const {queryByTestId} = render(`
109 |
110 | Step
111 | 1
112 | of
113 |
114 |
115 | 4
116 | First description
126 | Second description
127 | Third description
128 |
129 |
132 | `)
133 |
134 | expect(queryByTestId('multiple')).toHaveDescription(
135 | 'First description Second description Third description',
136 | )
137 | })
138 |
139 | test('is case-sensitive', () => {
140 | const {queryByTestId} = render(`
141 | Sensitive text
142 |
143 | `)
144 |
145 | expect(queryByTestId('target')).toHaveDescription('Sensitive text')
146 | expect(queryByTestId('target')).not.toHaveDescription('sensitive text')
147 | })
148 | })
149 |
--------------------------------------------------------------------------------
/src/__tests__/to-have-display-value.js:
--------------------------------------------------------------------------------
1 | import {render} from './helpers/test-utils'
2 |
3 | test('it should work as expected', () => {
4 | const {queryByTestId} = render(`
5 |
11 | `)
12 |
13 | expect(queryByTestId('select')).toHaveDisplayValue('Select a fruit...')
14 | expect(queryByTestId('select')).not.toHaveDisplayValue('Select')
15 | expect(queryByTestId('select')).not.toHaveDisplayValue('Banana')
16 | expect(() =>
17 | expect(queryByTestId('select')).not.toHaveDisplayValue('Select a fruit...'),
18 | ).toThrow()
19 | expect(() =>
20 | expect(queryByTestId('select')).toHaveDisplayValue('Ananas'),
21 | ).toThrow()
22 |
23 | queryByTestId('select').value = 'banana'
24 | expect(queryByTestId('select')).toHaveDisplayValue('Banana')
25 | expect(queryByTestId('select')).toHaveDisplayValue(/[bB]ana/)
26 | })
27 |
28 | describe('with multiple select', () => {
29 | function mount() {
30 | return render(`
31 |
37 | `)
38 | }
39 |
40 | it('matches only when all the multiple selected values are equal to all the expected values', () => {
41 | const subject = mount()
42 | expect(subject.queryByTestId('select')).toHaveDisplayValue([
43 | 'Ananas',
44 | 'Avocado',
45 | ])
46 | expect(() =>
47 | expect(subject.queryByTestId('select')).not.toHaveDisplayValue([
48 | 'Ananas',
49 | 'Avocado',
50 | ]),
51 | ).toThrow()
52 | expect(subject.queryByTestId('select')).not.toHaveDisplayValue([
53 | 'Ananas',
54 | 'Avocado',
55 | 'Orange',
56 | ])
57 | expect(subject.queryByTestId('select')).not.toHaveDisplayValue('Ananas')
58 | expect(() =>
59 | expect(subject.queryByTestId('select')).toHaveDisplayValue('Ananas'),
60 | ).toThrow()
61 |
62 | Array.from(subject.queryByTestId('select').options).forEach(option => {
63 | option.selected = ['ananas', 'banana'].includes(option.value)
64 | })
65 |
66 | expect(subject.queryByTestId('select')).toHaveDisplayValue([
67 | 'Ananas',
68 | 'Banana',
69 | ])
70 | })
71 |
72 | it('matches even when the expected values are unordered', () => {
73 | const subject = mount()
74 | expect(subject.queryByTestId('select')).toHaveDisplayValue([
75 | 'Avocado',
76 | 'Ananas',
77 | ])
78 | })
79 |
80 | it('matches with regex expected values', () => {
81 | const subject = mount()
82 | expect(subject.queryByTestId('select')).toHaveDisplayValue([
83 | /[Aa]nanas/,
84 | 'Avocado',
85 | ])
86 | })
87 | })
88 |
89 | test('it should work with input elements', () => {
90 | const {queryByTestId} = render(`
91 |
92 | `)
93 |
94 | expect(queryByTestId('input')).toHaveDisplayValue('Luca')
95 | expect(queryByTestId('input')).toHaveDisplayValue(/Luc/)
96 |
97 | queryByTestId('input').value = 'Piero'
98 | expect(queryByTestId('input')).toHaveDisplayValue('Piero')
99 | })
100 |
101 | test('it should work with textarea elements', () => {
102 | const {queryByTestId} = render(
103 | '',
104 | )
105 |
106 | expect(queryByTestId('textarea-example')).toHaveDisplayValue(
107 | 'An example description here.',
108 | )
109 | expect(queryByTestId('textarea-example')).toHaveDisplayValue(/example/)
110 |
111 | queryByTestId('textarea-example').value = 'Another example'
112 | expect(queryByTestId('textarea-example')).toHaveDisplayValue(
113 | 'Another example',
114 | )
115 | })
116 |
117 | test('it should throw if element is not valid', () => {
118 | const {queryByTestId} = render(`
119 | Banana
120 |
121 |
122 | `)
123 |
124 | let errorMessage
125 | try {
126 | expect(queryByTestId('div')).toHaveDisplayValue('Banana')
127 | } catch (err) {
128 | errorMessage = err.message
129 | }
130 |
131 | expect(errorMessage).toMatchInlineSnapshot(
132 | `.toHaveDisplayValue() currently supports only input, textarea or select elements, try with another matcher instead.`,
133 | )
134 |
135 | try {
136 | expect(queryByTestId('radio')).toHaveDisplayValue('Something')
137 | } catch (err) {
138 | errorMessage = err.message
139 | }
140 |
141 | expect(errorMessage).toMatchInlineSnapshot(
142 | `.toHaveDisplayValue() currently does not support input[type="radio"], try with another matcher instead.`,
143 | )
144 |
145 | try {
146 | expect(queryByTestId('checkbox')).toHaveDisplayValue(true)
147 | } catch (err) {
148 | errorMessage = err.message
149 | }
150 |
151 | expect(errorMessage).toMatchInlineSnapshot(
152 | `.toHaveDisplayValue() currently does not support input[type="checkbox"], try with another matcher instead.`,
153 | )
154 | })
155 |
156 | test('it should work with numbers', () => {
157 | const {queryByTestId} = render(`
158 |
161 | `)
162 |
163 | expect(queryByTestId('select')).toHaveDisplayValue(1)
164 | })
165 |
--------------------------------------------------------------------------------
/src/__tests__/to-have-errormessage.js:
--------------------------------------------------------------------------------
1 | import {render} from './helpers/test-utils'
2 |
3 | // eslint-disable-next-line max-lines-per-function
4 | describe('.toHaveErrorMessage', () => {
5 | test('resolves for object with correct aria-errormessage reference', () => {
6 | const {queryByTestId} = render(`
7 |
8 |
9 | Invalid time: the time must be between 9:00 AM and 5:00 PM
10 | `)
11 |
12 | const timeInput = queryByTestId('startTime')
13 |
14 | expect(timeInput).toHaveErrorMessage(
15 | 'Invalid time: the time must be between 9:00 AM and 5:00 PM',
16 | )
17 | expect(timeInput).toHaveErrorMessage(/invalid time/i) // to partially match
18 | expect(timeInput).toHaveErrorMessage(
19 | expect.stringContaining('Invalid time'),
20 | ) // to partially match
21 | expect(timeInput).not.toHaveErrorMessage('Pikachu!')
22 | })
23 |
24 | test('works correctly on implicit invalid element', () => {
25 | const {queryByTestId} = render(`
26 |
27 |
28 | Invalid time: the time must be between 9:00 AM and 5:00 PM
29 | `)
30 |
31 | const timeInput = queryByTestId('startTime')
32 |
33 | expect(timeInput).toHaveErrorMessage(
34 | 'Invalid time: the time must be between 9:00 AM and 5:00 PM',
35 | )
36 | expect(timeInput).toHaveErrorMessage(/invalid time/i) // to partially match
37 | expect(timeInput).toHaveErrorMessage(
38 | expect.stringContaining('Invalid time'),
39 | ) // to partially match
40 | expect(timeInput).not.toHaveErrorMessage('Pikachu!')
41 | })
42 |
43 | test('rejects for valid object', () => {
44 | const {queryByTestId} = render(`
45 | The errormessage
46 |
47 |
48 | `)
49 |
50 | expect(queryByTestId('valid')).not.toHaveErrorMessage('The errormessage')
51 | expect(() => {
52 | expect(queryByTestId('valid')).toHaveErrorMessage('The errormessage')
53 | }).toThrowError()
54 |
55 | expect(queryByTestId('explicitly_valid')).not.toHaveErrorMessage(
56 | 'The errormessage',
57 | )
58 | expect(() => {
59 | expect(queryByTestId('explicitly_valid')).toHaveErrorMessage(
60 | 'The errormessage',
61 | )
62 | }).toThrowError()
63 | })
64 |
65 | test('rejects for object with incorrect aria-errormessage reference', () => {
66 | const {queryByTestId} = render(`
67 | The errormessage
68 |
69 | `)
70 |
71 | expect(queryByTestId('invalid_id')).not.toHaveErrorMessage()
72 | expect(queryByTestId('invalid_id')).toHaveErrorMessage('')
73 | })
74 |
75 | test('handles invalid element without aria-errormessage', () => {
76 | const {queryByTestId} = render(`
77 | The errormessage
78 |
79 | `)
80 |
81 | expect(queryByTestId('without')).not.toHaveErrorMessage()
82 | expect(queryByTestId('without')).toHaveErrorMessage('')
83 | })
84 |
85 | test('handles valid element without aria-errormessage', () => {
86 | const {queryByTestId} = render(`
87 | The errormessage
88 |
89 | `)
90 |
91 | expect(queryByTestId('without')).not.toHaveErrorMessage()
92 | expect(() => {
93 | expect(queryByTestId('without')).toHaveErrorMessage()
94 | }).toThrowError()
95 |
96 | expect(queryByTestId('without')).not.toHaveErrorMessage('')
97 | expect(() => {
98 | expect(queryByTestId('without')).toHaveErrorMessage('')
99 | }).toThrowError()
100 | })
101 |
102 | test('handles multiple ids', () => {
103 | const {queryByTestId} = render(`
104 | First errormessage
105 | Second errormessage
106 | Third errormessage
107 |
108 | `)
109 |
110 | expect(queryByTestId('multiple')).toHaveErrorMessage(
111 | 'First errormessage Second errormessage Third errormessage',
112 | )
113 | expect(queryByTestId('multiple')).toHaveErrorMessage(
114 | /Second errormessage Third/,
115 | )
116 | expect(queryByTestId('multiple')).toHaveErrorMessage(
117 | expect.stringContaining('Second errormessage Third'),
118 | )
119 | expect(queryByTestId('multiple')).toHaveErrorMessage(
120 | expect.stringMatching(/Second errormessage Third/),
121 | )
122 | expect(queryByTestId('multiple')).not.toHaveErrorMessage('Something else')
123 | expect(queryByTestId('multiple')).not.toHaveErrorMessage('First')
124 | })
125 |
126 | test('handles negative test cases', () => {
127 | const {queryByTestId} = render(`
128 | The errormessage
129 |
130 | `)
131 |
132 | expect(() =>
133 | expect(queryByTestId('other')).toHaveErrorMessage('The errormessage'),
134 | ).toThrowError()
135 |
136 | expect(() =>
137 | expect(queryByTestId('target')).toHaveErrorMessage('Something else'),
138 | ).toThrowError()
139 |
140 | expect(() =>
141 | expect(queryByTestId('target')).not.toHaveErrorMessage(
142 | 'The errormessage',
143 | ),
144 | ).toThrowError()
145 | })
146 |
147 | test('normalizes whitespace', () => {
148 | const {queryByTestId} = render(`
149 |
150 | Step
151 | 1
152 | of
153 | 4
154 |
155 |
156 | And
157 | extra
158 | errormessage
159 |
160 |
161 | `)
162 |
163 | expect(queryByTestId('target')).toHaveErrorMessage(
164 | 'Step 1 of 4 And extra errormessage',
165 | )
166 | })
167 |
168 | test('can handle multiple levels with content spread across decendants', () => {
169 | const {queryByTestId} = render(`
170 |
171 | Step
172 | 1
173 | of
174 | 4
175 |
176 |
177 | `)
178 |
179 | expect(queryByTestId('target')).toHaveErrorMessage('Step 1 of 4')
180 | })
181 |
182 | test('handles extra whitespace with multiple ids', () => {
183 | const {queryByTestId} = render(`
184 | First errormessage
185 | Second errormessage
186 | Third errormessage
187 |
190 | `)
191 |
192 | expect(queryByTestId('multiple')).toHaveErrorMessage(
193 | 'First errormessage Second errormessage Third errormessage',
194 | )
195 | })
196 |
197 | test('is case-sensitive', () => {
198 | const {queryByTestId} = render(`
199 | Sensitive text
200 |
201 | `)
202 |
203 | expect(queryByTestId('target')).toHaveErrorMessage('Sensitive text')
204 | expect(queryByTestId('target')).not.toHaveErrorMessage('sensitive text')
205 | })
206 | })
207 |
--------------------------------------------------------------------------------
/src/__tests__/to-have-focus.js:
--------------------------------------------------------------------------------
1 | import {render} from './helpers/test-utils'
2 | import document from './helpers/document'
3 |
4 | test('.toHaveFocus', () => {
5 | const {container} = render(`
6 |
7 |
8 |
9 |
10 |
`)
11 |
12 | const focused = container.querySelector('#focused')
13 | const notFocused = container.querySelector('#not-focused')
14 |
15 | document.body.appendChild(container)
16 | focused.focus()
17 |
18 | expect(focused).toHaveFocus()
19 | expect(notFocused).not.toHaveFocus()
20 |
21 | expect(() => expect(focused).not.toHaveFocus()).toThrowError()
22 | expect(() => expect(notFocused).toHaveFocus()).toThrowError()
23 | })
24 |
--------------------------------------------------------------------------------
/src/__tests__/to-have-role.js:
--------------------------------------------------------------------------------
1 | import {render} from './helpers/test-utils'
2 |
3 | describe('.toHaveRole', () => {
4 | it('matches implicit role', () => {
5 | const {queryByTestId} = render(`
6 |
7 |
8 |
9 | `)
10 |
11 | const continueButton = queryByTestId('continue-button')
12 |
13 | expect(continueButton).not.toHaveRole('listitem')
14 | expect(continueButton).toHaveRole('button')
15 |
16 | expect(() => {
17 | expect(continueButton).toHaveRole('listitem')
18 | }).toThrow(/expected element to have role/i)
19 | expect(() => {
20 | expect(continueButton).not.toHaveRole('button')
21 | }).toThrow(/expected element not to have role/i)
22 | })
23 |
24 | it('matches explicit role', () => {
25 | const {queryByTestId} = render(`
26 |
27 |
29 | `)
30 |
31 | const continueButton = queryByTestId('continue-button')
32 |
33 | expect(continueButton).not.toHaveRole('listitem')
34 | expect(continueButton).toHaveRole('button')
35 |
36 | expect(() => {
37 | expect(continueButton).toHaveRole('listitem')
38 | }).toThrow(/expected element to have role/i)
39 | expect(() => {
40 | expect(continueButton).not.toHaveRole('button')
41 | }).toThrow(/expected element not to have role/i)
42 | })
43 |
44 | it('matches multiple explicit roles', () => {
45 | const {queryByTestId} = render(`
46 | Continue
28 |
47 |
49 | `)
50 |
51 | const continueButton = queryByTestId('continue-button')
52 |
53 | expect(continueButton).not.toHaveRole('listitem')
54 | expect(continueButton).toHaveRole('button')
55 | expect(continueButton).toHaveRole('switch')
56 |
57 | expect(() => {
58 | expect(continueButton).toHaveRole('listitem')
59 | }).toThrow(/expected element to have role/i)
60 | expect(() => {
61 | expect(continueButton).not.toHaveRole('button')
62 | }).toThrow(/expected element not to have role/i)
63 | expect(() => {
64 | expect(continueButton).not.toHaveRole('switch')
65 | }).toThrow(/expected element not to have role/i)
66 | })
67 |
68 | // At this point, we might be testing the details of getImplicitAriaRoles, but
69 | // it's good to have a gut check
70 | it('handles implicit roles with multiple conditions', () => {
71 | const {queryByTestId} = render(`
72 | Continue
48 |
73 | Actually a valid link
74 | Not a valid link (missing href)
75 |
76 | `)
77 |
78 | const validLink = queryByTestId('link-valid')
79 | const invalidLink = queryByTestId('link-invalid')
80 |
81 | // valid link has role 'link'
82 | expect(validLink).not.toHaveRole('listitem')
83 | expect(validLink).toHaveRole('link')
84 |
85 | expect(() => {
86 | expect(validLink).toHaveRole('listitem')
87 | }).toThrow(/expected element to have role/i)
88 | expect(() => {
89 | expect(validLink).not.toHaveRole('link')
90 | }).toThrow(/expected element not to have role/i)
91 |
92 | // invalid link has role 'generic'
93 | expect(invalidLink).not.toHaveRole('listitem')
94 | expect(invalidLink).not.toHaveRole('link')
95 | expect(invalidLink).toHaveRole('generic')
96 |
97 | expect(() => {
98 | expect(invalidLink).toHaveRole('listitem')
99 | }).toThrow(/expected element to have role/i)
100 | expect(() => {
101 | expect(invalidLink).toHaveRole('link')
102 | }).toThrow(/expected element to have role/i)
103 | expect(() => {
104 | expect(invalidLink).not.toHaveRole('generic')
105 | }).toThrow(/expected element not to have role/i)
106 | })
107 | })
108 |
--------------------------------------------------------------------------------
/src/__tests__/to-have-selection.js:
--------------------------------------------------------------------------------
1 | import {render} from './helpers/test-utils'
2 |
3 | describe('.toHaveSelection', () => {
4 | test.each(['text', 'password', 'textarea'])(
5 | 'handles selection within form elements',
6 | testId => {
7 | const {queryByTestId} = render(`
8 |
9 |
10 |
11 | `)
12 |
13 | queryByTestId(testId).setSelectionRange(5, 13)
14 | expect(queryByTestId(testId)).toHaveSelection('selected')
15 |
16 | queryByTestId(testId).select()
17 | expect(queryByTestId(testId)).toHaveSelection('text selected text')
18 | },
19 | )
20 |
21 | test.each(['checkbox', 'radio'])(
22 | 'returns empty string for form elements without text',
23 | testId => {
24 | const {queryByTestId} = render(`
25 |
26 |
27 | `)
28 |
29 | queryByTestId(testId).select()
30 | expect(queryByTestId(testId)).toHaveSelection('')
31 | },
32 | )
33 |
34 | test('does not match subset string', () => {
35 | const {queryByTestId} = render(`
36 |
37 | `)
38 |
39 | queryByTestId('text').setSelectionRange(5, 13)
40 | expect(queryByTestId('text')).not.toHaveSelection('select')
41 | expect(queryByTestId('text')).toHaveSelection('selected')
42 | })
43 |
44 | test('accepts any selection when expected selection is missing', () => {
45 | const {queryByTestId} = render(`
46 |
47 | `)
48 |
49 | expect(queryByTestId('text')).not.toHaveSelection()
50 |
51 | queryByTestId('text').setSelectionRange(5, 13)
52 |
53 | expect(queryByTestId('text')).toHaveSelection()
54 | })
55 |
56 | test('throws when form element is not selected', () => {
57 | const {queryByTestId} = render(`
58 |
59 | `)
60 |
61 | expect(() =>
62 | expect(queryByTestId('text')).toHaveSelection(),
63 | ).toThrowErrorMatchingInlineSnapshot(
64 | `
65 | text
98 | `)
99 |
100 | expect(() =>
101 | expect(queryByTestId('text')).toHaveSelection(),
102 | ).toThrowErrorMatchingInlineSnapshot(
103 | `
104 |
137 |
141 | `)
142 |
143 | const selection = queryByTestId('child').ownerDocument.getSelection()
144 | const range = queryByTestId('child').ownerDocument.createRange()
145 | selection.removeAllRanges()
146 | selection.empty()
147 | selection.addRange(range)
148 |
149 | range.selectNodeContents(queryByTestId('child'))
150 |
151 | expect(queryByTestId('child')).toHaveSelection('selected')
152 | expect(queryByTestId('parent')).toHaveSelection('selected')
153 |
154 | range.selectNodeContents(queryByTestId('parent'))
155 |
156 | expect(queryByTestId('child')).toHaveSelection('selected')
157 | expect(queryByTestId('parent')).toHaveSelection('text selected text')
158 |
159 | range.setStart(queryByTestId('prev'), 0)
160 | range.setEnd(queryByTestId('child').childNodes[0], 3)
161 |
162 | expect(queryByTestId('prev')).toHaveSelection('prev')
163 | expect(queryByTestId('child')).toHaveSelection('sel')
164 | expect(queryByTestId('parent')).toHaveSelection('text sel')
165 | expect(queryByTestId('next')).not.toHaveSelection()
166 |
167 | range.setStart(queryByTestId('child').childNodes[0], 3)
168 | range.setEnd(queryByTestId('next').childNodes[0], 2)
169 |
170 | expect(queryByTestId('child')).toHaveSelection('ected')
171 | expect(queryByTestId('parent')).toHaveSelection('ected text')
172 | expect(queryByTestId('prev')).not.toHaveSelection()
173 | expect(queryByTestId('next')).toHaveSelection('ne')
174 | })
175 |
176 | test('throws with information when the expected selection is not string', () => {
177 | const {container} = render(`prev
138 | text selected text
139 | next
140 | 1
`)
178 | const element = container.firstChild
179 | const range = element.ownerDocument.createRange()
180 | range.selectNodeContents(element)
181 | element.ownerDocument.getSelection().addRange(range)
182 |
183 | expect(() =>
184 | expect(element).toHaveSelection(1),
185 | ).toThrowErrorMatchingInlineSnapshot(
186 | `expected selection must be a string or undefined`,
187 | )
188 | })
189 | })
190 |
--------------------------------------------------------------------------------
/src/__tests__/to-have-text-content.js:
--------------------------------------------------------------------------------
1 | import {render} from './helpers/test-utils'
2 |
3 | describe('.toHaveTextContent', () => {
4 | test('handles positive test cases', () => {
5 | const {queryByTestId} = render(`2`)
6 |
7 | expect(queryByTestId('count-value')).toHaveTextContent('2')
8 | expect(queryByTestId('count-value')).toHaveTextContent(2)
9 | expect(queryByTestId('count-value')).toHaveTextContent(/2/)
10 | expect(queryByTestId('count-value')).not.toHaveTextContent('21')
11 | })
12 |
13 | test('handles text nodes', () => {
14 | const {container} = render(`example`)
15 |
16 | expect(container.querySelector('span').firstChild).toHaveTextContent(
17 | 'example',
18 | )
19 | })
20 |
21 | test('handles fragments', () => {
22 | const {asFragment} = render(`example`)
23 |
24 | expect(asFragment()).toHaveTextContent('example')
25 | })
26 |
27 | test('handles negative test cases', () => {
28 | const {queryByTestId} = render(`2`)
29 |
30 | expect(() =>
31 | expect(queryByTestId('count-value2')).toHaveTextContent('2'),
32 | ).toThrowError()
33 |
34 | expect(() =>
35 | expect(queryByTestId('count-value')).toHaveTextContent('3'),
36 | ).toThrowError()
37 | expect(() =>
38 | expect(queryByTestId('count-value')).not.toHaveTextContent('2'),
39 | ).toThrowError()
40 | })
41 |
42 | test('normalizes whitespace by default', () => {
43 | const {container} = render(`
44 |
45 | Step
46 | 1
47 | of
48 | 4
49 |
50 | `)
51 |
52 | expect(container.querySelector('span')).toHaveTextContent('Step 1 of 4')
53 | })
54 |
55 | test('allows whitespace normalization to be turned off', () => {
56 | const {container} = render(` Step 1 of 4`)
57 |
58 | expect(container.querySelector('span')).toHaveTextContent(' Step 1 of 4', {
59 | normalizeWhitespace: false,
60 | })
61 | })
62 |
63 | test('can handle multiple levels', () => {
64 | const {container} = render(`Step 1
65 |
66 | of 4`)
67 |
68 | expect(container.querySelector('#parent')).toHaveTextContent('Step 1 of 4')
69 | })
70 |
71 | test('can handle multiple levels with content spread across decendants', () => {
72 | const {container} = render(`
73 |
74 | Step
75 | 1
76 | of
77 |
78 |
79 | 4
80 |
81 | `)
82 |
83 | expect(container.querySelector('#parent')).toHaveTextContent('Step 1 of 4')
84 | })
85 |
86 | test('does not throw error with empty content', () => {
87 | const {container} = render(``)
88 | expect(container.querySelector('span')).toHaveTextContent('')
89 | })
90 |
91 | test('is case-sensitive', () => {
92 | const {container} = render('Sensitive text')
93 |
94 | expect(container.querySelector('span')).toHaveTextContent('Sensitive text')
95 | expect(container.querySelector('span')).not.toHaveTextContent(
96 | 'sensitive text',
97 | )
98 | })
99 |
100 | test('when matching with empty string and element with content, suggest using toBeEmptyDOMElement instead', () => {
101 | // https://github.com/testing-library/jest-dom/issues/104
102 | const {container} = render('not empty')
103 |
104 | expect(() =>
105 | expect(container.querySelector('span')).toHaveTextContent(''),
106 | ).toThrowError(/toBeEmptyDOMElement\(\)/)
107 | })
108 | })
109 |
--------------------------------------------------------------------------------
/src/__tests__/utils.js:
--------------------------------------------------------------------------------
1 | import {
2 | deprecate,
3 | checkHtmlElement,
4 | checkNode,
5 | HtmlElementTypeError,
6 | NodeTypeError,
7 | toSentence,
8 | } from '../utils'
9 | import document from './helpers/document'
10 |
11 | test('deprecate', () => {
12 | const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
13 | const name = 'test'
14 | const replacement = 'test'
15 | const message = `Warning: ${name} has been deprecated and will be removed in future updates.`
16 |
17 | deprecate(name, replacement)
18 | expect(spy).toHaveBeenCalledWith(message, replacement)
19 |
20 | deprecate(name)
21 | expect(spy).toHaveBeenCalledWith(message, undefined)
22 |
23 | spy.mockRestore()
24 | })
25 |
26 | describe('checkHtmlElement', () => {
27 | let assertionContext
28 | beforeAll(() => {
29 | expect.extend({
30 | fakeMatcher() {
31 | assertionContext = this
32 |
33 | return {pass: true}
34 | },
35 | })
36 |
37 | expect(true).fakeMatcher(true)
38 | })
39 | it('does not throw an error for correct html element', () => {
40 | expect(() => {
41 | const element = document.createElement('p')
42 | checkHtmlElement(element, () => {}, assertionContext)
43 | }).not.toThrow()
44 | })
45 |
46 | it('does not throw an error for correct svg element', () => {
47 | expect(() => {
48 | const element = document.createElementNS(
49 | 'http://www.w3.org/2000/svg',
50 | 'rect',
51 | )
52 | checkHtmlElement(element, () => {}, assertionContext)
53 | }).not.toThrow()
54 | })
55 |
56 | it('does not throw for body', () => {
57 | expect(() => {
58 | checkHtmlElement(document.body, () => {}, assertionContext)
59 | }).not.toThrow()
60 | })
61 |
62 | it('throws for undefined', () => {
63 | expect(() => {
64 | checkHtmlElement(undefined, () => {}, assertionContext)
65 | }).toThrow(HtmlElementTypeError)
66 | })
67 |
68 | it('throws for document', () => {
69 | expect(() => {
70 | checkHtmlElement(document, () => {}, assertionContext)
71 | }).toThrow(HtmlElementTypeError)
72 | })
73 |
74 | it('throws for function', () => {
75 | expect(() => {
76 | checkHtmlElement(
77 | () => {},
78 | () => {},
79 | assertionContext,
80 | )
81 | }).toThrow(HtmlElementTypeError)
82 | })
83 |
84 | it('throws for almost element-like objects', () => {
85 | class FakeObject {}
86 | expect(() => {
87 | checkHtmlElement(
88 | {
89 | ownerDocument: {
90 | defaultView: {HTMLElement: FakeObject, SVGElement: FakeObject},
91 | },
92 | },
93 | () => {},
94 | assertionContext,
95 | )
96 | }).toThrow(HtmlElementTypeError)
97 | })
98 | })
99 |
100 | describe('checkNode', () => {
101 | let assertionContext
102 | beforeAll(() => {
103 | expect.extend({
104 | fakeMatcher() {
105 | assertionContext = this
106 |
107 | return {pass: true}
108 | },
109 | })
110 |
111 | expect(true).fakeMatcher(true)
112 | })
113 | it('does not throw an error for correct html element', () => {
114 | expect(() => {
115 | const element = document.createElement('p')
116 | checkNode(element, () => {}, assertionContext)
117 | }).not.toThrow()
118 | })
119 |
120 | it('does not throw an error for correct svg element', () => {
121 | expect(() => {
122 | const element = document.createElementNS(
123 | 'http://www.w3.org/2000/svg',
124 | 'rect',
125 | )
126 | checkNode(element, () => {}, assertionContext)
127 | }).not.toThrow()
128 | })
129 |
130 | it('does not throw an error for Document fragments', () => {
131 | expect(() => {
132 | const fragment = document.createDocumentFragment()
133 | checkNode(fragment, () => {}, assertionContext)
134 | }).not.toThrow()
135 | })
136 |
137 | it('does not throw an error for text nodes', () => {
138 | expect(() => {
139 | const text = document.createTextNode('foo')
140 | checkNode(text, () => {}, assertionContext)
141 | }).not.toThrow()
142 | })
143 |
144 | it('does not throw for body', () => {
145 | expect(() => {
146 | checkNode(document.body, () => {}, assertionContext)
147 | }).not.toThrow()
148 | })
149 |
150 | it('throws for undefined', () => {
151 | expect(() => {
152 | checkNode(undefined, () => {}, assertionContext)
153 | }).toThrow(NodeTypeError)
154 | })
155 |
156 | it('throws for document', () => {
157 | expect(() => {
158 | checkNode(document, () => {}, assertionContext)
159 | }).toThrow(NodeTypeError)
160 | })
161 |
162 | it('throws for function', () => {
163 | expect(() => {
164 | checkNode(
165 | () => {},
166 | () => {},
167 | assertionContext,
168 | )
169 | }).toThrow(NodeTypeError)
170 | })
171 |
172 | it('throws for almost element-like objects', () => {
173 | class FakeObject {}
174 | expect(() => {
175 | checkNode(
176 | {
177 | ownerDocument: {
178 | defaultView: {Node: FakeObject, SVGElement: FakeObject},
179 | },
180 | },
181 | () => {},
182 | assertionContext,
183 | )
184 | }).toThrow(NodeTypeError)
185 | })
186 | })
187 |
188 | describe('toSentence', () => {
189 | it('turns array into string of comma separated list with default last word connector', () => {
190 | expect(toSentence(['one', 'two', 'three'])).toBe('one, two and three')
191 | })
192 |
193 | it('supports custom word connector', () => {
194 | expect(toSentence(['one', 'two', 'three'], {wordConnector: '; '})).toBe(
195 | 'one; two and three',
196 | )
197 | })
198 |
199 | it('supports custom last word connector', () => {
200 | expect(
201 | toSentence(['one', 'two', 'three'], {lastWordConnector: ' or '}),
202 | ).toBe('one, two or three')
203 | })
204 |
205 | it('turns one element array into string containing first element', () => {
206 | expect(toSentence(['one'])).toBe('one')
207 | })
208 |
209 | it('turns empty array into empty string', () => {
210 | expect(toSentence([])).toBe('')
211 | })
212 | })
213 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import * as extensions from './matchers'
2 |
3 | expect.extend(extensions)
4 |
--------------------------------------------------------------------------------
/src/jest-globals.js:
--------------------------------------------------------------------------------
1 | /* istanbul ignore file */
2 |
3 | import {expect} from '@jest/globals'
4 | import * as extensions from './matchers'
5 |
6 | expect.extend(extensions)
7 |
--------------------------------------------------------------------------------
/src/matchers.js:
--------------------------------------------------------------------------------
1 | export {toBeInTheDOM} from './to-be-in-the-dom'
2 | export {toBeInTheDocument} from './to-be-in-the-document'
3 | export {toBeEmpty} from './to-be-empty'
4 | export {toBeEmptyDOMElement} from './to-be-empty-dom-element'
5 | export {toContainElement} from './to-contain-element'
6 | export {toContainHTML} from './to-contain-html'
7 | export {toHaveTextContent} from './to-have-text-content'
8 | export {toHaveAccessibleDescription} from './to-have-accessible-description'
9 | export {toHaveAccessibleErrorMessage} from './to-have-accessible-errormessage'
10 | export {toHaveRole} from './to-have-role'
11 | export {toHaveAccessibleName} from './to-have-accessible-name'
12 | export {toHaveAttribute} from './to-have-attribute'
13 | export {toHaveClass} from './to-have-class'
14 | export {toHaveStyle} from './to-have-style'
15 | export {toHaveFocus} from './to-have-focus'
16 | export {toHaveFormValues} from './to-have-form-values'
17 | export {toBeVisible} from './to-be-visible'
18 | export {toBeDisabled, toBeEnabled} from './to-be-disabled'
19 | export {toBeRequired} from './to-be-required'
20 | export {toBeInvalid, toBeValid} from './to-be-invalid'
21 | export {toHaveValue} from './to-have-value'
22 | export {toHaveDisplayValue} from './to-have-display-value'
23 | export {toBeChecked} from './to-be-checked'
24 | export {toBePartiallyChecked} from './to-be-partially-checked'
25 | export {toHaveDescription} from './to-have-description'
26 | export {toHaveErrorMessage} from './to-have-errormessage'
27 | export {toHaveSelection} from './to-have-selection'
28 |
--------------------------------------------------------------------------------
/src/to-be-checked.js:
--------------------------------------------------------------------------------
1 | import {roles} from 'aria-query'
2 | import {checkHtmlElement, toSentence} from './utils'
3 |
4 | export function toBeChecked(element) {
5 | checkHtmlElement(element, toBeChecked, this)
6 |
7 | const isValidInput = () => {
8 | return (
9 | element.tagName.toLowerCase() === 'input' &&
10 | ['checkbox', 'radio'].includes(element.type)
11 | )
12 | }
13 |
14 | const isValidAriaElement = () => {
15 | return (
16 | roleSupportsChecked(element.getAttribute('role')) &&
17 | ['true', 'false'].includes(element.getAttribute('aria-checked'))
18 | )
19 | }
20 |
21 | if (!isValidInput() && !isValidAriaElement()) {
22 | return {
23 | pass: false,
24 | message: () =>
25 | `only inputs with type="checkbox" or type="radio" or elements with ${supportedRolesSentence()} and a valid aria-checked attribute can be used with .toBeChecked(). Use .toHaveValue() instead`,
26 | }
27 | }
28 |
29 | const isChecked = () => {
30 | if (isValidInput()) return element.checked
31 | return element.getAttribute('aria-checked') === 'true'
32 | }
33 |
34 | return {
35 | pass: isChecked(),
36 | message: () => {
37 | const is = isChecked() ? 'is' : 'is not'
38 | return [
39 | this.utils.matcherHint(
40 | `${this.isNot ? '.not' : ''}.toBeChecked`,
41 | 'element',
42 | '',
43 | ),
44 | '',
45 | `Received element ${is} checked:`,
46 | ` ${this.utils.printReceived(element.cloneNode(false))}`,
47 | ].join('\n')
48 | },
49 | }
50 | }
51 |
52 | function supportedRolesSentence() {
53 | return toSentence(
54 | supportedRoles().map(role => `role="${role}"`),
55 | {lastWordConnector: ' or '},
56 | )
57 | }
58 |
59 | function supportedRoles() {
60 | return roles.keys().filter(roleSupportsChecked)
61 | }
62 |
63 | function roleSupportsChecked(role) {
64 | return roles.get(role)?.props['aria-checked'] !== undefined
65 | }
66 |
--------------------------------------------------------------------------------
/src/to-be-disabled.js:
--------------------------------------------------------------------------------
1 | import {checkHtmlElement, getTag} from './utils'
2 |
3 | // form elements that support 'disabled'
4 | const FORM_TAGS = [
5 | 'fieldset',
6 | 'input',
7 | 'select',
8 | 'optgroup',
9 | 'option',
10 | 'button',
11 | 'textarea',
12 | ]
13 |
14 | /*
15 | * According to specification:
16 | * If