fix(channels): address R13 S3 review findings

- ActionMenu: skip disabled items in roving keyboard nav (plumb disabledIndices through the AnchoredPopover platform); a pending action no longer strands focus on an unfocusable button. - ActionMenu + ChannelStatsPopover: add type="button" to the popover triggers so they can't submit an enclosing form. - ChannelStatsPopover: restore the per-stat explanations as a native title on each row — the guidance the old inline stats showed is back. - i18n: drop the now-dead channels.tags.yourTags / .manage keys (en+hu); the stats *Hint keys are live again via the restored row titles. - test: cover ActionMenu (open/select/close/disabled) and ChannelStatsPopover (rows, conditional ETA row, per-row hint title).
2026-08-15 04:09:30 +02:00
parent a26d96630d
commit bb2d6999fd
7 changed files with 221 additions and 9 deletions
@@ -0,0 +1,92 @@
+// @vitest-environment jsdom
+//
+// Contract of the catalog-stats hover chip: the compact trigger, the rows it reveals on open (value
+// formatting + the conditional "left" row), and — the point of the R13-S3 review fix — that each row
+// still carries its per-stat explanation as a `title`, so the guidance the old inline stats showed is
+// not lost. i18n is mocked to a key-passthrough so assertions read the stable keys, not translations.
+// The AnchoredPopover platform is floating-ui based (hover mode), so we stub the observers autoUpdate
+// wires and wrap in a FloatingTree, and open via focus (hover mode enables useFocus).
+import { describe, it, expect, afterEach, beforeAll, vi } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { FloatingTree } from "@floating-ui/react";
+
+// Key-passthrough t so assertions read stable keys — but keep the rest of react-i18next intact
+// (i18n/index.ts calls i18n.use(initReactI18next) at import time).
+vi.mock("react-i18next", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-i18next")>();
+  return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
+});
+
+import ChannelStatsPopover from "./ChannelStatsPopover";
+import { type MyStatus } 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);
+
+const status = (over: Partial<MyStatus> = {}): MyStatus =>
+  ({
+    channels_total: 10,
+    channels_recent_synced: 3,
+    channels_deep_done: 1,
+    channels_deep_requested: 4,
+    deep_pending_count: 0,
+    deep_eta_seconds: 120,
+    my_videos: 1234,
+    quota_remaining_today: 5000,
+    ...over,
+  }) as MyStatus;
+
+const open = (s: MyStatus) => {
+  render(
+    <FloatingTree>
+      <ChannelStatsPopover status={s} />
+    </FloatingTree>,
+  );
+  fireEvent.focus(screen.getByRole("button", { name: "channels.stats.label" }));
+};
+
+describe("ChannelStatsPopover", () => {
+  it("renders a compact Stats trigger, panel closed until opened", () => {
+    render(
+      <FloatingTree>
+        <ChannelStatsPopover status={status()} />
+      </FloatingTree>,
+    );
+    expect(screen.getByRole("button", { name: "channels.stats.label" })).toBeTruthy();
+    expect(screen.queryByText("channels.stats.channels")).toBeNull();
+  });
+
+  it("reveals one row per stat with formatted values", () => {
+    open(status());
+    expect(screen.getByText("channels.stats.recentSynced")).toBeTruthy();
+    expect(screen.getByText("3/10")).toBeTruthy(); // recent-synced ratio
+    expect(screen.getByText("1/4")).toBeTruthy(); // full-history ratio
+    expect(screen.getByText((1234).toLocaleString())).toBeTruthy(); // my_videos, locale-agnostic
+  });
+
+  it("shows the 'left' ETA row only while a backfill is pending", () => {
+    open(status({ deep_pending_count: 0 }));
+    expect(screen.queryByText("channels.stats.left")).toBeNull();
+    cleanup();
+    open(status({ deep_pending_count: 2 }));
+    expect(screen.getByText("channels.stats.left")).toBeTruthy();
+  });
+
+  it("keeps each stat's explanation as a per-row title (hint not lost)", () => {
+    open(status());
+    const row = screen.getByText("channels.stats.channels").closest("div");
+    expect(row?.getAttribute("title")).toBe("channels.stats.channelsHint");
+  });
+});