peter
8e1004fe6f
Google's image CDN refuses a banner request that carries a Referer from our origin - every time, not only under load (measured: 6/6 refused with it, 8/8 served without). The banner <img> now sends none, as ui/Avatar does for the same CDN; the comments that blamed a transient burst throttle are corrected.
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("./navigationContext", () => ({
|
|
useNavigationActions: () => ({ closeChannel: vi.fn(), openChannel: vi.fn() }),
|
|
}));
|
|
vi.mock("./confirmContext", () => ({ useConfirm: () => async () => true }));
|
|
vi.mock("./feedFiltersContext", () => ({
|
|
useFeedFilters: () => ({ includeNormal: true, includeShorts: false, includeLive: false }),
|
|
}));
|
|
vi.mock("./Feed", () => ({ default: () => null }));
|
|
vi.mock("./ChannelAbout", () => ({ default: () => null }));
|
|
// The page's chrome portals into the shell's fixed toolbar band, which this test has no shell for.
|
|
vi.mock("./ui/PageShell", async (importOriginal) => ({
|
|
...(await importOriginal<typeof import("./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");
|
|
});
|
|
});
|