fix(channel): load the banner without a referrer

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.
2026-09-26 21:45:46 +02:00
parent 663f30feeb
commit 8e1004fe6f
3 changed files with 100 additions and 9 deletions
@@ -0,0 +1,89 @@
+// @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");
+  });
+});