feat: add e2e test suit

idealjs · Apr 23, 2024 · cd27957 · cd27957
1 parent e678e34
commit cd27957
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Page = () => {
+  return <div id="button">Page</div>;
+};
+
+export default Page;
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<compat/fsevents>":
+"fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>":
   version: 2.3.2
   resolution: "fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>::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"