58 lines
2.8 KiB
TypeScript
58 lines
2.8 KiB
TypeScript
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(page.locator(".nav-trigger")).toHaveAttribute("aria-expanded", "true");
|
|
await expect(page.getByRole("dialog", { name: "Application navigation" })).toBeVisible();
|
|
});
|
|
|
|
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);
|
|
});
|
|
});
|