56 lines
2.4 KiB
TypeScript
56 lines
2.4 KiB
TypeScript
|
import { expect, test } from "@playwright/test";
|
||
|
|
import { captureScreenshot, completeOnboarding, signup } from "./helpers";
|
||
|
|
|
||
|
|
test("titled sidebar section expands and collapses", async ({ page }, testInfo) => {
|
||
|
|
const stamp = Date.now();
|
||
|
|
await signup(page, `sidebar-collapse-${stamp}@rakazo.test`, "password12", "Test User");
|
||
|
|
await completeOnboarding(page);
|
||
|
|
await page.goto("/app");
|
||
|
|
await page.waitForURL(/\/app\/[^/]+$/);
|
||
|
|
|
||
|
|
const sidebar = page.locator("aside").first();
|
||
|
|
const bot = sidebar.getByRole("button", { name: /^Chief/ });
|
||
|
|
|
||
|
|
await bot.click({ button: "right" });
|
||
|
|
await page.getByRole("menuitem", { name: "Move to", exact: true }).click();
|
||
|
|
await page
|
||
|
|
.getByRole("menu", { name: /Move Chief to section/ })
|
||
|
|
.getByText("New section")
|
||
|
|
.click();
|
||
|
|
const dialog = page.getByRole("dialog", { name: "New section" });
|
||
|
|
await dialog.getByLabel("Name").fill("Projects");
|
||
|
|
await dialog.getByRole("button", { name: "Create" }).click();
|
||
|
|
|
||
|
|
const projects = sidebar.locator('[data-sidebar-group^="section:"]');
|
||
|
|
await expect(projects).toContainText("Projects");
|
||
|
|
await expect(projects).toContainText("Chief");
|
||
|
|
|
||
|
|
const toggle = projects.getByRole("button", { name: /Collapse Projects|Expand Projects/ });
|
||
|
|
await expect(toggle).toHaveAttribute("aria-expanded", "true");
|
||
|
|
|
||
|
|
// Rest (no hover): move pointer off the header before capturing.
|
||
|
|
await sidebar.getByPlaceholder("Search").hover();
|
||
|
|
await captureScreenshot(page, testInfo, "sidebar-section-expanded");
|
||
|
|
|
||
|
|
// Hover header with Chief selected underneath — outer edges must match.
|
||
|
|
await bot.click();
|
||
|
|
await toggle.hover();
|
||
|
|
const headerBox = await toggle.boundingBox();
|
||
|
|
const botBox = await bot.boundingBox();
|
||
|
|
expect(headerBox).toBeTruthy();
|
||
|
|
expect(botBox).toBeTruthy();
|
||
|
|
expect(headerBox!.x).toBeCloseTo(botBox!.x, 0);
|
||
|
|
expect(headerBox!.x + headerBox!.width).toBeCloseTo(botBox!.x + botBox!.width, 0);
|
||
|
|
await captureScreenshot(page, testInfo, "sidebar-section-hover");
|
||
|
|
|
||
|
|
await toggle.click();
|
||
|
|
await expect(toggle).toHaveAttribute("aria-expanded", "false");
|
||
|
|
await expect(projects.getByRole("button", { name: /^Chief/ })).toHaveCount(0);
|
||
|
|
await sidebar.getByPlaceholder("Search").hover();
|
||
|
|
await captureScreenshot(page, testInfo, "sidebar-section-collapsed");
|
||
|
|
|
||
|
|
await toggle.click();
|
||
|
|
await expect(toggle).toHaveAttribute("aria-expanded", "true");
|
||
|
|
await expect(projects.getByRole("button", { name: /^Chief/ })).toHaveCount(1);
|
||
|
|
});
|