Setup the playwright test and github action on the codebase

.github/workflows/playwright.yml

@@ -0,0 +1,101 @@
+name: Playwright Tests
+on:
+  push:
+jobs:
+  web-playwright-test:
+    name: Check dub web playwright tests
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Get Node.js version
+        id: nvm
+        run: echo "NODE_VERSION=$(cat .nvmrc)" >> $GITHUB_OUTPUT
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 1
+      - name: Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.11.0
+        with:
+          access_token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Use Node.js ${{ steps.nvm.outputs.NODE_VERSION }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ steps.nvm.outputs.NODE_VERSION }}
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.6.10
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install dependencies
+        run: pnpm install
+      - name: Install Playwright Browsers
+        run: pnpm -r --filter='dub-web' run playwright:install-browsers
+      - name: Run Playwright tests
+        run: pnpm -r --filter='dub-web' run playwright:test
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: apps-web-playwright-report
+          path: apps/web/playwright-report/
+          retention-days: 30
+
+  ui-package-playwright-test:
+    name: Check ui package playwright tests
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Get Node.js version
+        id: nvm
+        run: echo "NODE_VERSION=$(cat .nvmrc)" >> $GITHUB_OUTPUT
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 1
+      - name: Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.11.0
+        with:
+          access_token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Use Node.js ${{ steps.nvm.outputs.NODE_VERSION }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ steps.nvm.outputs.NODE_VERSION }}
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.6.10
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install dependencies
+        run: pnpm install
+      - name: Install Playwright Browsers
+        run: pnpm -r --filter='@dub/ui' run playwright:install-browsers
+      - name: Run Playwright tests
+        run: pnpm -r --filter='@dub/ui' run playwright:test-ct
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: packages-ui-playwright-report
+          path: packages/ui/playwright-report/
+          retention-days: 30

.gitignore

@@ -41,3 +41,9 @@ next-env.d.ts
 .react-email
 .contentlayer
 .vscode
+
+# Tests
+test-results
+playwright-report
+playwright/.cache/
+**/playwright/.cache/

.nvmrc

@@ -0,0 +1 @@
+18

apps/web/package.json

@@ -8,8 +8,11 @@
     "format:write": "prettier --write \"**/*.{css,js,json,jsx,ts,tsx}\"",
     "format": "prettier \"**/*.{css,js,json,jsx,ts,tsx}\"",
     "lint": "next lint",
-    "start": "next start",
-    "script": "tsx ./scripts/run.ts"
+    "playwright:install-browsers": "playwright install --with-deps",
+    "playwright:test": "playwright test",
+    "playwright:test-ui": "playwright test --ui",
+    "playwright:show-report": "playwright show-report",
+    "start": "next start"
   },
   "dependencies": {
     "@boxyhq/saml-jackson": "^1.14.2",
@@ -86,6 +89,7 @@
     "vaul": "^0.6.8"
   },
   "devDependencies": {
+    "@playwright/test": "^1.39.0",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",
     "@types/dotenv-flow": "^3.3.2",
     "@types/html-escaper": "^3.0.0",

apps/web/playwright.config.ts

@@ -0,0 +1,52 @@
+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/playwright",
+  /* 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"] },
+    },
+
+    // Add more browser/mobile device configurations below
+  ],
+});

apps/web/tests/playwright/example.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from "@playwright/test";
+
+test("has title", async ({ page }) => {
+  await page.goto("https://playwright.dev/");
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});

packages/ui/package.json

@@ -13,7 +13,10 @@
     "build": "tsup",
     "lint": "eslint src/",
     "dev": "tsup --watch",
-    "check-types": "tsc --noEmit"
+    "check-types": "tsc --noEmit",
+    "playwright:install-browsers": "playwright install --with-deps",
+    "playwright:test-ct": "pnpm -r --filter='@dub/utils' run build && playwright test -c playwright-ct.config.ts",
+    "playwright:show-report": "playwright show-report"
   },
   "peerDependencies": {
     "@vercel/analytics": "^1.0.0",
@@ -23,11 +26,14 @@
   "devDependencies": {
     "@dub/tailwind-config": "workspace:*",
     "@dub/utils": "workspace:*",
+    "@playwright/experimental-ct-react": "^1.39.0",
+    "@types/node": "18.11.9",
     "@types/react": "^18.2.5",
     "autoprefixer": "^10.4.16",
     "next": "13.5.4",
     "postcss": "^8.4.31",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tailwindcss": "^3.3.3",
     "tsconfig": "workspace:*",
     "tsup": "^6.1.3",

packages/ui/playwright-ct.config.ts

@@ -0,0 +1,47 @@
+import { defineConfig, devices } from "@playwright/experimental-ct-react";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests/playwright",
+  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
+  snapshotDir: "./tests/playwright/__snapshots__",
+  /* Maximum time one test can run for. */
+  timeout: 10 * 1000,
+  /* 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: {
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+
+    /* Port to use for Playwright component endpoint. */
+    ctPort: 3100,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+    // Add more browser/mobile device configurations below
+  ],
+});

packages/ui/playwright/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Testing Page</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

packages/ui/playwright/index.tsx

@@ -0,0 +1,2 @@
+// Import styles, initialize component theme here.
+// import '../src/common.css';

packages/ui/tests/playwright/Button.spec.tsx

@@ -0,0 +1,8 @@
+import { expect, test } from "@playwright/experimental-ct-react";
+import { Button } from "../../src";
+
+test("Button accepts text prop", async ({ mount }) => {
+  const buttonComponent = await mount(<Button text="Hello World" />);
+
+  await expect(buttonComponent).toHaveText("Hello World");
+});