Skip to content
This repository was archived by the owner on Feb 12, 2025. It is now read-only.

Commit c0c5839

Browse files
shootermvhuyenltnguyen
shootermv
and
huyenltnguyen
authored
test: setup e2e tests (#1040)
Co-authored-by: Huyen Nguyen <[email protected]>
1 parent fb1b523 commit c0c5839

13 files changed

+377
-6
lines changed

‎.github/workflows/playwright.yml

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
name: Playwright Tests
2+
3+
on:
4+
workflow_dispatch:
5+
push:
6+
branches: [main]
7+
pull_request:
8+
branches: [main]
9+
10+
jobs:
11+
test:
12+
timeout-minutes: 60
13+
runs-on: ubuntu-latest
14+
steps:
15+
- uses: actions/checkout@v4
16+
- uses: actions/setup-node@v4
17+
with:
18+
node-version: 20.x
19+
- name: Install dependencies
20+
run: npm install -g pnpm && pnpm install
21+
- name: Install Playwright Browsers
22+
run: pnpm exec playwright install --with-deps
23+
- name: Run Playwright tests
24+
run: pnpm exec playwright test

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,7 @@
2222
npm-debug.log*
2323
yarn-debug.log*
2424
yarn-error.log*
25+
/test-results/
26+
/playwright-report/
27+
/blob-report/
28+
/playwright/.cache/

‎.husky/pre-commit

-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
1-
#!/usr/bin/env sh
2-
. "$(dirname -- "$0")/_/husky.sh"
31

42
npx pretty-quick --staged

‎README.md

+16
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,22 @@ Once you are finished making changes, you will need to run the test suite to mak
7474
Here is terminal command for running tests: `pnpm test` (or, even shorter: `pnpm t` )
7575
alternativetly (and also cool!) - you can install [vscode vitest extension](https://github.com/vitest-dev/vscode)
7676

77+
### How to run the e2e tests
78+
79+
This repo uses [Playwright](https://playwright.dev/) for end-to-end testing.
80+
81+
- To run the tests in UI mode, run:
82+
```
83+
pnpm run e2e:ui
84+
```
85+
- To run the tests in headless mode, run:
86+
87+
```
88+
pnpm run e2e:ci
89+
```
90+
91+
Note: e2e tests cannot be run in Gitpod environment.
92+
7793
### How to report bugs
7894

7995
Found a bug while playing?

‎e2e/can-finish-quiz.spec.ts

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { test, expect } from "@playwright/test";
2+
3+
test.beforeEach(async ({ page }) => {
4+
await page.goto("/#/quizzes");
5+
6+
await page.getByRole("button", { name: "HTML" }).click();
7+
8+
await page.getByRole("button", { name: "10", exact: true }).click();
9+
});
10+
11+
test("should show the results after the user has answered answer all questions", async ({
12+
page
13+
}) => {
14+
// loop through all the questions.
15+
for (let i = 1; i <= 10; i++) {
16+
expect(page.url()).toContain(`${i}/of/10`);
17+
18+
// Select the first option (no matter if it right or worng)
19+
await page.getByRole("button").first().click();
20+
21+
await page.getByRole("button", { name: "Submit", exact: true }).click();
22+
23+
const dialog = page.getByRole("dialog");
24+
25+
await expect(dialog).toBeVisible();
26+
await expect(dialog.getByText("Points:")).toBeVisible();
27+
await expect(dialog.getByText("Your answer:")).toBeVisible();
28+
await expect(dialog.getByText("Answer:", { exact: true })).toBeVisible();
29+
await dialog.getByRole("button", { name: "Next Question" }).click();
30+
}
31+
32+
// After the 10th question, the results page shows up
33+
await page.waitForURL("/#/quizzes/HTML/results");
34+
35+
await expect(page.getByRole("heading", { name: "Results" })).toBeVisible();
36+
await expect(page.getByRole("button", { name: "Play again?" })).toBeVisible();
37+
});

‎e2e/can-run-quiz.spec.ts

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { test, expect } from "@playwright/test";
2+
import { CATEGORIES, QUESTION_NUMS } from "../src/constants";
3+
4+
test.beforeEach(async ({ page }) => {
5+
await page.goto("/#/quizzes");
6+
});
7+
8+
test("should display a list of categories", async ({ page }) => {
9+
await expect(
10+
page.getByRole("heading", { name: "Choose a Category" })
11+
).toBeVisible();
12+
13+
for (let i = 0; i < CATEGORIES.length; i++) {
14+
await expect(
15+
page.getByRole("button", { name: CATEGORIES[0], exact: true })
16+
).toBeVisible();
17+
}
18+
});
19+
20+
test("should allow selecting the number of questions", async ({ page }) => {
21+
await page.getByRole("button", { name: "HTML" }).click();
22+
23+
await page.waitForURL("#/quizzes/HTML/questionsTotal");
24+
25+
await expect(
26+
page.getByRole("heading", { name: "Choose a length for the Quiz" })
27+
).toBeVisible();
28+
29+
for (let i = 0; i < QUESTION_NUMS.length; i++) {
30+
await expect(
31+
page.getByRole("button", {
32+
name: QUESTION_NUMS[i].toString(),
33+
exact: true
34+
})
35+
).toBeVisible();
36+
}
37+
38+
await expect(page.getByRole("button", { name: /All/ })).toBeVisible();
39+
});
40+
41+
test("should start the first question after the user has selected the number of questions", async ({
42+
page
43+
}) => {
44+
await page.getByRole("button", { name: "HTML" }).click();
45+
46+
await page.getByRole("button", { name: "10", exact: true }).click();
47+
48+
await page.waitForURL("/#/quizzes/HTML/questions/1/of/10");
49+
50+
await expect(page.getByRole("heading", { name: "Question 1" })).toBeVisible();
51+
});
52+
53+
test("question page should contain 4 options and `submit` button", async ({
54+
page
55+
}) => {
56+
await page.getByRole("button", { name: "HTML" }).click();
57+
58+
await page.getByRole("button", { name: "10", exact: true }).click();
59+
60+
const options = page.getByRole("list");
61+
await expect(options.getByRole("button")).toHaveCount(4);
62+
63+
await page.getByRole("button", { name: "Submit", exact: true }).click();
64+
});
65+
66+
test("should show a modal after selecting one option and click the `submit` button", async ({
67+
page
68+
}) => {
69+
await page.getByRole("button", { name: "HTML" }).click();
70+
71+
await page.getByRole("button", { name: "10", exact: true }).click();
72+
73+
// Select the first option (no matter if it's right or worng)
74+
await page.getByRole("button").first().click();
75+
76+
await page.getByRole("button", { name: "Submit", exact: true }).click();
77+
await expect(page.getByRole("dialog")).toBeVisible();
78+
});

‎e2e/landing-page.spec.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { test, expect } from "@playwright/test";
2+
3+
test.beforeEach(async ({ page }) => {
4+
await page.goto("/");
5+
});
6+
7+
test("should render the page correctly", async ({ page }) => {
8+
await expect(page).toHaveTitle(/Developer Quiz/);
9+
10+
const startButton = page.getByRole("link", {
11+
name: "Get started (it's free)"
12+
});
13+
await expect(startButton).toBeVisible();
14+
await expect(startButton).toHaveAttribute("href", "#/quizzes");
15+
});

‎e2e/score-and-results.spec.ts

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { test, expect } from "@playwright/test";
2+
import htmlQuizQuestions from "../src/data/html-quiz";
3+
import {
4+
correctModalResponses,
5+
incorrectModalResponses
6+
} from "../src/data/modal-responses";
7+
8+
test.beforeEach(async ({ page }) => {
9+
await page.goto("/#/quizzes");
10+
});
11+
12+
test("should show 'success' modal after selecting the correct option", async ({
13+
page
14+
}) => {
15+
await page.getByRole("button", { name: "HTML" }).click();
16+
17+
await page.getByRole("button", { name: "10", exact: true }).click();
18+
19+
await expect(page.getByText("Points: 0")).toBeVisible();
20+
21+
const question = await page.locator("legend").textContent();
22+
// Find the question inside questions of the category
23+
const questionData = htmlQuizQuestions.find(({ Question }) =>
24+
question.includes(Question)
25+
);
26+
27+
if (!questionData) {
28+
console.log("Question not found.");
29+
}
30+
31+
const answer = questionData.Answer;
32+
33+
await page.getByRole("button", { name: answer }).click();
34+
await page.getByRole("button", { name: "Submit", exact: true }).click();
35+
36+
const dialog = page.getByRole("dialog");
37+
const message = await dialog.getByRole("heading", { level: 2 }).textContent();
38+
const isMessageInExpectedSet = correctModalResponses.some(response =>
39+
message.includes(response)
40+
);
41+
42+
await expect(dialog).toBeVisible();
43+
expect(isMessageInExpectedSet).toEqual(true);
44+
await expect(dialog.getByText("Points: 1")).toBeVisible();
45+
});
46+
47+
test("should show 'failure' modal after selecting the wrong option", async ({
48+
page
49+
}) => {
50+
await page.getByRole("button", { name: "HTML" }).click();
51+
52+
await page.getByRole("button", { name: "10", exact: true }).click();
53+
54+
await expect(page.getByText("Points: 0")).toBeVisible();
55+
56+
const question = await page.locator("legend").textContent();
57+
// Find the question inside questions of the category
58+
const questionData = htmlQuizQuestions.find(({ Question }) =>
59+
question.includes(Question)
60+
);
61+
62+
if (!questionData) {
63+
console.log("Question not found.");
64+
}
65+
66+
const distractor = questionData.Distractor1;
67+
68+
await page.getByRole("button", { name: distractor }).click();
69+
await page.getByRole("button", { name: "Submit", exact: true }).click();
70+
71+
const dialog = page.getByRole("dialog");
72+
const message = await dialog.getByRole("heading", { level: 2 }).textContent();
73+
const isMessageInExpectedSet = incorrectModalResponses.some(response =>
74+
message.includes(response)
75+
);
76+
77+
await expect(dialog).toBeVisible();
78+
expect(isMessageInExpectedSet).toEqual(true);
79+
await expect(dialog.getByText("Points: 0")).toBeVisible();
80+
});

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
2424
"start:local-docker": "docker container run --rm -it -p 3000:3000 developer-quiz-site",
2525
"build": "vite build",
2626
"test": "vitest",
27+
"e2e:ui": "playwright test --ui",
28+
"e2e:ci": "playwright test",
2729
"lint": "eslint .",
2830
"pretty-quick": "pretty-quick",
2931
"fix-style": "pnpm run lint --fix",
@@ -50,6 +52,7 @@
5052
]
5153
},
5254
"devDependencies": {
55+
"@playwright/test": "^1.45.3",
5356
"@types/node": "^20.0.0",
5457
"@types/react": "^18.3.3",
5558
"@types/react-dom": "^18.0.4",

‎playwright.config.ts

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

0 commit comments

Comments
 (0)