Initial Commit

apps/testbed/e2e/layout/console-baseline.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from "@playwright/test";
+import { attachConsoleMonitor } from "@suaveplan/testing-e2e/console-monitor";
+
+test.describe("Console Baseline", () => {
+  const routes = ["/", "/crypto", "/logger", "/datetime", "/i18n", "/feature-flags"];
+
+  for (const route of routes) {
+    test(`${route} has no console errors on load`, async ({ page }) => {
+      const monitor = attachConsoleMonitor(page, {
+        failOn: ["error"],
+        ignore: [
+          // Ignore known non-critical messages
+          /ResizeObserver loop/,
+          /WebSocket connection/,
+          /Failed to load resource.*favicon/,
+        ],
+      });
+
+      await page.goto(route);
+      await expect(page.locator('[data-testid="page-title"]')).toBeVisible();
+
+      monitor.assertClean();
+    });
+  }
+
+  test("console-panel is present on every library page", async ({ page }) => {
+    const libraryRoutes = ["/crypto", "/logger", "/datetime", "/i18n", "/feature-flags"];
+    for (const route of libraryRoutes) {
+      await page.goto(route);
+      await expect(page.locator('[data-testid="console-panel"]')).toBeAttached();
+    }
+  });
+});

apps/testbed/e2e/layout/locale.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Locale Switcher", () => {
+  test("locale switcher is visible in header", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.locator('[data-testid="header"]')).toBeVisible();
+    // Locale switcher should be present
+    const localeSwitcher = page.locator('[data-testid="locale-switcher"]');
+    // If not using that testid, check for a select or button in the header
+    const headerInteractives = page.locator('[data-testid="header"] select, [data-testid="header"] button');
+    const count = await headerInteractives.count();
+    expect(count).toBeGreaterThan(0);
+  });
+
+  test("i18n page locale-select changes output text", async ({ page }) => {
+    await page.goto("/i18n");
+    await expect(page.locator('[data-testid="output"]')).toBeVisible();
+
+    // Get initial text in English
+    const initialText = await page.locator('[data-testid="output"]').textContent();
+    expect(initialText).toBeTruthy();
+
+    // Switch to French
+    await page.locator('[data-testid="locale-select"]').selectOption("fr");
+
+    // Output should now contain French text
+    const frenchText = await page.locator('[data-testid="output"]').textContent();
+    expect(frenchText).toContain("article");
+  });
+
+  test("i18n page locale-select changes to Japanese", async ({ page }) => {
+    await page.goto("/i18n");
+    await page.locator('[data-testid="locale-select"]').selectOption("ja");
+    const text = await page.locator('[data-testid="output"]').textContent();
+    // Japanese output contains Japanese characters or specific words
+    expect(text).toBeTruthy();
+    expect(text).toContain("アイテム");
+  });
+});

apps/testbed/e2e/layout/navigation.spec.ts

@@ -0,0 +1,63 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Navigation", () => {
+  test("home page renders page-title", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.locator('[data-testid="page-title"]')).toBeVisible();
+    await expect(page.locator('[data-testid="sidebar"]')).toBeVisible();
+    await expect(page.locator('[data-testid="header"]')).toBeVisible();
+  });
+
+  test("sidebar nav links exist for all routes", async ({ page }) => {
+    await page.goto("/");
+    // Check a few known nav links
+    await expect(page.locator('[data-testid="nav-crypto"]')).toBeVisible();
+    await expect(page.locator('[data-testid="nav-logger"]')).toBeVisible();
+    await expect(page.locator('[data-testid="nav-datetime"]')).toBeVisible();
+  });
+
+  const libraryRoutes = [
+    { path: "/crypto", title: "@suaveplan/crypto" },
+    { path: "/logger", title: "@suaveplan/logger" },
+    { path: "/datetime", title: "@suaveplan/datetime" },
+    { path: "/i18n", title: "@suaveplan/i18n" },
+    { path: "/feature-flags", title: "@suaveplan/feature-flags" },
+  ];
+
+  for (const route of libraryRoutes) {
+    test(`navigating to ${route.path} shows page-title`, async ({ page }) => {
+      await page.goto(route.path);
+      await expect(page.locator('[data-testid="page-title"]')).toContainText(
+        route.title,
+      );
+    });
+  }
+
+  test("all pages have demo-card and console-panel", async ({ page }) => {
+    const routes = ["/", "/crypto", "/logger", "/datetime", "/i18n", "/feature-flags"];
+    for (const route of routes) {
+      await page.goto(route);
+      await expect(page.locator('[data-testid="demo-card"]')).toBeAttached();
+      await expect(page.locator('[data-testid="console-panel"]')).toBeAttached();
+    }
+  });
+
+  test("home page shows library cards", async ({ page }) => {
+    await page.goto("/");
+    const cards = page.locator('[data-testid="library-card"]');
+    await expect(cards.first()).toBeVisible();
+    const count = await cards.count();
+    expect(count).toBeGreaterThan(5);
+  });
+
+  test("clicking a library card navigates to the page", async ({ page }) => {
+    await page.goto("/");
+    await page.locator('[data-testid="library-card"]').first().click();
+    await expect(page.locator('[data-testid="page-title"]')).toBeVisible();
+  });
+
+  test("404 page renders page-title", async ({ page }) => {
+    await page.goto("/does-not-exist");
+    await expect(page.locator('[data-testid="page-title"]')).toContainText("404");
+  });
+});

apps/testbed/e2e/layout/network-baseline.spec.ts

@@ -0,0 +1,45 @@
+import { test, expect } from "@playwright/test";
+import { attachNetworkMonitor } from "@suaveplan/testing-e2e/network-monitor";
+
+test.describe("Network Baseline", () => {
+  test("home page loads without network failures", async ({ page }) => {
+    const monitor = attachNetworkMonitor(page);
+    await page.goto("/");
+    await expect(page.locator('[data-testid="page-title"]')).toBeVisible();
+    // Filter out WebSocket attempts (expected to fail in test env)
+    const failures = monitor.failures.filter(
+      (f) => !f.url.includes("/api/ws") && !f.url.includes("stun:"),
+    );
+    expect(failures).toHaveLength(0);
+  });
+
+  test("crypto page loads without network failures", async ({ page }) => {
+    const monitor = attachNetworkMonitor(page);
+    await page.goto("/crypto");
+    await expect(page.locator('[data-testid="page-title"]')).toBeVisible();
+    const failures = monitor.failures.filter(
+      (f) => !f.url.includes("/api/ws"),
+    );
+    expect(failures).toHaveLength(0);
+  });
+
+  test("storage-s3 status check is made on page load", async ({ page }) => {
+    const requests: string[] = [];
+    page.on("request", (req) => requests.push(req.url()));
+
+    await page.goto("/storage-s3");
+    await expect(page.locator('[data-testid="demo-card"]')).toBeVisible();
+
+    expect(requests.some((r) => r.includes("/api/storage/status"))).toBe(true);
+  });
+
+  test("surrealdb status check is made on page load", async ({ page }) => {
+    const requests: string[] = [];
+    page.on("request", (req) => requests.push(req.url()));
+
+    await page.goto("/surrealdb");
+    await expect(page.locator('[data-testid="demo-card"]')).toBeVisible();
+
+    expect(requests.some((r) => r.includes("/api/database/status"))).toBe(true);
+  });
+});

apps/testbed/e2e/layout/theme.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Theme Toggle", () => {
+  test("theme toggle button is visible in header", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.locator('[data-testid="header"]')).toBeVisible();
+    // The theme toggle button should be in the header
+    const themeToggle = page.locator('[data-testid="theme-toggle"]');
+    // If the component uses a different testid, try the button within header
+    const headerBtns = page.locator('[data-testid="header"] button');
+    const btnCount = await headerBtns.count();
+    expect(btnCount).toBeGreaterThan(0);
+  });
+
+  test("page loads without dark class by default", async ({ page }) => {
+    await page.goto("/");
+    // Default should not have dark mode active unless system preference is dark
+    const html = page.locator("html");
+    await expect(html).toBeVisible();
+  });
+});