@handled-ai/design-system 0.17.1 → 0.17.2

package/src/components/__tests__/signal-priority-popover.test.tsx

@@ -0,0 +1,312 @@
+/**
+ * Tests for SignalPriorityPopover.
+ *
+ * Covers:
+ *  - Renders trigger chip with correct urgency label
+ *  - Popover opens on trigger click and shows content
+ *  - Factor rows render with correct direction labels
+ *  - Urgency class maps applied based on data-state
+ *  - Popover closes on second click (toggle)
+ *  - Feedback footer expands on "Not helpful" click
+ *  - onFeedbackSubmit callback fires
+ *  - Default feedback chips used when feedbackChips prop is omitted
+ *  - Falls back to Activity icon for unknown icon names
+ *  - No feedback footer when onFeedbackSubmit is not provided
+ */
+
+import { describe, it, expect, vi } from "vitest"
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { SignalPriorityPopover } from "../signal-priority-popover"
+import type { PriorityFactor, SignalPriorityPopoverProps } from "../signal-priority-popover"
+import type { FeedbackChipTree } from "../feedback-primitives"
+
+// ─── Mock data ───────────────────────────────────────────────────────────────
+
+const mockFactors: PriorityFactor[] = [
+  {
+    key: "test_severity",
+    label: "Test Transaction Severity",
+    icon: "radar",
+    tone: "alert",
+    direction: "raises",
+    score: 85,
+    rationale: "Multiple test transactions detected in the last 24 hours.",
+  },
+  {
+    key: "account_depth",
+    label: "Account Relationship Depth",
+    icon: "link-2",
+    tone: "info",
+    direction: "lowers",
+    score: 30,
+    rationale: "Long-standing account with deep relationship history.",
+  },
+  {
+    key: "outflow_severity",
+    label: "Cumulative Outflow Severity",
+    icon: "arrow-up-right",
+    tone: "warn",
+    direction: "neutral",
+    score: 50,
+    rationale: "Moderate outflow levels observed.",
+  },
+]
+
+const mockFeedbackChips: FeedbackChipTree[] = [
+  { label: "Wrong factor weighting" },
+  { label: "Missing context" },
+  {
+    label: "Inaccurate data",
+    subPrompt: "Which field?",
+    subChips: ["Balance figures", "Counterparty", "Timestamp"],
+  },
+]
+
+const defaultProps: SignalPriorityPopoverProps = {
+  score: 79,
+  urgencyLabel: "High",
+  urgencyExplanation: "Multiple risk signals detected across treasury accounts.",
+  factors: mockFactors,
+  metaText: "Updated 4m ago - model v3.2",
+  feedbackChips: mockFeedbackChips,
+  onFeedbackSubmit: vi.fn(),
+}
+
+// ─── Tests ───────────────────────────────────────────────────────────────────
+
+describe("SignalPriorityPopover", () => {
+  it("renders the trigger chip with urgency label", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    const trigger = screen.getByTestId("priority-popover-trigger")
+    expect(trigger).toBeTruthy()
+    expect(trigger.textContent).toContain("High Priority")
+  })
+
+  it("derives urgency label from score when not provided", () => {
+    render(<SignalPriorityPopover {...defaultProps} urgencyLabel={undefined} score={90} />)
+    const trigger = screen.getByTestId("priority-popover-trigger")
+    expect(trigger.textContent).toContain("Urgent Priority")
+  })
+
+  it("applies urgency-specific default classes to the trigger", () => {
+    render(<SignalPriorityPopover {...defaultProps} urgencyLabel="Urgent" />)
+    const trigger = screen.getByTestId("priority-popover-trigger")
+    expect(trigger.className).toContain("border-red-200")
+    expect(trigger.className).toContain("bg-red-50")
+    expect(trigger.className).toContain("text-red-700")
+  })
+
+  it("applies Low urgency classes", () => {
+    render(<SignalPriorityPopover {...defaultProps} urgencyLabel="Low" score={20} />)
+    const trigger = screen.getByTestId("priority-popover-trigger")
+    expect(trigger.className).toContain("border-blue-200")
+    expect(trigger.className).toContain("bg-blue-50")
+  })
+
+  it("opens the popover on trigger click and shows content", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+
+    // Content should not be visible initially
+    expect(screen.queryByTestId("priority-popover-content")).toBeNull()
+
+    // Click to open
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    expect(content).toBeTruthy()
+
+    // Check head section
+    expect(content.textContent).toContain("Why this is high priority")
+    expect(content.textContent).toContain("79")
+    expect(content.textContent).toContain("/100")
+    expect(content.textContent).toContain("High range")
+    expect(content.textContent).toContain("60-79")
+  })
+
+  it("renders the urgency explanation synthesis sentence", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    expect(content.textContent).toContain(
+      "Multiple risk signals detected across treasury accounts.",
+    )
+  })
+
+  it("renders factor rows with correct direction labels", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // "raises" factor
+    const raisesRow = screen.getByTestId("factor-row-test_severity")
+    expect(raisesRow.textContent).toContain("Test Transaction Severity")
+    expect(raisesRow.textContent).toContain("Raises")
+    expect(raisesRow.textContent).toContain("85")
+
+    // "lowers" factor
+    const lowersRow = screen.getByTestId("factor-row-account_depth")
+    expect(lowersRow.textContent).toContain("Account Relationship Depth")
+    expect(lowersRow.textContent).toContain("Lowers")
+    expect(lowersRow.textContent).toContain("30")
+
+    // "neutral" factor
+    const neutralRow = screen.getByTestId("factor-row-outflow_severity")
+    expect(neutralRow.textContent).toContain("Cumulative Outflow Severity")
+    expect(neutralRow.textContent).toContain("Neutral")
+    expect(neutralRow.textContent).toContain("50")
+  })
+
+  it("renders Contributing factors section label", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    expect(content.textContent).toContain("Contributing factors")
+    expect(content.textContent).toContain("Score = weighted sum")
+  })
+
+  it("renders score track bars with correct width percentage", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const raisesRow = screen.getByTestId("factor-row-test_severity")
+    const trackFill = raisesRow.querySelector(".bg-foreground\\/20") as HTMLElement
+    expect(trackFill).toBeTruthy()
+    expect(trackFill.style.width).toBe("85%")
+  })
+
+  it("renders factor rationale text", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    expect(content.textContent).toContain(
+      "Multiple test transactions detected in the last 24 hours.",
+    )
+    expect(content.textContent).toContain(
+      "Long-standing account with deep relationship history.",
+    )
+  })
+
+  it("renders feedback footer with 'Not helpful' button when onFeedbackSubmit is provided", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    expect(content.textContent).toContain("Not helpful")
+    expect(content.textContent).toContain("Helpful")
+  })
+
+  it("does not render feedback footer when onFeedbackSubmit is not provided", () => {
+    render(
+      <SignalPriorityPopover {...defaultProps} onFeedbackSubmit={undefined} />,
+    )
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    expect(content.textContent).not.toContain("Not helpful")
+  })
+
+  it("expands negative feedback chips on 'Not helpful' click", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // Click "Not helpful" button
+    const notHelpfulBtn = screen.getByRole("button", { name: /not helpful/i })
+    fireEvent.click(notHelpfulBtn)
+
+    const content = screen.getByTestId("priority-popover-content")
+    // The negative chips should now be visible
+    expect(content.textContent).toContain("Wrong factor weighting")
+    expect(content.textContent).toContain("Missing context")
+    expect(content.textContent).toContain("Inaccurate data")
+  })
+
+  it("does not render Contributing factors section when factors array is empty", () => {
+    render(<SignalPriorityPopover {...defaultProps} factors={[]} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    expect(content.textContent).not.toContain("Contributing factors")
+  })
+
+  it("does not render urgency explanation when not provided", () => {
+    render(
+      <SignalPriorityPopover
+        {...defaultProps}
+        urgencyExplanation={undefined}
+      />,
+    )
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    // Should still show the title
+    expect(content.textContent).toContain("Why this is high priority")
+    // But not the explanation
+    expect(content.textContent).not.toContain(
+      "Multiple risk signals detected across treasury accounts.",
+    )
+  })
+
+  it("clamps score track width between 0% and 100%", () => {
+    const edgeFactors: PriorityFactor[] = [
+      {
+        key: "over",
+        label: "Over 100",
+        icon: "activity",
+        tone: "alert",
+        direction: "raises",
+        score: 150,
+        rationale: "Exceeds max",
+      },
+      {
+        key: "under",
+        label: "Under 0",
+        icon: "activity",
+        tone: "info",
+        direction: "lowers",
+        score: -10,
+        rationale: "Below min",
+      },
+    ]
+    render(<SignalPriorityPopover {...defaultProps} factors={edgeFactors} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const overRow = screen.getByTestId("factor-row-over")
+    const overFill = overRow.querySelector(".bg-foreground\\/20") as HTMLElement
+    expect(overFill.style.width).toBe("100%")
+
+    const underRow = screen.getByTestId("factor-row-under")
+    const underFill = underRow.querySelector(".bg-foreground\\/20") as HTMLElement
+    expect(underFill.style.width).toBe("0%")
+  })
+
+  it("renders tone-specific icon background classes", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // Alert tone should have bg-red-50 text-red-600
+    const alertRow = screen.getByTestId("factor-row-test_severity")
+    const alertIcon = alertRow.querySelector(".bg-red-50")
+    expect(alertIcon).toBeTruthy()
+
+    // Info tone should have bg-blue-50 text-blue-600
+    const infoRow = screen.getByTestId("factor-row-account_depth")
+    const infoIcon = infoRow.querySelector(".bg-blue-50")
+    expect(infoIcon).toBeTruthy()
+
+    // Warn tone should have bg-amber-50 text-amber-600
+    const warnRow = screen.getByTestId("factor-row-outflow_severity")
+    const warnIcon = warnRow.querySelector(".bg-amber-50")
+    expect(warnIcon).toBeTruthy()
+  })
+
+  it("applies Medium urgency classes correctly", () => {
+    render(<SignalPriorityPopover {...defaultProps} urgencyLabel="Medium" score={45} />)
+    const trigger = screen.getByTestId("priority-popover-trigger")
+    expect(trigger.className).toContain("border-amber-200")
+    expect(trigger.className).toContain("bg-amber-50")
+    expect(trigger.textContent).toContain("Medium Priority")
+  })
+})