peter
ec807c8b31
Reworks the channel detail per UAT: instead of the banner scrolling away and a sticky sub-header (which felt odd to scroll and needed an opaque bar that clashed with the design even at rest), the ENTIRE chrome — banner, identity, tabs, toolbar — is fixed and only the video grid scrolls. Mechanism: ChannelPage wraps its whole chrome in <PageToolbar> so it portals into the shell's fixed band (like the feed toolbar); the channelScoped Feed portals its toolbar into a slot at the bottom of that chrome. No sticky, no opaque bar — the chrome is transparent over the page bg because nothing scrolls under it (the band sits above the scroller). E2E updated: the channel chrome (title + toolbar) stays at a fixed viewport position while the grid scrolls. Suite 15/15, tsc clean.
84 lines
4.1 KiB
TypeScript
84 lines
4.1 KiB
TypeScript
import { test, expect } from "@playwright/test";
|
|
import { openApp } from "./helpers";
|
|
|
|
// Locks channel-view entry + exit: opening a channel from a feed card replaces the view, and
|
|
// both the in-page Back and the browser Back return to the feed. (This orthogonal channel branch
|
|
// is exactly what the Platform refactor folds into the PageShell contract.)
|
|
test.describe("channel view", () => {
|
|
test("open from a card, then in-page Back returns to the feed", async ({ page }) => {
|
|
await openApp(page);
|
|
await expect(page.getByTestId("video-card").first()).toBeVisible();
|
|
|
|
await page.getByTestId("video-card-channel").first().click();
|
|
await expect(page.getByTestId("channel-title")).toBeVisible();
|
|
await expect(page.getByTestId("channel-back")).toBeVisible();
|
|
|
|
await page.getByTestId("channel-back").click();
|
|
await expect(page.getByTestId("channel-title")).toHaveCount(0);
|
|
await expect(page.getByTestId("video-card").first()).toBeVisible();
|
|
});
|
|
|
|
test("browser Back also closes the channel page", async ({ page }) => {
|
|
await openApp(page);
|
|
await expect(page.getByTestId("video-card").first()).toBeVisible();
|
|
|
|
await page.getByTestId("video-card-channel").first().click();
|
|
await expect(page.getByTestId("channel-title")).toBeVisible();
|
|
|
|
await page.goBack();
|
|
await expect(page.getByTestId("channel-title")).toHaveCount(0);
|
|
await expect(page.getByTestId("video-card").first()).toBeVisible();
|
|
});
|
|
|
|
// Bug 1 (Platform S4): opening a channel and coming Back restores the feed's scroll position
|
|
// rather than dumping you at the top. The shell owns the scroller and remembers each view's offset.
|
|
test("Back restores the feed scroll position", async ({ page }) => {
|
|
await openApp(page);
|
|
await expect(page.getByTestId("video-card").first()).toBeVisible();
|
|
|
|
const main = page.getByRole("main");
|
|
await main.evaluate((el) => el.scrollBy(0, 3000));
|
|
// Let any page-fetch triggered by the scroll settle, so the same content is cached for the
|
|
// return trip (a fetch still in flight at navigation would leave a shorter list to restore into).
|
|
await page.waitForTimeout(600);
|
|
const saved = await main.evaluate((el) => el.scrollTop);
|
|
expect(saved).toBeGreaterThan(1500);
|
|
|
|
await page.getByTestId("video-card-channel").first().click();
|
|
await expect(page.getByTestId("channel-title")).toBeVisible();
|
|
await page.getByTestId("channel-back").click();
|
|
await expect(page.getByTestId("video-card").first()).toBeVisible();
|
|
|
|
// Restored to roughly where we were, not reset to the top. Tolerance absorbs the virtualizer's
|
|
// estimate-vs-measured row heights differing slightly between the two mounts.
|
|
await expect
|
|
.poll(() => page.getByRole("main").evaluate((el) => el.scrollTop), { timeout: 5000 })
|
|
.toBeGreaterThan(saved - 500);
|
|
});
|
|
|
|
// Platform S4b: the whole channel chrome (banner, identity, tabs, toolbar) is fixed — it stays
|
|
// put while only the video grid scrolls.
|
|
test("the channel chrome stays fixed while the video grid scrolls", async ({ page }) => {
|
|
await openApp(page);
|
|
await page.getByTestId("video-card-channel").first().click();
|
|
const count = page.getByTestId("feed-result-count");
|
|
const title = page.getByTestId("channel-title");
|
|
await expect(count).toBeVisible();
|
|
await expect(page.getByTestId("video-card").first()).toBeVisible();
|
|
const titleTop = await title.evaluate((el) => el.getBoundingClientRect().top);
|
|
const countTop = await count.evaluate((el) => el.getBoundingClientRect().top);
|
|
|
|
// Keep nudging until the grid is tall enough to actually scroll (it may still be filling in).
|
|
await expect
|
|
.poll(async () => {
|
|
await page.getByRole("main").evaluate((el) => el.scrollBy(0, 1500));
|
|
return page.getByRole("main").evaluate((el) => el.scrollTop);
|
|
})
|
|
.toBeGreaterThan(400);
|
|
|
|
// The chrome didn't move — banner title and toolbar are in exactly the same place.
|
|
expect(await title.evaluate((el) => el.getBoundingClientRect().top)).toBe(titleTop);
|
|
expect(await count.evaluate((el) => el.getBoundingClientRect().top)).toBe(countTop);
|
|
});
|
|
});
|