76 lines
3.5 KiB
TypeScript
76 lines
3.5 KiB
TypeScript
import { expect, test } from "../fixtures";
|
|
|
|
test("selects articles and keeps the reader focused on their content", async ({ page }) => {
|
|
await page.goto("/inbox");
|
|
await page.waitForLoadState("networkidle");
|
|
const rows = page.locator(".inbox-article-row");
|
|
await expect(rows).toHaveCount(9);
|
|
const articleTitle = "Context for an agent can be brief";
|
|
await rows.filter({ hasText: articleTitle }).click();
|
|
const reader = page.getByRole("article", { name: articleTitle, exact: true });
|
|
await expect(reader).toBeVisible();
|
|
await expect(reader.getByRole("heading", { name: articleTitle, exact: true })).toBeVisible();
|
|
await expect(
|
|
reader.getByText("Start with a one-sentence goal, then add the constraints that must hold.", {
|
|
exact: false,
|
|
}),
|
|
).toBeVisible();
|
|
await expect(page.getByText("FOR YOU", { exact: true })).toHaveCount(0);
|
|
await expect(page.getByText("Mock", { exact: true })).toHaveCount(0);
|
|
await expect(page.getByText("Why this article", { exact: true })).toHaveCount(0);
|
|
await expect(page.getByRole("button", { name: /For you|Read later|Unread only/ })).toHaveCount(0);
|
|
const back = page.getByRole("button", { name: "Back to articles" });
|
|
if (await back.isVisible()) await back.click();
|
|
await rows.filter({ hasText: "Three columns create a rhythm for reading" }).click();
|
|
await expect(
|
|
page.getByRole("article", {
|
|
name: "Three columns create a rhythm for reading",
|
|
exact: true,
|
|
}),
|
|
).toBeVisible();
|
|
});
|
|
|
|
test("recovers from empty search and shares navigation with Research", async ({ page, a11y }) => {
|
|
await page.goto("/inbox");
|
|
await page.waitForLoadState("networkidle");
|
|
const rows = page.locator(".inbox-article-row");
|
|
await page.getByRole("textbox", { name: "Search articles" }).fill("nonexistent-query-xyz");
|
|
await expect(rows).toHaveCount(0);
|
|
await expect(page.getByText("No articles found", { exact: true })).toBeVisible();
|
|
await page.getByRole("button", { name: "Clear search" }).click();
|
|
await expect(rows).toHaveCount(9);
|
|
expect((await a11y().analyze()).violations).toEqual([]);
|
|
await expect(page.getByRole("button", { name: "Edit interests", exact: true })).toHaveCount(0);
|
|
await page.getByRole("link", { name: "Research", exact: true }).click();
|
|
await expect(page).toHaveURL(/\/deck$/);
|
|
await page.getByRole("link", { name: "Reader", exact: true }).click();
|
|
await expect(page).toHaveURL(/\/inbox$/);
|
|
await expect(rows).toHaveCount(9);
|
|
});
|
|
|
|
test("keeps article navigation readable without horizontal overflow", async ({
|
|
page,
|
|
a11y,
|
|
}, testInfo) => {
|
|
await page.goto("/inbox");
|
|
await page.waitForLoadState("networkidle");
|
|
for (const width of [320, 375, 414, 768]) {
|
|
await page.setViewportSize({ width, height: 850 });
|
|
await expect(page.getByRole("textbox", { name: "Search articles" })).toBeVisible();
|
|
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(width);
|
|
await page.locator(".inbox-article-row").first().click();
|
|
const reader = page.getByRole("article", {
|
|
name: "Thinking in the browser: a new workflow with AI agents",
|
|
exact: true,
|
|
});
|
|
await expect(reader).toBeVisible();
|
|
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(width);
|
|
await page.screenshot({
|
|
path: testInfo.outputPath(`inbox-reader-${width}.png`),
|
|
});
|
|
if (width === 320) expect((await a11y().analyze()).violations).toEqual([]);
|
|
const back = page.getByRole("button", { name: "Back to articles" });
|
|
if (await back.isVisible()) await back.click();
|
|
}
|
|
});
|