test: add E2E testing to portfolio site

apps/portfolio/.gitignore

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

apps/portfolio/e2e/title.spec.ts

@@ -0,0 +1,14 @@
+import { expect, test } from "@playwright/test"
+
+const prefix = "pomp's portfolio | "
+
+test("should have proper title", async ({ page }) => {
+    await page.goto("/")
+    expect(await page.title()).toEqual(`${prefix}Home`)
+
+    await page.goto("/project/developomp-site")
+    expect(await page.title()).toEqual(`${prefix}developomp-site`)
+
+    await page.goto("/404")
+    expect(await page.title()).toEqual(`${prefix}Page Not Found`)
+})

apps/portfolio/package.json

@@ -4,7 +4,9 @@
     "private": true,
     "scripts": {
         "dev": "open-cli http://localhost:5174 && next dev -p 5174",
+        "dev:headless": "next dev -p 5174",
         "build": "next build",
+        "test:e2e": "playwright test",
         "lint": "next lint",
         "clean": "rm -rf .next .turbo build node_modules"
     },
@@ -20,27 +22,28 @@
         "@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",
+        "@types/react": "18.2.17",
         "@types/react-collapse": "^5.0.1",
         "@types/react-dom": "18.2.7",
-        "@types/react": "18.2.17",
         "@typescript-eslint/eslint-plugin": "^6.2.0",
         "@typescript-eslint/parser": "^6.2.0",
         "autoprefixer": "10.4.14",
-        "eslint-config-next": "13.4.12",
         "eslint": "8.45.0",
+        "eslint-config-next": "13.4.12",
         "highlight.js": "^11.8.0",
         "katex": "^0.16.8",
         "next": "13.4.12",
         "open-cli": "^7.2.0",
         "postcss": "8.4.27",
-        "prettier-plugin-tailwindcss": "^0.4.1",
         "prettier": "^2.8.8",
+        "prettier-plugin-tailwindcss": "^0.4.1",
+        "react": "18.2.0",
         "react-collapse": "^5.1.1",
         "react-dom": "18.2.0",
-        "react": "18.2.0",
         "tailwindcss": "3.3.3",
         "typescript": "5.1.6"
     }

apps/portfolio/playwright.config.ts

@@ -0,0 +1,64 @@
+import { devices, PlaywrightTestConfig } from "@playwright/test"
+import path from "path"
+
+const baseURL = "http://localhost:5174"
+
+// 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

pnpm-lock.yaml

@@ -251,6 +251,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