|
1 | | -/// <reference types="cypress" /> |
2 | | -describe('query* dom-testing-library commands', () => { |
| 1 | +describe('get* queries should error', () => { |
3 | 2 | beforeEach(() => { |
4 | | - cy.visit('cypress/fixtures/test-app/') |
| 3 | + cy.visit('cypress/fixtures/test-app/') |
5 | 4 | }) |
6 | 5 |
|
7 | | - // Test each of the types of queries: LabelText, PlaceholderText, Text, DisplayValue, AltText, Title, Role, TestId |
| 6 | + const queryPrefixes = ['By', 'AllBy'] |
| 7 | + const queryTypes = ['LabelText', 'PlaceholderText', 'Text', 'DisplayValue', 'AltText', 'Title', 'Role', 'TestId'] |
8 | 8 |
|
9 | | - it('queryByLabelText', () => { |
10 | | - cy.queryByLabelText('Label 1') |
11 | | - .click() |
12 | | - .type('Hello Input Labelled By Id') |
13 | | - }) |
14 | | - |
15 | | - it('queryAllByLabelText', () => { |
16 | | - cy.queryAllByLabelText(/^Label \d$/).should('have.length', 2) |
17 | | - }) |
18 | | - |
19 | | - it('queryByPlaceholderText', () => { |
20 | | - cy.queryByPlaceholderText('Input 1') |
21 | | - .click() |
22 | | - .type('Hello Placeholder') |
23 | | - }) |
| 9 | + queryPrefixes.forEach(queryPrefix => { |
| 10 | + queryTypes.forEach(queryType => { |
| 11 | + const obsoleteQueryName = `query${queryPrefix + queryType}`; |
| 12 | + const preferredQueryName = `find${queryPrefix + queryType}`; |
| 13 | + it(`${obsoleteQueryName} should error and suggest using ${preferredQueryName}`, () => { |
24 | 14 |
|
25 | | - it('queryAllByPlaceholderText', () => { |
26 | | - cy.queryAllByPlaceholderText(/^Input \d$/).should('have.length', 2) |
27 | | - }) |
| 15 | + const errorMessage = `You used '${obsoleteQueryName}' which has been removed from Cypress Testing Library because it does not make sense in this context. Please use '${preferredQueryName}' instead.` |
| 16 | + cy.on('fail', err => { |
| 17 | + expect(err.message).to.eq(errorMessage) |
| 18 | + }) |
28 | 19 |
|
29 | | - it('queryByText', () => { |
30 | | - cy.queryByText('Button Text 1') |
31 | | - .click() |
32 | | - .should('contain', 'Button Clicked') |
33 | | - }) |
| 20 | + cy[`${obsoleteQueryName}`]('Irrelevant') |
| 21 | + }) |
34 | 22 |
|
35 | | - it('queryAllByText', () => { |
36 | | - cy.queryAllByText(/^Button Text \d$/) |
37 | | - .should('have.length', 2) |
38 | | - .click({ multiple: true }) |
39 | | - .should('contain', 'Button Clicked') |
40 | | - }) |
| 23 | + it(`${obsoleteQueryName} should not log more than once`, () => { |
41 | 24 |
|
42 | | - it('queryByDisplayValue', () => { |
43 | | - cy.queryByDisplayValue('Display Value 1') |
44 | | - .click() |
45 | | - .clear() |
46 | | - .type('Some new text') |
47 | | - }) |
48 | | - |
49 | | - it('queryAllByDisplayValue', () => { |
50 | | - cy.queryAllByDisplayValue(/^Display Value \d$/) |
51 | | - .should('have.length', 2) |
52 | | - }) |
53 | | - |
54 | | - it('queryByAltText', () => { |
55 | | - cy.queryByAltText('Image Alt Text 1').click() |
56 | | - }) |
57 | | - |
58 | | - it('queryAllByAltText', () => { |
59 | | - cy.queryAllByAltText(/^Image Alt Text \d$/).should('have.length', 2) |
60 | | - }) |
| 25 | + let logCount = 0 |
| 26 | + cy.on('log:added', (attrs, log) => { |
| 27 | + if (log.get('name') === obsoleteQueryName) { |
| 28 | + logCount = logCount + 1 |
| 29 | + } |
| 30 | + }) |
61 | 31 |
|
62 | | - it('queryByTitle', () => { |
63 | | - cy.queryByTitle('Title 1').click() |
64 | | - }) |
65 | | - |
66 | | - it('queryAllByTitle', () => { |
67 | | - cy.queryAllByTitle(/^Title \d$/).should('have.length', 2) |
68 | | - }) |
69 | | - |
70 | | - it('queryByRole', () => { |
71 | | - cy.queryByRole('dialog').click() |
72 | | - }) |
73 | | - |
74 | | - it('queryAllByRole', () => { |
75 | | - cy.queryAllByRole(/^dialog/).should('have.length', 2) |
76 | | - }) |
77 | | - |
78 | | - it('queryByTestId', () => { |
79 | | - cy.queryByTestId('image-with-random-alt-tag-1').click() |
80 | | - }) |
81 | | - |
82 | | - it('queryAllByTestId', () => { |
83 | | - cy.queryAllByTestId(/^image-with-random-alt-tag-\d$/).should('have.length', 2) |
84 | | - }) |
85 | | - |
86 | | - /* Test the behaviour around these queries */ |
87 | | - |
88 | | - it('queryByText with .should(\'not.exist\')', () => { |
89 | | - cy.queryAllByText(/^Button Text \d$/).should('exist') |
90 | | - cy.queryByText('Non-existing Button Text', {timeout: 100}).should('not.exist') |
91 | | - }) |
| 32 | + cy.on('fail', _ => { |
| 33 | + expect(logCount).to.equal(1) |
| 34 | + cy.removeAllListeners('log:added') |
| 35 | + }) |
92 | 36 |
|
93 | | - it('queryByText within', () => { |
94 | | - cy.get('#nested').within(() => { |
95 | | - cy.queryByText('Button Text 2').click() |
96 | | - }) |
97 | | - }) |
98 | | - |
99 | | - it('queryByText should set the Cypress element to the found element', (done) => { |
100 | | - // This test is a little strange since snapshots show what element |
101 | | - // is selected, but snapshots themselves don't give access to those |
102 | | - // elements. I had to make the implementation specific so that the `$el` |
103 | | - // is the `subject` when the log is added and the `$el` is the `value` |
104 | | - // when the log is changed. It would be better to extract the `$el` from |
105 | | - // each snapshot |
106 | | - |
107 | | - cy.on('log:changed', (attrs, log) => { |
108 | | - if (log.get('name') === 'queryByText') { |
109 | | - expect(log.get('$el')).to.have.text('Button Text 1') |
110 | | - done() |
111 | | - } |
112 | | - }) |
113 | | - |
114 | | - cy.queryByText('Button Text 1') |
115 | | - }) |
116 | | - |
117 | | - it('query* will return immediately, and never retry', () => { |
118 | | - cy.queryByText('Next Page').click() |
119 | | - |
120 | | - const errorMessage = `Unable to find an element with the text: New Page Loaded.` |
121 | | - cy.on('fail', err => { |
122 | | - expect(err.message).to.contain(errorMessage) |
123 | | - }) |
124 | | - |
125 | | - cy.queryByText('New Page Loaded', { timeout: 300 }).should('exist') |
126 | | - }) |
127 | | - |
128 | | - it('query* in container', () => { |
129 | | - return cy.get('#nested') |
130 | | - .then(subject => { |
131 | | - cy.queryByText(/^Button Text/, {container: subject}).click() |
| 37 | + cy[`${obsoleteQueryName}`]('Irrelevant') |
| 38 | + }) |
132 | 39 | }) |
133 | 40 | }) |
134 | | - |
135 | | - it('queryByText can return no result, and should not error', () => { |
136 | | - const text = 'Supercalifragilistic' |
137 | | - |
138 | | - cy.queryByText(text, {timeout: 100}) |
139 | | - .should('have.length', 0) |
140 | | - .and('not.exist') |
141 | | - }) |
142 | | - |
143 | | - it('queryAllByText can return no results message should not error', () => { |
144 | | - const text = 'Supercalifragilistic' |
145 | | - |
146 | | - cy.queryAllByText(text, {timeout: 100}) |
147 | | - .should('have.length', 0) |
148 | | - .and('not.exist') |
149 | | - }) |
150 | | - |
151 | | - it('queryAllByText should forward existence error message from @testing-library/dom', () => { |
152 | | - const text = 'Supercalifragilistic' |
153 | | - const errorMessage = `Unable to find an element with the text: Supercalifragilistic.` |
154 | | - cy.on('fail', err => { |
155 | | - expect(err.message).to.contain(errorMessage) |
156 | | - }) |
157 | | - |
158 | | - cy.queryAllByText(text, {timeout: 100}).should('exist') |
159 | | - }) |
160 | | - |
161 | | - it('queryByLabelText should forward useful error messages from @testing-library/dom', () => { |
162 | | - const errorMessage = `Found a label with the text of: Label 3, however no form control was found associated to that label.` |
163 | | - cy.on('fail', err => { |
164 | | - expect(err.message).to.contain(errorMessage) |
165 | | - }) |
166 | | - |
167 | | - cy.queryByLabelText('Label 3', {timeout: 100}).should('exist') |
168 | | - }) |
169 | | - |
170 | | - it('queryAllByText should default to Cypress non-existence error message', () => { |
171 | | - const errorMessage = `Expected <button> not to exist in the DOM, but it was continuously found.` |
172 | | - cy.on('fail', err => { |
173 | | - expect(err.message).to.contain(errorMessage) |
174 | | - }) |
175 | | - |
176 | | - cy.queryAllByText('Button Text 1', {timeout: 100}) |
177 | | - .should('not.exist') |
178 | | - }) |
179 | | - |
180 | | - it('queryByText finding multiple items should error', () => { |
181 | | - const errorMessage = `Found multiple elements with the text: /^Button Text/i\n\n(If this is intentional, then use the \`*AllBy*\` variant of the query (like \`queryAllByText\`, \`getAllByText\`, or \`findAllByText\`)).` |
182 | | - cy.on('fail', err => { |
183 | | - expect(err.message).to.contain(errorMessage) |
184 | | - }) |
185 | | - |
186 | | - cy.queryByText(/^Button Text/i) |
187 | | - }) |
188 | 41 | }) |
189 | 42 |
|
190 | 43 | /* global cy */ |
0 commit comments