From cd27957c9ea12ff6f79189c91c1840b1c0422af6 Mon Sep 17 00:00:00 2001 From: cqh963852 Date: Tue, 23 Apr 2024 17:08:35 +0800 Subject: [PATCH] feat: add e2e test suit --- .github/workflows/ci-check.yml | 17 ++----- apps/website/.gitignore | 6 +++ .../app/components/button/page.spec.ts | 7 +++ apps/website/app/components/button/page.tsx | 7 +++ apps/website/package.json | 4 +- apps/website/playwright.config.ts | 48 +++++++++++++++++++ packages/camphora-styled/package.json | 5 +- packages/camphora-styled/tsconfig.json | 3 +- yarn.lock | 40 +++++++++++++++- 9 files changed, 117 insertions(+), 20 deletions(-) create mode 100644 apps/website/app/components/button/page.spec.ts create mode 100644 apps/website/app/components/button/page.tsx create mode 100644 apps/website/playwright.config.ts diff --git a/.github/workflows/ci-check.yml b/.github/workflows/ci-check.yml index fd09935..ee2d8fc 100644 --- a/.github/workflows/ci-check.yml +++ b/.github/workflows/ci-check.yml @@ -4,9 +4,11 @@ on: pull_request: branches: - main + - dev merge_group: branches: - main + - dev jobs: ci-test: @@ -28,25 +30,16 @@ jobs: cache: yarn - name: Install Dependencies run: yarn install --immutable - - name: Test Packages - run: yarn workspaces foreach run test - - name: Build Packages - run: yarn workspaces foreach run build - name: Install Playwright Browsers run: yarn workspace website playwright install --with-deps - - name: Run Playwright tests - id: e2e - run: yarn workspace website test:e2e - name: Update Playwright Snapshot - if: ${{ failure() && steps.e2e.conclusion == 'failure' }} run: yarn workspace website test:e2e -u + - uses: stefanzweifel/git-auto-commit-action@v4 + with: + commit_message: "chore: update image snapshot" - name: Upload playwright-report uses: actions/upload-artifact@v3 if: always() with: path: apps/website/playwright-report/ retention-days: 30 - - uses: stefanzweifel/git-auto-commit-action@v4 - if: ${{ failure() && steps.e2e.conclusion == 'failure' }} - with: - commit_message: 'chore: update image snapshot' diff --git a/apps/website/.gitignore b/apps/website/.gitignore index fd3dbb5..7dedfa7 100644 --- a/apps/website/.gitignore +++ b/apps/website/.gitignore @@ -34,3 +34,9 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +/test-results +/playwright-report +/playwright/.cache +*chromium-linux.png +*chromium-windows.png diff --git a/apps/website/app/components/button/page.spec.ts b/apps/website/app/components/button/page.spec.ts new file mode 100644 index 0000000..6d55fd6 --- /dev/null +++ b/apps/website/app/components/button/page.spec.ts @@ -0,0 +1,7 @@ +import { expect, test } from "@playwright/test"; + +test("button color", async ({ page }) => { + await page.goto("/components/button"); + + expect(await page.locator("#button").screenshot()).toMatchSnapshot(); +}); diff --git a/apps/website/app/components/button/page.tsx b/apps/website/app/components/button/page.tsx new file mode 100644 index 0000000..c05b443 --- /dev/null +++ b/apps/website/app/components/button/page.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Page = () => { + return
Page
; +}; + +export default Page; diff --git a/apps/website/package.json b/apps/website/package.json index 1d52302..3af0bad 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -7,7 +7,8 @@ "dev": "next dev", "build": "next build", "start": "next start", - "lint": "next lint" + "lint": "next lint", + "test:e2e": "playwright test" }, "dependencies": { "@idealjs/camphora-styled": "workspace:^", @@ -17,6 +18,7 @@ "react-dom": "^18.2.0" }, "devDependencies": { + "@playwright/test": "^1.43.1", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", diff --git a/apps/website/playwright.config.ts b/apps/website/playwright.config.ts new file mode 100644 index 0000000..d547010 --- /dev/null +++ b/apps/website/playwright.config.ts @@ -0,0 +1,48 @@ +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: "./app/components", + /* 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://localhost: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"] }, + }, + ], + + /* Run your local dev server before starting the tests */ + webServer: { + command: "yarn dev", + port: 3000, + reuseExistingServer: !process.env.CI, + timeout: 120 * 1000, + }, +}); diff --git a/packages/camphora-styled/package.json b/packages/camphora-styled/package.json index 2bd4509..e166134 100644 --- a/packages/camphora-styled/package.json +++ b/packages/camphora-styled/package.json @@ -12,9 +12,8 @@ }, "license": "MIT", "scripts": { - "build": "rollup -c rollup.config.js", - "typings": "tsc -v && tsc -b -v", - "prepack": "rimraf dist && yarn typings && yarn build" + "build": "tsc -v && tsc -b -v", + "prepack": "rimraf dist && yarn build" }, "devDependencies": { "@vanilla-extract/css": "^1.14.2", diff --git a/packages/camphora-styled/tsconfig.json b/packages/camphora-styled/tsconfig.json index e94e803..dc13e3b 100644 --- a/packages/camphora-styled/tsconfig.json +++ b/packages/camphora-styled/tsconfig.json @@ -3,8 +3,7 @@ "compilerOptions": { "rootDir": "./src", "outDir": "./dist", - "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo", - "emitDeclarationOnly": true + "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo" }, "include": ["src"], "exclude": ["node_modules"] diff --git a/yarn.lock b/yarn.lock index 068f50c..b14cc1c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1409,6 +1409,17 @@ __metadata: languageName: node linkType: hard +"@playwright/test@npm:^1.43.1": + version: 1.43.1 + resolution: "@playwright/test@npm:1.43.1" + dependencies: + playwright: "npm:1.43.1" + bin: + playwright: cli.js + checksum: c49fc94af11472fc7fb781d084191c875aab8afb6cfcd4708168489c55ea4dbde702850e28b7ed05c0f775be8f8b5cac4bf2688a376b9a930d1f5cefdfc45382 + languageName: node + linkType: hard + "@rollup/pluginutils@npm:^5.0.5": version: 5.0.5 resolution: "@rollup/pluginutils@npm:5.0.5" @@ -4472,7 +4483,7 @@ __metadata: languageName: node linkType: hard -"fsevents@npm:~2.3.2": +"fsevents@npm:2.3.2, fsevents@npm:~2.3.2": version: 2.3.2 resolution: "fsevents@npm:2.3.2" dependencies: @@ -4492,7 +4503,7 @@ __metadata: languageName: node linkType: hard -"fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin": +"fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin": version: 2.3.2 resolution: "fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin::version=2.3.2&hash=df0bf1" dependencies: @@ -7777,6 +7788,30 @@ __metadata: languageName: node linkType: hard +"playwright-core@npm:1.43.1": + version: 1.43.1 + resolution: "playwright-core@npm:1.43.1" + bin: + playwright-core: cli.js + checksum: a4a3d9692a87c5a25d5efc99a4fad2b18e8ae4ac5182da932b3d12f932caf6f245e057f4575c769f219b2826abf017ec2ded7a2fa43afed7f62d294af7b359af + languageName: node + linkType: hard + +"playwright@npm:1.43.1": + version: 1.43.1 + resolution: "playwright@npm:1.43.1" + dependencies: + fsevents: "npm:2.3.2" + playwright-core: "npm:1.43.1" + dependenciesMeta: + fsevents: + optional: true + bin: + playwright: cli.js + checksum: 0c8cf26df58e6fac2cbad77cc060451ca1bb96d4631ca07d83d382a0462a307f33fa47c1ec53fc2b1b78058cdd6e62c9b881a0bd91ddd956cc1e900d866d8af6 + languageName: node + linkType: hard + "postcss@npm:8.4.31": version: 8.4.31 resolution: "postcss@npm:8.4.31" @@ -9632,6 +9667,7 @@ __metadata: resolution: "website@workspace:apps/website" dependencies: "@idealjs/camphora-styled": "workspace:^" + "@playwright/test": "npm:^1.43.1" "@types/node": "npm:^20" "@types/react": "npm:^18" "@types/react-dom": "npm:^18"