Update visual regression tests

.gitea/workflows/ci.yaml

@@ -14,6 +14,7 @@ jobs:
       matrix: { node-version: [18, 20] }
     env:
       NODE_OPTIONS: "--max_old_space_size=4096"
+      CI: true
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4

.runner.pid

@@ -0,0 +1 @@
+94423

app/not-found.js

@@ -0,0 +1,14 @@
+export default function NotFound() {
+  return (
+    <div className="min-h-screen bg-[#F4F3F1] flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-6xl font-bold text-[var(--color-content-default-primary)] mb-4">
+          404
+        </h1>
+        <p className="text-[var(--color-content-default-secondary)]">
+          Page Not Found
+        </p>
+      </div>
+    </div>
+  );
+}

tests/e2e/visual-regression.spec.ts

@@ -376,18 +376,40 @@ test.describe("Visual Regression Tests", () => {
     });
   });
 
-  test("error states", async ({ page }) => {
-    // Test error states by simulating a more controlled error condition
-    // Instead of blocking resources, we'll simulate a network error state
+  test("blog listing page", async ({ page }) => {
+    // Navigate to blog listing page
+    await page.goto("/blog");
+    await page.waitForLoadState("networkidle");
+    await settle(page);
 
-    // Navigate to a non-existent route to trigger a 404-like state
+    // Take full page screenshot of blog listing
+    await expect(page).toHaveScreenshot("blog-listing.png", {
+      fullPage: true,
+      animations: "disabled",
+    });
+  });
+
+  test("blog post page", async ({ page }) => {
+    // Navigate to a specific blog post
+    await page.goto("/blog/resolving-active-conflicts");
+    await page.waitForLoadState("networkidle");
+    await settle(page);
+
+    // Take full page screenshot of blog post
+    await expect(page).toHaveScreenshot("blog-post.png", {
+      fullPage: true,
+      animations: "disabled",
+    });
+  });
+
+  test("404 error page", async ({ page }) => {
+    // Navigate to a non-existent route to trigger 404
     await page.goto("/non-existent-page");
+    await page.waitForLoadState("networkidle");
+    await settle(page);
 
-    // Wait for page to stabilize
-    await page.waitForTimeout(2000);
-
-    // Take screenshot of error state
-    await expect(page).toHaveScreenshot("homepage-error.png", {
+    // Take screenshot of 404 page
+    await expect(page).toHaveScreenshot("404-error.png", {
       animations: "disabled",
     });
   });
@@ -413,7 +435,7 @@ test.describe("Visual Regression Tests", () => {
     await page.evaluate(() => {
       document.documentElement.style.setProperty(
         "--prefers-reduced-motion",
-        "reduce",
+        "reduce"
       );
     });
 

vitest.config.mjs

@@ -43,6 +43,13 @@ export default defineConfig({
       thresholds: { lines: 50, functions: 50, statements: 50, branches: 50 },
     },
     pool: "threads",
-    testTimeout: 10000,
+    testTimeout: 30000, // Increased from 10s to 30s for CI environment
+    hookTimeout: 30000, // Increased hook timeout for CI
+    teardownTimeout: 30000, // Increased teardown timeout for CI
+    // CI optimizations
+    maxConcurrency: process.env.CI ? 2 : 5, // Reduce concurrency in CI
+    maxThreads: process.env.CI ? 2 : 4, // Reduce threads in CI
+    minThreads: process.env.CI ? 1 : 2, // Minimum threads in CI
+    retry: process.env.CI ? 2 : 0, // Retry failed tests in CI
   },
 });