Skip to content

Commit 51cad6a

Browse files
equimanequiman
authoredApr 18, 2023
Merge pull request #5 from deinsoftware/dev
Dev
·
v1.0.0v0.0.6
2 parents 7730a8a + 28200b9 commit 51cad6a

File tree

6 files changed

+203
-117
lines changed

6 files changed

+203
-117
lines changed
 

‎.vscode/settings.json

+17-16
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
{
22
"cSpell.words": [
33
"beus",
4+
"brc",
5+
"brcc",
6+
"brh",
7+
"brhl",
8+
"bro",
9+
"bron",
10+
"bteew",
11+
"btesw",
12+
"btew",
13+
"btf",
14+
"bti",
15+
"bts",
16+
"btsi",
17+
"btsw",
418
"deinsoftware",
519
"Equiman",
6-
"gabr",
7-
"gabro",
8-
"gbrc",
9-
"gbrcc",
10-
"gbrh",
11-
"gbrhl",
12-
"gbro",
13-
"gbteew",
14-
"gbtesw",
15-
"gbtew",
16-
"gbtf",
17-
"gbti",
18-
"gbts",
19-
"gbtsi",
20-
"gbtsw",
21-
"github",
20+
"ithub",
2221
"itrh",
2322
"itue",
2423
"matc",
2524
"paypal",
2625
"rewi",
2726
"rswi",
2827
"sltp",
28+
"SWPM",
29+
"testid",
2930
"volta"
3031
],
3132
"markdownlint.config": {

‎CHANGELOG.md

+11
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,17 @@ Fixed for any bug fixes.
99
Security to invite users to upgrade in case of vulnerabilities.
1010
-->
1111

12+
## 0.0.6 - 2023/04/17
13+
14+
### Added
15+
16+
- cheat sheet helper section on README
17+
- wait for snippets
18+
19+
### Changed
20+
21+
- snippets with multiple search variants to avoid repetition
22+
1223
## 0.0.5 - 2023/04/16
1324

1425
### Added

‎README.md

+72-29
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,13 @@ The quick and easy way to create and use Testing Library with [VS Code](https://
1919
- [Extension Manager](#extension-manager)
2020
- [Marketplace](#marketplace)
2121
- [Supported Languages](#supported-languages)
22+
- [Cheat Sheet](#cheat-sheet)
2223
- [Snippets](#snippets)
2324
- [Import](#import)
2425
- [User Event](#user-event)
2526
- [Queries](#queries)
2627
- [Regex](#regex)
28+
- [Wait](#wait)
2729
- [Keyboard](#keyboard)
2830
- [Settings](#settings)
2931
- [About](#about)
@@ -68,6 +70,32 @@ Open the extension manager with <kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>X</kbd> (W
6870

6971
---
7072

73+
## Cheat Sheet
74+
75+
| Search Variants | Result |
76+
| ---------------- | --------------------------------------------- |
77+
| `getBy`... | `Element` or `Error` |
78+
| `getAllBy`... | `Element[]` or `Error` |
79+
| `queryBy`... | `Element` or `null` |
80+
| `queryAllBy`... | `Element[]` or `null` |
81+
| `findBy`... | `Promise<Element>` or `Promise<rejection>` |
82+
| `findAllBy`... | `Promise<Element[]>` or `Promise<rejection>` |
83+
84+
| Search Types | Result |
85+
| --------------------- | --------------------------------------------- |
86+
| ...`Role` | `<div aria="role">` or [Aria Roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles) |
87+
| ...`LabelText` | `<label for="Text">` |
88+
| ...`PlaceHolderText` | `<input placeholder="Text">` |
89+
| ...`Text` | `<a href="/page">Text</a>` |
90+
| ...`DisplayValue` | `<input value="Text">` |
91+
| ...`AltText` | `<img alt="Text">` |
92+
| ...`Title` | `<span title="Text">` or `<title>` |
93+
| ...`TestId` | `<input data-testid="Id">` |
94+
95+
⇧ [Back to menu](#menu)
96+
97+
---
98+
7199
## Snippets
72100

73101
Below is a list of all available snippets and the triggers of each one. The `░` means the `TAB` jump position and `█` the final cursor position.
@@ -90,48 +118,63 @@ Below is a list of all available snippets and the triggers of each one. The `░
90118

91119
### Queries
92120

93-
| Trigger | Result |
94-
| --------: | ---------------------------------------------------------------- |
95-
| `gbr→` | `screen.getByRole('░id')█` |
96-
| `gbro→` | `screen.getByRole('░id', {░})█` |
97-
| `gbrc→` | `screen.getByRole('checkbox')█` |
98-
| `gbrcc→` | `screen.getByRole('checkbox', { checked: ░<true\|false>} })█` |
99-
| `gbrh→` | `screen.getByRole('heading')█` |
100-
| `gbrhl→` | `screen.getByRole('heading', { level: ░<1\|2\|3\|4\|5\|6>} })█` |
101-
| `gabr→` | `screen.getAllByRole('░id')█` |
102-
| `gabro→` | `screen.getAllByRole('░id', {░})█` |
103-
| `gbt→` | `screen.getByText(░)█` |
104-
| `gbtf→` | `screen.getByText('░Text Match')█` |
105-
| `gbti→` | `screen.getByText('░text match', {ignore: false})█` |
106-
| `gbts→` | `screen.getByText('░ext Matc', {exact: false})█` |
107-
| `gbtsi→` | `screen.getByText('░ext matc', {exact: false, ignore: false})█` |
108-
| `gbtsw→` | `screen.getByText((content) => content.startsWith('░Text'))█` |
109-
| `gbtesw→` | <code>screen.getByText((content, element) => {<br/>&nbsp;&nbsp;return element.tagName.toLowerCase() === '░div' && content.startsWith('░Text')<br/>})█</code> |
110-
| `gbtew→` | `screen.getByText((content) => content.endsWith('░Match'))█` |
111-
| `gbteew→` | <code>screen.getByText((content, element) => {<br/>&nbsp;&nbsp;return element.tagName.toLowerCase() === '░div' && content.endsWith('░Match')<br/>})█</code> |
121+
Sorted by recommended official priority
122+
123+
1. Role
124+
125+
| Trigger | Result |
126+
| :------- | ----------------------------------------------------------------- |
127+
| `br→` | `screen.░getByRole('░id')█` |
128+
| `bro→` | `screen.░getByRole('░id', {░})█` |
129+
| `bron→` | `screen.░getByRole('░id', {name: ░})█` |
130+
| `brc→` | `screen.░getByRole('checkbox')█` |
131+
| `brcc→` | `screen.░getByRole('checkbox', { checked: ░<true\|false>} })█` |
132+
| `brh→` | `screen.░getByRole('heading')█` |
133+
| `brhl→` | `screen.░getByRole('heading', { level: ░<1\|2\|3\|4\|5\|6>} })█` |
134+
135+
4. Text
136+
137+
| Trigger | Result |
138+
| :------- | ---------------------------------------------------------------- |
139+
| `bt→` | `screen.░getByText(░)█` |
140+
| `btf→` | `screen.░getByText('░Text Match')█` |
141+
| `bti→` | `screen.░getByText('░text match', {ignore: false})█` |
142+
| `bts→` | `screen.░getByText('░ext Matc', {exact: false})█` |
143+
| `btsi→` | `screen.░getByText('░ext matc', {exact: false, ignore: false})█` |
144+
| `btsw→` | `screen.░getByText((content) => content.startsWith('░Text'))█` |
145+
| `btesw→` | <code>screen.░getByText((content, element) => {<br/>&nbsp;&nbsp;return element.tagName.toLowerCase() === '░div' && content.startsWith('░Text')<br/>})█</code> |
146+
| `btew→` | `screen.░getByText((content) => content.endsWith('░Match'))█` |
147+
| `bteew→` | <code>screen.░getByText((content, element) => {<br/>&nbsp;&nbsp;return element.tagName.toLowerCase() === '░div' && content.endsWith('░Match')<br/>})█</code> |
112148

113149
### Debug
114150

115151
| Trigger | Result |
116-
| -------: | ------------------------------------ |
117-
| `sd→` | `screen.debug()█` |
118-
| `sltp→` | `screen.logTestingPlaygroundURL()█` |
152+
| :------- | ------------------------------------ |
153+
| `sd→` | `screen.debug()█` |
154+
| `sltp→` | `screen.logTestingPlaygroundURL()█` |
119155

120156
### Regex
121157

122158
It can be used as a text matcher or `name` property on queries.
123159

124160
| Trigger | Description | Result |
125-
| ------: | --------------------------- | ------------------- |
126-
| `rf→` | full text match | `/^░Text Match$/█` |
127-
| `rfi→` | full text match ignore case | `/^░text match$/i█` |
128-
| `rs→` | substring match | `/░ext Matc/█` |
129-
| `rsi→` | substring match ignore case | `/░ext matc/i█` |
130-
| `rsw→` | start with | `/^░Text/█` |
161+
| :------ | --------------------------- | ------------------- |
162+
| `rf→` | full text match | `/^░Text Match$/█` |
163+
| `rfi→` | full text match ignore case | `/^░text match$/i█` |
164+
| `rs→` | substring match | `/░ext Matc/█` |
165+
| `rsi→` | substring match ignore case | `/░ext matc/i█` |
166+
| `rsw→` | start with | `/^░Text/█` |
131167
| `rswi→` | start with ignore case | `/^░text/i█` |
132-
| `rew→` | end with | `/░Match$/█` |
168+
| `rew→` | end with | `/░Match$/█` |
133169
| `rewi→` | end with ignore case | `/░match$/i█` |
134170

171+
### Wait
172+
173+
| Trigger | Result |
174+
| :------- | ------------------------------------------------------------------------------- |
175+
| `wf→` | <code>await waitFor(<br/>&nbsp;&nbsp;() => ░<br/>)█</code> |
176+
| `wfr→` | <code>await waitForElementToBeRemoved(<br/>&nbsp;&nbsp;() => ░<br/>)█</code> |
177+
135178
⇧ [Back to menu](#menu)
136179

137180
---

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "testing-library-snippets",
33
"description": "VS Code Testing Library snippets for JS and TS",
4-
"version": "0.0.5",
4+
"version": "0.0.6",
55
"displayName": "Testing Library Snippets",
66
"publisher": "deinsoftware",
77
"icon": "images/light-icon.png",

‎snippets/queries.json

+90-71
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,119 @@
11
{
2-
"getBy.role": {
3-
"prefix": "gbr",
4-
"body": ["screen.getByRole('${1:id}')$0"],
5-
"description": "getByRole query"
6-
},
7-
"getBy.role.options": {
8-
"prefix": "gbro",
9-
"body": ["screen.getByRole('${1:id}', {$2})$0"],
10-
"description": "getByRole query with options"
2+
"by.role": {
3+
"prefix": "br",
4+
"body": [
5+
"screen.${1|getBy,getAllBy,queryBy,queryAllBy,findBy,findByAll|}Role('${2:id}')$0"
6+
],
7+
"description": "Role query"
118
},
12-
"getBy.role.checkbox": {
13-
"prefix": "gbrc",
14-
"body": ["screen.getByRole('checkbox')$0"],
15-
"description": "getByRole checkbox"
9+
"by.role.options": {
10+
"prefix": "bro",
11+
"body": [
12+
"screen.${1|getBy,getAllBy,queryBy,queryAllBy,findBy,findByAll|}Role('${2:id}', {$3})$0"
13+
],
14+
"description": "Role query with options"
1615
},
17-
"getBy.role.checkbox.checked": {
18-
"prefix": "gbrcc",
19-
"body": ["screen.getByRole('checkbox', { checked: ${1|true,false|} })$0"],
20-
"description": "getByRole checkbox checked"
16+
"by.role.options.name": {
17+
"prefix": "bron",
18+
"body": [
19+
"screen.${1|getBy,getAllBy,queryBy,queryAllBy,findBy,findByAll|}Role('${2:id}',\t{$3})$0"
20+
],
21+
"description": "Role query with name on options"
2122
},
22-
"getBy.role.heading": {
23-
"prefix": "gbrh",
24-
"body": ["screen.getByRole('heading')$0"],
25-
"description": "getByRole heading"
23+
"by.role.checkbox": {
24+
"prefix": "brc",
25+
"body": [
26+
"screen.${1|getBy,getAllBy,queryBy,queryAllBy,findBy,findByAll|}Role('checkbox')$0"
27+
],
28+
"description": "Role checkbox"
2629
},
27-
"getBy.role.heading.level": {
28-
"prefix": "gbrhl",
29-
"body": ["screen.getByRole('heading', { level: ${1|1,2,3,4,5,6|} })$0"],
30-
"description": "getByRole heading level"
30+
"by.role.checkbox.checked": {
31+
"prefix": "brcc",
32+
"body": [
33+
"screen.${1|getBy,getAllBy,queryBy,queryAllBy,findBy,findByAll|}Role('checkbox', { checked: ${2|true,false|} })$0"
34+
],
35+
"description": "Role checkbox checked"
3136
},
32-
"getAllBy.role": {
33-
"prefix": "gabr",
34-
"body": ["screen.getAllByRole('${1:id}')$0"],
35-
"description": "getAllByRole query"
37+
"by.role.heading": {
38+
"prefix": "brh",
39+
"body": [
40+
"screen.${1|getBy,getAllBy,queryBy,queryAllBy,findBy,findByAll|}Role('heading')$0"
41+
],
42+
"description": "Role heading"
3643
},
37-
"getAllBy.role.options": {
38-
"prefix": "gabro",
39-
"body": ["screen.getAllByRole('${1:id}', {$2})$0"],
40-
"description": "getAllByRole query with options"
44+
"by.role.heading.level": {
45+
"prefix": "brhl",
46+
"body": [
47+
"screen.${1|getBy,getAllBy,queryBy,queryAllBy,findBy,findByAll|}Role('heading', { level: ${2|1,2,3,4,5,6|} })$0"
48+
],
49+
"description": "Role heading level"
4150
},
4251

43-
"getBy.text": {
44-
"prefix": "gbt",
45-
"body": ["screen.getByText($1)$0"],
46-
"description": "getByText query"
52+
"by.text": {
53+
"prefix": "bt",
54+
"body": [
55+
"screen.${1|getBy,getAllBy,queryBy,queryAllBy,findBy,findByAll|}Text($2)$0"
56+
],
57+
"description": "Text query"
4758
},
48-
"getBy.text.full": {
49-
"prefix": "gbtf",
50-
"body": ["screen.getByText('${1:Text Match}')$0"],
51-
"description": "getByText query full string match"
59+
"by.text.full": {
60+
"prefix": "btf",
61+
"body": [
62+
"screen.${1|getBy,getAllBy,queryBy,queryAllBy,findBy,findByAll|}Text('${2:Text Match}')$0"
63+
],
64+
"description": "Text query full string match"
5265
},
53-
"getBy.text.ignore": {
54-
"prefix": "gbti",
55-
"body": ["screen.getByText('${1:text match}', {ignore: false})$0"],
56-
"description": "getByText query full string ignore case"
66+
"by.text.ignore": {
67+
"prefix": "bti",
68+
"body": [
69+
"screen.${1|getBy,getAllBy,queryBy,queryAllBy,findBy,findByAll|}Text('${2:text match}', {ignore: false})$0"
70+
],
71+
"description": "Text query full string ignore case"
5772
},
58-
"getBy.text.substring": {
59-
"prefix": "gbts",
60-
"body": ["screen.getByText('${1:ext Matc}', {exact: false})$0"],
61-
"description": "getByText query substring match"
73+
"by.text.substring": {
74+
"prefix": "bts",
75+
"body": [
76+
"screen.${1|getBy,getAllBy,queryBy,queryAllBy,findBy,findByAll|}Text('${2:ext Matc}', {exact: false})$0"
77+
],
78+
"description": "Text query substring match"
6279
},
63-
"getBy.text.substring+ignore": {
64-
"prefix": "gbtsi",
80+
"by.text.substring+ignore": {
81+
"prefix": "btsi",
6582
"body": [
66-
"screen.getByText('${1:ext matc}', {exact: false, ignore: false})$0"
83+
"screen.${1|getBy,getAllBy,queryBy,queryAllBy,findBy,findByAll|}Text('${2:ext matc}', {exact: false, ignore: false})$0"
6784
],
68-
"description": "getByText query substring match ignore case"
85+
"description": "Text query substring match ignore case"
6986
},
70-
"getBy.text.startWith": {
71-
"prefix": "gbtsw",
87+
"by.text.startWith": {
88+
"prefix": "btsw",
7289
"body": [
73-
"screen.getByText((content) => content.startsWith('${1:Text}'))$0"
90+
"screen.${1|getBy,getAllBy,queryBy,queryAllBy,findBy,findByAll|}Text((content) => content.startsWith('${2:Text}'))$0"
7491
],
75-
"description": "getByText query start with match"
92+
"description": "Text query start with match"
7693
},
77-
"getBy.text.element.startWith": {
78-
"prefix": "gbtesw",
94+
"by.text.element.startWith": {
95+
"prefix": "btesw",
7996
"body": [
80-
"screen.getByText((content, element) => {",
81-
"\treturn element.tagName.toLowerCase() === '${1:div}' && content.startsWith('${2:Text}')",
97+
"screen.${1|getBy,getAllBy,queryBy,queryAllBy,findBy,findByAll|}Text((content, element) => {",
98+
"\treturn element.tagName.toLowerCase() === '${2:div}' && content.startsWith('${3:Text}')",
8299
"})"
83100
],
84-
"description": "getByText query start with match on specific element"
101+
"description": "Text query start with match on specific element"
85102
},
86-
"getBy.text.endWith": {
87-
"prefix": "gbtew",
88-
"body": ["screen.getByText((content) => content.endsWith('${1:Match}'))$0"],
89-
"description": "getByText query end with match"
103+
"by.text.endWith": {
104+
"prefix": "btew",
105+
"body": [
106+
"screen.${1|getBy,getAllBy,queryBy,queryAllBy,findBy,findByAll|}Text((content) => content.endsWith('${2:Match}'))$0"
107+
],
108+
"description": "Text query end with match"
90109
},
91-
"getBy.text.element.endWith": {
92-
"prefix": "gbteew",
110+
"by.text.element.endWith": {
111+
"prefix": "bteew",
93112
"body": [
94-
"screen.getByText((content, element) => {",
95-
"\treturn element.tagName.toLowerCase() === '${1:div}' && content.endsWith('${1:Match}')",
113+
"screen.${1|getBy,getAllBy,queryBy,queryAllBy,findBy,findByAll|}Text((content, element) => {",
114+
"\treturn element.tagName.toLowerCase() === '${2:div}' && content.endsWith('${3:Match}')",
96115
"})"
97116
],
98-
"description": "getByText query end with match on specific element"
117+
"description": "Text query end with match on specific element"
99118
}
100119
}

‎snippets/wait.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"wait.for": {
3+
"prefix": "wf",
4+
"body": ["await waitFor(", "\t() => $1", ")$0"],
5+
"description": "wait for"
6+
},
7+
"wait.for.removed": {
8+
"prefix": "wfr",
9+
"body": ["await waitForElementToBeRemoved(", "\t() => $1", ")$0"],
10+
"description": "wait for element to be removed"
11+
}
12+
}

0 commit comments

Comments
 (0)
Please sign in to comment.