siftlode/frontend/e2e/bookmark.spec.ts

import { test, expect, type Browser, type Page } from "@playwright/test";
import {
  clickVisibleChannelLink,
  expectContentType,
  gotoPage,
  openApp,
  openFirstVideo,
  toggleContentType,
} from "./helpers";

// The address is the view: a view set through the UI, its address opened as a bookmark — in a NEW
// browser context, so nothing this tab remembered (its history entries, sessionStorage, the view
// storage it wrote) can stand in for what the address says. One round trip per page that names its
// view (moduleUrl.contract.test holds the list to the module definitions), plus the overlays the
// shell opens over any page (the channel page, the player) and the live search. Not Plex: what it
// shows is the instance's own library, which a test stack may not have.

const STORAGE_STATE = "e2e/.auth/state.json";

/** The page's address, opened as a bookmark in a fresh context of the same account. */
async function bookmarked(browser: Browser, page: Page, prepare?: (p: Page) => Promise<void>) {
  const url = page.url();
  const ctx = await browser.newContext({ storageState: STORAGE_STATE, locale: "en-US" });
  const fresh = await ctx.newPage();
  await prepare?.(fresh);
  await openApp(fresh, url);
  return fresh;
}

const tab = (p: Page, name: string) => p.getByRole("tab", { name, exact: true });
const column = (p: Page, name: string) =>
  p.getByRole("columnheader", { name: new RegExp(`^${name}`) });

async function gotoAdminPage(page: Page, id: string): Promise<void> {
  await page.getByTestId("nav-admin").click();
  await page.getByTestId(`nav-admin-${id}`).click();
}

test.describe("a bookmark reopens the view it was taken of", () => {
  test("the feed's filters", async ({ page, browser }) => {
    await openApp(page, "/?page=feed");
    await toggleContentType(page, "includeLive");
    await expect(page).toHaveURL(/[?&]live=/);
    const fresh = await bookmarked(browser, page);
    await expectContentType(fresh, "includeLive", true);
    await fresh.context().close();
  });

  test("Home's time budget", async ({ page, browser }) => {
    await openApp(page, "/?page=home");
    await page.getByRole("button", { name: "An evening", exact: true }).click();
    await expect(page).toHaveURL(/[?&]hb=long/);
    const fresh = await bookmarked(browser, page);
    await expect(fresh.getByRole("button", { name: "An evening", exact: true })).toHaveAttribute(
      "aria-pressed",
      "true",
    );
    await fresh.context().close();
  });

  test("a Settings tab", async ({ page, browser }) => {
    await openApp(page, "/?page=feed");
    await gotoPage(page, "settings");
    await tab(page, "Notifications").click();
    const fresh = await bookmarked(browser, page);
    await expect(tab(fresh, "Notifications")).toHaveAttribute("aria-selected", "true");
    await fresh.context().close();
  });

  test("an admin page's tab", async ({ page, browser }) => {
    await openApp(page, "/?page=feed");
    await gotoAdminPage(page, "users");
    await tab(page, "Access requests").click();
    const fresh = await bookmarked(browser, page);
    await expect(tab(fresh, "Access requests")).toHaveAttribute("aria-selected", "true");
    await fresh.context().close();
  });

  test("a Configuration group", async ({ page, browser }) => {
    await openApp(page, "/?page=feed");
    await gotoAdminPage(page, "config");
    const second = page.getByRole("tab").nth(1);
    const name = (await second.textContent()) ?? "";
    await second.click();
    await expect(page).toHaveURL(/[?&]cfgtab=/);
    const fresh = await bookmarked(browser, page);
    await expect(fresh.getByRole("tab", { name, exact: true })).toHaveAttribute(
      "aria-selected",
      "true",
    );
    await fresh.context().close();
  });

  test("the Activity tab and its time window", async ({ page, browser }) => {
    await openApp(page, "/?page=feed");
    await gotoAdminPage(page, "activity");
    await tab(page, "Server log").click();
    await page.getByRole("button", { name: "30 days", exact: true }).click();
    await expect(page).toHaveURL(/[?&]aw=30d/);
    const fresh = await bookmarked(browser, page);
    await expect(tab(fresh, "Server log")).toHaveAttribute("aria-selected", "true");
    await expect(fresh.getByRole("button", { name: "30 days", exact: true })).toHaveAttribute(
      "aria-pressed",
      "true",
    );
    await fresh.context().close();
  });

  test("a playlist and its sort", async ({ page, browser }) => {
    await openApp(page, "/?page=feed");
    await gotoPage(page, "playlists");
    await expect(column(page, "Title")).toBeVisible();
    await column(page, "Title").getByRole("button").first().click();
    await expect(page).toHaveURL(/[?&]plsort=/);
    const sorted = await column(page, "Title").getAttribute("aria-sort");
    const fresh = await bookmarked(browser, page);
    await expect(column(fresh, "Title")).toHaveAttribute("aria-sort", sorted ?? "");
    expect(new URL(fresh.url()).searchParams.get("pl")).toBe(
      new URL(page.url()).searchParams.get("pl"),
    );
    await fresh.context().close();
  });

  test("the Channels manager's tab and name search", async ({ page, browser }) => {
    await openApp(page, "/?page=feed");
    await gotoPage(page, "channels");
    await tab(page, "Hidden").click();
    await page.getByPlaceholder("Search channels…").fill("zz");
    await expect(page).toHaveURL(/zz/); // written once the typing settles
    const fresh = await bookmarked(browser, page);
    await expect(tab(fresh, "Hidden")).toHaveAttribute("aria-selected", "true");
    await expect(fresh.getByPlaceholder("Search channels…")).toHaveValue("zz");
    await fresh.context().close();
  });

  test("the Files search", async ({ page, browser }) => {
    await openApp(page, "/?page=feed");
    await gotoPage(page, "files");
    await page.getByPlaceholder("Search files…").fill("zz");
    await expect(page).toHaveURL(/zz/);
    const fresh = await bookmarked(browser, page);
    await expect(fresh.getByPlaceholder("Search files…")).toHaveValue("zz");
    await fresh.context().close();
  });

  // A file of the test's own, uploaded for it and deleted after: the account's library is left as
  // it was found.
  test("the Files sort, and the file open in the viewer", async ({ page, browser }) => {
    await openApp(page, "/?page=feed");
    const NAME = "bookmark-note";
    // One a run cut short left behind goes first.
    const left = (await (await page.request.get("/api/files")).json()) as Record<string, unknown>[];
    for (const f of left.filter((f) => JSON.stringify(f).includes(`"${NAME}`)))
      await page.request.delete(`/api/files/${String(f.id)}`);
    const up = await page.request.post("/api/files/upload", {
      headers: { "X-Upload-Filename": `${NAME}.txt` },
      data: Buffer.from("a note the bookmark reopens\n"),
    });
    expect(up.ok(), await up.text()).toBeTruthy();
    const { id } = (await up.json()) as { id: number };
    try {
      await gotoPage(page, "files");
      await column(page, "Name").getByRole("button").first().click();
      await expect(page).toHaveURL(/[?&]fsort=name/);
      const sorted = await column(page, "Name").getAttribute("aria-sort");
      await page.getByText(NAME, { exact: true }).first().click();
      await expect(page).toHaveURL(new RegExp(`[?&]fview=${id}`));
      const fresh = await bookmarked(browser, page);
      await expect(fresh.getByRole("dialog", { name: NAME })).toBeVisible();
      await fresh.keyboard.press("Escape");
      await expect(column(fresh, "Name")).toHaveAttribute("aria-sort", sorted ?? "");
      await fresh.context().close();
    } finally {
      await page.request.delete(`/api/files/${id}`);
    }
  });

  test("a channel page's own tab, over the page it was opened from", async ({ page, browser }) => {
    await openApp(page, "/?page=feed");
    await expect(page.getByTestId("video-card").first()).toBeVisible();
    expect(await clickVisibleChannelLink(page)).toBe(true);
    const title = await page.getByTestId("channel-title").textContent();
    await tab(page, "About").click();
    const fresh = await bookmarked(browser, page);
    await expect(fresh.getByTestId("channel-title")).toHaveText(title ?? "");
    await expect(tab(fresh, "About")).toHaveAttribute("aria-selected", "true");
    await fresh.context().close();
  });

  test("the player and the video it plays", async ({ page, browser }) => {
    await openApp(page, "/?page=feed");
    await openFirstVideo(page);
    await expect(page).toHaveURL(/[?&]watch=/);
    const watch = new URL(page.url()).searchParams.get("watch");
    const fresh = await bookmarked(browser, page);
    await expect(fresh.getByTestId("player-modal")).toBeVisible();
    expect(new URL(fresh.url()).searchParams.get("watch")).toBe(watch);
    await fresh.context().close();
  });

  // The search itself never reaches YouTube here: the answer is the server's shape, served by the
  // test, and the request it answers is what the address named. The instance's search settings are
  // pinned too (the free source, switched on): a stack left on the API source reopens the search
  // waiting for its press, by design, and one with search off offers none.
  test("a live YouTube search, its term and its count", async ({ page, browser }) => {
    const answer = async (p: Page, seen: string[]) => {
      await p.route("**/api/me", async (route) => {
        const me = (await (await route.fetch()).json()) as Record<string, unknown>;
        return route.fulfill({ json: { ...me, search_source: "scrape", search_enabled: true } });
      });
      await p.route("**/api/search/youtube?**", (route) => {
        seen.push(route.request().url());
        return route.fulfill({ json: { items: [], next_cursor: null, source: "scrape" } });
      });
    };
    await answer(page, []);
    await openApp(page, "/?page=feed");
    await page.getByPlaceholder("Search your subscriptions…").fill("lofi");
    await page.getByRole("button", { name: "Search YouTube", exact: true }).click();
    await expect(page.getByText("YouTube results for “lofi”")).toBeVisible();
    await expect(page).toHaveURL(/[?&]yt=lofi/); // named as it opens, not only once the count is set
    await page.getByRole("button", { name: "40", exact: true }).click();
    await expect(page).toHaveURL(/[?&]ytn=40/);

    const seen: string[] = [];
    const fresh = await bookmarked(browser, page, (p) => answer(p, seen));
    await expect(fresh.getByText("YouTube results for “lofi”")).toBeVisible();
    await expect(fresh.getByRole("button", { name: "40", exact: true })).toHaveAttribute(
      "aria-pressed",
      "true",
    );
    await expect.poll(() => seen.length).toBeGreaterThan(0);
    const asked = new URL(seen[0]!).searchParams;
    expect([asked.get("q"), asked.get("limit")]).toEqual(["lofi", "40"]);
    await fresh.context().close();
  });
});