peter
c3d88d9b20
The 43 react-refresh/only-export-components warnings the gate let through meant an edit to a provider (or AnchoredPopover, Toaster, plexDetailUi, …) could not be hot-swapped: Fast Refresh reloads a module that also exports hooks or helpers. - Each provider's contexts, the types its hooks return and the hooks themselves live in a sibling context module (navigationContext.ts, channelsContext.ts, …); the provider file keeps the component. loadAccountFilters moved next to the feed filters' defaults (feedFiltersInit.ts), following navigationInit/playlistsInit. - Helpers that sat in component files have their own modules: welcomeMode, downloadTitle, plexPlayable, channelSync, ui/anchoredPopoverHooks, ui/pageToolbarSlot, ui/pagerContent, ui/toastLevels, ui/overlayOrder, ui/tableAlign, lib/plexDetail; the cells of the channel columns and the registry's page wrappers are components files of their own (channelCells, modulePages). - usePersistedTab, an alias of useAccountPersistedState, is gone; its callers use the original. npm run lint is now eslint --max-warnings 0, so a warning fails the gate like an error does.
90 lines
3.6 KiB
TypeScript
90 lines
3.6 KiB
TypeScript
// @vitest-environment jsdom
|
|
//
|
|
// The channel page's video grid follows a running full-history backfill (bug hunt 2026-09, item 6).
|
|
// The rule itself — when a poll reading should refresh the grid — is pinned on the hook in
|
|
// lib/channelDetailPoll.backfill.dom.test.tsx. This pins that the PAGE runs it: deleting the hook's
|
|
// one call site left every lane green, knip included (the hook test's import kept the export "used").
|
|
//
|
|
// The page's own poll is what feeds the hook; a newer reading is handed to it here through the same
|
|
// query key the poll writes, rather than waiting out the 4 s interval. The Feed itself is stubbed —
|
|
// what matters is whether its queries are told they are stale.
|
|
import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
|
|
import { render, waitFor, cleanup, act } 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 }));
|
|
|
|
import ChannelPage from "./ChannelPage";
|
|
import { api, type ChannelDetail, type FeedFilters, type Me } from "../lib/api";
|
|
import { qk } from "../lib/queryKeys";
|
|
|
|
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 = "UCsXVk37bltHxD1rDPwtNM8Q";
|
|
const reading = (stored_videos: number): ChannelDetail =>
|
|
({
|
|
id: CH,
|
|
title: "LEMMiNO",
|
|
subscribed: true,
|
|
deep_requested: true,
|
|
backfill_done: false,
|
|
stored_videos,
|
|
}) as unknown as ChannelDetail;
|
|
const feedKey = qk.feed({ q: "", channel: CH } as unknown as FeedFilters);
|
|
|
|
describe("ChannelPage — the grid follows a running backfill", () => {
|
|
it("marks the channel's video grid stale when the poll sees more stored videos", async () => {
|
|
vi.spyOn(api, "channelDetail").mockResolvedValue(reading(19));
|
|
vi.spyOn(api, "tags").mockResolvedValue([] as never);
|
|
const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
|
qc.setQueryData(feedKey, { pages: [{ items: [], next_cursor: null }], pageParams: [null] });
|
|
render(
|
|
<QueryClientProvider client={qc}>
|
|
<ChannelPage
|
|
channelId={CH}
|
|
initialName="LEMMiNO"
|
|
me={{ id: 1, can_write: true } as unknown as Me}
|
|
view="cards"
|
|
setView={() => {}}
|
|
onShowInFeed={() => {}}
|
|
/>
|
|
</QueryClientProvider>,
|
|
);
|
|
await waitFor(() => expect(api.channelDetail).toHaveBeenCalled());
|
|
await waitFor(() => expect(qc.getQueryData(qk.channel(CH))).toBeTruthy());
|
|
expect(qc.getQueryState(feedKey)?.isInvalidated).toBe(false);
|
|
|
|
// The next poll tick: the background job has stored 60 more.
|
|
act(() => qc.setQueryData(qk.channel(CH), reading(79)));
|
|
|
|
await waitFor(() => expect(qc.getQueryState(feedKey)?.isInvalidated).toBe(true));
|
|
});
|
|
});
|