deer-flow/frontend/tests/e2e/sidebar.spec.ts

74 lines
2.5 KiB
TypeScript

import { expect, test } from "@playwright/test";
import { mockLangGraphAPI } from "./utils/mock-api";
test.describe("Sidebar navigation", () => {
test("sidebar contains Chats and Agents nav links", async ({ page }) => {
mockLangGraphAPI(page);
await page.goto("/workspace/chats/new");
// Sidebar uses data-sidebar="menu-button" with asChild rendering on <Link>
const sidebar = page.locator("[data-sidebar='sidebar']");
await expect(sidebar.locator("a[href='/workspace/chats']")).toBeVisible({
timeout: 15_000,
});
await expect(sidebar.locator("a[href='/workspace/agents']")).toBeVisible();
});
test("Agents link navigates to agents page", async ({ page }) => {
mockLangGraphAPI(page);
await page.goto("/workspace/chats/new");
const sidebar = page.locator("[data-sidebar='sidebar']");
const agentsLink = sidebar.locator("a[href='/workspace/agents']");
await expect(agentsLink).toBeVisible({ timeout: 15_000 });
await agentsLink.click();
await page.waitForURL("**/workspace/agents");
await expect(page).toHaveURL(/\/workspace\/agents/);
});
test("mobile welcome layout stays within viewport and opens sidebar", async ({
page,
}) => {
await page.setViewportSize({ width: 390, height: 844 });
mockLangGraphAPI(page);
await page.goto("/workspace/chats/new");
const viewportWidth = page.viewportSize()?.width ?? 390;
const expectInsideViewport = async (
locator: ReturnType<typeof page.locator>,
) => {
await expect(locator).toBeVisible({ timeout: 15_000 });
const box = await locator.boundingBox();
expect(box).not.toBeNull();
expect(box!.x).toBeGreaterThanOrEqual(-1);
expect(box!.x + box!.width).toBeLessThanOrEqual(viewportWidth + 1);
};
await expectInsideViewport(page.getByText(/Welcome to|欢迎使用/).first());
await expectInsideViewport(page.getByRole("textbox").first());
await expectInsideViewport(page.locator("[data-slot='suggestions-list']"));
const mobileSidebarTrigger = page
.locator("[data-sidebar='trigger']:visible")
.first();
await expect(mobileSidebarTrigger).toBeVisible();
await mobileSidebarTrigger.click();
const mobileSidebar = page.locator(
"[data-mobile='true'][data-sidebar='sidebar']",
);
await expect(mobileSidebar).toBeVisible();
await expect(
mobileSidebar.locator("a[href='/workspace/chats']"),
).toBeVisible();
await expect(
mobileSidebar.locator("a[href='/workspace/agents']"),
).toBeVisible();
});
});