test: add E2E testing

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