mirror of
https://github.com/bytedance/deer-flow.git
synced 2026-07-29 01:15:59 +00:00
7a985f441c
* fix(frontend): address mobile workspace polish blockers * fix(frontend): prevent mobile landing overflow * fix(frontend): keep landing sections within mobile viewport Section titles used a fixed text-5xl with no word breaking, and the <section> flex items had default min-width:auto, so wider Linux font metrics in CI pushed content past the viewport (scrollWidth 345 > 320). Make titles/subtitles responsive with break-words, constrain section width with min-w-0, and add an overflow-x-clip guard on the page root. * fix(frontend): address review feedback on mobile landing PR - add hamburger Sheet nav below sm: so mobile users keep docs/blog access - switch useIsMobile to useSyncExternalStore to avoid hydration swap flash - memoize artifactContent so it isn't rebuilt on every streamed token - use slot-based key in HeroWordRotate; drop flex-wrap so SuperAgent never orphans at 320px - delete unused word-rotate.tsx dead code - move section gutter to <main> for a uniform mobile padding contract - harden e2e: per-viewport overflow tests, locale-stable artifact selector, focus-ring asserts light vs dark differ --------- Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
|
|
import { mockLangGraphAPI } from "./utils/mock-api";
|
|
|
|
test.describe("Landing page", () => {
|
|
test("renders the header and hero section", async ({ page }) => {
|
|
await page.goto("/");
|
|
|
|
await expect(
|
|
page.locator("header").first().getByText("DeerFlow", { exact: true }),
|
|
).toBeVisible();
|
|
await expect(page.locator("h1")).toHaveCount(1);
|
|
await expect(page.locator("h1")).toContainText("DeerFlow");
|
|
|
|
// "Get Started" call-to-action button in hero
|
|
await expect(
|
|
page.getByRole("link", { name: /get started/i }),
|
|
).toBeVisible();
|
|
});
|
|
|
|
for (const width of [320, 375, 390]) {
|
|
test(`does not overflow at ${width}px width`, async ({ page }) => {
|
|
await page.setViewportSize({ width, height: 812 });
|
|
await page.goto("/");
|
|
|
|
await expect
|
|
.poll(() => page.evaluate(() => document.documentElement.scrollWidth))
|
|
.toBeLessThanOrEqual(width);
|
|
await expect(page.locator("main").first()).toBeInViewport();
|
|
});
|
|
}
|
|
|
|
test("Get Started link navigates to workspace", async ({ page }) => {
|
|
mockLangGraphAPI(page);
|
|
|
|
await page.goto("/");
|
|
|
|
const getStarted = page.getByRole("link", { name: /get started/i });
|
|
await getStarted.click();
|
|
|
|
// Should redirect to /workspace/chats/new
|
|
await page.waitForURL("**/workspace/chats/new");
|
|
await expect(page).toHaveURL(/\/workspace\/chats\/new/);
|
|
});
|
|
});
|