@handled-ai/design-system 0.18.5 → 0.18.6

package/src/components/__tests__/wit-636-feedback-states.test.tsx

@@ -0,0 +1,546 @@
+/**
+ * Tests for WIT-636: Feedback confirmation and persisted-state support.
+ *
+ * Covers:
+ *  - SignalPriorityPopover factor feedback with no note shows `Saved`
+ *  - SignalPriorityPopover factor feedback with existing current-user note shows `Your feedback:` after initial render and after prop updates
+ *  - SignalPriorityPopover factor feedback with teammate fallback shows `Team feedback:`
+ *  - Priority popover footer initial feedback hydrates and submit confirmation appears
+ *  - Bucket footer submit shows saved/submitted state
+ *  - Bucket initial feedback shows `Your feedback:` or `Team feedback:`
+ *  - Footer syncs when initialFeedback arrives after mount, switches when feedbackKey changes, does not overwrite active edits for same key
+ *  - Balance strip renders for structured WHY rows
+ */
+
+import { describe, it, expect, vi } from "vitest"
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { FeedbackFooter } from "../feedback-primitives"
+import type { PersistedFeedbackData } from "../feedback-primitives"
+import { SignalPriorityPopover } from "../signal-priority-popover"
+import type { PriorityFactor } from "../signal-priority-popover"
+import { ScoreWhyChips } from "../score-why-chips"
+import type {
+  QueueItem,
+  SignalScoreData,
+  SignalScoreExplanationBucket,
+  SignalScoreExplanationSignal,
+} from "../../prototype/prototype-config"
+
+// ─── Shared mock data ────────────────────────────────────────────────────────
+
+const mockFactors: PriorityFactor[] = [
+  {
+    key: "timing-asymmetry",
+    label: "Timing asymmetry",
+    icon: "radar",
+    tone: "alert",
+    direction: "raises",
+    score: 92,
+    rationale: "Test transaction 12h ago → no follow-on liquidation yet.",
+  },
+  {
+    key: "funds-at-stake",
+    label: "Funds at stake",
+    icon: "wallet",
+    tone: "alert",
+    direction: "raises",
+    score: 88,
+    rationale: "$3.4M moved in 8h · current treasury balance $0.00",
+  },
+]
+
+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,
+  }
+}
+
+// ─── SignalPriorityPopover factor feedback ──────────────────────────────────
+
+describe("SignalPriorityPopover factor feedback", () => {
+  it("factor feedback with no note shows Saved (persisted state)", () => {
+    const onFactorFeedback = vi.fn()
+    render(
+      <SignalPriorityPopover
+        score={79}
+        urgencyLabel="High"
+        factors={mockFactors}
+        onFeedbackSubmit={vi.fn()}
+        onFactorFeedback={onFactorFeedback}
+      />,
+    )
+
+    // Open popover
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // Click thumb-up on first factor
+    fireEvent.click(screen.getByTestId("factor-thumb-up-timing-asymmetry"))
+
+    // Submit without typing a note
+    fireEvent.click(screen.getByTestId("factor-submit-timing-asymmetry"))
+
+    // After submit, factor transitions to persisted state showing "Your feedback:"
+    const indicator = screen.getByTestId("factor-feedback-persisted-timing-asymmetry")
+    expect(indicator).toBeTruthy()
+    expect(indicator.textContent).toContain("Your feedback:")
+
+    // Callback should have been called
+    expect(onFactorFeedback).toHaveBeenCalledWith("timing-asymmetry", "up", "")
+  })
+
+  it("factor feedback with existing current-user note shows 'Your feedback:' after initial render", () => {
+    const initialFactorFeedback = {
+      "timing-asymmetry": { type: "down" as const, detail: "Score is too high", ownershipLabel: "Your feedback" },
+    }
+    render(
+      <SignalPriorityPopover
+        score={79}
+        urgencyLabel="High"
+        factors={mockFactors}
+        onFeedbackSubmit={vi.fn()}
+        onFactorFeedback={vi.fn()}
+        initialFactorFeedback={initialFactorFeedback}
+      />,
+    )
+
+    // Open popover
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // Should show persisted indicator with "Your feedback:"
+    const indicator = screen.getByTestId("factor-feedback-persisted-timing-asymmetry")
+    expect(indicator).toBeTruthy()
+    expect(indicator.textContent).toContain("Your feedback:")
+    expect(indicator.textContent).toContain("Score is too high")
+  })
+
+  it("factor feedback with existing current-user note shows 'Your feedback:' after prop updates", () => {
+    const onFactorFeedback = vi.fn()
+
+    const { rerender } = render(
+      <SignalPriorityPopover
+        score={79}
+        urgencyLabel="High"
+        factors={mockFactors}
+        onFeedbackSubmit={vi.fn()}
+        onFactorFeedback={onFactorFeedback}
+      />,
+    )
+
+    // Open popover
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // Initially no persisted feedback
+    expect(screen.queryByTestId("factor-feedback-persisted-timing-asymmetry")).toBeNull()
+
+    // Rerender with initialFactorFeedback
+    rerender(
+      <SignalPriorityPopover
+        score={79}
+        urgencyLabel="High"
+        factors={mockFactors}
+        onFeedbackSubmit={vi.fn()}
+        onFactorFeedback={onFactorFeedback}
+        initialFactorFeedback={{
+          "timing-asymmetry": { type: "up", detail: "Looks correct", ownershipLabel: "Your feedback" },
+        }}
+      />,
+    )
+
+    // Now should show persisted indicator
+    const indicator = screen.getByTestId("factor-feedback-persisted-timing-asymmetry")
+    expect(indicator).toBeTruthy()
+    expect(indicator.textContent).toContain("Your feedback:")
+    expect(indicator.textContent).toContain("Looks correct")
+  })
+
+  it("factor feedback with teammate fallback shows 'Team feedback:'", () => {
+    const initialFactorFeedback = {
+      "funds-at-stake": { type: "up" as const, detail: "Accurate numbers", ownershipLabel: "Team feedback" },
+    }
+    render(
+      <SignalPriorityPopover
+        score={79}
+        urgencyLabel="High"
+        factors={mockFactors}
+        onFeedbackSubmit={vi.fn()}
+        onFactorFeedback={vi.fn()}
+        initialFactorFeedback={initialFactorFeedback}
+      />,
+    )
+
+    // Open popover
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // Should show "Team feedback:" for the funds-at-stake factor
+    const indicator = screen.getByTestId("factor-feedback-persisted-funds-at-stake")
+    expect(indicator).toBeTruthy()
+    expect(indicator.textContent).toContain("Team feedback:")
+    expect(indicator.textContent).toContain("Accurate numbers")
+  })
+})
+
+// ─── Priority popover footer initial feedback ────────────────────────────────
+
+describe("Priority popover footer initial feedback", () => {
+  it("hydrates from initialPriorityFeedback and submit confirmation appears", () => {
+    const initialPriorityFeedback: PersistedFeedbackData = {
+      sentiment: "negative",
+      reasonTop: "Wrong factor weighting",
+      detail: "Last-contact weight is too high",
+      ownershipLabel: "Your feedback",
+    }
+    render(
+      <SignalPriorityPopover
+        score={79}
+        urgencyLabel="High"
+        factors={mockFactors}
+        onFeedbackSubmit={vi.fn()}
+        initialPriorityFeedback={initialPriorityFeedback}
+      />,
+    )
+
+    // Open popover
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // Should show persisted indicator in the footer
+    const indicator = screen.getByTestId("persisted-feedback-indicator")
+    expect(indicator).toBeTruthy()
+    expect(indicator.textContent).toContain("Your feedback:")
+    expect(indicator.textContent).toContain("Last-contact weight is too high")
+  })
+})
+
+// ─── Bucket footer submit shows saved/submitted state ─────────────────────
+
+describe("Bucket feedback footer", () => {
+  it("submit shows saved/submitted state", () => {
+    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"))
+
+    // Submit
+    fireEvent.click(screen.getByText("Submit"))
+
+    // Should show "Saved" pill
+    const savedPill = screen.getByTestId("feedback-submitted-pill")
+    expect(savedPill).toBeTruthy()
+    expect(savedPill.textContent).toContain("Saved")
+  })
+
+  it("bucket initial feedback shows 'Your feedback:'", () => {
+    const onBucketFeedback = vi.fn()
+    const initialBucketFeedback: Record<string, PersistedFeedbackData> = {
+      treasury_liquidation: {
+        sentiment: "positive",
+        detail: "Counterparty match was right",
+        ownershipLabel: "Your feedback",
+      },
+    }
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({ onBucketFeedback, initialBucketFeedback })}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Should show persisted indicator
+    const indicator = screen.getByTestId("persisted-feedback-indicator")
+    expect(indicator).toBeTruthy()
+    expect(indicator.textContent).toContain("Your feedback:")
+    expect(indicator.textContent).toContain("Counterparty match was right")
+  })
+
+  it("bucket initial feedback shows 'Team feedback:'", () => {
+    const onBucketFeedback = vi.fn()
+    const initialBucketFeedback: Record<string, PersistedFeedbackData> = {
+      treasury_liquidation: {
+        sentiment: "negative",
+        detail: "Timing was off",
+        ownershipLabel: "Team feedback",
+      },
+    }
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({ onBucketFeedback, initialBucketFeedback })}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Should show persisted indicator with team label
+    const indicator = screen.getByTestId("persisted-feedback-indicator")
+    expect(indicator).toBeTruthy()
+    expect(indicator.textContent).toContain("Team feedback:")
+    expect(indicator.textContent).toContain("Timing was off")
+  })
+})
+
+// ─── FeedbackFooter sync behavior ────────────────────────────────────────────
+
+describe("FeedbackFooter sync behavior", () => {
+  it("syncs when initialFeedback arrives after mount", () => {
+    const onFeedbackChange = vi.fn()
+    const { rerender } = render(
+      <FeedbackFooter
+        feedback={null}
+        onFeedbackChange={onFeedbackChange}
+        onSubmit={vi.fn()}
+        feedbackKey="bucket-1"
+      />,
+    )
+
+    // Initially no persisted indicator
+    expect(screen.queryByTestId("persisted-feedback-indicator")).toBeNull()
+    expect(screen.getByText("Helpful")).toBeTruthy()
+
+    // Simulate async data arriving
+    const incoming: PersistedFeedbackData = {
+      sentiment: "positive",
+      detail: "Looks good",
+      ownershipLabel: "Your feedback",
+    }
+
+    rerender(
+      <FeedbackFooter
+        feedback="positive"
+        onFeedbackChange={onFeedbackChange}
+        onSubmit={vi.fn()}
+        feedbackKey="bucket-1"
+        initialFeedback={incoming}
+      />,
+    )
+
+    // Now should show persisted indicator
+    const indicator = screen.getByTestId("persisted-feedback-indicator")
+    expect(indicator).toBeTruthy()
+    expect(indicator.textContent).toContain("Your feedback:")
+    expect(indicator.textContent).toContain("Looks good")
+  })
+
+  it("switches when feedbackKey changes", () => {
+    const onFeedbackChange = vi.fn()
+    const fb1: PersistedFeedbackData = {
+      sentiment: "positive",
+      detail: "Good",
+      ownershipLabel: "Your feedback",
+    }
+    const fb2: PersistedFeedbackData = {
+      sentiment: "negative",
+      detail: "Bad",
+      ownershipLabel: "Team feedback",
+    }
+
+    const { rerender } = render(
+      <FeedbackFooter
+        feedback="positive"
+        onFeedbackChange={onFeedbackChange}
+        onSubmit={vi.fn()}
+        feedbackKey="bucket-1"
+        initialFeedback={fb1}
+      />,
+    )
+
+    // Should show fb1 content
+    expect(screen.getByTestId("persisted-feedback-indicator").textContent).toContain("Good")
+
+    // Switch to different key with different feedback
+    rerender(
+      <FeedbackFooter
+        feedback="negative"
+        onFeedbackChange={onFeedbackChange}
+        onSubmit={vi.fn()}
+        feedbackKey="bucket-2"
+        initialFeedback={fb2}
+      />,
+    )
+
+    // Should now show fb2 content
+    const indicator = screen.getByTestId("persisted-feedback-indicator")
+    expect(indicator.textContent).toContain("Team feedback:")
+    expect(indicator.textContent).toContain("Bad")
+  })
+
+  it("does not overwrite active edits for same key", () => {
+    const onFeedbackChange = vi.fn()
+    const onSubmit = vi.fn()
+    const fb: PersistedFeedbackData = {
+      sentiment: "positive",
+      detail: "Initial note",
+      ownershipLabel: "Your feedback",
+    }
+
+    const { rerender } = render(
+      <FeedbackFooter
+        feedback="positive"
+        onFeedbackChange={onFeedbackChange}
+        onSubmit={onSubmit}
+        feedbackKey="bucket-1"
+        initialFeedback={fb}
+      />,
+    )
+
+    // Click the persisted indicator to open editor
+    fireEvent.click(screen.getByTestId("persisted-feedback-indicator"))
+
+    // Now should be in editing mode with the expansion open
+    expect(screen.getByPlaceholderText("Add optional detail…")).toBeTruthy()
+
+    // Type new detail
+    const input = screen.getByPlaceholderText("Add optional detail…")
+    fireEvent.change(input, { target: { value: "My new note" } })
+
+    // Rerender with updated initialFeedback (simulating prop change) - same key
+    const fbUpdated: PersistedFeedbackData = {
+      sentiment: "negative",
+      detail: "Server-side update",
+      ownershipLabel: "Team feedback",
+    }
+    rerender(
+      <FeedbackFooter
+        feedback="positive"
+        onFeedbackChange={onFeedbackChange}
+        onSubmit={onSubmit}
+        feedbackKey="bucket-1"
+        initialFeedback={fbUpdated}
+      />,
+    )
+
+    // The editor should still be open with the user's text - not the server update
+    const editInput = screen.getByPlaceholderText("Add optional detail…")
+    expect(editInput).toBeTruthy()
+    expect((editInput as HTMLInputElement).value).toBe("My new note")
+  })
+})
+
+// ─── Balance strip rendering ──────────────────────────────────────────────────
+
+describe("Balance context strip", () => {
+  it("renders for structured WHY rows with currentBalance", () => {
+    const signalWithBalance = makeSignal({
+      id: "sig-balance",
+      currentBalance: "$3.0M",
+      balanceContext: "down from $23M",
+    })
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({
+          explanationBuckets: [
+            makeBucket({ signals: [signalWithBalance], signalCount: 1 }),
+          ],
+        })}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Should render balance strip
+    const strip = screen.getByTestId("balance-context-strip")
+    expect(strip).toBeTruthy()
+    expect(strip.textContent).toContain("Current balance")
+    expect(strip.textContent).toContain("$3.0M")
+    expect(strip.textContent).toContain("down from $23M")
+  })
+
+  it("renders only balanceContext when currentBalance is absent", () => {
+    const signalWithContext = makeSignal({
+      id: "sig-ctx",
+      balanceContext: "significant velocity",
+    })
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({
+          explanationBuckets: [
+            makeBucket({ signals: [signalWithContext], signalCount: 1 }),
+          ],
+        })}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Should render balance strip with only context
+    const strip = screen.getByTestId("balance-context-strip")
+    expect(strip).toBeTruthy()
+    expect(strip.textContent).toContain("significant velocity")
+    expect(strip.textContent).not.toContain("Current balance")
+  })
+
+  it("does not render balance strip when neither currentBalance nor balanceContext is present", () => {
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData()}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Should NOT render balance strip
+    expect(screen.queryByTestId("balance-context-strip")).toBeNull()
+  })
+})