Initial curated ITWorx_MCP_Hub source from 368fba691ea8d23403b4d56b53b5ec670d7c5020

apps/web/tests/e2e/visual-quality.spec.ts

@@ -0,0 +1,106 @@
+import { expect, loginAs, test } from "./fixtures";
+
+const captureReview = Boolean(process.env.SOL_VISUAL_REVIEW);
+
+async function expectNoPageOverflow(page: import("@playwright/test").Page) {
+  const dimensions = await page.evaluate(() => ({ documentWidth: document.documentElement.scrollWidth, viewportWidth: window.innerWidth }));
+  expect(dimensions.documentWidth, `document width at ${dimensions.viewportWidth}px`).toBeLessThanOrEqual(dimensions.viewportWidth + 1);
+}
+
+test.describe("product-quality interaction and composition", () => {
+  test("the public gateway uses the available canvas and stays usable from desktop to mobile", async ({ page }, testInfo) => {
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await page.goto("/");
+    await expect(page.getByRole("heading", { name: "Inspect your governed MCP estate." })).toBeVisible();
+    await expect(page.getByLabel("How governed MCP access works")).toBeVisible();
+    const desktopLayout = await page.locator(".auth-layout").boundingBox();
+    expect(desktopLayout?.width ?? 0).toBeGreaterThan(1100);
+    await expectNoPageOverflow(page);
+    if (captureReview) await page.screenshot({ path: testInfo.outputPath("public-desktop.png"), fullPage: true });
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    await expect(page.getByRole("link", { name: /Continue to sign in/ })).toBeVisible();
+    await expect(page.getByText("Project scoped", { exact: true })).toBeVisible();
+    await expectNoPageOverflow(page);
+    if (captureReview) await page.screenshot({ path: testInfo.outputPath("public-mobile.png"), fullPage: true });
+  });
+
+  test("quick jump is keyboard-first, access-aware and routes without a reload", async ({ page }) => {
+    await loginAs(page, "hub-viewer");
+    await page.goto("/");
+    await expect(page.getByRole("button", { name: "Open quick jump" })).toBeVisible();
+    await page.keyboard.press("Control+K");
+
+    const dialog = page.getByRole("dialog", { name: "Quick jump" });
+    await expect(dialog).toBeVisible();
+    const search = dialog.getByLabel("Find a workspace");
+    await expect(search).toBeFocused();
+    await expect(dialog.getByRole("button", { name: /Audit/ })).toHaveCount(0);
+
+    await search.fill("catalog");
+    await dialog.getByRole("button", { name: /Catalog/ }).click();
+    await expect(page).toHaveURL(/\/tools$/);
+    await expect(page.getByRole("heading", { name: "Catalog", level: 2 })).toBeVisible();
+  });
+
+  test("resource filtering is debounced, normalized and URL-addressable", async ({ page }) => {
+    await loginAs(page, "hub-admin");
+    await page.goto("/tools");
+    const filter = page.getByLabel("Filter records");
+    await filter.fill("  Fleet Ops  ");
+    await expect(page).toHaveURL(/\/tools\?q=Fleet%20Ops$/);
+    await expect(page.getByText("Updating results…")).toHaveCount(0);
+
+    await filter.fill("   ");
+    await expect(page).toHaveURL(/\/tools$/);
+  });
+
+  test("the authenticated control plane retains hierarchy and has no overflow at key viewports", async ({ page }, testInfo) => {
+    await loginAs(page, "hub-viewer");
+    for (const viewport of [{ width: 1440, height: 900 }, { width: 1280, height: 800 }, { width: 768, height: 1024 }, { width: 390, height: 844 }]) {
+      await page.setViewportSize(viewport);
+      await page.goto("/");
+      await expect(page.getByRole("heading", { name: "Governed MCP, with the current signal first." })).toBeVisible();
+      await expect(page.getByLabel("Governed MCP request path")).toBeVisible();
+      const topbar = await page.locator(".topbar").boundingBox();
+      expect(topbar?.y ?? Number.POSITIVE_INFINITY, `topbar position at ${viewport.width}px`).toBeLessThan(100);
+      await expectNoPageOverflow(page);
+      if (captureReview) await page.screenshot({
+        path: testInfo.outputPath(`dashboard-${viewport.width}.png`),
+        fullPage: false,
+      });
+    }
+  });
+
+  test("catalog, operations and onboarding remain workable beyond the dashboard", async ({ page }, testInfo) => {
+    const consoleErrors: string[] = [];
+    page.on("console", (message) => { if (message.type() === "error") consoleErrors.push(message.text()); });
+    await loginAs(page, "hub-admin");
+    await page.setViewportSize({ width: 1440, height: 900 });
+
+    await page.goto("/tools");
+    await expect(page.getByRole("heading", { name: "Catalog", level: 2 })).toBeVisible();
+    await expect(page.getByLabel("Filter records")).toBeVisible();
+    await expectNoPageOverflow(page);
+    if (captureReview) await page.screenshot({ path: testInfo.outputPath("catalog-desktop.png"), fullPage: false });
+
+    await page.goto("/operations");
+    await expect(page.getByRole("heading", { name: "Governed-call trend" })).toBeVisible();
+    await expectNoPageOverflow(page);
+    if (captureReview) await page.screenshot({ path: testInfo.outputPath("operations-desktop.png"), fullPage: false });
+
+    await page.goto("/clients");
+    const onboarding = page.locator(".onboarding-panel");
+    await expect(onboarding).toBeVisible();
+    await expectNoPageOverflow(page);
+    if (captureReview) await onboarding.screenshot({ path: testInfo.outputPath("client-onboarding.png") });
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto("/tools");
+    await expect(page.getByLabel("Filter records")).toBeVisible();
+    await expectNoPageOverflow(page);
+    if (captureReview) await page.screenshot({ path: testInfo.outputPath("catalog-mobile.png"), fullPage: false });
+
+    expect(consoleErrors).toEqual([]);
+  });
+});