@handled-ai/design-system 0.17.0 → 0.17.2

package/src/components/__tests__/score-why-chips.test.tsx

@@ -0,0 +1,540 @@
+/**
+ * Tests for ScoreWhyChips, WhyPill, WhyCard, and signal row components.
+ *
+ * Covers:
+ *  - ScoreWhyChips renders bucket pills with structured signal rows
+ *  - Slot grammar grid renders primary value, qualifier, counterparty, time
+ *  - Missing data renders empty (no em-dashes)
+ *  - Long list truncation at 8 rows, "Show N more" expands
+ *  - Combined signal row renders component mini-chips
+ *  - Bucket feedback footer renders and fires callback with FeedbackSubmitData
+ *  - WhyPill shows icon, count badge, chevron, and X close button
+ *  - Accordion behavior: only one pill expanded at a time
+ */
+
+import { describe, it, expect, vi } from "vitest"
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { ScoreWhyChips } from "../score-why-chips"
+import type {
+  QueueItem,
+  SignalScoreData,
+  SignalScoreExplanationBucket,
+  SignalScoreExplanationSignal,
+} from "../../prototype/prototype-config"
+
+// ─── Mock data ───────────────────────────────────────────────────────────────
+
+const mockItem: QueueItem = {
+  id: "case-1",
+  title: "Test Case",
+  details: "Some details",
+  statusColor: "red",
+  time: "2h ago",
+  company: "TestCorp",
+  tag1: "urgent",
+}
+
+function makeSignal(overrides: Partial<SignalScoreExplanationSignal> = {}): SignalScoreExplanationSignal {
+  return {
+    id: "sig-1",
+    label: "Treasury Liquidation",
+    primaryValue: "-$1,724,310.11",
+    qualifier: "100% of balance",
+    counterparty: "-> JPMorgan Chase --6042",
+    time: "7h ago",
+    ...overrides,
+  }
+}
+
+function makeBucket(overrides: Partial<SignalScoreExplanationBucket> = {}): SignalScoreExplanationBucket {
+  return {
+    key: "treasury_liquidation",
+    label: "Treasury Liquidation",
+    kind: "signal",
+    signalCount: 2,
+    icon: "trending-down",
+    tone: "alert",
+    signals: [
+      makeSignal({ id: "sig-1" }),
+      makeSignal({ id: "sig-2", primaryValue: "-$500,000.00", qualifier: "45% of balance" }),
+    ],
+    ...overrides,
+  }
+}
+
+function makeSignalData(overrides: Partial<SignalScoreData> = {}): SignalScoreData {
+  return {
+    score: 85,
+    factors: [],
+    whyNow: "Large treasury movement",
+    evidence: [],
+    confidence: 90,
+    explanationBuckets: [makeBucket()],
+    ...overrides,
+  }
+}
+
+// ─── ScoreWhyChips basic rendering ──────────────────────────────────────────
+
+describe("ScoreWhyChips", () => {
+  it("renders nothing when there are no buckets", () => {
+    const { container } = render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({ explanationBuckets: [] })}
+      />,
+    )
+    expect(container.innerHTML).toBe("")
+  })
+
+  it("renders the Why label and bucket pills", () => {
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData()}
+      />,
+    )
+    expect(screen.getByText("Why")).toBeDefined()
+    expect(screen.getByText("Treasury Liquidation")).toBeDefined()
+  })
+
+  it("renders count badge on pill when signalCount > 1", () => {
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData()}
+      />,
+    )
+    expect(screen.getByText("x2")).toBeDefined()
+  })
+
+  it("does not render count badge when signalCount is 1", () => {
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({
+          explanationBuckets: [makeBucket({ signalCount: 1, signals: [makeSignal()] })],
+        })}
+      />,
+    )
+    expect(screen.queryByText("x1")).toBeNull()
+  })
+})
+
+// ─── Accordion behavior ────────────────────────────────────────────────────
+
+describe("ScoreWhyChips accordion", () => {
+  it("expands a bucket when pill is clicked", () => {
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData()}
+      />,
+    )
+
+    // Click the pill
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Should show the card with signal count header
+    expect(screen.getByText(/2 signals/)).toBeDefined()
+  })
+
+  it("collapses when the same pill is clicked again", () => {
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData()}
+      />,
+    )
+
+    const pill = screen.getByText("Treasury Liquidation")
+    fireEvent.click(pill)
+    expect(screen.getByText(/2 signals/)).toBeDefined()
+
+    // Click again to collapse
+    fireEvent.click(pill)
+    expect(screen.queryByText(/2 signals/)).toBeNull()
+  })
+
+  it("only one pill is expanded at a time (accordion)", () => {
+    const bucket2 = makeBucket({
+      key: "test_transaction",
+      label: "Test Transaction",
+      icon: "radar",
+      tone: "info",
+      signalCount: 1,
+      signals: [makeSignal({ id: "sig-3", label: "Test Tx" })],
+    })
+
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({
+          explanationBuckets: [makeBucket(), bucket2],
+        })}
+      />,
+    )
+
+    // Expand first bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+    expect(screen.getByText(/2 signals/)).toBeDefined()
+
+    // Expand second bucket - should collapse first
+    fireEvent.click(screen.getByText("Test Transaction"))
+    expect(screen.getByText(/1 signal/)).toBeDefined()
+    // The first bucket's card should be gone
+    expect(screen.queryByText(/2 signals – Treasury Liquidation/)).toBeNull()
+  })
+
+  it("X close button collapses the expanded bucket", () => {
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData()}
+      />,
+    )
+
+    // Expand
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+    expect(screen.getByText(/2 signals/)).toBeDefined()
+
+    // Click the X close button
+    const closeButton = screen.getByLabelText("Close Treasury Liquidation")
+    fireEvent.click(closeButton)
+    expect(screen.queryByText(/2 signals/)).toBeNull()
+  })
+})
+
+// ─── Structured signal row (slot grammar) ──────────────────────────────────
+
+describe("Structured signal row", () => {
+  it("renders primary value, qualifier, counterparty, and time", () => {
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData()}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Check structured data renders
+    expect(screen.getAllByText("-$1,724,310.11").length).toBeGreaterThanOrEqual(1)
+    expect(screen.getAllByText("100% of balance").length).toBeGreaterThanOrEqual(1)
+    expect(screen.getAllByText("-> JPMorgan Chase --6042").length).toBeGreaterThanOrEqual(1)
+    expect(screen.getAllByText("7h ago").length).toBeGreaterThanOrEqual(1)
+  })
+
+  it("renders empty string for null/undefined slots (no em-dashes)", () => {
+    // Mix of present and missing data to trigger structured row rendering.
+    // One signal has a primaryValue (triggering structured mode), the other
+    // has missing fields that should render as empty.
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({
+          explanationBuckets: [
+            makeBucket({
+              signals: [
+                makeSignal({
+                  id: "sig-partial",
+                  primaryValue: "-$100.00",
+                  qualifier: undefined,
+                  counterparty: undefined,
+                  time: undefined,
+                }),
+              ],
+              signalCount: 1,
+            }),
+          ],
+        })}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // The primary value should render, but missing slots should be empty (no em-dashes)
+    expect(screen.getByText("-$100.00")).toBeTruthy()
+    // Verify no em-dashes are rendered
+    expect(screen.queryByText("\u2014")).toBeNull()
+  })
+
+  it("calls onOpenSignalBucket when a signal row is clicked", () => {
+    const onOpen = vi.fn()
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData()}
+        onOpenSignalBucket={onOpen}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Find signal row buttons and click the first one
+    const signalButtons = screen.getAllByRole("button").filter(
+      (btn) => btn.className.includes("grid"),
+    )
+    expect(signalButtons.length).toBeGreaterThan(0)
+    fireEvent.click(signalButtons[0])
+
+    expect(onOpen).toHaveBeenCalledWith({
+      item: mockItem,
+      bucketKey: "treasury_liquidation",
+      signalId: "sig-1",
+    })
+  })
+})
+
+// ─── Long list truncation ──────────────────────────────────────────────────
+
+describe("Long list truncation", () => {
+  it("shows first 8 rows and 'Show N more' button when there are more than 8 signals", () => {
+    const signals = Array.from({ length: 12 }, (_, i) =>
+      makeSignal({ id: `sig-${i}`, primaryValue: `$${i * 100}` }),
+    )
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({
+          explanationBuckets: [
+            makeBucket({ signals, signalCount: 12 }),
+          ],
+        })}
+      />,
+    )
+
+    // Expand
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Should show "Show 4 more" button
+    expect(screen.getByText("Show 4 more")).toBeDefined()
+
+    // Only 8 rows visible initially (check list items)
+    const list = screen.getByRole("list", { name: "Matching signals" })
+    expect(list.children.length).toBe(8)
+  })
+
+  it("clicking 'Show N more' reveals all rows", () => {
+    const signals = Array.from({ length: 12 }, (_, i) =>
+      makeSignal({ id: `sig-${i}`, primaryValue: `$${i * 100}` }),
+    )
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({
+          explanationBuckets: [
+            makeBucket({ signals, signalCount: 12 }),
+          ],
+        })}
+      />,
+    )
+
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+    fireEvent.click(screen.getByText("Show 4 more"))
+
+    // All 12 rows visible now
+    const list = screen.getByRole("list", { name: "Matching signals" })
+    expect(list.children.length).toBe(12)
+
+    // Button should be gone
+    expect(screen.queryByText("Show 4 more")).toBeNull()
+  })
+
+  it("does not show 'Show more' button when signals <= 8", () => {
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData()}
+      />,
+    )
+
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+    expect(screen.queryByText(/Show \d+ more/)).toBeNull()
+  })
+})
+
+// ─── Combined signal row ───────────────────────────────────────────────────
+
+describe("Combined signal row", () => {
+  it("renders component mini-chips for combined_signal type", () => {
+    const combinedSignal: SignalScoreExplanationSignal = {
+      id: "sig-combined",
+      label: "Combined signal",
+      signalTypeName: "combined_signal",
+      components: [
+        { type: "treasury_liquidation", count: 3 },
+        { type: "test_transaction", count: 2 },
+      ],
+      time: "1h ago",
+    }
+
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({
+          explanationBuckets: [
+            makeBucket({
+              key: "combined_signal",
+              label: "Combined",
+              tone: "alert",
+              signals: [combinedSignal],
+              signalCount: 1,
+            }),
+          ],
+        })}
+      />,
+    )
+
+    // Expand
+    fireEvent.click(screen.getByText("Combined"))
+
+    // Should render component mini-chips
+    expect(screen.getByText(/treasury liquidation x3/)).toBeDefined()
+    expect(screen.getByText(/test transaction x2/)).toBeDefined()
+    // Should render the '+' separator
+    expect(screen.getByText("+")).toBeDefined()
+  })
+})
+
+// ─── Bucket feedback footer ────────────────────────────────────────────────
+
+describe("Bucket feedback footer", () => {
+  it("renders feedback footer when onBucketFeedback is provided", () => {
+    const onBucketFeedback = vi.fn()
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({ onBucketFeedback })}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Should show thumbs buttons
+    expect(screen.getByText("Helpful")).toBeDefined()
+    expect(screen.getByText("Not helpful")).toBeDefined()
+  })
+
+  it("does not render feedback footer when onBucketFeedback is not provided", () => {
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData()}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Should NOT show thumbs buttons
+    expect(screen.queryByText("Helpful")).toBeNull()
+    expect(screen.queryByText("Not helpful")).toBeNull()
+  })
+
+  it("fires onBucketFeedback with correct bucket key and FeedbackSubmitData", () => {
+    const onBucketFeedback = vi.fn()
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({ onBucketFeedback })}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Click "Not helpful"
+    fireEvent.click(screen.getByText("Not helpful"))
+
+    // Select a chip
+    fireEvent.click(screen.getByText("Bad timing"))
+
+    // Submit
+    fireEvent.click(screen.getByText("Submit"))
+
+    expect(onBucketFeedback).toHaveBeenCalledTimes(1)
+    expect(onBucketFeedback).toHaveBeenCalledWith("treasury_liquidation", {
+      sentiment: "negative",
+      reasonTop: "Bad timing",
+      reasonSub: undefined,
+      pills: [],
+      detail: "",
+    })
+  })
+})
+
+// ─── WhyPill visual states ─────────────────────────────────────────────────
+
+describe("WhyPill visual states", () => {
+  it("collapsed pill has rounded-lg and bg-background classes", () => {
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData()}
+      />,
+    )
+
+    const pill = screen.getByRole("button", { name: /Treasury Liquidation/i })
+    expect(pill.className).toContain("rounded-lg")
+    expect(pill.className).toContain("bg-background")
+    expect(pill.className).not.toContain("rounded-b-none")
+  })
+
+  it("expanded pill has rounded-b-none and bg-muted classes", () => {
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData()}
+      />,
+    )
+
+    // Expand
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    const pill = screen.getByRole("button", { expanded: true })
+    expect(pill.className).toContain("rounded-b-none")
+    expect(pill.className).toContain("bg-muted")
+  })
+})
+
+// ─── Legacy signal row fallback ────────────────────────────────────────────
+
+describe("Legacy signal row fallback", () => {
+  it("renders legacy rows when signals lack structured data", () => {
+    const legacySignal: SignalScoreExplanationSignal = {
+      id: "sig-legacy",
+      label: "Old format signal",
+      description: "Some legacy description",
+      source: "Bank API",
+      metric: "$500K",
+      time: "3h ago",
+    }
+
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({
+          explanationBuckets: [
+            makeBucket({
+              signals: [legacySignal],
+              signalCount: 1,
+            }),
+          ],
+        })}
+      />,
+    )
+
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    expect(screen.getByText("Old format signal")).toBeDefined()
+    expect(screen.getByText("Some legacy description")).toBeDefined()
+    expect(screen.getByText("Bank API")).toBeDefined()
+    expect(screen.getByText("$500K")).toBeDefined()
+  })
+})