peter
45d8b47366
- New ItemCount: a generic, FIXED-WIDTH count pill (glass, non-interactive) — "192,050 items" (neutral noun, dynamic plural), min-w-[9rem] so a changing number never shifts the controls beside it; a million or more collapses to "1M+" with the exact figure in the title tooltip. - Feed toolbar: ItemCount is the fixed leading element now; dropped the mx-1 separators so every gap is a uniform 1.5 (Content-types↔Source used to be wider than Watch-state↔Content-types). - Chrome-to-card alignment (app-wide, via the shared Header + PageShell): the floating header and the toolbar band now span exactly the card grid's width — left-4, and a right edge of 1rem + the scrollbar gutter (measured once into --sbw), so the fixed chrome lines up with the scrolled cards instead of running ~15px past them. Wraps cleanly to multiple rows on mobile. Renames the count testid feed-result-count → item-count (E2Es updated).
84 lines
3.8 KiB
TypeScript
84 lines
3.8 KiB
TypeScript
import { test, expect } from "@playwright/test";
|
|
import { openApp } from "./helpers";
|
|
|
|
// Locks the feed's core contract: it renders cards, a filter re-queries it and surfaces a
|
|
// removable chip, and its virtualized list windows in fresh rows as you scroll.
|
|
test.describe("feed", () => {
|
|
test("a filter re-queries the feed and surfaces a removable chip", async ({ page }) => {
|
|
await openApp(page);
|
|
await expect(page.getByTestId("video-card").first()).toBeVisible();
|
|
|
|
const count = page.getByTestId("item-count");
|
|
await expect(count).toHaveText(/\d/);
|
|
const baseline = await count.innerText();
|
|
|
|
// Clean baseline: default filters, so no chips and "unwatched" is the active show (the Watch-state
|
|
// pill summarises the current pick).
|
|
await expect(page.getByTestId("active-filter-chip")).toHaveCount(0);
|
|
await expect(page.getByTestId("feed-show")).toContainText("Unwatched");
|
|
|
|
// Narrow to "watched" — open the Watch-state dropdown and pick it (single-select closes on pick).
|
|
// The seed guarantees exactly one, a real deterministic change.
|
|
await page.getByTestId("feed-show").click();
|
|
await page.getByTestId("feed-show-watched").click();
|
|
await expect(page.getByTestId("active-filter-chip")).toHaveCount(1);
|
|
await expect(count).not.toHaveText(baseline);
|
|
|
|
// Remove the chip → default show restored, chips gone.
|
|
await page.getByTestId("active-filter-chip").click();
|
|
await expect(page.getByTestId("active-filter-chip")).toHaveCount(0);
|
|
await expect(page.getByTestId("feed-show")).toContainText("Unwatched");
|
|
});
|
|
|
|
test("scrolling virtualizes in fresh cards", async ({ page }) => {
|
|
await openApp(page);
|
|
await expect(page.getByTestId("video-card").first()).toBeVisible();
|
|
|
|
const renderedIds = () =>
|
|
page
|
|
.getByTestId("video-card")
|
|
.evaluateAll((els) => els.map((e) => e.getAttribute("data-video-id")));
|
|
|
|
const before = await renderedIds();
|
|
expect(before.length).toBeGreaterThan(0);
|
|
|
|
// The feed scrolls inside <main> (role="main"), not the window.
|
|
await page.getByRole("main").evaluate((el) => el.scrollBy(0, 5000));
|
|
|
|
// A windowed list renders different rows once scrolled.
|
|
await expect
|
|
.poll(async () => (await renderedIds()).some((id) => id && !before.includes(id)))
|
|
.toBe(true);
|
|
});
|
|
|
|
// Bug 4 (Platform S4): the toolbar (show/content chips, count, sort, view) is fixed chrome — it
|
|
// pins in the shell's toolbar band above the scroller, so it stays put while the cards scroll.
|
|
test("the feed toolbar stays pinned while cards scroll", async ({ page }) => {
|
|
await openApp(page);
|
|
const count = page.getByTestId("item-count");
|
|
await expect(count).toBeVisible();
|
|
const topBefore = await count.evaluate((el) => el.getBoundingClientRect().top);
|
|
|
|
await page.getByRole("main").evaluate((el) => el.scrollBy(0, 4000));
|
|
|
|
await expect(count).toBeInViewport();
|
|
const topAfter = await count.evaluate((el) => el.getBoundingClientRect().top);
|
|
expect(Math.abs(topAfter - topBefore)).toBeLessThan(4);
|
|
});
|
|
|
|
// Bug 3 (Platform S4): changing a filter is a fresh result set, so the scroll jumps back to the
|
|
// top rather than stranding you deep in the old list's offset.
|
|
test("a new filter resets the scroll to the top", async ({ page }) => {
|
|
await openApp(page);
|
|
await expect(page.getByTestId("video-card").first()).toBeVisible();
|
|
|
|
await page.getByRole("main").evaluate((el) => el.scrollBy(0, 4000));
|
|
expect(await page.getByRole("main").evaluate((el) => el.scrollTop)).toBeGreaterThan(500);
|
|
|
|
// Switch the show filter → a different result set → back to the top.
|
|
await page.getByTestId("feed-show").click();
|
|
await page.getByTestId("feed-show-all").click();
|
|
await expect.poll(() => page.getByRole("main").evaluate((el) => el.scrollTop)).toBeLessThan(50);
|
|
});
|
|
});
|