@handled-ai/design-system 0.17.0 → 0.17.2

package/src/components/__tests__/feedback-primitives.test.tsx

@@ -0,0 +1,509 @@
+/**
+ * Tests for feedback primitives.
+ *
+ * Covers:
+ *  - FeedbackFooter renders thumbs buttons
+ *  - Clicking "Not helpful" expands the negative feedback area
+ *  - Clicking "Helpful" expands the positive feedback area
+ *  - Chip selection toggles (tier-1)
+ *  - Tier-2 expansion when a tier-1 chip with sub-chips is selected
+ *  - Submit callback fires with correct structured FeedbackSubmitData shape
+ *  - Cancel resets state and calls onFeedbackChange(null)
+ *  - FeedbackChipGroup renders chips with correct colors per flavor
+ *  - FeedbackInput renders and accepts text
+ *  - FeedbackActions renders submit/cancel buttons
+ */
+
+import { describe, it, expect, vi } from "vitest"
+import React from "react"
+import { render, screen, fireEvent, act } from "@testing-library/react"
+import {
+  FeedbackFooter,
+  FeedbackChipGroup,
+  FeedbackInput,
+  FeedbackActions,
+} from "../feedback-primitives"
+import type {
+  FeedbackChipTree,
+  FeedbackSubmitData,
+} from "../feedback-primitives"
+
+// ─── Mock data ───────────────────────────────────────────────────────────────
+
+const mockNegativeChips: FeedbackChipTree[] = [
+  {
+    label: "Inaccurate data",
+    subPrompt: "Which field?",
+    subChips: ["Balance figures", "Counterparty", "Timestamp", "Other"],
+  },
+  { label: "Bad timing" },
+  { label: "Not relevant" },
+  { label: "Already handled" },
+]
+
+const mockPositiveChips = ["Right timing", "Accurate data", "Actionable"]
+
+// ─── FeedbackFooter ──────────────────────────────────────────────────────────
+
+describe("FeedbackFooter", () => {
+  it("renders Helpful and Not helpful buttons", () => {
+    render(
+      <FeedbackFooter
+        feedback={null}
+        onFeedbackChange={vi.fn()}
+        onSubmit={vi.fn()}
+      />,
+    )
+    expect(screen.getByText("Helpful")).toBeDefined()
+    expect(screen.getByText("Not helpful")).toBeDefined()
+  })
+
+  it("renders meta text when provided", () => {
+    render(
+      <FeedbackFooter
+        feedback={null}
+        onFeedbackChange={vi.fn()}
+        onSubmit={vi.fn()}
+        metaText="Updated 4m ago"
+      />,
+    )
+    expect(screen.getByText("Updated 4m ago")).toBeDefined()
+  })
+
+  it("expands negative feedback area when 'Not helpful' is clicked", async () => {
+    const onFeedbackChange = vi.fn()
+    render(
+      <FeedbackFooter
+        feedback={null}
+        onFeedbackChange={onFeedbackChange}
+        onSubmit={vi.fn()}
+        negativeChips={mockNegativeChips}
+        negativePrompt="What's the issue?"
+      />,
+    )
+
+    // Click "Not helpful"
+    await act(async () => {
+      fireEvent.click(screen.getByText("Not helpful"))
+    })
+
+    expect(onFeedbackChange).toHaveBeenCalledWith("negative")
+  })
+
+  it("shows negative prompt and chips when feedback is negative", () => {
+    render(
+      <FeedbackFooter
+        feedback="negative"
+        onFeedbackChange={vi.fn()}
+        onSubmit={vi.fn()}
+        negativeChips={mockNegativeChips}
+        negativePrompt="What's the issue?"
+      />,
+    )
+
+    // Click to expand
+    fireEvent.click(screen.getByText("Not helpful"))
+
+    expect(screen.getByText("What's the issue?")).toBeDefined()
+    expect(screen.getByText("Inaccurate data")).toBeDefined()
+    expect(screen.getByText("Bad timing")).toBeDefined()
+    expect(screen.getByText("Not relevant")).toBeDefined()
+    expect(screen.getByText("Already handled")).toBeDefined()
+  })
+
+  it("expands positive feedback area when 'Helpful' is clicked", () => {
+    const onFeedbackChange = vi.fn()
+    render(
+      <FeedbackFooter
+        feedback={null}
+        onFeedbackChange={onFeedbackChange}
+        onSubmit={vi.fn()}
+        positiveChips={mockPositiveChips}
+        positivePrompt="Thanks! What was good?"
+      />,
+    )
+
+    fireEvent.click(screen.getByText("Helpful"))
+
+    expect(onFeedbackChange).toHaveBeenCalledWith("positive")
+  })
+
+  it("shows positive prompt and chips when feedback is positive and expanded", () => {
+    render(
+      <FeedbackFooter
+        feedback="positive"
+        onFeedbackChange={vi.fn()}
+        onSubmit={vi.fn()}
+        positiveChips={mockPositiveChips}
+        positivePrompt="Thanks! What was good?"
+      />,
+    )
+
+    // Click Helpful to expand
+    fireEvent.click(screen.getByText("Helpful"))
+
+    expect(screen.getByText("Thanks! What was good?")).toBeDefined()
+    expect(screen.getByText("Right timing")).toBeDefined()
+    expect(screen.getByText("Accurate data")).toBeDefined()
+    expect(screen.getByText("Actionable")).toBeDefined()
+  })
+
+  it("tier-1 chip selection toggles and tier-2 expansion works", () => {
+    render(
+      <FeedbackFooter
+        feedback="negative"
+        onFeedbackChange={vi.fn()}
+        onSubmit={vi.fn()}
+        negativeChips={mockNegativeChips}
+        negativePrompt="What's the issue?"
+      />,
+    )
+
+    // Expand
+    fireEvent.click(screen.getByText("Not helpful"))
+
+    // Select "Inaccurate data" (has sub-chips)
+    fireEvent.click(screen.getByText("Inaccurate data"))
+
+    // Should show the sub-prompt and sub-chips
+    expect(screen.getByText("Which field?")).toBeDefined()
+    expect(screen.getByText("Balance figures")).toBeDefined()
+    expect(screen.getByText("Counterparty")).toBeDefined()
+    expect(screen.getByText("Timestamp")).toBeDefined()
+
+    // Select a tier-2 sub-chip
+    fireEvent.click(screen.getByText("Balance figures"))
+
+    // Now deselect the tier-1 chip to hide sub-chips
+    fireEvent.click(screen.getByText("Inaccurate data"))
+
+    // Sub-chips should be hidden
+    expect(screen.queryByText("Which field?")).toBeNull()
+    expect(screen.queryByText("Balance figures")).toBeNull()
+  })
+
+  it("submit callback fires with correct FeedbackSubmitData shape", () => {
+    const onSubmit = vi.fn()
+    render(
+      <FeedbackFooter
+        feedback="negative"
+        onFeedbackChange={vi.fn()}
+        onSubmit={onSubmit}
+        negativeChips={mockNegativeChips}
+        negativePrompt="What's the issue?"
+      />,
+    )
+
+    // Expand
+    fireEvent.click(screen.getByText("Not helpful"))
+
+    // Select tier-1
+    fireEvent.click(screen.getByText("Inaccurate data"))
+
+    // Select tier-2
+    fireEvent.click(screen.getByText("Counterparty"))
+
+    // Select an additional pill (second tier-1 chip)
+    fireEvent.click(screen.getByText("Bad timing"))
+
+    // Type detail text
+    const input = screen.getByPlaceholderText("Add optional detail…")
+    fireEvent.change(input, { target: { value: "Data was stale" } })
+
+    // Submit
+    fireEvent.click(screen.getByText("Submit"))
+
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+    const data: FeedbackSubmitData = onSubmit.mock.calls[0][0]
+    expect(data.sentiment).toBe("negative")
+    expect(data.reasonTop).toBe("Inaccurate data")
+    expect(data.reasonSub).toBe("Counterparty")
+    expect(data.pills).toEqual(["Bad timing"])
+    expect(data.detail).toBe("Data was stale")
+  })
+
+  it("submit with positive feedback sends correct shape", () => {
+    const onSubmit = vi.fn()
+    render(
+      <FeedbackFooter
+        feedback="positive"
+        onFeedbackChange={vi.fn()}
+        onSubmit={onSubmit}
+        positiveChips={mockPositiveChips}
+        positivePrompt="Thanks!"
+      />,
+    )
+
+    // Expand
+    fireEvent.click(screen.getByText("Helpful"))
+
+    // Select a chip
+    fireEvent.click(screen.getByText("Right timing"))
+
+    // Submit
+    fireEvent.click(screen.getByText("Submit"))
+
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+    const data: FeedbackSubmitData = onSubmit.mock.calls[0][0]
+    expect(data.sentiment).toBe("positive")
+    expect(data.reasonTop).toBe("Right timing")
+    expect(data.reasonSub).toBeUndefined()
+    expect(data.pills).toEqual([])
+    expect(data.detail).toBe("")
+  })
+
+  it("cancel resets state and calls onFeedbackChange(null)", () => {
+    const onFeedbackChange = vi.fn()
+    render(
+      <FeedbackFooter
+        feedback="negative"
+        onFeedbackChange={onFeedbackChange}
+        onSubmit={vi.fn()}
+        negativeChips={mockNegativeChips}
+        negativePrompt="What's the issue?"
+      />,
+    )
+
+    // Expand
+    fireEvent.click(screen.getByText("Not helpful"))
+
+    // Select a chip
+    fireEvent.click(screen.getByText("Inaccurate data"))
+
+    // Cancel
+    fireEvent.click(screen.getByText("Cancel"))
+
+    // Should call onFeedbackChange(null)
+    expect(onFeedbackChange).toHaveBeenCalledWith(null)
+
+    // After cancel, the expanded area should be gone
+    expect(screen.queryByText("What's the issue?")).toBeNull()
+  })
+
+  it("submit with no chips selected still sends correct shape with no reasonTop", () => {
+    const onSubmit = vi.fn()
+    render(
+      <FeedbackFooter
+        feedback="negative"
+        onFeedbackChange={vi.fn()}
+        onSubmit={onSubmit}
+        negativeChips={mockNegativeChips}
+      />,
+    )
+
+    // Expand
+    fireEvent.click(screen.getByText("Not helpful"))
+
+    // Submit without selecting any chips
+    fireEvent.click(screen.getByText("Submit"))
+
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+    const data: FeedbackSubmitData = onSubmit.mock.calls[0][0]
+    expect(data.sentiment).toBe("negative")
+    expect(data.reasonTop).toBeUndefined()
+    expect(data.reasonSub).toBeUndefined()
+    expect(data.pills).toEqual([])
+    expect(data.detail).toBe("")
+  })
+
+  it("enter key in detail input triggers submit", () => {
+    const onSubmit = vi.fn()
+    render(
+      <FeedbackFooter
+        feedback="negative"
+        onFeedbackChange={vi.fn()}
+        onSubmit={onSubmit}
+        negativeChips={mockNegativeChips}
+      />,
+    )
+
+    // Expand
+    fireEvent.click(screen.getByText("Not helpful"))
+
+    // Type and press enter
+    const input = screen.getByPlaceholderText("Add optional detail…")
+    fireEvent.change(input, { target: { value: "test" } })
+    fireEvent.keyDown(input, { key: "Enter" })
+
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+  })
+})
+
+// ─── FeedbackChipGroup ──────────────────────────────────────────────────────
+
+describe("FeedbackChipGroup", () => {
+  it("renders all chips", () => {
+    render(
+      <FeedbackChipGroup
+        chips={["Alpha", "Beta", "Gamma"]}
+        selected={[]}
+        onToggle={vi.fn()}
+        flavor="negative"
+      />,
+    )
+    expect(screen.getByText("Alpha")).toBeDefined()
+    expect(screen.getByText("Beta")).toBeDefined()
+    expect(screen.getByText("Gamma")).toBeDefined()
+  })
+
+  it("applies negative selected classes to selected chips", () => {
+    render(
+      <FeedbackChipGroup
+        chips={["Alpha", "Beta"]}
+        selected={["Alpha"]}
+        onToggle={vi.fn()}
+        flavor="negative"
+      />,
+    )
+    const alphaButton = screen.getByText("Alpha")
+    // Selected negative chip should have red styling
+    expect(alphaButton.className).toContain("bg-red-50")
+    expect(alphaButton.className).toContain("text-red-700")
+    expect(alphaButton.className).toContain("border-red-200")
+
+    // Unselected chip should have idle styling
+    const betaButton = screen.getByText("Beta")
+    expect(betaButton.className).toContain("bg-background")
+    expect(betaButton.className).toContain("text-muted-foreground")
+  })
+
+  it("applies positive selected classes to selected chips", () => {
+    render(
+      <FeedbackChipGroup
+        chips={["Alpha", "Beta"]}
+        selected={["Alpha"]}
+        onToggle={vi.fn()}
+        flavor="positive"
+      />,
+    )
+    const alphaButton = screen.getByText("Alpha")
+    // Selected positive chip should have muted styling
+    expect(alphaButton.className).toContain("bg-muted")
+    expect(alphaButton.className).toContain("text-foreground")
+    expect(alphaButton.className).toContain("border-border")
+  })
+
+  it("calls onToggle when a chip is clicked", () => {
+    const onToggle = vi.fn()
+    render(
+      <FeedbackChipGroup
+        chips={["Alpha", "Beta"]}
+        selected={[]}
+        onToggle={onToggle}
+        flavor="negative"
+      />,
+    )
+    fireEvent.click(screen.getByText("Alpha"))
+    expect(onToggle).toHaveBeenCalledWith("Alpha")
+  })
+})
+
+// ─── FeedbackInput ──────────────────────────────────────────────────────────
+
+describe("FeedbackInput", () => {
+  it("renders with placeholder text", () => {
+    render(
+      <FeedbackInput
+        placeholder="Type here…"
+        value=""
+        onChange={vi.fn()}
+      />,
+    )
+    expect(screen.getByPlaceholderText("Type here…")).toBeDefined()
+  })
+
+  it("calls onChange when text is entered", () => {
+    const onChange = vi.fn()
+    render(
+      <FeedbackInput
+        placeholder="Type here…"
+        value=""
+        onChange={onChange}
+      />,
+    )
+    const input = screen.getByPlaceholderText("Type here…")
+    fireEvent.change(input, { target: { value: "hello" } })
+    expect(onChange).toHaveBeenCalledWith("hello")
+  })
+
+  it("calls onSubmit when Enter is pressed", () => {
+    const onSubmit = vi.fn()
+    render(
+      <FeedbackInput
+        placeholder="Type here…"
+        value="test"
+        onChange={vi.fn()}
+        onSubmit={onSubmit}
+      />,
+    )
+    const input = screen.getByPlaceholderText("Type here…")
+    fireEvent.keyDown(input, { key: "Enter" })
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+  })
+})
+
+// ─── FeedbackActions ─────────────────────────────────────────────────────────
+
+describe("FeedbackActions", () => {
+  it("renders submit and cancel buttons with default labels", () => {
+    render(
+      <FeedbackActions onSubmit={vi.fn()} onCancel={vi.fn()} />,
+    )
+    expect(screen.getByText("Submit")).toBeDefined()
+    expect(screen.getByText("Cancel")).toBeDefined()
+  })
+
+  it("renders custom labels", () => {
+    render(
+      <FeedbackActions
+        onSubmit={vi.fn()}
+        onCancel={vi.fn()}
+        submitLabel="Send"
+        cancelLabel="Discard"
+      />,
+    )
+    expect(screen.getByText("Send")).toBeDefined()
+    expect(screen.getByText("Discard")).toBeDefined()
+  })
+
+  it("renders hint text", () => {
+    render(
+      <FeedbackActions
+        onSubmit={vi.fn()}
+        onCancel={vi.fn()}
+        hint="Routes to model training queue"
+      />,
+    )
+    expect(screen.getByText("Routes to model training queue")).toBeDefined()
+  })
+
+  it("calls onSubmit when submit button is clicked", () => {
+    const onSubmit = vi.fn()
+    render(
+      <FeedbackActions onSubmit={onSubmit} onCancel={vi.fn()} />,
+    )
+    fireEvent.click(screen.getByText("Submit"))
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+  })
+
+  it("calls onCancel when cancel button is clicked", () => {
+    const onCancel = vi.fn()
+    render(
+      <FeedbackActions onSubmit={vi.fn()} onCancel={onCancel} />,
+    )
+    fireEvent.click(screen.getByText("Cancel"))
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it("disables submit button when submitDisabled is true", () => {
+    render(
+      <FeedbackActions
+        onSubmit={vi.fn()}
+        onCancel={vi.fn()}
+        submitDisabled={true}
+      />,
+    )
+    const submitButton = screen.getByText("Submit")
+    expect(submitButton.hasAttribute("disabled")).toBe(true)
+  })
+})