You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
feat(queryBySelectText): add get/query by select text (#106)
<!--
Thanks for your interest in the project. Bugs filed and PRs submitted are appreciated!
Please make sure that you are familiar with and follow the Code of Conduct for
this project (found in the CODE_OF_CONDUCT.md file).
Also, please make sure you're familiar with and follow the instructions in the
contributing guidelines (found in the CONTRIBUTING.md file).
If you're new to contributing to open source projects, you might find this free
video course helpful: http://kcd.im/pull-request
Please fill out the information below to expedite the review and (hopefully)
merge of your pull request!
-->
<!-- What changes are being made? (What feature/bug is being fixed here?) -->
**What**:
Add methods to access a `<select>` element by its selected option's text value.
<!-- Why are these changes necessary? -->
**Why**:
The first `<option>` is commonly used in `<select>` elements, like a placeholder attribute is used for text inputs. What the user sees is the text value of the first option, but it's not possible to access the `<select>` element given that text value. This PR provides methods to access the `<select>` element in that situation. Closes#104.
<!-- How were these changes implemented? -->
**How**:
`queryBySelectText()`, `queryAllBySelectText()`, `getBySelectText()`, and `getAllBySelectText()` were implemented.
<!-- Have you done all of these things? -->
**Checklist**:
<!-- add "N/A" to the end of each line that's irrelevant to your changes -->
<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
- [x] Documentation
- [x] Tests
- [x] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->
- [x] Added myself to contributors table <!-- this is optional, see the contributing guidelines for instructions -->
<!-- feel free to add additional comments -->
Thank you for making an excellent testing library. Happy to be contributing! 😄
> NOTE: a placeholder is not a good substitute for a label so you should
257
258
> generally use `getByLabelText` instead.
258
259
260
+
### `getBySelectText`
261
+
262
+
```typescript
263
+
getBySelectText(
264
+
container: HTMLElement,
265
+
text: TextMatch,
266
+
options?: {
267
+
exact?: boolean=true,
268
+
collapseWhitespace?: boolean=true,
269
+
trim?: boolean=true,
270
+
}): HTMLElement
271
+
```
272
+
273
+
This will search for a `<select>` whose selected `<option>` matches the given [`TextMatch`](#textmatch). This would find the `<select>` node in a situation
274
+
where the first value acts as a sort of placeholder for the dropdown.
275
+
276
+
```javascript
277
+
// <select>
278
+
// <option value="">Day of the Week</option>
279
+
// <option value="1">Monday</option>
280
+
// <option value="2">Tuesday</option>
281
+
// <option value="3">Wednesday</option>
282
+
// </select>
283
+
constselectNode=getBySelectText(container, 'Day of the Week')
284
+
```
285
+
286
+
> Note: It is highly preferred to use `getByLabelText` over this method. This
287
+
> method should only be used in the event where there is no label text available.
288
+
259
289
### `getByText`
260
290
261
291
```typescript
@@ -278,7 +308,7 @@ matching the given [`TextMatch`](#textmatch).
"Unable to find an element with the placeholder text of: LucyRicardo
12
+
"Unable to find a <select> element with the selected option's text: LucyRicardo
13
13
14
14
[36m<div>[39m
15
15
[36m<div />[39m
16
16
[36m</div>[39m"
17
17
`;
18
18
19
19
exports[`get throws a useful error message 3`] = `
20
-
"Unable to find an element with the text: LucyRicardo. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
20
+
"Unable to find an element with the placeholder text of: LucyRicardo
21
21
22
22
[36m<div>[39m
23
23
[36m<div />[39m
24
24
[36m</div>[39m"
25
25
`;
26
26
27
27
exports[`get throws a useful error message 4`] = `
28
-
"Unable to find an element by: [data-testid=\\"LucyRicardo\\"]
28
+
"Unable to find an element with the text: LucyRicardo. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
29
29
30
30
[36m<div>[39m
31
31
[36m<div />[39m
32
32
[36m</div>[39m"
33
33
`;
34
34
35
35
exports[`get throws a useful error message 5`] = `
36
-
"Unable to find an element with the alt text: LucyRicardo
36
+
"Unable to find an element by: [data-testid=\\"LucyRicardo\\"]
37
37
38
38
[36m<div>[39m
39
39
[36m<div />[39m
40
40
[36m</div>[39m"
41
41
`;
42
42
43
43
exports[`get throws a useful error message 6`] = `
44
-
"Unable to find an element with the title: LucyRicardo.
44
+
"Unable to find an element with the alt text: LucyRicardo
45
45
46
46
[36m<div>[39m
47
47
[36m<div />[39m
48
48
[36m</div>[39m"
49
49
`;
50
50
51
51
exports[`get throws a useful error message 7`] = `
52
-
"Unable to find an element with the value: LucyRicardo.
52
+
"Unable to find an element with the title: LucyRicardo.
53
53
54
54
[36m<div>[39m
55
55
[36m<div />[39m
56
56
[36m</div>[39m"
57
57
`;
58
58
59
59
exports[`get throws a useful error message 8`] = `
60
+
"Unable to find an element with the value: LucyRicardo.
61
+
62
+
[36m<div>[39m
63
+
[36m<div />[39m
64
+
[36m</div>[39m"
65
+
`;
66
+
67
+
exports[`get throws a useful error message 9`] = `
exports[`get throws a useful error message without DOM in Cypress 1`] = `"Unable to find a label with the text of: LucyRicardo"`;
68
76
69
-
exports[`get throws a useful error message without DOM in Cypress 2`] =`"Unable to find an element with the placeholder text of: LucyRicardo"`;
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"`;
78
+
79
+
exports[`get throws a useful error message without DOM in Cypress 3`] = `"Unable to find an element with the placeholder text of: LucyRicardo"`;
70
80
71
-
exports[`get throws a useful error message without DOM in Cypress 3`] =`"Unable to find an element with the text: LucyRicardo. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible."`;
81
+
exports[`get throws a useful error message without DOM in Cypress 4`] = `"Unable to find an element with the text: LucyRicardo. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible."`;
72
82
73
-
exports[`get throws a useful error message without DOM in Cypress 4`] =`"Unable to find an element by: [data-testid=\\"LucyRicardo\\"]"`;
83
+
exports[`get throws a useful error message without DOM in Cypress 5`] = `"Unable to find an element by: [data-testid=\\"LucyRicardo\\"]"`;
74
84
75
-
exports[`get throws a useful error message without DOM in Cypress 5`] =`"Unable to find an element with the alt text: LucyRicardo"`;
85
+
exports[`get throws a useful error message without DOM in Cypress 6`] = `"Unable to find an element with the alt text: LucyRicardo"`;
76
86
77
-
exports[`get throws a useful error message without DOM in Cypress 6`] =`"Unable to find an element with the title: LucyRicardo."`;
87
+
exports[`get throws a useful error message without DOM in Cypress 7`] = `"Unable to find an element with the title: LucyRicardo."`;
78
88
79
-
exports[`get throws a useful error message without DOM in Cypress 7`] =`"Unable to find an element with the value: LucyRicardo."`;
89
+
exports[`get throws a useful error message without DOM in Cypress 8`] = `"Unable to find an element with the value: LucyRicardo."`;
80
90
81
91
exports[`label with no form control 1`] = `
82
92
"Found a label with the text of: /alone/, however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly.
0 commit comments