peter
d5867bacca
`local/layers` (eslint.config.js) resolves every import to its file and refuses one that goes up (lib/ → components/ui/ → features/ → modules/ → shell/) or that reaches into another module's own files. A module's index.ts is its public face: the stores, mounted at the root and read app-wide, which features/ may read too; a page is still opened lazily by import(). Its contract test probes every edge, and three mutants of the rule (off, no face check, a door for everyone) each turn it red. Six modules got that face; the shared channel UI (about, tags, tag manager) moved to features/channel, the filter chips and the saved-views context to features/filters, and the prefs store's controller type moved next to the store instead of importing it from its own page. The header's per-module controls and the eagerly loaded rails keep eight inline suppressions, each naming why: they go when the header gets slots and every rail loads lazily. `chunkGuard` fails the production build when a lazily imported module lands in a boot chunk (the entry, the shell, what they import) — e.g. a page re-exported from an index.ts, which makes its import() a silent no-op. Proved on a build with that mutant; today's build has none.
90 lines
3.4 KiB
TypeScript
90 lines
3.4 KiB
TypeScript
// @vitest-environment jsdom
|
|
//
|
|
// The channel banner is served from Google's image CDN (yt3.googleusercontent.com), which refuses a
|
|
// request that carries a Referer from our origin — every time, not only under load (measured
|
|
// 2026-09-26: 6/6 refused with the page's referrer or its bare origin, 8/8 served without one). So the
|
|
// banner <img> must send none, as ui/Avatar does for the same CDN; with a referrer the banner never
|
|
// showed and the page fell back to the blank bar.
|
|
import type { ReactNode } from "react";
|
|
import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
|
|
import { render, cleanup, waitFor } from "@testing-library/react";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
|
|
vi.mock("react-i18next", async (importOriginal) => ({
|
|
...(await importOriginal<typeof import("react-i18next")>()),
|
|
useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
|
|
}));
|
|
vi.mock("../../features/navigation/navigationContext", () => ({
|
|
useNavigationActions: () => ({ closeChannel: vi.fn(), openChannel: vi.fn() }),
|
|
}));
|
|
vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => async () => true }));
|
|
vi.mock("./feedFiltersContext", () => ({
|
|
useFeedFilters: () => ({ includeNormal: true, includeShorts: false, includeLive: false }),
|
|
}));
|
|
vi.mock("./Feed", () => ({ default: () => null }));
|
|
vi.mock("../../features/channel/ChannelAbout", () => ({ default: () => null }));
|
|
// The page's chrome portals into the shell's fixed toolbar band, which this test has no shell for.
|
|
vi.mock("../../components/ui/PageShell", async (importOriginal) => ({
|
|
...(await importOriginal<typeof import("../../components/ui/PageShell")>()),
|
|
PageToolbar: ({ children }: { children?: ReactNode }) => <>{children}</>,
|
|
}));
|
|
|
|
import ChannelPage from "./ChannelPage";
|
|
import { api, type ChannelDetail, type Me } from "../../lib/api";
|
|
|
|
beforeAll(() => {
|
|
class Stub {
|
|
observe() {}
|
|
unobserve() {}
|
|
disconnect() {}
|
|
takeRecords() {
|
|
return [];
|
|
}
|
|
}
|
|
globalThis.ResizeObserver ??= Stub as unknown as typeof ResizeObserver;
|
|
globalThis.IntersectionObserver ??= Stub as unknown as typeof IntersectionObserver;
|
|
});
|
|
afterEach(() => {
|
|
cleanup();
|
|
vi.restoreAllMocks();
|
|
});
|
|
|
|
const CH = "UCqoAEDirJPjEUFcF2FklnBA";
|
|
|
|
describe("ChannelPage — the banner", () => {
|
|
it("is requested without a referrer, which Google's image CDN refuses", async () => {
|
|
vi.spyOn(api, "channelDetail").mockResolvedValue({
|
|
id: CH,
|
|
title: "StarTalk",
|
|
banner_url: "https://yt3.googleusercontent.com/banner",
|
|
subscribed: true,
|
|
blocked: false,
|
|
hidden: false,
|
|
deep_requested: false,
|
|
backfill_done: true,
|
|
stored_videos: 10,
|
|
} as unknown as ChannelDetail);
|
|
vi.spyOn(api, "tags").mockResolvedValue([] as never);
|
|
const { container } = render(
|
|
<QueryClientProvider
|
|
client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}
|
|
>
|
|
<ChannelPage
|
|
channelId={CH}
|
|
initialName="StarTalk"
|
|
me={{ id: 1, can_write: true } as unknown as Me}
|
|
view="cards"
|
|
setView={() => {}}
|
|
onShowInFeed={() => {}}
|
|
/>
|
|
</QueryClientProvider>,
|
|
);
|
|
const banner = await waitFor(() => {
|
|
const img = container.querySelector<HTMLImageElement>('img[src^="https://yt3."]');
|
|
expect(img).not.toBeNull();
|
|
return img!;
|
|
});
|
|
expect(banner.getAttribute("referrerpolicy")).toBe("no-referrer");
|
|
});
|
|
});
|