Skip to content

Commit f838915

Browse files
kentcdoddskentcdodds
committed
feat(playwright): add setupInBrowserTests
1 parent 7f859b7 commit f838915

35 files changed

+500
-384
lines changed

‎package-lock.json

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

‎packages/example/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ workspace/
77
**/app/styles/tailwind.css
88
**/prisma/data.db
99
scripts/db.json
10+
**/playwright-report
1011

1112
# in a real app you'd want to not commit the .env
1213
# file as well, but since this is for a workshop

‎packages/example/.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ node_modules
66

77
**/app/styles/tailwind.css
88
package.json
9+
tsconfig.json

‎packages/example/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@
1616
"author": "Kent C. Dodds <[email protected]> (https://kentcdodds.com/)",
1717
"license": "MIT",
1818
"dependencies": {
19-
"@testing-library/dom": "^8.20.0",
2019
"@kentcdodds/workshop-app": "*",
20+
"@playwright/test": "^1.30.0",
21+
"@testing-library/dom": "^8.20.0",
2122
"@testing-library/react": "^13.4.0",
2223
"@testing-library/user-event": "^14.4.3",
2324
"assert": "^2.0.0",

‎packages/example/playwright.config.ts

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import type { PlaywrightTestConfig } from '@playwright/test'
2+
import { devices } from '@playwright/test'
3+
4+
/**
5+
* Read environment variables from file.
6+
* https://github.com/motdotla/dotenv
7+
*/
8+
// require('dotenv').config();
9+
10+
const PORT = process.env.PORT || 3000
11+
12+
/**
13+
* See https://playwright.dev/docs/test-configuration.
14+
*/
15+
const config: PlaywrightTestConfig = {
16+
testDir: './tests',
17+
/* Maximum time one test can run for. */
18+
timeout: 30 * 1000,
19+
expect: {
20+
/**
21+
* Maximum time expect() should wait for the condition to be met.
22+
* For example in `await expect(locator).toHaveText();`
23+
*/
24+
timeout: 5000,
25+
},
26+
/* Run tests in files in parallel */
27+
fullyParallel: true,
28+
/* Fail the build on CI if you accidentally left test.only in the source code. */
29+
forbidOnly: !!process.env.CI,
30+
/* Retry on CI only */
31+
retries: process.env.CI ? 2 : 0,
32+
/* Opt out of parallel tests on CI. */
33+
workers: process.env.CI ? 1 : undefined,
34+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
35+
reporter: 'html',
36+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
37+
use: {
38+
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
39+
actionTimeout: 0,
40+
/* Base URL to use in actions like `await page.goto('/')`. */
41+
baseURL: `http://localhost:${PORT}/`,
42+
43+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
44+
trace: 'on-first-retry',
45+
},
46+
47+
/* Configure projects for major browsers */
48+
projects: [
49+
{
50+
name: 'chromium',
51+
use: {
52+
...devices['Desktop Chrome'],
53+
},
54+
},
55+
],
56+
57+
/* Folder for test artifacts such as screenshots, videos, traces, etc. */
58+
// outputDir: 'test-results/',
59+
60+
/* Run your local dev server before starting the tests */
61+
webServer: {
62+
command: `cross-env PORT=${PORT} npm run start`,
63+
port: Number(PORT),
64+
reuseExistingServer: true,
65+
},
66+
}
67+
68+
export default config

‎packages/example/tests/in-browser-tests.spec.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { setupInBrowserTests } from '@kentcdodds/workshop-app/utils'
2+
3+
setupInBrowserTests()

‎packages/example/tests/tsconfig.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
3+
"compilerOptions": {
4+
"lib": ["DOM", "DOM.Iterable", "ES2019"],
5+
"isolatedModules": true,
6+
"esModuleInterop": true,
7+
"jsx": "react-jsx",
8+
"module": "CommonJS",
9+
"moduleResolution": "node",
10+
"resolveJsonModule": true,
11+
"target": "ES2020",
12+
"strict": true,
13+
"noImplicitAny": true,
14+
"noUncheckedIndexedAccess": true,
15+
"allowJs": true,
16+
"forceConsistentCasingInFileNames": true,
17+
"baseUrl": ".",
18+
"paths": {
19+
"~/*": ["./app/*"]
20+
},
21+
"skipLibCheck": true,
22+
23+
// Remix takes care of building everything in `remix build`.
24+
"noEmit": true
25+
}
26+
}

‎packages/example/tsconfig.json

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,33 @@
11
{
2-
"files": [],
3-
"exclude": [
4-
"node_modules"
5-
],
6-
"references": [
7-
{
8-
"path": "exercises/01.nested-routing/01-02.problem"
9-
},
10-
{
11-
"path": "exercises/01.nested-routing/01.solution.outlet"
12-
},
13-
{
14-
"path": "exercises/01.nested-routing/02.solution.outlet-context"
15-
},
16-
{
17-
"path": "exercises/02.styling/01-02.problem"
18-
},
19-
{
20-
"path": "exercises/02.styling/01.solution.links"
21-
},
22-
{
23-
"path": "exercises/02.styling/02.solution.css-modules"
24-
},
25-
{
26-
"path": "exercises/02.styling/03.problem.tailwind"
27-
},
28-
{
29-
"path": "exercises/02.styling/03.solution.tailwind"
30-
}
31-
]
32-
}
2+
"files": [],
3+
"exclude": ["node_modules"],
4+
"references": [
5+
{
6+
"path": "tests"
7+
},
8+
{
9+
"path": "exercises/01.nested-routing/01-02.problem"
10+
},
11+
{
12+
"path": "exercises/01.nested-routing/01.solution.outlet"
13+
},
14+
{
15+
"path": "exercises/01.nested-routing/02.solution.outlet-context"
16+
},
17+
{
18+
"path": "exercises/02.styling/01-02.problem"
19+
},
20+
{
21+
"path": "exercises/02.styling/01.solution.links"
22+
},
23+
{
24+
"path": "exercises/02.styling/02.solution.css-modules"
25+
},
26+
{
27+
"path": "exercises/02.styling/03.problem.tailwind"
28+
},
29+
{
30+
"path": "exercises/02.styling/03.solution.tailwind"
31+
}
32+
]
33+
}

‎packages/workshop-app/app/root.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
import reachTabsStylesheetUrl from '@reach/tabs/styles.css'
1818
import appStylesheetUrl from './styles/app.css'
1919
import tailwindStylesheetUrl from './styles/tailwind.css'
20-
import { getWorkshopRoot } from './utils/misc.server'
20+
import { getWorkshopRoot } from './utils/apps.server'
2121

2222
export const links: LinksFunction = () => {
2323
return [

‎packages/workshop-app/app/routes/_app+/$exerciseNumber.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
import invariant from 'tiny-invariant'
1010
import { Mdx } from '~/utils/mdx'
1111
import { getErrorMessage } from '~/utils/misc'
12-
import { getExercise } from '~/utils/misc.server'
12+
import { getExercise } from '~/utils/apps.server'
1313

1414
export async function loader({ params }: DataFunctionArgs) {
1515
invariant(params.exerciseNumber, 'exerciseNumber is required')

0 commit comments

Comments
 (0)