249 lines
10 KiB
TypeScript
249 lines
10 KiB
TypeScript
// @vitest-environment jsdom
|
|
//
|
|
// S3 item 5a: the public watch page must render a native <audio> element for an audio-only asset
|
|
// (mp3) and a <video> for everything else. WebKit (all iOS browsers) refuses to play an audio-only
|
|
// mp3 inside a <video>, which is exactly why the branch exists — this locks it so a refactor can't
|
|
// silently drop the audio player and reintroduce the iPad-broken behavior.
|
|
import { afterEach, describe, expect, it, vi } from "vitest";
|
|
import { render, waitFor, cleanup, fireEvent } from "@testing-library/react";
|
|
const expose = vi.hoisted(() => vi.fn());
|
|
vi.mock("../lib/browserBackgroundPlay", () => ({ exposeVideoToBackgroundPlay: expose }));
|
|
|
|
import WatchPage from "./WatchPage";
|
|
|
|
function mockMeta(meta: Record<string, unknown>) {
|
|
vi.stubGlobal(
|
|
"fetch",
|
|
vi.fn(async () => ({ ok: true, json: async () => meta })),
|
|
);
|
|
}
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
vi.unstubAllGlobals();
|
|
localStorage.clear();
|
|
});
|
|
|
|
describe("WatchPage background play", () => {
|
|
it("hands its <video> to the background-play hook, so Brave iOS keeps it playing", async () => {
|
|
window.history.replaceState({}, "", "/watch/tok-bg");
|
|
mockMeta({ needs_password: false, audio: false, file_url: "/f.mp4", title: "A clip" });
|
|
const { container } = render(<WatchPage />);
|
|
await waitFor(() => expect(container.querySelector("video")).not.toBeNull());
|
|
expect(expose).toHaveBeenCalledWith(container.querySelector("video"));
|
|
});
|
|
});
|
|
|
|
describe("WatchPage repeat", () => {
|
|
it("repeats by default, for a video and for an audio-only asset", async () => {
|
|
window.history.replaceState({}, "", "/watch/tok-repeat-video");
|
|
mockMeta({ needs_password: false, audio: false, file_url: "/f.mp4", title: "A clip" });
|
|
const video = render(<WatchPage />);
|
|
await waitFor(() => expect(video.container.querySelector("video")).not.toBeNull());
|
|
expect(video.container.querySelector("video")!.loop).toBe(true);
|
|
cleanup();
|
|
|
|
window.history.replaceState({}, "", "/watch/tok-repeat-audio");
|
|
mockMeta({ needs_password: false, audio: true, file_url: "/f.mp3", title: "A song" });
|
|
const audio = render(<WatchPage />);
|
|
await waitFor(() => expect(audio.container.querySelector("audio")).not.toBeNull());
|
|
expect(audio.container.querySelector("audio")!.loop).toBe(true);
|
|
});
|
|
|
|
it("the toggle turns it off, and the choice is remembered for the next visit", async () => {
|
|
window.history.replaceState({}, "", "/watch/tok-repeat-toggle");
|
|
mockMeta({ needs_password: false, audio: false, file_url: "/f.mp4", title: "A clip" });
|
|
const first = render(<WatchPage />);
|
|
const toggle = await first.findByRole("button", { name: "Repeat" });
|
|
expect(toggle.getAttribute("aria-pressed")).toBe("true");
|
|
fireEvent.click(toggle);
|
|
expect(toggle.getAttribute("aria-pressed")).toBe("false");
|
|
expect(first.container.querySelector("video")!.loop).toBe(false);
|
|
cleanup();
|
|
|
|
const second = render(<WatchPage />);
|
|
await waitFor(() => expect(second.container.querySelector("video")).not.toBeNull());
|
|
expect(second.container.querySelector("video")!.loop).toBe(false);
|
|
});
|
|
});
|
|
|
|
// E28: the Download link sat at the button's 32 beside the Repeat chip's 28 — one row, two heights.
|
|
describe("WatchPage action row", () => {
|
|
it("puts the Download on the toolbar rung, level with the Repeat chip", async () => {
|
|
window.history.replaceState({}, "", "/watch/tok-row");
|
|
mockMeta({
|
|
needs_password: false,
|
|
audio: false,
|
|
allow_download: true,
|
|
file_url: "/f.mp4",
|
|
title: "A clip",
|
|
});
|
|
const view = render(<WatchPage />);
|
|
const repeat = await view.findByRole("button", { name: "Repeat" });
|
|
const download = view.container.querySelector('a[href="/f.mp4"]')!;
|
|
expect(repeat.className).toContain("h-7");
|
|
expect(download.className).toContain("h-7");
|
|
});
|
|
|
|
// E28 S3d4 (B6): the page the stranger sees wears the app's surfaces — the scheme's ambient
|
|
// backdrop (no page fill over the body's), the title and actions on a glass panel, a glass Download.
|
|
it("sits on the app's surfaces: backdrop, a glass panel, a glass Download", async () => {
|
|
window.history.replaceState({}, "", "/watch/tok-b6");
|
|
mockMeta({
|
|
needs_password: false,
|
|
audio: false,
|
|
allow_download: true,
|
|
file_url: "/f.mp4",
|
|
title: "A clip",
|
|
});
|
|
const view = render(<WatchPage />);
|
|
const title = await view.findByRole("heading", { name: "A clip" });
|
|
expect((view.container.firstElementChild as HTMLElement).className).not.toMatch(
|
|
/(^|\s)bg-bg(\s|$)/,
|
|
);
|
|
expect(title.closest(".glass")).toBeTruthy();
|
|
const download = view.container.querySelector('a[href="/f.mp4"]')!;
|
|
expect(download.className).toContain("glass-card");
|
|
});
|
|
});
|
|
|
|
describe("WatchPage media element (S3 · 5a)", () => {
|
|
it("renders a native <audio> for an audio-only asset", async () => {
|
|
window.history.replaceState({}, "", "/watch/tok-audio");
|
|
mockMeta({ needs_password: false, audio: true, file_url: "/f.mp3", title: "A song" });
|
|
const { container } = render(<WatchPage />);
|
|
await waitFor(() => expect(container.querySelector("audio")).not.toBeNull());
|
|
expect(container.querySelector("video")).toBeNull();
|
|
});
|
|
|
|
it("renders a <video> for a normal video asset", async () => {
|
|
window.history.replaceState({}, "", "/watch/tok-video");
|
|
mockMeta({ needs_password: false, audio: false, file_url: "/f.mp4", title: "A clip" });
|
|
const { container } = render(<WatchPage />);
|
|
await waitFor(() => expect(container.querySelector("video")).not.toBeNull());
|
|
expect(container.querySelector("audio")).toBeNull();
|
|
});
|
|
|
|
it("renders an info card + Download for a generic file, no player (S5d)", async () => {
|
|
window.history.replaceState({}, "", "/watch/tok-file");
|
|
mockMeta({
|
|
needs_password: false,
|
|
media_kind: "file",
|
|
title: "report.pdf",
|
|
container: "pdf",
|
|
size_bytes: 2_400_000,
|
|
allow_download: true,
|
|
file_url: "/f.pdf",
|
|
});
|
|
const { container, findByText } = render(<WatchPage />);
|
|
await findByText("report.pdf");
|
|
expect(container.querySelector("video")).toBeNull();
|
|
expect(container.querySelector("audio")).toBeNull();
|
|
// Type · size chip and a Download link to the file.
|
|
await findByText(/PDF · 2\.3 MB/);
|
|
const dl = container.querySelector('a[href="/f.pdf"]');
|
|
expect(dl).not.toBeNull();
|
|
// E28: the page's one action is the filled primary, not a muted outline.
|
|
expect(dl!.className).toContain("state-filled");
|
|
});
|
|
|
|
it("omits the Download for a view-only file link (S5d)", async () => {
|
|
window.history.replaceState({}, "", "/watch/tok-file-noview");
|
|
mockMeta({
|
|
needs_password: false,
|
|
media_kind: "file",
|
|
title: "secret.zip",
|
|
container: "zip",
|
|
size_bytes: 1000,
|
|
allow_download: false,
|
|
file_url: "/f.zip",
|
|
});
|
|
const { container, findByText } = render(<WatchPage />);
|
|
await findByText("secret.zip");
|
|
expect(container.querySelector('a[href="/f.zip"]')).toBeNull();
|
|
});
|
|
});
|
|
|
|
// Only a 404 means a link is gone. Every other failure used to render the permanent "no longer
|
|
// available" state too: a server restart, a dropped connection, and the unlock's own rate limit told a
|
|
// viewer with a valid link that it had expired or been revoked, with no way to try again.
|
|
describe("WatchPage honest failures", () => {
|
|
const res = (status: number, body: unknown = {}) => ({
|
|
ok: status < 400,
|
|
status,
|
|
json: async () => body,
|
|
});
|
|
const GONE = "This link is no longer available.";
|
|
|
|
it("a server error is a failure with a retry, not a dead link", async () => {
|
|
window.history.replaceState({}, "", "/watch/tok-5xx");
|
|
vi.stubGlobal(
|
|
"fetch",
|
|
vi
|
|
.fn()
|
|
.mockResolvedValueOnce(res(503))
|
|
.mockResolvedValue(
|
|
res(200, { needs_password: false, file_url: "/f.mp4", title: "A clip" }),
|
|
),
|
|
);
|
|
const page = render(<WatchPage />);
|
|
const retry = await page.findByRole("button", { name: "Try again" });
|
|
expect(page.queryByText(GONE)).toBeNull();
|
|
expect(page.getByRole("alert").textContent).toContain("Couldn't load this link.");
|
|
|
|
fireEvent.click(retry);
|
|
await waitFor(() => expect(page.container.querySelector("video")).not.toBeNull());
|
|
});
|
|
|
|
it("a dropped connection is a failure with a retry too", async () => {
|
|
window.history.replaceState({}, "", "/watch/tok-offline");
|
|
vi.stubGlobal("fetch", vi.fn().mockRejectedValue(new TypeError("Failed to fetch")));
|
|
const page = render(<WatchPage />);
|
|
await page.findByRole("button", { name: "Try again" });
|
|
expect(page.queryByText(GONE)).toBeNull();
|
|
});
|
|
|
|
it("a 404 says the link is gone", async () => {
|
|
window.history.replaceState({}, "", "/watch/tok-404");
|
|
vi.stubGlobal("fetch", vi.fn().mockResolvedValue(res(404)));
|
|
const page = render(<WatchPage />);
|
|
await page.findByText(GONE);
|
|
expect(page.queryByRole("button", { name: "Try again" })).toBeNull();
|
|
});
|
|
|
|
async function tryPassword(second: () => Promise<unknown>) {
|
|
vi.stubGlobal(
|
|
"fetch",
|
|
vi
|
|
.fn()
|
|
.mockResolvedValueOnce(res(200, { needs_password: true }))
|
|
.mockImplementationOnce(second),
|
|
);
|
|
const page = render(<WatchPage />);
|
|
fireEvent.change(await page.findByPlaceholderText("Enter password"), {
|
|
target: { value: "guess" },
|
|
});
|
|
fireEvent.click(page.getByRole("button", { name: "Watch" }));
|
|
return page;
|
|
}
|
|
|
|
it("too many password tries says so, and keeps the form", async () => {
|
|
window.history.replaceState({}, "", "/watch/tok-429");
|
|
const page = await tryPassword(async () => res(429));
|
|
await page.findByText("Too many attempts. Try again in a few minutes.");
|
|
const alert = page.getByRole("alert");
|
|
expect(alert.textContent).toBe("Too many attempts. Try again in a few minutes.");
|
|
expect(page.getByPlaceholderText("Enter password").getAttribute("aria-describedby")).toBe(
|
|
alert.id,
|
|
);
|
|
});
|
|
|
|
it("an unlock that gets no answer says so instead of doing nothing", async () => {
|
|
window.history.replaceState({}, "", "/watch/tok-unlock-offline");
|
|
const page = await tryPassword(() => Promise.reject(new TypeError("Failed to fetch")));
|
|
expect((await page.findByRole("alert")).textContent).toBe(
|
|
"Couldn't check the password. Try again.",
|
|
);
|
|
});
|
|
});
|