From ab9e5a6707b822393a04287eea80379c5993892d Mon Sep 17 00:00:00 2001
From: FranGuam <53105842+FranGuam@users.noreply.github.com>
Date: Wed, 6 Mar 2024 23:32:00 +0800
Subject: [PATCH] feat: playwright tests (#1626)
* feat: playwright tests
* feat(test): demo tests
* feat(test): prettier ci & cd
* fix: lower z-index for siders
* fix(ci): install browser
---
.github/workflows/actions.yml | 68 -----
.github/workflows/cd.yml | 25 ++
.github/workflows/ci.yml | 60 ++++
.gitignore | 4 +
package.json | 5 +-
playwright.config.ts | 77 +++++
src/__tests__/App.test.tsx | 19 --
src/app/ContestSite/MenuPage.tsx | 2 +-
src/app/InfoSite/index.tsx | 2 +-
tests/demo-todo-app.spec.ts | 489 +++++++++++++++++++++++++++++++
tests/example.spec.ts | 20 ++
yarn.lock | 267 +++--------------
12 files changed, 714 insertions(+), 324 deletions(-)
delete mode 100644 .github/workflows/actions.yml
create mode 100644 .github/workflows/cd.yml
create mode 100644 .github/workflows/ci.yml
create mode 100644 playwright.config.ts
delete mode 100644 src/__tests__/App.test.tsx
create mode 100644 tests/demo-todo-app.spec.ts
create mode 100644 tests/example.spec.ts
diff --git a/.github/workflows/actions.yml b/.github/workflows/actions.yml
deleted file mode 100644
index 6420d4788..000000000
--- a/.github/workflows/actions.yml
+++ /dev/null
@@ -1,68 +0,0 @@
-name: actions
-
-on: [push, pull_request]
-
-jobs:
- test:
- runs-on: ubuntu-latest
-
- steps:
- - name: Checkout repository
- uses: actions/checkout@v4
-
- - name: Set up Node.js
- uses: actions/setup-node@v4
- with:
- node-version: "20.x"
-
- - name: Get yarn cache path
- id: yarn-cache-dir-path
- run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-
- - name: Restore yarn cache
- uses: actions/cache@v4
- id: yarn-cache
- with:
- path: ${{steps.yarn-cache-dir-path.outputs.dir}}
- key: ${{runner.os}}-yarn-${{hashFiles('**/yarn.lock')}}
- restore-keys: |
- ${{runner.os}}-yarn-
-
- - name: Install dependencies
- run: yarn install --frozen-lockfile
-
- - name: Check grammar
- run: |
- yarn lint
- yarn typecheck
-
- - name: Test run
- run: |
- yarn test
-
- - name: Test build
- run: |
- yarn build
-
- deploy:
- if: |
- github.event_name == 'push' &&
- github.ref_name == 'master' &&
- github.repository_owner == 'eesast'
- needs: test
- runs-on: ubuntu-latest
-
- steps:
- - name: Checkout repository
- uses: actions/checkout@v4
-
- - name: Login to DockerHub
- run: echo "${{secrets.DOCKER_PASSWORD}}" | docker login -u "${{secrets.DOCKER_USERNAME}}" --password-stdin
-
- - name: Build docker image
- shell: bash
- run: docker build -t eesast/web:latest .
-
- - name: Push docker image
- shell: bash
- run: docker push eesast/web:latest
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
new file mode 100644
index 000000000..4ec745829
--- /dev/null
+++ b/.github/workflows/cd.yml
@@ -0,0 +1,25 @@
+name: CD
+
+on:
+ push:
+ branches: [ master ]
+
+jobs:
+ deploy:
+ if: github.repository_owner == 'eesast'
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout repository
+ uses: actions/checkout@v4
+
+ - name: Login to DockerHub
+ run: echo "${{secrets.DOCKER_PASSWORD}}" | docker login -u "${{secrets.DOCKER_USERNAME}}" --password-stdin
+
+ - name: Build docker image
+ shell: bash
+ run: docker build -t eesast/web:latest .
+
+ - name: Push docker image
+ shell: bash
+ run: docker push eesast/web:latest
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 000000000..c35b3feb7
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,60 @@
+name: CI
+
+on:
+ push:
+ branches:
+ - '*'
+ - '!master'
+ pull_request:
+ branches: [ master ]
+
+concurrency:
+ group: ci-${{ github.ref }}
+ cancel-in-progress: true
+
+jobs:
+ test:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout repository
+ uses: actions/checkout@v4
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: "20.x"
+
+ - name: Get yarn cache path
+ id: yarn-cache-dir-path
+ run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+ - name: Restore yarn cache
+ uses: actions/cache@v4
+ id: yarn-cache
+ with:
+ path: ${{steps.yarn-cache-dir-path.outputs.dir}}
+ key: ${{runner.os}}-yarn-${{hashFiles('**/yarn.lock')}}
+ restore-keys: |
+ ${{runner.os}}-yarn-
+
+ - name: Install dependencies
+ run: |
+ yarn install --frozen-lockfile
+ yarn playwright install --with-deps
+
+ - name: Check grammar
+ run: |
+ yarn lint
+ yarn typecheck
+
+ - name: Run Playwright tests
+ run: yarn playwright test
+
+ - name: Upload Playwright report
+ uses: actions/upload-artifact@v3
+ if: always()
+ with:
+ name: playwright-report
+ path: playwright-report/
+ retention-days: 30
diff --git a/.gitignore b/.gitignore
index 514521086..e121a32ef 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,7 @@ yarn-error.log*
!.vscode/settings.json
.idea/*
.eslintcache
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/package.json b/package.json
index e62d590ef..f62e363d3 100644
--- a/package.json
+++ b/package.json
@@ -38,10 +38,9 @@
"@graphql-codegen/cli": "5.0.2",
"@graphql-codegen/typescript-operations": "4.2.0",
"@graphql-codegen/typescript-react-apollo": "4.3.0",
- "@testing-library/react": "14.2.1",
+ "@playwright/test": "^1.42.1",
"@types/file-saver": "2.0.7",
"@types/is-url": "1.2.32",
- "@types/jest": "29.5.12",
"@types/lodash.get": "4.4.9",
"@types/node": "20.11.24",
"@types/pizzip": "3.0.5",
@@ -79,7 +78,7 @@
"reset": "rimraf node_modules && rimraf yarn.lock && yarn",
"clean": "rimraf ./node_modules/.cache && rimraf build && rimraf electron",
"start": "react-app-rewired start",
- "test": "react-app-rewired test --transformIgnorePatterns \"node_modules/(?!antd|rc|axios)\"",
+ "test": "playwright test --ui",
"build": "react-app-rewired build",
"analyze": "cross-env ANALYZER=true yarn build",
"lint": "eslint src --ext .js,.jsx,.ts,.tsx",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 000000000..594858da9
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,77 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+ testDir: "./tests",
+ /* Run tests in files in parallel */
+ fullyParallel: true,
+ /* Fail the build on CI if you accidentally left test.only in the source code. */
+ forbidOnly: !!process.env.CI,
+ /* Retry on CI only */
+ retries: process.env.CI ? 2 : 0,
+ /* Opt out of parallel tests on CI. */
+ workers: process.env.CI ? 1 : undefined,
+ /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+ reporter: "html",
+ /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+ use: {
+ /* Base URL to use in actions like `await page.goto('/')`. */
+ // baseURL: 'http://127.0.0.1:3000',
+
+ /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+ trace: "on-first-retry",
+ },
+
+ /* Configure projects for major browsers */
+ projects: [
+ {
+ name: "chromium",
+ use: { ...devices["Desktop Chrome"] },
+ },
+
+ {
+ name: "firefox",
+ use: { ...devices["Desktop Firefox"] },
+ },
+
+ {
+ name: "webkit",
+ use: { ...devices["Desktop Safari"] },
+ },
+
+ /* Test against mobile viewports. */
+ // {
+ // name: "Mobile Chrome",
+ // use: { ...devices["Pixel 5"] },
+ // },
+ // {
+ // name: "Mobile Safari",
+ // use: { ...devices["iPhone 12"] },
+ // },
+
+ /* Test against branded browsers. */
+ // {
+ // name: 'Microsoft Edge',
+ // use: { ...devices['Desktop Edge'], channel: 'msedge' },
+ // },
+ // {
+ // name: 'Google Chrome',
+ // use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+ // },
+ ],
+
+ /* Run your local dev server before starting the tests */
+ webServer: {
+ command: "yarn start",
+ url: "http://localhost:3000/?source=test",
+ reuseExistingServer: !process.env.CI,
+ },
+});
diff --git a/src/__tests__/App.test.tsx b/src/__tests__/App.test.tsx
deleted file mode 100644
index 4dfa47296..000000000
--- a/src/__tests__/App.test.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import { BrowserRouter } from "react-router-dom";
-import { ApolloProvider } from "@apollo/client";
-import "../index.css";
-import App from "../app";
-import { client } from "../api/apollo";
-
-test("renders without crashing", () => {
- render(
-
-
-
-
-
-
- ,
- );
-});
diff --git a/src/app/ContestSite/MenuPage.tsx b/src/app/ContestSite/MenuPage.tsx
index 9c7c3302e..c38ded251 100644
--- a/src/app/ContestSite/MenuPage.tsx
+++ b/src/app/ContestSite/MenuPage.tsx
@@ -261,7 +261,7 @@ const MenuPage: React.FC = (props) => {
left: 0,
top: "72px",
bottom: 0,
- zIndex: 99,
+ zIndex: 98,
}}
>