siftlode/frontend/src/components/Feed.reset.dom.test.tsx

// @vitest-environment jsdom
//
// "Reset — clear watch progress/status" on a half-watched video. The optimistic layer overrode only
// the STATUS, so the card kept its resume position — its progress bar and its Continue button — until
// the next refetch (found in a UAT). The grid is replaced by a list that shows what Feed
// hands it: each video's position, and a button that fires the reset.
import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
import { render, screen, fireEvent, 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("./wizardContext", () => ({ useWizard: () => ({ openWizard: vi.fn() }) }));
vi.mock("./VirtualFeed", () => ({
  default: ({
    items,
    onResetState,
  }: {
    items: { id: string; position_seconds: number }[];
    onResetState: (id: string) => void;
  }) => (
    <ol aria-label="results">
      {items.map((v) => (
        <li key={v.id}>
          {v.id}@{v.position_seconds}
          <button onClick={() => onResetState(v.id)}>reset {v.id}</button>
        </li>
      ))}
    </ol>
  ),
}));

import Feed from "./Feed";
import { api, DEFAULT_TAG_MODES, type FeedFilters, type Video } from "../lib/api";
import { qk } from "../lib/queryKeys";
import { patchCachedProgress } from "../lib/progressCache";

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 FILTERS: FeedFilters = {
  tags: [],
  tagModes: DEFAULT_TAG_MODES,
  channelIds: [],
  q: "",
  sort: "newest",
  scope: "my",
  includeNormal: true,
  includeShorts: false,
  includeLive: false,
  show: "unwatched",
};

const halfWatched = {
  id: "v1",
  title: "v1",
  channel_id: "UCx",
  channel_title: "Channel",
  status: "new",
  position_seconds: 95,
  duration_seconds: 600,
  published_at: "2026-01-01T00:00:00Z",
  watch_url: "https://www.youtube.com/watch?v=v1",
} as unknown as Video;

function mount(clear: () => Promise<unknown>) {
  vi.spyOn(api, "feed").mockResolvedValue({ items: [halfWatched], next_cursor: null } as never);
  vi.spyOn(api, "feedSummary").mockResolvedValue({ count: 1, facets: {} } as never);
  vi.spyOn(api, "clearState").mockImplementation(clear as never);
  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  qc.setQueryData(qk.me(), { id: 1, can_write: true, prefs: {} });
  render(
    <QueryClientProvider client={qc}>
      <Feed
        filters={FILTERS}
        setFilters={() => {}}
        view="cards"
        setView={() => {}}
        canRead
        ytSearch=""
        onYtSearch={() => {}}
        onExitYtSearch={() => {}}
      />
    </QueryClientProvider>,
  );
  return qc;
}

describe("Feed — resetting a half-watched video", () => {
  it("clears its resume position at once, not only its status", async () => {
    // Never settles: what the card shows before the server answers is the optimistic layer alone.
    mount(() => new Promise(() => {}));
    await waitFor(() => expect(screen.getByText("v1@95")).toBeTruthy());
    fireEvent.click(screen.getByText("reset v1"));
    await waitFor(() => expect(screen.getByText("v1@0")).toBeTruthy());
  });

  it("shows the position a replay after it saved, so a reopen resumes there", async () => {
    // Reset, played to 40 s and closed: the player writes what the server stored into the cache.
    // A reset mask over the cache kept showing 0, a reopen resumed at 0, and its first checkpoint
    // wrote over the 40.
    const qc = mount(() => Promise.resolve({ ok: true }));
    fireEvent.click(await screen.findByText("reset v1"));
    await screen.findByText("v1@0");
    act(() => patchCachedProgress(qc, new Map([["v1", 40]])));
    await waitFor(() => expect(screen.getByText("v1@40")).toBeTruthy());
  });

  it("keeps the position at 0 through a refetch that set out before the reset", async () => {
    // That refetch read the row the reset deletes: its answer put the old position back under a
    // card the reset had made new, and a reopen resumed there.
    let answer: (v: unknown) => void = () => {};
    const qc = mount(() => new Promise(() => {}));
    await screen.findByText("v1@95");
    vi.mocked(api.feed).mockImplementationOnce(() => new Promise((r) => (answer = r)) as never);
    act(() => void qc.invalidateQueries({ queryKey: qk.feed() }));
    await waitFor(() => expect(api.feed).toHaveBeenCalledTimes(2));
    await act(() => new Promise((r) => setTimeout(r, 20)));
    fireEvent.click(screen.getByText("reset v1"));
    await screen.findByText("v1@0");
    await act(async () => answer({ items: [halfWatched], next_cursor: null }));
    await act(() => new Promise((r) => setTimeout(r, 20)));
    expect(screen.getByText("v1@0")).toBeTruthy();
  });

  it("puts the position back when the server refuses the reset", async () => {
    mount(() => Promise.reject(new Error("down")));
    fireEvent.click(await screen.findByText("reset v1"));
    await waitFor(() => expect(screen.getByText("v1@95")).toBeTruthy());
  });
});