test: add Cypress e2e tests for mobile sidebar behavior

Cover auth negative, viewport responsiveness, toggle open/close, backdrop dismiss, navigation auto-close, and Escape key dismiss. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-07 21:42:05 -08:00
parent 3bc4dcaf55
commit fad1e99329
1 changed files with 113 additions and 0 deletions
--- a/frontend/cypress/e2e/mobile_sidebar.cy.ts
+++ b/frontend/cypress/e2e/mobile_sidebar.cy.ts
@@ -0,0 +1,113 @@
+/// <reference types="cypress" />
+
+import { setupCommonPageTestHooks } from "../support/testHooks";
+
+describe("/dashboard - mobile sidebar", () => {
+  const apiBase = "**/api/v1";
+
+  setupCommonPageTestHooks(apiBase);
+
+  function stubDashboardApis() {
+    cy.intercept("GET", `${apiBase}/metrics/dashboard*`, {
+      statusCode: 200,
+      body: {
+        total_boards: 0,
+        total_tasks: 0,
+        tasks_by_status: {},
+        active_agents: 0,
+        pending_approvals: 0,
+      },
+    }).as("dashboardMetrics");
+  }
+
+  function visitDashboardAuthenticated() {
+    stubDashboardApis();
+    cy.loginWithLocalAuth();
+    cy.visit("/dashboard");
+    cy.waitForAppLoaded();
+  }
+
+  it("auth negative: signed-out user does not see hamburger button", () => {
+    cy.visit("/dashboard");
+    cy.contains("h1", /local authentication/i, { timeout: 30_000 }).should(
+      "be.visible",
+    );
+    cy.get('[aria-label="Toggle navigation"]').should("not.exist");
+  });
+
+  it("mobile: hamburger button visible and sidebar hidden by default", () => {
+    cy.viewport(375, 812);
+    visitDashboardAuthenticated();
+
+    cy.get('[aria-label="Toggle navigation"]').should("be.visible");
+    cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "closed");
+    cy.get("aside").should("not.be.visible");
+  });
+
+  it("desktop: hamburger button hidden and sidebar always visible", () => {
+    cy.viewport(1280, 800);
+    visitDashboardAuthenticated();
+
+    cy.get('[aria-label="Toggle navigation"]').should("not.be.visible");
+    cy.get("aside").should("be.visible");
+  });
+
+  it("mobile: click hamburger opens sidebar and shows backdrop", () => {
+    cy.viewport(375, 812);
+    visitDashboardAuthenticated();
+
+    cy.get('[aria-label="Toggle navigation"]').click();
+
+    cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "open");
+    cy.get("aside").should("be.visible");
+    cy.get('[aria-hidden="true"]').should("exist");
+  });
+
+  it("mobile: click backdrop closes sidebar", () => {
+    cy.viewport(375, 812);
+    visitDashboardAuthenticated();
+
+    // Open sidebar first
+    cy.get('[aria-label="Toggle navigation"]').click();
+    cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "open");
+
+    // Click the backdrop overlay
+    cy.get('[aria-hidden="true"]').click({ force: true });
+
+    cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "closed");
+    cy.get("aside").should("not.be.visible");
+  });
+
+  it("mobile: clicking a nav link closes sidebar", () => {
+    cy.viewport(375, 812);
+    visitDashboardAuthenticated();
+
+    // Open sidebar
+    cy.get('[aria-label="Toggle navigation"]').click();
+    cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "open");
+    cy.get("aside").should("be.visible");
+
+    // Click a navigation link inside the sidebar
+    cy.get("aside").within(() => {
+      cy.contains("a", "Boards").click();
+    });
+
+    // Sidebar should close after navigation
+    cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "closed");
+  });
+
+  it("mobile: pressing Escape closes sidebar", () => {
+    cy.viewport(375, 812);
+    visitDashboardAuthenticated();
+
+    // Open sidebar
+    cy.get('[aria-label="Toggle navigation"]').click();
+    cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "open");
+
+    // Press Escape
+    cy.get("body").type("{esc}");
+
+    cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "closed");
+    cy.get("aside").should("not.be.visible");
+  });
+});