@handled-ai/design-system 0.9.23 → 0.9.25

package/src/__test-helpers__/fixtures.ts

@@ -0,0 +1,152 @@
+/**
+ * Shared test fixture factories for Design System component tests.
+ *
+ * Covers:
+ *  - ScoreFactor (used by ScoreBreakdown)
+ *  - initialFeedback shapes for ScoreFeedback.Root
+ *  - initialFeedback shapes for ScoreBreakdown
+ *
+ * These are plain data factories — no React, no vitest imports.
+ */
+
+import type { ScoreFactor } from "../components/score-breakdown";
+
+// ---------------------------------------------------------------------------
+// ScoreFactor factory
+// ---------------------------------------------------------------------------
+
+/**
+ * Build a ScoreFactor with sane defaults.
+ * Override individual fields to test specific rendering paths.
+ */
+export function makeScoreFactor(
+  overrides: Partial<ScoreFactor> = {},
+): ScoreFactor {
+  return {
+    key: "revenue_change",
+    label: "Revenue Change",
+    score: 72,
+    risk: "Low",
+    why: "Revenue has grown 12% YoY, above the 8% industry benchmark.",
+    ...overrides,
+  };
+}
+
+/** A high-risk (red bar) factor. */
+export function makeHighRiskFactor(
+  overrides: Partial<ScoreFactor> = {},
+): ScoreFactor {
+  return makeScoreFactor({
+    key: "cash_runway",
+    label: "Cash Runway",
+    score: 28,
+    risk: "High",
+    why: "Cash runway is less than 6 months at current burn rate.",
+    ...overrides,
+  });
+}
+
+/** A medium-risk (amber bar) factor. */
+export function makeMediumRiskFactor(
+  overrides: Partial<ScoreFactor> = {},
+): ScoreFactor {
+  return makeScoreFactor({
+    key: "customer_churn",
+    label: "Customer Churn",
+    score: 55,
+    risk: "Medium",
+    why: "Churn rate is elevated but within recoverable range.",
+    ...overrides,
+  });
+}
+
+/** A factor with null score (no score bar rendered). */
+export function makeNullScoreFactor(
+  overrides: Partial<ScoreFactor> = {},
+): ScoreFactor {
+  return makeScoreFactor({
+    key: "pending_factor",
+    label: "Pending Analysis",
+    score: null,
+    risk: undefined,
+    why: "Analysis not yet available.",
+    ...overrides,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// initialFeedback shapes for ScoreFeedback.Root
+// ---------------------------------------------------------------------------
+
+/**
+ * Build an `initialFeedback` object for `ScoreFeedback.Root`.
+ * Matches the `{ type, pills, detail }` shape accepted by the `initialFeedback` prop.
+ */
+export function makeInitialScoreFeedback(
+  overrides: Partial<{ type: "up" | "down"; pills: string[]; detail: string }> = {},
+): { type: "up" | "down"; pills: string[]; detail: string } {
+  return {
+    type: "up",
+    pills: ["Right timing", "Accurate data"],
+    detail: "Score looks correct.",
+    ...overrides,
+  };
+}
+
+/** Pre-populated negative (thumbs-down) score feedback. */
+export function makeNegativeInitialScoreFeedback(
+  overrides: Partial<{ type: "up" | "down"; pills: string[]; detail: string }> = {},
+): { type: "up" | "down"; pills: string[]; detail: string } {
+  return makeInitialScoreFeedback({
+    type: "down",
+    pills: ["Bad timing", "Inaccurate data"],
+    detail: "Data sources seem stale.",
+    ...overrides,
+  });
+}
+
+/**
+ * Score feedback with empty pills and no detail text.
+ * Represents the minimal possible submission (just a thumb direction).
+ */
+export function makeMinimalInitialScoreFeedback(
+  type: "up" | "down" = "up",
+): { type: "up" | "down"; pills: string[]; detail: string } {
+  return { type, pills: [], detail: "" };
+}
+
+// ---------------------------------------------------------------------------
+// initialFeedback shapes for ScoreBreakdown
+// ---------------------------------------------------------------------------
+
+/**
+ * Build an `initialFeedback` map for `ScoreBreakdown`.
+ * Keys are factor keys; values are `{ type, detail }`.
+ */
+export function makeInitialFactorFeedback(
+  overrides: Record<string, { type: "up" | "down"; detail: string }> = {},
+): Record<string, { type: "up" | "down"; detail: string }> {
+  return {
+    revenue_change: { type: "up", detail: "Revenue data looks accurate." },
+    cash_runway: { type: "down", detail: "Cash figures seem too optimistic." },
+    ...overrides,
+  };
+}
+
+/**
+ * Single-factor initialFeedback.
+ * Common in tests that focus on one particular factor's pre-population.
+ */
+export function makeSingleFactorFeedback(
+  key: string,
+  type: "up" | "down",
+  detail = "",
+): Record<string, { type: "up" | "down"; detail: string }> {
+  return { [key]: { type, detail } };
+}
+
+/** Empty factor feedback map — no prior feedback for any factor. */
+export const EMPTY_FACTOR_FEEDBACK: Record<
+  string,
+  { type: "up" | "down"; detail: string }
+> = {};

package/src/components/__tests__/score-breakdown-initial.test.tsx

@@ -0,0 +1,310 @@
+/**
+ * Tests for ScoreBreakdown's `initialFeedback` prop and related behaviors.
+ *
+ * Covers:
+ *  - deriveInitialState helper (via observable rendered state)
+ *  - Pre-populated feedback state (thumb shown as active)
+ *  - Pre-populated feedbackText / savedText
+ *  - useEffect sync on prop change (with editingKey guard)
+ *  - submitFeedbackText calls onFactorFeedback with text ?? "" (not undefined)
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { ScoreBreakdown } from "../score-breakdown";
+import {
+  makeScoreFactor,
+  makeHighRiskFactor,
+  makeInitialFactorFeedback,
+  makeSingleFactorFeedback,
+  EMPTY_FACTOR_FEEDBACK,
+} from "../../__test-helpers__/fixtures";
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function makeFactors() {
+  return [
+    makeScoreFactor({ key: "revenue_change", label: "Revenue Change" }),
+    makeHighRiskFactor({ key: "cash_runway", label: "Cash Runway" }),
+  ];
+}
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("ScoreBreakdown — initialFeedback prop (deriveInitialState)", () => {
+  it("renders factors without initialFeedback (no pre-populated state)", () => {
+    render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={undefined}
+      />,
+    );
+    expect(screen.getByText("Revenue Change")).toBeDefined();
+    expect(screen.getByText("Cash Runway")).toBeDefined();
+  });
+
+  it("with EMPTY_FACTOR_FEEDBACK, renders like undefined (no active thumbs)", () => {
+    // Neither factor should show a saved text or different thumb style
+    const { container } = render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={EMPTY_FACTOR_FEEDBACK}
+      />,
+    );
+    // No saved text paragraphs — just label and score bar
+    expect(screen.queryByText("Revenue data looks accurate.")).toBeNull();
+    expect(container).toBeDefined();
+  });
+
+  it("pre-populates thumb state for revenue_change as 'up'", () => {
+    // When feedback[key] = 'up', the thumb-up button gets emerald styling
+    // We can observe this by checking that the saved text from detail is rendered
+    render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={makeSingleFactorFeedback("revenue_change", "up", "Revenue data looks accurate.")}
+      />,
+    );
+    // savedText["revenue_change"] = "Revenue data looks accurate." is rendered as an edit button
+    expect(screen.getByText("Revenue data looks accurate.")).toBeDefined();
+  });
+
+  it("pre-populates thumb state for cash_runway as 'down' with detail", () => {
+    render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={makeSingleFactorFeedback("cash_runway", "down", "Cash figures seem too optimistic.")}
+      />,
+    );
+    expect(screen.getByText("Cash figures seem too optimistic.")).toBeDefined();
+  });
+
+  it("pre-populates multiple factors from initialFeedback", () => {
+    render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={makeInitialFactorFeedback()}
+      />,
+    );
+    expect(screen.getByText("Revenue data looks accurate.")).toBeDefined();
+    expect(screen.getByText("Cash figures seem too optimistic.")).toBeDefined();
+  });
+
+  it("factors with no matching key in initialFeedback are unaffected", () => {
+    // Only revenue_change is in the initial feedback; cash_runway should have no saved text
+    render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={makeSingleFactorFeedback("revenue_change", "up", "Revenue data looks accurate.")}
+      />,
+    );
+    expect(screen.getByText("Revenue data looks accurate.")).toBeDefined();
+    expect(screen.queryByText("Cash figures seem too optimistic.")).toBeNull();
+  });
+
+  it("detail = '' does not produce a savedText entry (filterFn filters it)", () => {
+    // makeMinimalInitialScoreFeedback analogue for factor: detail = ""
+    render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={makeSingleFactorFeedback("revenue_change", "up", "")}
+      />,
+    );
+    // No saved text button rendered (detail is empty, filterFn(v => !!v.detail) excludes it)
+    // But the thumb IS pre-populated — factor shows "up" state
+    // We can't easily assert CSS classes, but we can assert no saved text renders
+    // (the "revenue data looks accurate" text should NOT be here since detail = "")
+    expect(screen.queryByText("Revenue data looks accurate.")).toBeNull();
+  });
+});
+
+describe("ScoreBreakdown — useEffect sync on prop change", () => {
+  it("syncs state when initialFeedback changes from undefined to a value", async () => {
+    const { rerender } = render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={undefined}
+      />,
+    );
+
+    // No saved text initially
+    expect(screen.queryByText("Revenue data looks accurate.")).toBeNull();
+
+    // Now provide initialFeedback
+    await act(async () => {
+      rerender(
+        <ScoreBreakdown
+          factors={makeFactors()}
+          initialFeedback={makeSingleFactorFeedback(
+            "revenue_change",
+            "up",
+            "Revenue data looks accurate.",
+          )}
+        />,
+      );
+    });
+
+    expect(screen.getByText("Revenue data looks accurate.")).toBeDefined();
+  });
+
+  it("syncs state when initialFeedback changes from one value to another", async () => {
+    const { rerender } = render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={makeSingleFactorFeedback("revenue_change", "up", "Old detail.")}
+      />,
+    );
+
+    expect(screen.getByText("Old detail.")).toBeDefined();
+
+    await act(async () => {
+      rerender(
+        <ScoreBreakdown
+          factors={makeFactors()}
+          initialFeedback={makeSingleFactorFeedback("revenue_change", "up", "New detail.")}
+        />,
+      );
+    });
+
+    expect(screen.queryByText("Old detail.")).toBeNull();
+    expect(screen.getByText("New detail.")).toBeDefined();
+  });
+
+  it("guard: preserves actively-edited key when initialFeedback changes", async () => {
+    // Start with one value
+    const { rerender, container } = render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={makeSingleFactorFeedback("revenue_change", "up", "Old detail.")}
+      />,
+    );
+
+    // Click the saved text to enter edit mode (sets editingKey = "revenue_change")
+    const savedTextButton = screen.getByText("Old detail.");
+    await act(async () => {
+      fireEvent.click(savedTextButton);
+    });
+
+    // Now an input should be visible
+    const input = container.querySelector("input");
+    expect(input).not.toBeNull();
+
+    // Change the input text to something different
+    await act(async () => {
+      fireEvent.change(input!, { target: { value: "My in-progress edit" } });
+    });
+
+    // Now the prop changes — sync should skip the editing key
+    await act(async () => {
+      rerender(
+        <ScoreBreakdown
+          factors={makeFactors()}
+          initialFeedback={makeSingleFactorFeedback("revenue_change", "up", "Async update.")}
+        />,
+      );
+    });
+
+    // The input should still have the user's in-progress value
+    const inputAfter = container.querySelector("input") as HTMLInputElement;
+    expect(inputAfter?.value).toBe("My in-progress edit");
+  });
+});
+
+describe("ScoreBreakdown — submitFeedbackText: text ?? '' fix", () => {
+  it("calls onFactorFeedback with empty string when no text entered (not undefined)", async () => {
+    const onFactorFeedback = vi.fn();
+    const { container } = render(
+      <ScoreBreakdown
+        factors={[makeScoreFactor({ key: "revenue_change", label: "Revenue Change" })]}
+        onFactorFeedback={onFactorFeedback}
+        initialFeedback={undefined}
+      />,
+    );
+
+    // Click thumbs-up to set feedback[revenue_change] = "up" and enter edit mode
+    const thumbUpButton = container.querySelectorAll("button")[0];
+    await act(async () => {
+      fireEvent.click(thumbUpButton);
+    });
+
+    // An input should appear (editingKey = "revenue_change")
+    const input = container.querySelector("input");
+    expect(input).not.toBeNull();
+
+    // Blur the input without typing (feedbackText["revenue_change"] = "")
+    await act(async () => {
+      fireEvent.blur(input!);
+    });
+
+    // onFactorFeedback should have been called twice:
+    // 1. from handleFeedback when thumbs clicked: (key, "up")
+    // 2. from submitFeedbackText on blur: (key, "up", "" ) ← the fix
+    const calls = onFactorFeedback.mock.calls;
+    const submitCall = calls.find(
+      (c: unknown[]) => c.length === 3,
+    );
+    expect(submitCall).toBeDefined();
+    expect(submitCall![2]).toBe(""); // "" not undefined
+  });
+
+  it("calls onFactorFeedback with trimmed text when text is entered", async () => {
+    const onFactorFeedback = vi.fn();
+    const { container } = render(
+      <ScoreBreakdown
+        factors={[makeScoreFactor({ key: "revenue_change", label: "Revenue Change" })]}
+        onFactorFeedback={onFactorFeedback}
+        initialFeedback={undefined}
+      />,
+    );
+
+    const thumbUpButton = container.querySelectorAll("button")[0];
+    await act(async () => {
+      fireEvent.click(thumbUpButton);
+    });
+
+    const input = container.querySelector("input");
+    await act(async () => {
+      fireEvent.change(input!, { target: { value: "  Revenue is accurate  " } });
+    });
+
+    await act(async () => {
+      fireEvent.blur(input!);
+    });
+
+    const calls = onFactorFeedback.mock.calls;
+    const submitCall = calls.find(
+      (c: unknown[]) => c.length === 3,
+    );
+    expect(submitCall).toBeDefined();
+    expect(submitCall![2]).toBe("Revenue is accurate"); // trimmed
+  });
+
+  it("pressing Enter submits with text ?? '' (empty string for blank input)", async () => {
+    const onFactorFeedback = vi.fn();
+    const { container } = render(
+      <ScoreBreakdown
+        factors={[makeScoreFactor({ key: "revenue_change", label: "Revenue Change" })]}
+        onFactorFeedback={onFactorFeedback}
+        initialFeedback={undefined}
+      />,
+    );
+
+    const thumbUpButton = container.querySelectorAll("button")[0];
+    await act(async () => {
+      fireEvent.click(thumbUpButton);
+    });
+
+    const input = container.querySelector("input");
+    await act(async () => {
+      fireEvent.keyDown(input!, { key: "Enter" });
+    });
+
+    const calls = onFactorFeedback.mock.calls;
+    const submitCall = calls.find(
+      (c: unknown[]) => c.length === 3,
+    );
+    expect(submitCall).toBeDefined();
+    expect(submitCall![2]).toBe(""); // empty string, not undefined
+  });
+});