Skip to content

Commit bcf04a7

Browse files
nickservnickserv
committed
Use the same format as Testing Library
1 parent 2df5e83 commit bcf04a7

File tree

11 files changed

+173
-170
lines changed

11 files changed

+173
-170
lines changed

‎.github/workflows/node.js.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ jobs:
1010
- uses: actions/checkout@v3
1111
- uses: actions/setup-node@v3
1212
with:
13-
cache: "npm"
13+
cache: 'npm'
1414
- run: npm ci
1515
- run: npm run build
1616
- run: npm run type

‎.prettierignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
coverage
3+
dist

‎README.md

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
> Testing Library Extension for Chrome DevTools Recorder
44
5-
Export tests from the DevTools Recorder panel to Testing Library test scripts using Jest.
5+
Export tests from the DevTools Recorder panel to Testing Library test scripts
6+
using Jest.
67

78
Open a recording and click export to use the Testing Library script option.
89

@@ -27,18 +28,20 @@ Open a recording and click export to use the Testing Library script option.
2728

2829
| Type | Output |
2930
| ------------------- | ---------------------------------------------------------------------------------------------------- |
30-
| `change` | `await userEvent.type(element, "value")` |
31+
| `change` | `await userEvent.type(element, 'value')` |
3132
| `click` | `await userEvent.click(element)` |
32-
| `click` (right) | `await userEvent.click(element, { buttons: 2 })` |
33+
| `click` (right) | `await userEvent.click(element, {buttons: 2})` |
3334
| `hover` | `await userEvent.hover(element)` |
3435
| `doubleClick` | `await userEvent.dblClick(element)` |
35-
| `keyDown` | `await userEvent.keyboard("{Key>}")` |
36-
| `keyUp` | `await userEvent.keyboard("{/Key}")` |
37-
| `navigate` \* | `expect(location.href).toBe("https://example.com/")` `expect(document.title).toBe("Example Domain")` |
36+
| `keyDown` | `await userEvent.keyboard('{Key>}')` |
37+
| `keyUp` | `await userEvent.keyboard('{/Key}')` |
38+
| `navigate` \* | `expect(location.href).toBe('https://example.com/')` `expect(document.title).toBe('Example Domain')` |
3839
| `waitForElement` | `await waitFor(() => element)` |
3940
| `waitForExpression` | `await waitFor(() => expression)` |
4041

41-
\* Only one `navigate` step is allowed per test because `jest-environment-url` must load pages since `jsdom` does not support navigation. Without any `navigate` steps, you'll need to edit your test to manually load the DOM.
42+
\* Only one `navigate` step is allowed per test because `jest-environment-url`
43+
must load pages since `jsdom` does not support navigation. Without any
44+
`navigate` steps, you'll need to edit your test to manually load the DOM.
4245

4346
## Example
4447

@@ -77,14 +80,14 @@ Open a recording and click export to use the Testing Library script option.
7780
* @jest-environment url
7881
* @jest-environment-options { "url": "https://example.com/" }
7982
*/
80-
const { screen, waitFor } = require("@testing-library/dom")
81-
const { default: userEvent } = require("@testing-library/user-event")
82-
require("@testing-library/jest-dom")
83-
84-
test("Example", async () => {
85-
expect(location.href).toBe("https://example.com/")
86-
expect(document.title).toBe("Example Domain")
87-
await waitFor(() => screen.getByText("More information..."))
83+
const {screen, waitFor} = require('@testing-library/dom')
84+
const {default: userEvent} = require('@testing-library/user-event')
85+
require('@testing-library/jest-dom')
86+
87+
test('Example', async () => {
88+
expect(location.href).toBe('https://example.com/')
89+
expect(document.title).toBe('Example Domain')
90+
await waitFor(() => screen.getByText('More information...'))
8891
})
8992
```
9093

‎package-lock.json

Lines changed: 0 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
"html-webpack-plugin": "^5.5.0",
1818
"jest": "^28.1.3",
1919
"prettier": "^2.7.1",
20-
"prettier-config-nick": "^1.0.3",
2120
"typescript": "^4.7.4",
2221
"webpack": "^5.74.0",
2322
"webpack-cli": "^4.10.0"
@@ -35,5 +34,23 @@
3534
"/fixtures/"
3635
]
3736
},
38-
"prettier": "prettier-config-nick"
37+
"prettier": {
38+
"arrowParens": "avoid",
39+
"bracketSpacing": false,
40+
"embeddedLanguageFormatting": "auto",
41+
"endOfLine": "lf",
42+
"htmlWhitespaceSensitivity": "css",
43+
"insertPragma": false,
44+
"jsxBracketSameLine": false,
45+
"jsxSingleQuote": false,
46+
"printWidth": 80,
47+
"proseWrap": "always",
48+
"quoteProps": "as-needed",
49+
"requirePragma": false,
50+
"semi": false,
51+
"singleQuote": true,
52+
"tabWidth": 2,
53+
"trailingComma": "all",
54+
"useTabs": false
55+
}
3956
}

‎src/fixtures/example.test.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
* @jest-environment url
33
* @jest-environment-options { "url": "https://example.com/" }
44
*/
5-
const { screen, waitFor } = require("@testing-library/dom")
6-
const { default: userEvent } = require("@testing-library/user-event")
7-
require("@testing-library/jest-dom")
5+
const {screen, waitFor} = require('@testing-library/dom')
6+
const {default: userEvent} = require('@testing-library/user-event')
7+
require('@testing-library/jest-dom')
88

9-
test("Example", async () => {
10-
expect(location.href).toBe("https://example.com/")
11-
expect(document.title).toBe("Example Domain")
12-
await waitFor(() => screen.getByText("More information..."))
9+
test('Example', async () => {
10+
expect(location.href).toBe('https://example.com/')
11+
expect(document.title).toBe('Example Domain')
12+
await waitFor(() => screen.getByText('More information...'))
1313
})

‎src/index.ts

Lines changed: 33 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,31 @@ import {
77
type Step,
88
type StringifyExtension,
99
type UserFlow,
10-
} from "@puppeteer/replay"
10+
} from '@puppeteer/replay'
1111

1212
export class Extension implements StringifyExtension {
1313
async beforeAllSteps(out: LineWriter, flow: UserFlow) {
1414
// Jest docblock
15-
out.appendLine("/**")
16-
const step = flow.steps.find((step) => step.type === "navigate") as
15+
out.appendLine('/**')
16+
const step = flow.steps.find(step => step.type === 'navigate') as
1717
| NavigateStep
1818
| undefined
1919
if (step) {
20-
out.appendLine(" * @jest-environment url")
20+
out.appendLine(' * @jest-environment url')
2121
out.appendLine(` * @jest-environment-options { "url": "${step.url}" }`)
2222
} else {
23-
out.appendLine(" * @jest-environment jsdom")
23+
out.appendLine(' * @jest-environment jsdom')
2424
}
25-
out.appendLine(" */")
25+
out.appendLine(' */')
2626

2727
// Imports
28+
out.appendLine("const {screen, waitFor} = require('@testing-library/dom')")
2829
out.appendLine(
29-
'const { screen, waitFor } = require("@testing-library/dom")',
30+
"const {default: userEvent} = require('@testing-library/user-event')",
3031
)
31-
out.appendLine(
32-
'const { default: userEvent } = require("@testing-library/user-event")',
33-
)
34-
out.appendLine('require("@testing-library/jest-dom")')
32+
out.appendLine("require('@testing-library/jest-dom')")
3533

36-
out.appendLine("")
34+
out.appendLine('')
3735

3836
// Test
3937
out.appendLine(`test(${formatAsJSLiteral(flow.title)}, async () => {`)
@@ -43,55 +41,55 @@ export class Extension implements StringifyExtension {
4341
async afterAllSteps(out: LineWriter) {
4442
// Test
4543
out.endBlock()
46-
out.appendLine("})")
44+
out.appendLine('})')
4745
}
4846

4947
async stringifyStep(out: LineWriter, step: Step, flow?: UserFlow) {
5048
switch (step.type) {
51-
case "change":
49+
case 'change':
5250
out.appendLine(
5351
`await userEvent.type(${stringifySelector(
5452
step.selectors[0],
5553
)}, ${formatAsJSLiteral(step.value)})`,
5654
)
5755
break
58-
case "click":
56+
case 'click':
5957
out.appendLine(
6058
`await userEvent.click(${stringifySelector(step.selectors[0])}${
61-
step.button === "secondary" ? ", { buttons: 2 }" : ""
59+
step.button === 'secondary' ? ', {buttons: 2}' : ''
6260
})`,
6361
)
6462
break
65-
case "hover":
63+
case 'hover':
6664
out.appendLine(
6765
`await userEvent.hover(${stringifySelector(step.selectors[0])})`,
6866
)
6967
break
70-
case "doubleClick":
68+
case 'doubleClick':
7169
out.appendLine(
7270
`await userEvent.dblClick(${stringifySelector(step.selectors[0])}${
73-
step.button === "secondary" ? ", { buttons: 2 }" : ""
71+
step.button === 'secondary' ? ', {buttons: 2}' : ''
7472
})`,
7573
)
7674
break
77-
case "keyDown":
75+
case 'keyDown':
7876
out.appendLine(
7977
`await userEvent.keyboard(${formatAsJSLiteral(`{${step.key}>}`)})`,
8078
)
8179
break
82-
case "keyUp":
80+
case 'keyUp':
8381
out.appendLine(
8482
`await userEvent.keyboard(${formatAsJSLiteral(`{/${step.key}}`)})`,
8583
)
8684
break
87-
case "navigate":
85+
case 'navigate':
8886
if (
8987
!flow ||
90-
step === flow.steps.find((step) => step.type === "navigate")
88+
step === flow.steps.find(step => step.type === 'navigate')
9189
) {
92-
for (const { url, title } of step.assertedEvents ?? []) {
90+
for (const {url, title} of step.assertedEvents ?? []) {
9391
if (url) {
94-
out.appendLine(`expect(location.href).toBe("${url}")`)
92+
out.appendLine(`expect(location.href).toBe(\'${url}\')`)
9593
}
9694
if (title) {
9795
out.appendLine(
@@ -101,16 +99,16 @@ export class Extension implements StringifyExtension {
10199
}
102100
} else {
103101
console.log(
104-
"Warning: Testing Library does not currently handle more than one navigation step per test.",
102+
'Warning: Testing Library does not currently handle more than one navigation step per test.',
105103
)
106104
}
107105
break
108-
case "waitForElement":
106+
case 'waitForElement':
109107
out.appendLine(
110108
`await waitFor(() => ${stringifySelector(step.selectors[0])})`,
111109
)
112110
break
113-
case "waitForExpression":
111+
case 'waitForExpression':
114112
out.appendLine(`await waitFor(() => ${step.expression})`)
115113
break
116114
default:
@@ -122,13 +120,13 @@ export class Extension implements StringifyExtension {
122120
}
123121

124122
export function formatAsJSLiteral(value: string) {
125-
return `"${value.replace(/"/g, '\\"')}"`
123+
return `'${value.replace(/'/g, "\\'")}'`
126124
}
127125

128126
export function stringifySelector(selector: Selector) {
129127
const selectorString = Array.isArray(selector) ? selector[0] : selector
130128

131-
if (selectorString.startsWith("aria/")) {
129+
if (selectorString.startsWith('aria/')) {
132130
return `screen.getByText(${formatAsJSLiteral(selectorString.slice(5))})`
133131
} else {
134132
return `document.querySelector(${formatAsJSLiteral(selectorString)})`
@@ -139,19 +137,19 @@ export class RecorderPlugin
139137
implements chrome.devtools.recorder.RecorderExtensionPlugin
140138
{
141139
stringify(recording: UserFlow) {
142-
return stringify(recording, { extension: new Extension() })
140+
return stringify(recording, {extension: new Extension()})
143141
}
144142

145143
stringifyStep(step: Step) {
146-
return stringifyStep(step, { extension: new Extension() })
144+
return stringifyStep(step, {extension: new Extension()})
147145
}
148146
}
149147

150148
// istanbul ignore next
151-
if (process.env.NODE_ENV !== "test") {
149+
if (process.env.NODE_ENV !== 'test') {
152150
chrome.devtools.recorder.registerRecorderExtensionPlugin(
153151
new RecorderPlugin(),
154-
"Testing Library",
155-
"application/javascript",
152+
'Testing Library',
153+
'application/javascript',
156154
)
157155
}

0 commit comments

Comments
 (0)