feat(prefs): usePref — one per-account+server preference hook (E4 S1)
Fold the hand-rolled server-pref plumbing (savePrefs + local mirror + me-cache merge + adopt-on-login) into a single usePref<T>(serverKey, default, opts) hook, plus useSavePref for dynamic multi-key patches. Migrated (6 savePrefs call sites + 2 duplicated adopt effects -> the hook): - FeedViewProvider: view - App: filterCollapsed, playlistsCollapsed (+ their adopt block removed) - PlayerModal: playerAutoAdvance, playerLoop - plexDetailUi: plexInfoArtBg/Cast/Related (savePref via useSavePref) Left as-is by design: panel layouts (a dynamically-indexed Record, not one key), language (i18n store, no React state), PrefsProvider (debounced multi-field auto-save + baseline echo-suppression - a different model). Behaviour-equivalent (net -84 LOC at the call sites). usePref.dom.test covers the three seed sources, persist path, debounce, adopt, parse, and useSavePref. Frontend gate green: typecheck, knip, eslint (0 err), prettier, 238 vitest.
This commit is contained in:
@@ -0,0 +1,174 @@
|
||||
// @vitest-environment jsdom
|
||||
//
|
||||
// usePref: the one per-account + server preference hook. Covers the three seed sources (server cache /
|
||||
// localStorage mirror / default), the persist path (server PUT + optimistic `me` cache merge + mirror),
|
||||
// debounced writes, adopt-on-login, parse, and the raw useSavePref persister. The `me` cache is the
|
||||
// server source of truth here; storage is an in-memory account-keyed map; api.savePrefs is a spy.
|
||||
import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
|
||||
import { renderHook, act, waitFor } from "@testing-library/react";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { createElement, type ReactNode } from "react";
|
||||
|
||||
const { store, savePrefs } = vi.hoisted(() => ({
|
||||
store: new Map<string, string>(),
|
||||
savePrefs: vi.fn(() => Promise.resolve({})),
|
||||
}));
|
||||
|
||||
vi.mock("./storage", () => ({
|
||||
readAccount: (base: string, fallback: unknown) => {
|
||||
const raw = store.get(base);
|
||||
return raw == null ? fallback : JSON.parse(raw);
|
||||
},
|
||||
writeAccount: (base: string, value: unknown) => {
|
||||
store.set(base, JSON.stringify(value));
|
||||
},
|
||||
}));
|
||||
vi.mock("./api", () => ({ api: { savePrefs, me: vi.fn() } }));
|
||||
|
||||
import { usePref, useSavePref } from "./usePref";
|
||||
import { qk } from "./queryKeys";
|
||||
|
||||
function makeClient() {
|
||||
return new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||||
}
|
||||
function seedMe(qc: QueryClient, preferences: Record<string, unknown>, id = 1) {
|
||||
qc.setQueryData(qk.me(), { id, preferences });
|
||||
}
|
||||
function wrapperFor(qc: QueryClient) {
|
||||
return ({ children }: { children: ReactNode }) =>
|
||||
createElement(QueryClientProvider, { client: qc }, children);
|
||||
}
|
||||
|
||||
describe("usePref", () => {
|
||||
beforeEach(() => {
|
||||
store.clear();
|
||||
savePrefs.mockClear();
|
||||
});
|
||||
|
||||
it("seeds from the default when neither server nor mirror has the key", () => {
|
||||
const qc = makeClient();
|
||||
const { result } = renderHook(() => usePref<string>("view", "cards"), {
|
||||
wrapper: wrapperFor(qc),
|
||||
});
|
||||
expect(result.current[0]).toBe("cards");
|
||||
});
|
||||
|
||||
it("seeds from the server (me cache) when present", () => {
|
||||
const qc = makeClient();
|
||||
seedMe(qc, { view: "rows" });
|
||||
const { result } = renderHook(() => usePref<string>("view", "cards"), {
|
||||
wrapper: wrapperFor(qc),
|
||||
});
|
||||
expect(result.current[0]).toBe("rows");
|
||||
});
|
||||
|
||||
it("seeds from the localStorage mirror when there is no server value", () => {
|
||||
const qc = makeClient();
|
||||
store.set("siftlode.feedView", JSON.stringify("tiles"));
|
||||
const { result } = renderHook(
|
||||
() => usePref<string>("view", "cards", { localKey: "siftlode.feedView" }),
|
||||
{ wrapper: wrapperFor(qc) },
|
||||
);
|
||||
expect(result.current[0]).toBe("tiles");
|
||||
});
|
||||
|
||||
it("prefers the server value over the mirror", () => {
|
||||
const qc = makeClient();
|
||||
seedMe(qc, { view: "rows" });
|
||||
store.set("siftlode.feedView", JSON.stringify("tiles"));
|
||||
const { result } = renderHook(
|
||||
() => usePref<string>("view", "cards", { localKey: "siftlode.feedView" }),
|
||||
{ wrapper: wrapperFor(qc) },
|
||||
);
|
||||
expect(result.current[0]).toBe("rows");
|
||||
});
|
||||
|
||||
it("applies parse to a raw stored value", () => {
|
||||
const qc = makeClient();
|
||||
seedMe(qc, { view: "GRID" });
|
||||
const { result } = renderHook(
|
||||
() => usePref<string>("view", "cards", { parse: (r) => String(r).toLowerCase() }),
|
||||
{ wrapper: wrapperFor(qc) },
|
||||
);
|
||||
expect(result.current[0]).toBe("grid");
|
||||
});
|
||||
|
||||
it("on set: updates state, writes the server, merges the me cache, and the mirror", () => {
|
||||
const qc = makeClient();
|
||||
seedMe(qc, {});
|
||||
const { result } = renderHook(
|
||||
() => usePref<string>("view", "cards", { localKey: "siftlode.feedView" }),
|
||||
{ wrapper: wrapperFor(qc) },
|
||||
);
|
||||
act(() => result.current[1]("rows"));
|
||||
expect(result.current[0]).toBe("rows");
|
||||
expect(savePrefs).toHaveBeenCalledWith({ view: "rows" });
|
||||
expect(
|
||||
(qc.getQueryData(qk.me()) as { preferences: Record<string, unknown> }).preferences.view,
|
||||
).toBe("rows");
|
||||
expect(store.get("siftlode.feedView")).toBe(JSON.stringify("rows"));
|
||||
});
|
||||
|
||||
it("does not write a localStorage mirror when no localKey is given", () => {
|
||||
const qc = makeClient();
|
||||
seedMe(qc, {});
|
||||
const { result } = renderHook(() => usePref<string>("playerLoop", "off"), {
|
||||
wrapper: wrapperFor(qc),
|
||||
});
|
||||
act(() => result.current[1]("all"));
|
||||
expect(store.size).toBe(0);
|
||||
expect(savePrefs).toHaveBeenCalledWith({ playerLoop: "all" });
|
||||
});
|
||||
|
||||
it("adopts the server value when the account id changes (login / switch)", async () => {
|
||||
const qc = makeClient();
|
||||
seedMe(qc, { view: "cards" }, 1);
|
||||
const { result } = renderHook(() => usePref<string>("view", "cards"), {
|
||||
wrapper: wrapperFor(qc),
|
||||
});
|
||||
expect(result.current[0]).toBe("cards");
|
||||
// A different account resolves. The passive me observer notifies asynchronously (react-query's
|
||||
// notifyManager batches), so wait for the re-render — the same path the real App drives on login.
|
||||
act(() => seedMe(qc, { view: "tiles" }, 2));
|
||||
await waitFor(() => expect(result.current[0]).toBe("tiles"));
|
||||
});
|
||||
|
||||
describe("debounceMs", () => {
|
||||
beforeEach(() => vi.useFakeTimers());
|
||||
afterEach(() => vi.useRealTimers());
|
||||
|
||||
it("coalesces rapid sets into one PUT after the delay", () => {
|
||||
const qc = makeClient();
|
||||
seedMe(qc, {});
|
||||
const { result } = renderHook(() => usePref<number>("vol", 0, { debounceMs: 300 }), {
|
||||
wrapper: wrapperFor(qc),
|
||||
});
|
||||
act(() => {
|
||||
result.current[1](10);
|
||||
result.current[1](20);
|
||||
result.current[1](30);
|
||||
});
|
||||
// Local state is instant; the server write is deferred.
|
||||
expect(result.current[0]).toBe(30);
|
||||
expect(savePrefs).not.toHaveBeenCalled();
|
||||
act(() => vi.advanceTimersByTime(300));
|
||||
expect(savePrefs).toHaveBeenCalledTimes(1);
|
||||
expect(savePrefs).toHaveBeenCalledWith({ vol: 30 });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("useSavePref", () => {
|
||||
beforeEach(() => savePrefs.mockClear());
|
||||
|
||||
it("persists an arbitrary patch and merges it into the me cache", () => {
|
||||
const qc = makeClient();
|
||||
seedMe(qc, { a: 1 });
|
||||
const { result } = renderHook(() => useSavePref(), { wrapper: wrapperFor(qc) });
|
||||
act(() => result.current({ plexHiddenStripSources: ["x"] }));
|
||||
expect(savePrefs).toHaveBeenCalledWith({ plexHiddenStripSources: ["x"] });
|
||||
const prefs = (qc.getQueryData(qk.me()) as { preferences: Record<string, unknown> })
|
||||
.preferences;
|
||||
expect(prefs).toEqual({ a: 1, plexHiddenStripSources: ["x"] });
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user