test(components): cover Analytics section components individually

Add focused tests for the five Analytics siblings extracted in
this PR: RatingDistribution (empty + populated), KbUsageTable
(empty + click callback), QualityDrilldownExamples (null payload
+ populated + format helper), ResponseQualityPanel (empty + metric
grid), PilotDiagnosticsSection (policy load + reject fallback).
+11 tests.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: saagar210

src/components/Analytics/KbUsageTable.test.tsx

@@ -0,0 +1,28 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { KbUsageTable } from "./KbUsageTable";
+
+const articles = [
+  { document_id: "doc-1", title: "Remote Work Policy", usage_count: 12 },
+  { document_id: "doc-2", title: "VPN Setup Guide", usage_count: 7 },
+];
+
+describe("KbUsageTable", () => {
+  afterEach(() => cleanup());
+
+  it("renders an empty state when there are no articles", () => {
+    render(<KbUsageTable articles={[]} />);
+    expect(screen.getByText("No article usage data yet")).toBeTruthy();
+  });
+
+  it("fires onArticleClick with the document_id when a row is clicked", () => {
+    const onArticleClick = vi.fn();
+    render(
+      <KbUsageTable articles={articles} onArticleClick={onArticleClick} />,
+    );
+
+    fireEvent.click(screen.getByText("VPN Setup Guide"));
+    expect(onArticleClick).toHaveBeenCalledWith("doc-2");
+  });
+});

src/components/Analytics/PilotDiagnosticsSection.test.tsx

@@ -0,0 +1,70 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { PilotDiagnosticsSection } from "./PilotDiagnosticsSection";
+
+const invokeMock = vi.fn();
+
+vi.mock("@tauri-apps/api/core", () => ({
+  invoke: (...args: unknown[]) => invokeMock(...args),
+}));
+
+vi.mock("../Pilot", () => ({
+  PilotDashboard: ({
+    pilotLoggingEnabled,
+  }: {
+    pilotLoggingEnabled: boolean;
+  }) => (
+    <div data-testid="pilot-dashboard">
+      enabled:{String(pilotLoggingEnabled)}
+    </div>
+  ),
+  PilotQueryTester: ({
+    pilotLoggingEnabled,
+  }: {
+    pilotLoggingEnabled: boolean;
+  }) => (
+    <div data-testid="pilot-query-tester">
+      enabled:{String(pilotLoggingEnabled)}
+    </div>
+  ),
+}));
+
+describe("PilotDiagnosticsSection", () => {
+  beforeEach(() => {
+    invokeMock.mockReset();
+  });
+  afterEach(() => cleanup());
+
+  it("loads the pilot logging policy and passes enabled=true to children", async () => {
+    invokeMock.mockResolvedValue({
+      enabled: true,
+      retention_days: 14,
+      max_rows: 500,
+    });
+
+    render(<PilotDiagnosticsSection />);
+
+    await waitFor(() => {
+      expect(invokeMock).toHaveBeenCalledWith("get_pilot_logging_policy");
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("pilot-query-tester").textContent).toContain(
+        "enabled:true",
+      );
+    });
+  });
+
+  it("falls back to a disabled policy when the invoke call rejects", async () => {
+    invokeMock.mockRejectedValue(new Error("backend down"));
+
+    render(<PilotDiagnosticsSection />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("pilot-dashboard").textContent).toContain(
+        "enabled:false",
+      );
+    });
+  });
+});

src/components/Analytics/QualityDrilldownExamples.test.tsx

@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  QualityDrilldownExamples,
+  formatDrilldownMetric,
+} from "./QualityDrilldownExamples";
+
+describe("formatDrilldownMetric", () => {
+  it("formats each signal's metric string", () => {
+    expect(formatDrilldownMetric("edit_ratio", 0.42)).toBe("42.0% edit ratio");
+    expect(formatDrilldownMetric("time_to_draft", 12000)).toBe(
+      "12.0s to draft",
+    );
+    expect(formatDrilldownMetric("copy_per_save", 99)).toBe(
+      "Saved without copy",
+    );
+    expect(formatDrilldownMetric("edited_save_rate", 0.8)).toBe(
+      "80.0% edit ratio",
+    );
+  });
+});
+
+describe("QualityDrilldownExamples", () => {
+  afterEach(() => cleanup());
+
+  it("renders null when there is no drilldown payload", () => {
+    const { container } = render(
+      <QualityDrilldownExamples signalId="edit_ratio" drilldown={null} />,
+    );
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders up to three draft examples for the given signal", () => {
+    render(
+      <QualityDrilldownExamples
+        signalId="edit_ratio"
+        drilldown={{
+          edit_ratio: [
+            {
+              draft_id: "d1",
+              created_at: "2026-04-01",
+              metric_value: 0.5,
+              draft_excerpt: "Drift example one",
+            },
+            {
+              draft_id: "d2",
+              created_at: "2026-04-02",
+              metric_value: 0.7,
+              draft_excerpt: "Drift example two",
+            },
+          ],
+          time_to_draft: [],
+          copy_per_save: [],
+          edited_save_rate: [],
+        }}
+      />,
+    );
+    expect(screen.getByText("d1")).toBeTruthy();
+    expect(screen.getByText("d2")).toBeTruthy();
+    expect(screen.getByText("Drift example one")).toBeTruthy();
+  });
+});

src/components/Analytics/RatingDistribution.test.tsx

@@ -0,0 +1,48 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import type { AnalyticsSummary } from "../../hooks/useAnalytics";
+import { RatingDistribution } from "./RatingDistribution";
+
+function makeSummary(
+  overrides: Partial<AnalyticsSummary> = {},
+): AnalyticsSummary {
+  return {
+    responses_generated: 0,
+    searches_performed: 0,
+    drafts_saved: 0,
+    average_rating: 0,
+    total_ratings: 0,
+    rating_distribution: [0, 0, 0, 0, 0],
+    daily_counts: [],
+    ...overrides,
+  } as AnalyticsSummary;
+}
+
+describe("RatingDistribution", () => {
+  afterEach(() => cleanup());
+
+  it("shows an empty state when there are zero ratings", () => {
+    render(<RatingDistribution summary={makeSummary()} />);
+    expect(screen.getByText("No ratings yet")).toBeTruthy();
+  });
+
+  it("renders five rows with the real per-star counts", () => {
+    render(
+      <RatingDistribution
+        summary={makeSummary({
+          total_ratings: 10,
+          rating_distribution: [1, 2, 0, 3, 4],
+        })}
+      />,
+    );
+
+    // 5 stars
+    expect(screen.getByText("5 stars")).toBeTruthy();
+    // 1 star (singular)
+    expect(screen.getByText("1 star")).toBeTruthy();
+    // Counts present (4 for 5-star, 1 for 1-star)
+    const counts = screen.getAllByText(/^[0-9]+$/);
+    expect(counts.length).toBeGreaterThanOrEqual(5);
+  });
+});

src/components/Analytics/ResponseQualityPanel.test.tsx

@@ -0,0 +1,66 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ResponseQualityPanel } from "./ResponseQualityPanel";
+import type { ResponseQualityThresholds } from "../../features/analytics/qualityThresholds";
+
+vi.mock("../../features/analytics/qualityCoaching", () => ({
+  buildResponseQualityCoaching: () => null,
+}));
+vi.mock("../../features/analytics/operatorScorecard", () => ({
+  buildOperatorScorecard: () => null,
+}));
+vi.mock("../../features/inbox/queueModel", () => ({
+  loadQueueHandoffSnapshot: () => null,
+}));
+
+const thresholds: ResponseQualityThresholds = {
+  edit_ratio_watch: 0.3,
+  edit_ratio_action: 0.5,
+  time_to_draft_watch_ms: 30000,
+  time_to_draft_action_ms: 60000,
+  copy_per_save_watch: 0.5,
+  copy_per_save_action: 0.3,
+  edited_save_rate_watch: 0.5,
+  edited_save_rate_action: 0.7,
+};
+
+describe("ResponseQualityPanel", () => {
+  afterEach(() => cleanup());
+
+  it("shows the empty state when there are no snapshots", () => {
+    render(
+      <ResponseQualityPanel
+        summary={null}
+        thresholds={thresholds}
+        drilldown={null}
+      />,
+    );
+    expect(
+      screen.getByText("No response quality snapshots captured yet"),
+    ).toBeTruthy();
+  });
+
+  it("renders the metric grid when a snapshot summary is provided", () => {
+    render(
+      <ResponseQualityPanel
+        summary={{
+          snapshots_count: 4,
+          avg_word_count: 82,
+          avg_edit_ratio: 0.12,
+          edited_save_rate: 0.4,
+          avg_time_to_draft_ms: 5400,
+          median_time_to_draft_ms: 4200,
+          copy_per_saved_ratio: 0.9,
+          saved_count: 3,
+        }}
+        thresholds={thresholds}
+        drilldown={null}
+      />,
+    );
+    expect(screen.getByText("Snapshots")).toBeTruthy();
+    expect(screen.getByText("4")).toBeTruthy();
+    expect(screen.getByText("Avg Words")).toBeTruthy();
+    expect(screen.getByText("82")).toBeTruthy();
+  });
+});