@handled-ai/design-system 0.18.3 → 0.18.4

package/src/prototype/__tests__/detail-view-timeline-system-events.test.tsx

@@ -1,322 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from "vitest"
-import React from "react"
-import { render, fireEvent } from "@testing-library/react"
-import { DetailView, type DetailViewProps } from "../prototype-inbox-view"
-import type { QueueItem, SignalScoreData } from "../prototype-config"
-import type { TimelineEvent } from "../../components/timeline-activity"
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-const baseItem: QueueItem = {
-  id: "1",
-  title: "Test Signal",
-  details: "Some details",
-  statusColor: "green",
-  time: "2h ago",
-  company: "Acme Inc",
-  tag1: "renewal",
-}
-
-function makeSignalScore(): SignalScoreData {
-  return {
-    score: 75,
-    factors: [
-      { key: "trigger", label: "Trigger strength", score: 70, why: "Strong signal" },
-    ],
-    whyNow: "Strong signals detected.",
-    evidence: ["Evidence line 1"],
-    confidence: 80,
-  }
-}
-
-const normalEvents: TimelineEvent[] = [
-  {
-    id: "t1",
-    icon: React.createElement("span", null, "📧"),
-    title: "Email sent",
-    time: "1h ago",
-  },
-  {
-    id: "t2",
-    icon: React.createElement("span", null, "📞"),
-    title: "Call logged",
-    time: "3h ago",
-  },
-]
-
-const noiseEvents: TimelineEvent[] = [
-  {
-    id: "t3",
-    icon: React.createElement("span", null, "📊"),
-    title: "Score updated +3",
-    time: "2h ago",
-    isSystemNoise: true,
-  },
-  {
-    id: "t4",
-    icon: React.createElement("span", null, "📊"),
-    title: "Score updated -1",
-    time: "4h ago",
-    isSystemNoise: true,
-  },
-]
-
-const mixedEvents: TimelineEvent[] = [...normalEvents, ...noiseEvents]
-
-function baseProps(overrides: Partial<DetailViewProps> = {}): DetailViewProps {
-  return {
-    item: baseItem,
-    sections: { signalBrief: true, suggestedActions: false, timeline: true },
-    getSignalScore: () => makeSignalScore(),
-    buildSuggestedActions: () => [],
-    buildSourceItems: () => [],
-    getTimelineEvents: () => mixedEvents,
-    accountContacts: [],
-    emailSignature: "",
-    iconMap: {},
-    timelineSystemEventsToggleLabel: "Score changes",
-    timelineSystemEventsStorageKey: "test-show-score-changes",
-    timelineSystemEventsHiddenHint: "Score changes are hidden.",
-    timelineSystemEventsVisibleHint: "Showing {count} score changes.",
-    ...overrides,
-  }
-}
-
-// Mock localStorage
-let store: Record<string, string> = {}
-
-const localStorageMock = {
-  getItem: vi.fn((key: string) => store[key] ?? null),
-  setItem: vi.fn((key: string, value: string) => {
-    store[key] = value
-  }),
-  removeItem: vi.fn((key: string) => {
-    delete store[key]
-  }),
-  clear: vi.fn(() => {
-    store = {}
-  }),
-}
-
-beforeEach(() => {
-  store = {}
-  localStorageMock.getItem.mockClear()
-  localStorageMock.setItem.mockClear()
-  localStorageMock.removeItem.mockClear()
-  localStorageMock.clear.mockClear()
-  // Reset getItem to default implementation
-  localStorageMock.getItem.mockImplementation((key: string) => store[key] ?? null)
-  Object.defineProperty(window, "localStorage", { value: localStorageMock, writable: true })
-})
-
-// ---------------------------------------------------------------------------
-// Helper to expand the timeline
-// ---------------------------------------------------------------------------
-
-function expandTimeline(container: HTMLElement) {
-  const collapseBtn = container.querySelector(
-    '[data-testid="timeline-collapse-btn"]',
-  ) as HTMLElement
-  if (collapseBtn) fireEvent.click(collapseBtn)
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe("DetailView timeline system-events toggle", () => {
-  it("hides events with isSystemNoise: true by default", () => {
-    const { container } = render(<DetailView {...baseProps()} />)
-    // Expand the timeline
-    expandTimeline(container)
-    // Should only show 2 normal events, not the 2 noise events
-    const eventCount = container.querySelector('[data-testid="event-count"]')
-    expect(eventCount?.textContent).toBe("2 events")
-    // Noise event titles should not appear
-    expect(container.textContent).not.toContain("Score updated +3")
-    expect(container.textContent).not.toContain("Score updated -1")
-  })
-
-  it("reveals system-noise events when toggle is clicked", () => {
-    const { container } = render(<DetailView {...baseProps()} />)
-    expandTimeline(container)
-    // Click the toggle
-    const toggle = container.querySelector(
-      '[data-testid="system-events-toggle"]',
-    ) as HTMLElement
-    expect(toggle).not.toBeNull()
-    fireEvent.click(toggle)
-    // Now all 4 events should be visible
-    const eventCount = container.querySelector('[data-testid="event-count"]')
-    expect(eventCount?.textContent).toBe("4 events")
-    expect(container.textContent).toContain("Score updated +3")
-  })
-
-  it("clicking the toggle does NOT collapse/expand the timeline", () => {
-    const { container } = render(<DetailView {...baseProps()} />)
-    expandTimeline(container)
-    // Timeline should be expanded — normal events visible
-    expect(container.textContent).toContain("Email sent")
-
-    // Click the system-events toggle
-    const toggle = container.querySelector(
-      '[data-testid="system-events-toggle"]',
-    ) as HTMLElement
-    fireEvent.click(toggle)
-
-    // Timeline should still be expanded
-    expect(container.textContent).toContain("Email sent")
-  })
-
-  it("clicking the collapse button does NOT toggle system-event visibility", () => {
-    const { container } = render(<DetailView {...baseProps()} />)
-    expandTimeline(container)
-
-    // Toggle system events on
-    const toggle = container.querySelector(
-      '[data-testid="system-events-toggle"]',
-    ) as HTMLElement
-    fireEvent.click(toggle)
-    expect(container.textContent).toContain("Score updated +3")
-
-    // Collapse the timeline
-    expandTimeline(container)
-    // Re-expand
-    expandTimeline(container)
-
-    // System events should still be visible (toggle didn't change)
-    expect(container.textContent).toContain("Score updated +3")
-  })
-
-  it("header event count reflects visible events, not total events", () => {
-    const { container } = render(<DetailView {...baseProps()} />)
-    const eventCount = container.querySelector('[data-testid="event-count"]')
-    expect(eventCount?.textContent).toBe("2 events")
-  })
-
-  it("hidden count badge shows the correct number", () => {
-    const { container } = render(<DetailView {...baseProps()} />)
-    const badge = container.querySelector('[data-testid="hidden-count-badge"]')
-    expect(badge).not.toBeNull()
-    expect(badge?.textContent).toBe("2")
-  })
-
-  it("calls localStorage.setItem when toggle changes", () => {
-    const { container } = render(<DetailView {...baseProps()} />)
-    expandTimeline(container)
-    const toggle = container.querySelector(
-      '[data-testid="system-events-toggle"]',
-    ) as HTMLElement
-    fireEvent.click(toggle)
-    expect(localStorageMock.setItem).toHaveBeenCalledWith(
-      "test-show-score-changes",
-      "true",
-    )
-  })
-
-  it("reads localStorage.getItem on mount and honors stored value", () => {
-    store["test-show-score-changes"] = "true"
-    const { container } = render(<DetailView {...baseProps()} />)
-    expandTimeline(container)
-    // With stored value "true", system events should be visible
-    const eventCount = container.querySelector('[data-testid="event-count"]')
-    expect(eventCount?.textContent).toBe("4 events")
-    expect(localStorageMock.getItem).toHaveBeenCalledWith(
-      "test-show-score-changes",
-    )
-  })
-
-  it("renders header and toggle when all events are system noise and toggle is off", () => {
-    const allNoiseProps = baseProps({
-      getTimelineEvents: () => noiseEvents,
-    })
-    const { container } = render(<DetailView {...allNoiseProps} />)
-    // Header should still be rendered
-    const header = container.querySelector('[data-testid="timeline-header"]')
-    expect(header).not.toBeNull()
-    // Toggle should be present
-    const toggle = container.querySelector(
-      '[data-testid="system-events-toggle"]',
-    )
-    expect(toggle).not.toBeNull()
-    // Event count should show 0 events
-    const eventCount = container.querySelector('[data-testid="event-count"]')
-    expect(eventCount?.textContent).toBe("0 events")
-  })
-
-  it("'Last activity' uses the first visible event's time, not a hidden system-noise event", () => {
-    // Arrange: first event is system noise (time "30m ago"),
-    // second event is normal (time "1h ago")
-    const orderedEvents: TimelineEvent[] = [
-      {
-        id: "noise-first",
-        icon: React.createElement("span", null, "📊"),
-        title: "Score change",
-        time: "30m ago",
-        isSystemNoise: true,
-      },
-      {
-        id: "normal-second",
-        icon: React.createElement("span", null, "📧"),
-        title: "Email sent",
-        time: "1h ago",
-      },
-    ]
-    const props = baseProps({ getTimelineEvents: () => orderedEvents })
-    const { container } = render(<DetailView {...props} />)
-    const hint = container.querySelector('[data-testid="last-activity-hint"]')
-    expect(hint).not.toBeNull()
-    // Should show "1h ago" (the first visible event), not "30m ago" (the hidden noise event)
-    expect(hint?.textContent).toContain("1h ago")
-    expect(hint?.textContent).not.toContain("30m ago")
-  })
-
-  it("uses singular grammar for 1 event and plural for multiple", () => {
-    const singleEvent: TimelineEvent[] = [
-      {
-        id: "s1",
-        icon: React.createElement("span", null, "📧"),
-        title: "Email sent",
-        time: "1h ago",
-      },
-    ]
-    const props = baseProps({ getTimelineEvents: () => singleEvent })
-    const { container } = render(<DetailView {...props} />)
-    const eventCount = container.querySelector('[data-testid="event-count"]')
-    expect(eventCount?.textContent).toBe("1 event")
-  })
-
-  it("does not render toggle when there are no system-noise events", () => {
-    const props = baseProps({
-      getTimelineEvents: () => normalEvents,
-    })
-    const { container } = render(<DetailView {...props} />)
-    const toggle = container.querySelector(
-      '[data-testid="system-events-toggle"]',
-    )
-    expect(toggle).toBeNull()
-  })
-
-  it("shows footer hint when timeline is expanded and system events are hidden", () => {
-    const { container } = render(<DetailView {...baseProps()} />)
-    expandTimeline(container)
-    const hint = container.querySelector('[data-testid="timeline-footer-hint"]')
-    expect(hint).not.toBeNull()
-    expect(hint?.textContent).toBe("Score changes are hidden.")
-  })
-
-  it("shows visible footer hint with count when system events are shown", () => {
-    const { container } = render(<DetailView {...baseProps()} />)
-    expandTimeline(container)
-    // Toggle on
-    const toggle = container.querySelector(
-      '[data-testid="system-events-toggle"]',
-    ) as HTMLElement
-    fireEvent.click(toggle)
-    const hint = container.querySelector('[data-testid="timeline-footer-hint"]')
-    expect(hint).not.toBeNull()
-    expect(hint?.textContent).toBe("Showing 2 score changes.")
-  })
-})