Merge pull request #29 from humanspeak/feature-version

CI/CD - Playwright

Author: jaysin586

.github/workflows/npm-publish.yml

@@ -40,7 +40,7 @@ jobs:
         runs-on: ubuntu-24.04
         strategy:
             matrix:
-                node-version: [20, 22]
+                node-version: [20, 22, 23]
         permissions:
             contents: read
             packages: write
@@ -89,9 +89,46 @@ jobs:
                       ${{ runner.os }}-node-${{ matrix.node-version }}-
                       ${{ runner.os }}-node-
 
+    playwright-tests:
+        timeout-minutes: 60
+        runs-on: ubuntu-24.04
+        steps:
+            - uses: actions/checkout@v4
+              with:
+                  persist-credentials: false
+                  token: ${{ secrets.ACTIONS_KEY }}
+
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 22
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Install Playwright Browsers
+              run: npx playwright install --with-deps
+
+            - name: Run Playwright tests
+              run: npm run test:e2e
+
+            - name: Upload Playwright Results
+              if: always()
+              uses: trunk-io/analytics-uploader@main
+              with:
+                  junit-paths: junit-playwright.xml
+                  org-slug: ${{ secrets.TRUNK_ORG_SLUG }}
+                  token: ${{ secrets.TRUNK_TOKEN }}
+
+            - uses: actions/upload-artifact@v4
+              if: always()
+              with:
+                  name: playwright-report
+                  path: playwright-report/
+                  retention-days: 10
+
     # 4. Coverage reporting (depends on tests)
     coverage-report:
-        needs: [build]
+        needs: [build, playwright-tests]
         runs-on: ubuntu-24.04
         if: ${{ always() }}
         steps:
@@ -103,7 +140,7 @@ jobs:
 
     # 5. Publishing job (main deployment logic)
     publish-github-packages:
-        needs: [build, coverage-report]
+        needs: [build, playwright-tests, coverage-report]
         runs-on: ubuntu-24.04
         permissions:
             contents: write

.gitignore

@@ -11,3 +11,10 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 /coverage
 junit-vitest.xml
+junit-playwright.xml
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package-lock.json

@@ -69,6 +69,11 @@
         "prepublishOnly": "npm run package",
         "preview": "vite preview",
         "test": "vitest run --coverage",
+        "test:all": "npm run test && npm run test:e2e",
+        "test:e2e": "playwright test",
+        "test:e2e:debug": "playwright test --debug",
+        "test:e2e:report": "playwright show-report",
+        "test:e2e:ui": "playwright test --ui",
         "test:only": "vitest run",
         "test:watch": "vitest"
     },
@@ -78,21 +83,22 @@
         "@humanspeak/svelte-subscribe": "^5.0.0"
     },
     "devDependencies": {
+        "@faker-js/faker": "^9.4.0",
+        "@playwright/test": "^1.50.0",
         "@sveltejs/adapter-auto": "^3.0.0",
         "@sveltejs/kit": "^2.0.0",
         "@sveltejs/package": "^2.0.0",
         "@sveltejs/vite-plugin-svelte": "^3.0.0",
         "@testing-library/jest-dom": "^6.1.6",
         "@testing-library/svelte": "^4.0.5",
         "@types/eslint": "8.56.0",
-        "@types/faker": "^5.5.9",
+        "@types/node": "^22.10.10",
         "@typescript-eslint/eslint-plugin": "^6.0.0",
         "@typescript-eslint/parser": "^6.0.0",
         "@vitest/coverage-v8": "^1.1.1",
         "eslint": "^8.56.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-svelte": "^2.35.1",
-        "faker": "^5.5.3",
         "prettier": "^3.1.1",
         "prettier-plugin-svelte": "^3.1.2",
         "publint": "^0.1.9",

package.json

@@ -0,0 +1,41 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+    testDir: './tests',
+    reporter: [['junit', { outputFile: 'junit-playwright.xml' }]],
+    webServer: {
+        command: 'npm run build && npm run preview',
+        port: 4173,
+        timeout: 120000,
+        reuseExistingServer: !process.env.CI,
+        stdout: 'pipe',
+        stderr: 'pipe'
+    },
+    use: {
+        baseURL: 'http://localhost:4173',
+        trace: 'on-first-retry'
+    },
+    timeout: 60000,
+    projects: [
+        {
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] }
+        },
+        {
+            name: 'firefox',
+            use: { ...devices['Desktop Firefox'] }
+        },
+        {
+            name: 'webkit',
+            use: { ...devices['Desktop Safari'] }
+        },
+        {
+            name: 'mobile-chrome',
+            use: { ...devices['Pixel 5'] }
+        },
+        {
+            name: 'mobile-safari',
+            use: { ...devices['iPhone 12'] }
+        }
+    ]
+})

playwright.config.ts

@@ -22,6 +22,7 @@
     import { mean, sum } from '../lib/utils/math.js'
     import { getShuffled } from './_getShuffled.js'
     import { createSamples } from './_createSamples.js'
+    import { page } from '$app/stores'
     import Italic from './_Italic.svelte'
     import Profile from './_Profile.svelte'
     import Tick from './_Tick.svelte'
@@ -32,7 +33,10 @@
     import { getDistinct } from '../lib/utils/array.js'
     import SelectIndicator from './_SelectIndicator.svelte'
 
-    const data = readable(createSamples(2, 2))
+    const seed = $page.url.searchParams.get('seed')
+    const data = readable(
+        createSamples({ seed: isNaN(Number(seed)) ? undefined : Number(seed) }, 2, 2)
+    )
 
     let serverSide = false
 

src/routes/+page.svelte

@@ -7,4 +7,11 @@ export interface Sample {
     status: string
     children?: Sample[]
 }
-export declare const createSamples: (...lengths: number[]) => Sample[]
+type CreateSamplesOptions = {
+    seed?: number
+}
+export declare const createSamples: (
+    options?: CreateSamplesOptions,
+    ...lengths: number[]
+) => Sample[]
+export {}