test: add E2E testing

.github/workflows/deploy.yml

@@ -2,12 +2,10 @@
 
 name: Deploy pages
 on:
-    push:
+    workflow_run:
-        branches:
+        workflows: ["Test"]
-            - master
+        types:
-concurrency:
+            - completed
-    group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-    cancel-in-progress: true
 jobs:
     deploy:
         if: ${{ github.repository_owner == 'developomp' }}

.github/workflows/test.yml

@@ -0,0 +1,41 @@
+name: Test
+on:
+    push:
+        branches:
+            - master
+concurrency:
+    group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+    cancel-in-progress: true
+jobs:
+    deploy:
+        if: ${{ github.repository_owner == 'developomp' }}
+        name: Deploy
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout Repo
+              uses: actions/checkout@master
+
+            - uses: pnpm/action-setup@v2
+              with:
+                  version: 8
+
+            - name: Setup Node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 18
+                  cache: pnpm
+
+            - name: Install dependencies
+              run: pnpm install
+
+            - name: Install playwright browsers
+              run: npx playwright install --with-deps
+
+            - name: Run tests
+              run: pnpm test:e2e
+
+            - uses: actions/upload-artifact@v3
+              with:
+                  name: playwright-report
+                  path: |
+                      apps/*/playwright-report

apps/blog/.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+/test-results
 
 # next.js
 /.next/

apps/blog/e2e/title.spec.ts

@@ -0,0 +1,9 @@
+import { expect, test } from "@playwright/test"
+
+test("should have proper title", async ({ page }) => {
+    await page.goto("/")
+    expect(await page.title()).toEqual("pomp's blog | Home")
+
+    await page.goto("/posts/test-post")
+    expect(await page.title()).toEqual("pomp's blog | Test post")
+})

apps/blog/package.json

@@ -4,8 +4,10 @@
     "private": true,
     "scripts": {
         "dev": "open-cli http://localhost:3000 && next dev",
+        "dev:headless": "next dev",
         "build": "next build",
         "lint": "next lint",
+        "test:e2e": "playwright test",
         "clean": "rm -rf .next .turbo build node_modules"
     },
     "devDependencies": {
@@ -19,6 +21,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@kunukn/react-collapse": "^2.2.10",
+        "@playwright/test": "^1.36.2",
         "@types/highlight.js": "^10.1.0",
         "@types/katex": "^0.16.2",
         "@types/node": "20.4.5",

apps/blog/playwright.config.ts

@@ -0,0 +1,64 @@
+import { devices, PlaywrightTestConfig } from "@playwright/test"
+import path from "path"
+
+const baseURL = "http://localhost:3000"
+
+// Reference: https://playwright.dev/docs/test-configuration
+const config: PlaywrightTestConfig = {
+    // Timeout per test
+    timeout: 30 * 1000,
+
+    // Test directory
+    testDir: path.join(__dirname, "e2e"),
+
+    // Artifacts folder where screenshots, videos, and traces are stored.
+    outputDir: "test-results/",
+
+    // Run your local dev server before starting the tests:
+    // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
+    webServer: {
+        command: "pnpm dev:headless",
+        url: baseURL,
+        timeout: 120 * 1000,
+        // eslint-disable-next-line turbo/no-undeclared-env-vars
+        reuseExistingServer: !process.env.CI,
+    },
+
+    use: {
+        // Use baseURL so to make navigations relative.
+        // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
+        baseURL,
+
+        // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
+        // More information: https://playwright.dev/docs/trace-viewer
+        trace: "retry-with-trace",
+
+        // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
+        // contextOptions: {
+        //   ignoreHTTPSErrors: true,
+        // },
+    },
+
+    projects: [
+        {
+            name: "Desktop Chrome",
+            use: {
+                ...devices["Desktop Chrome"],
+            },
+        },
+        {
+            name: "Desktop Firefox",
+            use: {
+                ...devices["Desktop Firefox"],
+            },
+        },
+        {
+            name: "Mobile Chrome",
+            use: {
+                ...devices["Pixel 5"],
+            },
+        },
+    ],
+}
+
+export default config

package.json

@@ -2,8 +2,9 @@
     "private": true,
     "packageManager": "^pnpm@7.0.0",
     "scripts": {
-        "build": "turbo run build",
         "dev": "turbo run dev --parallel --continue",
+        "build": "turbo run build",
+        "test:e2e": "turbo run test:e2e --parallel --continue",
         "lint": "turbo run lint",
         "clean": "turbo run clean && rm -rf node_modules"
     },

pnpm-lock.yaml

@@ -59,6 +59,9 @@ importers:
       '@kunukn/react-collapse':
         specifier: ^2.2.10
         version: 2.2.10(react-dom@18.2.0)(react@18.2.0)
+      '@playwright/test':
+        specifier: ^1.36.2
+        version: 1.36.2
       '@types/highlight.js':
         specifier: ^10.1.0
         version: 10.1.0
@@ -1062,6 +1065,17 @@ packages:
       tslib: 2.6.1
     dev: true
 
+  /@playwright/test@1.36.2:
+    resolution: {integrity: sha512-2rVZeyPRjxfPH6J0oGJqE8YxiM1IBRyM8hyrXYK7eSiAqmbNhxwcLa7dZ7fy9Kj26V7FYia5fh9XJRq4Dqme+g==}
+    engines: {node: '>=16'}
+    hasBin: true
+    dependencies:
+      '@types/node': 20.4.5
+      playwright-core: 1.36.2
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /@polka/url@1.0.0-next.21:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
@@ -5552,6 +5566,12 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
+  /playwright-core@1.36.2:
+    resolution: {integrity: sha512-sQYZt31dwkqxOrP7xy2ggDfEzUxM1lodjhsQ3NMMv5uGTRDsLxU0e4xf4wwMkF2gplIxf17QMBCodSFgm6bFVQ==}
+    engines: {node: '>=16'}
+    hasBin: true
+    dev: true
+
   /postcss-import@15.1.0(postcss@8.4.27):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}

turbo.json

@@ -8,6 +8,9 @@
             "cache": false,
             "dependsOn": ["^build"]
         },
+        "test:e2e": {
+            "cache": false
+        },
         "lint": {
             "cache": false
         },