Skip to content

Commit 28200b9

Browse files
equimanequiman
committed
refactor snippets
1 parent 2057718 commit 28200b9

File tree

6 files changed

+174
-117
lines changed

6 files changed

+174
-117
lines changed

‎.vscode/settings.json

+15-16
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
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",

‎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

+45-29
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ The quick and easy way to create and use Testing Library with [VS Code](https://
2525
- [User Event](#user-event)
2626
- [Queries](#queries)
2727
- [Regex](#regex)
28+
- [Wait](#wait)
2829
- [Keyboard](#keyboard)
2930
- [Settings](#settings)
3031
- [About](#about)
@@ -117,48 +118,63 @@ Below is a list of all available snippets and the triggers of each one. The `░
117118

118119
### Queries
119120

120-
| Trigger | Result |
121-
| --------: | ---------------------------------------------------------------- |
122-
| `gbr→` | `screen.getByRole('░id')█` |
123-
| `gbro→` | `screen.getByRole('░id', {░})█` |
124-
| `gbrc→` | `screen.getByRole('checkbox')█` |
125-
| `gbrcc→` | `screen.getByRole('checkbox', { checked: ░<true\|false>} })█` |
126-
| `gbrh→` | `screen.getByRole('heading')█` |
127-
| `gbrhl→` | `screen.getByRole('heading', { level: ░<1\|2\|3\|4\|5\|6>} })█` |
128-
| `gabr→` | `screen.getAllByRole('░id')█` |
129-
| `gabro→` | `screen.getAllByRole('░id', {░})█` |
130-
| `gbt→` | `screen.getByText(░)█` |
131-
| `gbtf→` | `screen.getByText('░Text Match')█` |
132-
| `gbti→` | `screen.getByText('░text match', {ignore: false})█` |
133-
| `gbts→` | `screen.getByText('░ext Matc', {exact: false})█` |
134-
| `gbtsi→` | `screen.getByText('░ext matc', {exact: false, ignore: false})█` |
135-
| `gbtsw→` | `screen.getByText((content) => content.startsWith('░Text'))█` |
136-
| `gbtesw→` | <code>screen.getByText((content, element) => {<br/>&nbsp;&nbsp;return element.tagName.toLowerCase() === '░div' && content.startsWith('░Text')<br/>})█</code> |
137-
| `gbtew→` | `screen.getByText((content) => content.endsWith('░Match'))█` |
138-
| `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> |
139148

140149
### Debug
141150

142151
| Trigger | Result |
143-
| -------: | ------------------------------------ |
144-
| `sd→` | `screen.debug()█` |
145-
| `sltp→` | `screen.logTestingPlaygroundURL()█` |
152+
| :------- | ------------------------------------ |
153+
| `sd→` | `screen.debug()█` |
154+
| `sltp→` | `screen.logTestingPlaygroundURL()█` |
146155

147156
### Regex
148157

149158
It can be used as a text matcher or `name` property on queries.
150159

151160
| Trigger | Description | Result |
152-
| ------: | --------------------------- | ------------------- |
153-
| `rf→` | full text match | `/^░Text Match$/█` |
154-
| `rfi→` | full text match ignore case | `/^░text match$/i█` |
155-
| `rs→` | substring match | `/░ext Matc/█` |
156-
| `rsi→` | substring match ignore case | `/░ext matc/i█` |
157-
| `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/█` |
158167
| `rswi→` | start with ignore case | `/^░text/i█` |
159-
| `rew→` | end with | `/░Match$/█` |
168+
| `rew→` | end with | `/░Match$/█` |
160169
| `rewi→` | end with ignore case | `/░match$/i█` |
161170

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+
162178
⇧ [Back to menu](#menu)
163179

164180
---

‎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)