Skip to content

Commit eb333a6

Browse files
author
Kent C. Dodds
authored
fix: remove deprecated queries (#228)
Closes #223 BREAKING CHANGE: This removes the deprecated queries `ByValue` and `BySelectText`. Use `ByDisplayValue` instead.
1 parent 96f21a5 commit eb333a6

File tree

5 files changed

+37
-113
lines changed

5 files changed

+37
-113
lines changed

‎src/__tests__/__snapshots__/element-queries.js.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`get throws a useful error message 1`] = `
99
`;
1010

1111
exports[`get throws a useful error message 2`] = `
12-
"Unable to find a <select> element with the selected option's text: LucyRicardo
12+
"Unable to find an element with the value: LucyRicardo.
1313
1414
<div>
1515
<div />
@@ -74,7 +74,7 @@ exports[`get throws a useful error message 9`] = `
7474

7575
exports[`get throws a useful error message without DOM in Cypress 1`] = `"Unable to find a label with the text of: LucyRicardo"`;
7676

77-
exports[`get throws a useful error message without DOM in Cypress 2`] = `"Unable to find a <select> element with the selected option's text: LucyRicardo"`;
77+
exports[`get throws a useful error message without DOM in Cypress 2`] = `"Unable to find an element with the value: LucyRicardo."`;
7878

7979
exports[`get throws a useful error message without DOM in Cypress 3`] = `"Unable to find an element with the placeholder text of: LucyRicardo"`;
8080

‎src/__tests__/element-queries.js

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ beforeEach(() => {
88
test('query can return null', () => {
99
const {
1010
queryByLabelText,
11-
queryBySelectText,
11+
queryByDisplayValue,
1212
queryByPlaceholderText,
1313
queryByText,
1414
queryByTestId,
1515
queryByAltText,
1616
} = render('<div />')
1717
expect(queryByTestId('LucyRicardo')).toBeNull()
1818
expect(queryByLabelText('LucyRicardo')).toBeNull()
19-
expect(queryBySelectText('LucyRicardo')).toBeNull()
19+
expect(queryByDisplayValue('LucyRicardo')).toBeNull()
2020
expect(queryByPlaceholderText('LucyRicardo')).toBeNull()
2121
expect(queryByText('LucyRicardo')).toBeNull()
2222
expect(queryByAltText('LucyRicardo')).toBeNull()
@@ -25,25 +25,24 @@ test('query can return null', () => {
2525
test('get throws a useful error message', () => {
2626
const {
2727
getByLabelText,
28-
getBySelectText,
28+
getByDisplayValue,
2929
getByPlaceholderText,
3030
getByText,
3131
getByTestId,
3232
getByAltText,
3333
getByTitle,
34-
getByValue,
3534
getByRole,
3635
} = render('<div />')
3736
expect(() => getByLabelText('LucyRicardo')).toThrowErrorMatchingSnapshot()
38-
expect(() => getBySelectText('LucyRicardo')).toThrowErrorMatchingSnapshot()
37+
expect(() => getByDisplayValue('LucyRicardo')).toThrowErrorMatchingSnapshot()
3938
expect(() =>
4039
getByPlaceholderText('LucyRicardo'),
4140
).toThrowErrorMatchingSnapshot()
4241
expect(() => getByText('LucyRicardo')).toThrowErrorMatchingSnapshot()
4342
expect(() => getByTestId('LucyRicardo')).toThrowErrorMatchingSnapshot()
4443
expect(() => getByAltText('LucyRicardo')).toThrowErrorMatchingSnapshot()
4544
expect(() => getByTitle('LucyRicardo')).toThrowErrorMatchingSnapshot()
46-
expect(() => getByValue('LucyRicardo')).toThrowErrorMatchingSnapshot()
45+
expect(() => getByDisplayValue('LucyRicardo')).toThrowErrorMatchingSnapshot()
4746
expect(() => getByRole('LucyRicardo')).toThrowErrorMatchingSnapshot()
4847
})
4948

@@ -216,20 +215,20 @@ test('query/get title element of SVG', () => {
216215
})
217216

218217
test('query/get element by its value', () => {
219-
const {getByValue, queryByValue} = render(`
218+
const {getByDisplayValue, queryByDisplayValue} = render(`
220219
<div>
221220
<input placeholder="name" type="text"/>
222221
<input placeholder="lastname" type="text" value="Norris"/>
223222
<input placeholder="email" type="text"/>
224223
</div>
225224
`)
226225

227-
expect(getByValue('Norris').placeholder).toEqual('lastname')
228-
expect(queryByValue('Norris').placeholder).toEqual('lastname')
226+
expect(getByDisplayValue('Norris').placeholder).toEqual('lastname')
227+
expect(queryByDisplayValue('Norris').placeholder).toEqual('lastname')
229228
})
230229

231230
test('query/get select by text with the default option selected', () => {
232-
const {getBySelectText, queryBySelectText} = render(`
231+
const {getByDisplayValue, queryByDisplayValue} = render(`
233232
<select id="state-select">
234233
<option value="">State</option>
235234
<option value="AL">Alabama</option>
@@ -238,12 +237,12 @@ test('query/get select by text with the default option selected', () => {
238237
</select>
239238
`)
240239

241-
expect(getBySelectText('State').id).toEqual('state-select')
242-
expect(queryBySelectText('State').id).toEqual('state-select')
240+
expect(getByDisplayValue('State').id).toEqual('state-select')
241+
expect(queryByDisplayValue('State').id).toEqual('state-select')
243242
})
244243

245244
test('query/get select by text with one option selected', () => {
246-
const {getBySelectText, queryBySelectText} = render(`
245+
const {getByDisplayValue, queryByDisplayValue} = render(`
247246
<select id="state-select">
248247
<option value="">State</option>
249248
<option value="AL">Alabama</option>
@@ -252,12 +251,12 @@ test('query/get select by text with one option selected', () => {
252251
</select>
253252
`)
254253

255-
expect(getBySelectText('Alaska').id).toEqual('state-select')
256-
expect(queryBySelectText('Alaska').id).toEqual('state-select')
254+
expect(getByDisplayValue('Alaska').id).toEqual('state-select')
255+
expect(queryByDisplayValue('Alaska').id).toEqual('state-select')
257256
})
258257

259258
test('query/get select by text with multiple options selected', () => {
260-
const {getBySelectText, queryBySelectText} = render(`
259+
const {getByDisplayValue, queryByDisplayValue} = render(`
261260
<select multiple id="state-select">
262261
<option value="">State</option>
263262
<option selected value="AL">Alabama</option>
@@ -266,8 +265,8 @@ test('query/get select by text with multiple options selected', () => {
266265
</select>
267266
`)
268267

269-
expect(getBySelectText('Alabama').id).toEqual('state-select')
270-
expect(queryBySelectText('Alaska').id).toEqual('state-select')
268+
expect(getByDisplayValue('Alabama').id).toEqual('state-select')
269+
expect(queryByDisplayValue('Alaska').id).toEqual('state-select')
271270
})
272271

273272
describe('query by test id', () => {
@@ -305,7 +304,7 @@ test('getAll* matchers return an array', () => {
305304
getAllByAltText,
306305
getAllByTestId,
307306
getAllByLabelText,
308-
getAllBySelectText,
307+
getAllByDisplayValue,
309308
getAllByPlaceholderText,
310309
getAllByText,
311310
getAllByRole,
@@ -343,8 +342,8 @@ test('getAll* matchers return an array', () => {
343342
expect(getAllByTestId('poster')).toHaveLength(3)
344343
expect(getAllByPlaceholderText(/The Rock/)).toHaveLength(1)
345344
expect(getAllByLabelText('User Name')).toHaveLength(1)
346-
expect(getAllBySelectText('Japanese cars')).toHaveLength(1)
347-
expect(getAllBySelectText(/cars$/)).toHaveLength(2)
345+
expect(getAllByDisplayValue('Japanese cars')).toHaveLength(1)
346+
expect(getAllByDisplayValue(/cars$/)).toHaveLength(2)
348347
expect(getAllByText(/^where/i)).toHaveLength(1)
349348
expect(getAllByRole(/container/i)).toHaveLength(1)
350349
})
@@ -354,11 +353,10 @@ test('getAll* matchers throw for 0 matches', () => {
354353
getAllByAltText,
355354
getAllByTestId,
356355
getAllByLabelText,
357-
getAllBySelectText,
356+
getAllByDisplayValue,
358357
getAllByPlaceholderText,
359358
getAllByText,
360359
getAllByRole,
361-
getAllByDisplayValue,
362360
} = render(`
363361
<div role="container">
364362
<label>No Matches Please</label>
@@ -369,7 +367,7 @@ test('getAll* matchers throw for 0 matches', () => {
369367
expect(() => getAllByAltText('nope')).toThrow()
370368
expect(() => getAllByLabelText('nope')).toThrow()
371369
expect(() => getAllByLabelText('no matches please')).toThrow()
372-
expect(() => getAllBySelectText('nope')).toThrow()
370+
expect(() => getAllByDisplayValue('nope')).toThrow()
373371
expect(() => getAllByPlaceholderText('nope')).toThrow()
374372
expect(() => getAllByText('nope')).toThrow()
375373
expect(() => getAllByRole('nope')).toThrow()
@@ -381,7 +379,7 @@ test('queryAll* matchers return an array for 0 matches', () => {
381379
queryAllByAltText,
382380
queryAllByTestId,
383381
queryAllByLabelText,
384-
queryAllBySelectText,
382+
queryAllByDisplayValue,
385383
queryAllByPlaceholderText,
386384
queryAllByText,
387385
queryAllByRole,
@@ -392,7 +390,7 @@ test('queryAll* matchers return an array for 0 matches', () => {
392390
expect(queryAllByTestId('nope')).toHaveLength(0)
393391
expect(queryAllByAltText('nope')).toHaveLength(0)
394392
expect(queryAllByLabelText('nope')).toHaveLength(0)
395-
expect(queryAllBySelectText('nope')).toHaveLength(0)
393+
expect(queryAllByDisplayValue('nope')).toHaveLength(0)
396394
expect(queryAllByPlaceholderText('nope')).toHaveLength(0)
397395
expect(queryAllByText('nope')).toHaveLength(0)
398396
expect(queryAllByRole('nope')).toHaveLength(0)
@@ -560,24 +558,23 @@ test('get throws a useful error message without DOM in Cypress', () => {
560558
document.defaultView.Cypress = {}
561559
const {
562560
getByLabelText,
563-
getBySelectText,
564561
getByPlaceholderText,
565562
getByText,
566563
getByTestId,
567564
getByAltText,
568565
getByTitle,
569-
getByValue,
566+
getByDisplayValue,
570567
} = render('<div />')
571568
expect(() => getByLabelText('LucyRicardo')).toThrowErrorMatchingSnapshot()
572-
expect(() => getBySelectText('LucyRicardo')).toThrowErrorMatchingSnapshot()
569+
expect(() => getByDisplayValue('LucyRicardo')).toThrowErrorMatchingSnapshot()
573570
expect(() =>
574571
getByPlaceholderText('LucyRicardo'),
575572
).toThrowErrorMatchingSnapshot()
576573
expect(() => getByText('LucyRicardo')).toThrowErrorMatchingSnapshot()
577574
expect(() => getByTestId('LucyRicardo')).toThrowErrorMatchingSnapshot()
578575
expect(() => getByAltText('LucyRicardo')).toThrowErrorMatchingSnapshot()
579576
expect(() => getByTitle('LucyRicardo')).toThrowErrorMatchingSnapshot()
580-
expect(() => getByValue('LucyRicardo')).toThrowErrorMatchingSnapshot()
577+
expect(() => getByDisplayValue('LucyRicardo')).toThrowErrorMatchingSnapshot()
581578
})
582579

583580
test('getByText ignores script tags by default', () => {

‎src/__tests__/text-matchers.js

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,14 @@ cases(
3939
query: `Dwayne 'The Rock' Johnson`,
4040
queryFn: `queryAllByPlaceholderText`,
4141
},
42-
queryAllBySelectText: {
42+
'queryAllByDisplayValue (for select)': {
4343
dom: `
4444
<select>
4545
<option>Option 1</option>
4646
<option>Option 2</option>
4747
</select>`,
4848
query: `Option 1`,
49-
queryFn: `queryAllBySelectText`,
49+
queryFn: `queryAllByDisplayValue`,
5050
},
5151
queryAllByText: {
5252
dom: `<p>Some content</p>`,
@@ -99,14 +99,14 @@ cases(
9999
query: /^Dwayne/,
100100
queryFn: `queryAllByPlaceholderText`,
101101
},
102-
queryAllBySelectText: {
102+
'queryAllByDisplayValue (for select)': {
103103
dom: `
104104
<select>
105105
<option> Option 1 </option>
106106
<option>Option 2</option>
107107
</select>`,
108108
query: `Option 1`,
109-
queryFn: `queryAllBySelectText`,
109+
queryFn: `queryAllByDisplayValue`,
110110
},
111111
queryAllByText: {
112112
dom: `
@@ -161,14 +161,14 @@ cases(
161161
query: `Dwayne 'The Rock' Johnson`,
162162
queryFn: `queryAllByPlaceholderText`,
163163
},
164-
queryAllBySelectText: {
164+
'queryAllByDisplayValue (for select)': {
165165
dom: `
166166
<select>
167167
<option>Option 1</option>
168168
<option>Option 2</option>
169169
</select>`,
170170
query: `Option 1`,
171-
queryFn: `queryAllBySelectText`,
171+
queryFn: `queryAllByDisplayValue`,
172172
},
173173
queryAllByLabelText: {
174174
dom: `
@@ -235,9 +235,9 @@ cases(
235235
dom: `<input placeholder="User ${LRM}name" />`,
236236
queryFn: 'queryAllByPlaceholderText',
237237
},
238-
queryAllBySelectText: {
238+
'queryAllByDisplayValue (for select)': {
239239
dom: `<select><option>User ${LRM}name</option></select>`,
240-
queryFn: 'queryAllBySelectText',
240+
queryFn: 'queryAllByDisplayValue',
241241
},
242242
queryAllByText: {
243243
dom: `<div>User ${LRM}name</div>`,
@@ -251,10 +251,6 @@ cases(
251251
dom: `<div title="User ${LRM}name" />`,
252252
queryFn: 'queryAllByTitle',
253253
},
254-
queryAllByValue: {
255-
dom: `<input value="User ${LRM}name" />`,
256-
queryFn: 'queryAllByValue',
257-
},
258254
queryAllByDisplayValue: {
259255
dom: `<input value="User ${LRM}name" />`,
260256
queryFn: 'queryAllByDisplayValue',

‎src/queries.js

Lines changed: 0 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -137,27 +137,6 @@ function queryByTitle(...args) {
137137
return firstResultOrNull(queryAllByTitle, ...args)
138138
}
139139

140-
function queryAllBySelectText(
141-
container,
142-
text,
143-
{exact = true, collapseWhitespace, trim, normalizer} = {},
144-
) {
145-
const matcher = exact ? matches : fuzzyMatches
146-
const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer})
147-
return Array.from(container.querySelectorAll('select')).filter(selectNode => {
148-
const selectedOptions = Array.from(selectNode.options).filter(
149-
option => option.selected,
150-
)
151-
return selectedOptions.some(optionNode =>
152-
matcher(getNodeText(optionNode), optionNode, text, matchNormalizer),
153-
)
154-
})
155-
}
156-
157-
function queryBySelectText(...args) {
158-
return firstResultOrNull(queryAllBySelectText, ...args)
159-
}
160-
161140
function getTestIdAttribute() {
162141
return getConfig().testIdAttribute
163142
}
@@ -168,8 +147,6 @@ const queryByTestId = (...args) =>
168147
queryByAttribute(getTestIdAttribute(), ...args)
169148
const queryAllByTestId = (...args) =>
170149
queryAllByAttribute(getTestIdAttribute(), ...args)
171-
const queryByValue = queryByAttribute.bind(null, 'value')
172-
const queryAllByValue = queryAllByAttribute.bind(null, 'value')
173150
const queryByRole = queryByAttribute.bind(null, 'role')
174151
const queryAllByRole = queryAllByAttribute.bind(null, 'role')
175152

@@ -251,21 +228,6 @@ function getByTitle(...args) {
251228
return firstResultOrNull(getAllByTitle, ...args)
252229
}
253230

254-
function getAllByValue(container, value, ...rest) {
255-
const els = queryAllByValue(container, value, ...rest)
256-
if (!els.length) {
257-
throw getElementError(
258-
`Unable to find an element with the value: ${value}.`,
259-
container,
260-
)
261-
}
262-
return els
263-
}
264-
265-
function getByValue(...args) {
266-
return firstResultOrNull(getAllByValue, ...args)
267-
}
268-
269231
function getAllByPlaceholderText(container, text, ...rest) {
270232
const els = queryAllByPlaceholderText(container, text, ...rest)
271233
if (!els.length) {
@@ -346,21 +308,6 @@ function getByRole(...args) {
346308
return firstResultOrNull(getAllByRole, ...args)
347309
}
348310

349-
function getAllBySelectText(container, text, ...rest) {
350-
const els = queryAllBySelectText(container, text, ...rest)
351-
if (!els.length) {
352-
throw getElementError(
353-
`Unable to find a <select> element with the selected option's text: ${text}`,
354-
container,
355-
)
356-
}
357-
return els
358-
}
359-
360-
function getBySelectText(...args) {
361-
return firstResultOrNull(getAllBySelectText, ...args)
362-
}
363-
364311
function getAllByDisplayValue(container, value, ...rest) {
365312
const els = queryAllByDisplayValue(container, value, ...rest)
366313
if (!els.length) {
@@ -425,10 +372,6 @@ export {
425372
queryAllByAltText,
426373
getByAltText,
427374
getAllByAltText,
428-
queryBySelectText,
429-
queryAllBySelectText,
430-
getBySelectText,
431-
getAllBySelectText,
432375
queryByTestId,
433376
queryAllByTestId,
434377
getByTestId,
@@ -437,10 +380,6 @@ export {
437380
queryAllByTitle,
438381
getByTitle,
439382
getAllByTitle,
440-
queryByValue,
441-
queryAllByValue,
442-
getByValue,
443-
getAllByValue,
444383
queryByDisplayValue,
445384
queryAllByDisplayValue,
446385
getByDisplayValue,

0 commit comments

Comments
 (0)