feat: use playwright test suit

.github/workflows/ci-check.yml

@@ -4,16 +4,47 @@ on:
   pull_request:
     branches:
       - main
-      - dev
+
   merge_group:
     branches:
       - main
-      - dev
 
 jobs:
-  ci-test:
+  ci-check:
     name: CI Check
     runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.45.1-jammy
+      options: --user 1001
+    steps:
+      - name: Generate a token
+        id: generate_token
+        uses: tibdex/github-app-token@v2
+        with:
+          app_id: ${{ secrets.IDEALJS_BOT_APP_ID }}
+          private_key: ${{ secrets.IDEALJS_BOT_PRIVATE_KEY }}
+      - uses: actions/checkout@v4
+        with:
+          token: ${{ steps.generate_token.outputs.token }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: yarn
+      - name: Install Dependencies
+        run: yarn install --immutable
+      - name: Update Playwright Snapshot
+        run: yarn workspace website test
+
+  update-snapshot:
+    needs: [ci-check]
+    if: ${{ always() && contains(join(needs.*.result, ','), 'failure') }}
+    name: Update Snapshot
+    environment:
+      name: snapshot-updater
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.45.1-jammy
+      options: --user 1001
     steps:
       - name: Generate a token
         id: generate_token
@@ -26,20 +57,12 @@ jobs:
           token: ${{ steps.generate_token.outputs.token }}
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: yarn
       - name: Install Dependencies
         run: yarn install --immutable
-      - name: Install Playwright Browsers
-        run: yarn workspace website playwright install --with-deps
-      - name: Update Vitest Snapshot
+      - name: Update Playwright Snapshot
         run: yarn workspace website test -u
       - uses: stefanzweifel/git-auto-commit-action@v5
         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

apps/website/app/page.spec.ts

@@ -0,0 +1,7 @@
+import { expect, test } from "@playwright/test";
+
+test("home", async ({ page }) => {
+  await page.goto("/");
+
+  expect(await page.screenshot()).toMatchSnapshot();
+});

apps/website/package.json

@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "vitest"
+    "test": "playwright test"
   },
   "dependencies": {
     "@idealjs/camphora-styled": "workspace:^",
@@ -18,23 +18,18 @@
     "clsx": "^2.1.1",
     "nanoid": "^5.0.7",
     "next": "^15.0.0-rc.0",
-    "react": "19.0.0-rc-df5f2736-20240712",
-    "react-dom": "19.0.0-rc-df5f2736-20240712"
+    "react": "19.0.0-rc-fb9a90fa48-20240614",
+    "react-dom": "19.0.0-rc-fb9a90fa48-20240614"
   },
   "devDependencies": {
-    "@playwright/test": "^1.45.1",
+    "@playwright/test": "^1.45.3",
     "@testing-library/react": "^16.0.0",
     "@types/mdx": "^2.0.13",
-    "@types/node": "^20.14.10",
+    "@types/node": "^20.14.14",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/next-plugin": "^2.4.3",
-    "@vanilla-extract/vite-plugin": "^4.0.13",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/browser": "^2.0.2",
-    "typescript": "^5.5.3",
-    "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^2.0.2"
+    "typescript": "^5.5.4"
   }
 }

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",
+  /* 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,
+  },
+});

apps/website/tsconfig.json

@@ -4,18 +4,13 @@
     "noEmit": true,
     "jsx": "preserve",
     "incremental": true,
-    "types": [
-      "vitest/importMeta"
-    ],
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
-      "@/*": [
-        "./*"
-      ],
+      "@/*": ["./*"],
       "@idealjs/camphora-styled": [
         "../../packages/camphora-styled/src/index.ts"
       ]
@@ -26,13 +21,6 @@
       "path": "../../packages/camphora-styled"
     }
   ],
-  "include": [
-    "next-env.d.ts",
-    ".next/types/**/*.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }

package.json

@@ -10,14 +10,14 @@
     "lint": "yarn workspaces foreach -A run lint"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.16.0",
-    "@typescript-eslint/parser": "^7.16.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.5",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "lerna": "^8.1.6",
+    "lerna": "^8.1.7",
     "lerna-update-wizard": "^1.1.2",
-    "vercel": "^34.3.1"
+    "vercel": "^35.2.2"
   },
   "packageManager": "[email protected]"
 }

packages/camphora-styled/package.json

@@ -19,11 +19,11 @@
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/rollup-plugin": "^1.3.7",
-    "esbuild": "^0.21.5",
-    "rimraf": "^5.0.9",
-    "rollup": "^4.18.1",
+    "esbuild": "^0.23.0",
+    "rimraf": "^5.0.10",
+    "rollup": "^4.19.2",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.4"
   }
 }