@handled-ai/design-system 0.18.2 → 0.18.3

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

@@ -1,546 +0,0 @@
-/**
- * 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, act } from "@testing-library/react"
-import { FeedbackFooter } from "../feedback-primitives"
-import type { PersistedFeedbackData, FeedbackSubmitData } 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()
-  })
-})