Skip to content

Commit 9f7b8b2

Browse files
mikkermikker
authored
Add tests w/ Playwright (#1)
* Add tests w/ Playwright * ..
1 parent 983a5ab commit 9f7b8b2

File tree

6 files changed

+199
-3
lines changed

6 files changed

+199
-3
lines changed

‎.github/workflows/playwright.yml

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
name: Playwright Tests
2+
on:
3+
push:
4+
branches: [main, master]
5+
pull_request:
6+
branches: [main, master]
7+
jobs:
8+
test:
9+
timeout-minutes: 60
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v3
13+
- uses: actions/setup-node@v3
14+
with:
15+
node-version: 18
16+
- name: Install dependencies
17+
run: npm install
18+
- name: Install Playwright Browsers
19+
run: npx playwright install --with-deps
20+
- name: Run Playwright tests
21+
run: npx playwright test
22+
- uses: actions/upload-artifact@v3
23+
if: always()
24+
with:
25+
name: playwright-report
26+
path: playwright-report/
27+
retention-days: 30

‎.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,7 @@
11
package-lock.json
22
.vercel
3+
node_modules/
4+
/test-results/
5+
/playwright-report/
6+
/blob-report/
7+
/playwright/.cache/

‎package.json

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,17 @@
77
"src"
88
],
99
"scripts": {
10-
"test": "echo \"Error: no test specified\" && exit 0",
11-
"dev": "five-server --open=false"
10+
"dev": "five-server --open=false",
11+
"test": "playwright test",
12+
"test:serve": "serve -l 3030"
1213
},
1314
"keywords": [],
1415
"author": "Mikkel Malmberg (@mikker)",
1516
"license": "MIT",
1617
"devDependencies": {
17-
"five-server": "^0.3.1"
18+
"@playwright/test": "^1.40.1",
19+
"five-server": "^0.3.1",
20+
"serve": "^14.2.1"
1821
},
1922
"repository": {
2023
"type": "git",

‎playwright.config.js

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// @ts-check
2+
const { defineConfig, devices } = require("@playwright/test");
3+
4+
/**
5+
* Read environment variables from file.
6+
* https://github.com/motdotla/dotenv
7+
*/
8+
// require('dotenv').config();
9+
10+
/**
11+
* @see https://playwright.dev/docs/test-configuration
12+
*/
13+
module.exports = defineConfig({
14+
testDir: "./tests",
15+
/* Run tests in files in parallel */
16+
fullyParallel: true,
17+
/* Fail the build on CI if you accidentally left test.only in the source code. */
18+
forbidOnly: !!process.env.CI,
19+
/* Retry on CI only */
20+
retries: process.env.CI ? 2 : 0,
21+
/* Opt out of parallel tests on CI. */
22+
workers: process.env.CI ? 1 : undefined,
23+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
24+
reporter: process.env.CI ? "github" : "list",
25+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
26+
use: {
27+
/* Base URL to use in actions like `await page.goto('/')`. */
28+
baseURL: "http://localhost:3030/tests",
29+
30+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
31+
trace: "on-first-retry",
32+
},
33+
34+
/* Configure projects for major browsers */
35+
projects: [
36+
{
37+
name: "chromium",
38+
use: { ...devices["Desktop Chrome"] },
39+
},
40+
41+
// {
42+
// name: "firefox",
43+
// use: { ...devices["Desktop Firefox"] },
44+
// },
45+
46+
{
47+
name: "webkit",
48+
use: { ...devices["Desktop Safari"] },
49+
},
50+
51+
/* Test against mobile viewports. */
52+
// {
53+
// name: 'Mobile Chrome',
54+
// use: { ...devices['Pixel 5'] },
55+
// },
56+
// {
57+
// name: 'Mobile Safari',
58+
// use: { ...devices['iPhone 12'] },
59+
// },
60+
61+
/* Test against branded browsers. */
62+
// {
63+
// name: 'Microsoft Edge',
64+
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
65+
// },
66+
// {
67+
// name: 'Google Chrome',
68+
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
69+
// },
70+
],
71+
72+
/* Run your local dev server before starting the tests */
73+
webServer: {
74+
command: "npm run test:serve",
75+
url: "http://localhost:3030/tests",
76+
reuseExistingServer: !process.env.CI,
77+
},
78+
});

‎tests/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Sourdough Test</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<style>
8+
body {
9+
background: #eee;
10+
}
11+
</style>
12+
<link rel="stylesheet" href="../src/sourdough-toast.css" />
13+
<script type="module">
14+
import { Sourdough, toast } from "../src/sourdough-toast.js";
15+
16+
const sourdough = new Sourdough();
17+
18+
window.addEventListener("DOMContentLoaded", () => {
19+
sourdough.boot();
20+
});
21+
22+
window.toast = toast;
23+
</script>
24+
</head>
25+
<body>
26+
<button onclick="toast('Basic toast')">Basic</button>
27+
<button onclick="toast.success('Success toast')">Success</button>
28+
<button onclick="toast.info('Info toast')">Info</button>
29+
<button onclick="toast.warning('Warning toast')">Warning</button>
30+
<button onclick="toast.error('Error toast')">Error</button>
31+
</body>
32+
</html>

‎tests/sourdough-toast.spec.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// @ts-check
2+
const { test, expect } = require("@playwright/test");
3+
4+
test.beforeEach(async ({ page }) => {
5+
await page.goto("/tests");
6+
});
7+
8+
test("has title", async ({ page }) => {
9+
await expect(page).toHaveTitle("Sourdough Test");
10+
});
11+
12+
test("a basic toast can render and then disappear after duration", async ({
13+
page,
14+
}) => {
15+
await page.getByRole("button", { name: "Basic" }).click();
16+
17+
await expect(page.locator("[data-sourdough-toast]")).toHaveCount(1);
18+
await expect(page.locator("[data-sourdough-toast]")).toHaveCount(0);
19+
});
20+
21+
test("only renders max toasts", async ({ page }) => {
22+
await page.getByRole("button", { name: "Basic" }).click();
23+
await page.getByRole("button", { name: "Basic" }).click();
24+
await page.getByRole("button", { name: "Basic" }).click();
25+
await page.getByRole("button", { name: "Basic" }).click();
26+
27+
await expect(page.locator("[data-sourdough-toast]")).toHaveCount(3);
28+
});
29+
30+
test("toast have types", async ({ page }) => {
31+
await page.getByRole("button", { name: "Success" }).click();
32+
await expect(page.getByText("Success toast", { exact: true })).toHaveCount(1);
33+
34+
await page.getByRole("button", { name: "Error" }).click();
35+
await expect(page.getByText("Error toast", { exact: true })).toHaveCount(1);
36+
37+
await page.getByRole("button", { name: "Warning" }).click();
38+
await expect(page.getByText("Warning toast", { exact: true })).toHaveCount(1);
39+
40+
await page.getByRole("button", { name: "Info" }).click();
41+
await expect(page.getByText("Info toast", { exact: true })).toHaveCount(1);
42+
});
43+
44+
test("toasts don't dismiss when hovered", async ({ page }) => {
45+
await page.getByRole("button", { name: "Basic" }).click();
46+
47+
await page.hover("[data-sourdough-toast]");
48+
await new Promise((resolve) => setTimeout(resolve, 5000));
49+
50+
await expect(page.locator("[data-sourdough-toast]")).toHaveCount(1);
51+
});

0 commit comments

Comments
 (0)