Initial curated ITWorx_MCP_Hub source from 368fba691ea8d23403b4d56b53b5ec670d7c5020

apps/web/tests/e2e/navigation.spec.ts

@@ -0,0 +1,56 @@
+import { expect, loginAs, test } from "./fixtures";
+
+// The persistent sidebar becomes an off-canvas drawer below 840px (see
+// styles.css's compact-navigation media block) -- these tests only make
+// sense at that width, so every test in this file pins a mobile viewport.
+test.use({ viewport: { width: 390, height: 844 } });
+
+test.describe("mobile navigation drawer", () => {
+  test.beforeEach(async ({ page }) => {
+    await loginAs(page, "hub-viewer");
+    await page.goto("/");
+  });
+
+  test("opens via the hamburger trigger and exposes its state to assistive tech", async ({ page }) => {
+    const trigger = page.getByRole("button", { name: "Open navigation" });
+    await expect(trigger).toHaveAttribute("aria-expanded", "false");
+    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(0);
+
+    await trigger.click();
+    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(1);
+    await expect(trigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  test("closes via its own close button", async ({ page }) => {
+    await page.getByRole("button", { name: "Open navigation" }).click();
+    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(1);
+    await page.getByRole("button", { name: "Close navigation" }).click();
+    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(0);
+  });
+
+  test("closes on Escape", async ({ page }) => {
+    await page.getByRole("button", { name: "Open navigation" }).click();
+    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(1);
+    await page.keyboard.press("Escape");
+    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(0);
+  });
+
+  test("closes on backdrop click", async ({ page }) => {
+    await page.getByRole("button", { name: "Open navigation" }).click();
+    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(1);
+    // The backdrop spans the full viewport (position:fixed; inset:0), but
+    // the open sidebar itself sits on top of its left ~240px and intercepts
+    // pointer events there -- click well to the right of the drawer's own
+    // width so the hit lands on the backdrop, not the drawer.
+    await page.locator(".nav-backdrop").click({ position: { x: 350, y: 400 } });
+    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(0);
+  });
+
+  test("closes automatically after navigating to another page", async ({ page }) => {
+    await page.getByRole("button", { name: "Open navigation" }).click();
+    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(1);
+    await page.getByRole("link", { name: "Catalog", exact: true }).click();
+    await expect(page).toHaveURL(/\/tools$/);
+    await expect(page.locator(".sidebar.sidebar-open")).toHaveCount(0);
+  });
+});