@handled-ai/design-system 0.20.4 → 0.20.6

package/src/components/__tests__/email-preview-card.test.tsx

@@ -10,6 +10,17 @@ afterEach(() => {
 
 const from = { name: "Cory Pitt", email: "cory@withhandled.com" }
 
+function expectNoVisibleEscapeArtifacts(value: string) {
+  expect(value).not.toMatch(/&#(?:x[0-9a-f]+|\d+);?/i)
+  expect(value).not.toContain("&")
+  expect(value).not.toContain("<")
+  expect(value).not.toContain(">")
+  expect(value).not.toContain(""")
+  expect(value).not.toContain('\\"')
+  expect(value).not.toContain("\\'")
+  expect(value).not.toContain("\\n")
+}
+
 describe("EmailPreviewCard", () => {
   it("renders the subject", () => {
     render(<EmailPreviewCard from={from} subject="Quarterly update" />)
@@ -29,7 +40,7 @@ describe("EmailPreviewCard", () => {
 
   it("renders the recipient", () => {
     render(<EmailPreviewCard from={from} to="jane@acme.com" />)
-    expect(screen.getByText("to jane@acme.com")).toBeTruthy()
+    expect(screen.getByText("jane@acme.com")).toBeTruthy()
     expect(
       screen.getByText(/This is how your email lands in jane@acme.com's inbox/),
     ).toBeTruthy()
@@ -37,7 +48,7 @@ describe("EmailPreviewCard", () => {
 
   it("renders 'to no recipient yet' when no recipient", () => {
     render(<EmailPreviewCard from={from} />)
-    expect(screen.getByText("to no recipient yet")).toBeTruthy()
+    expect(screen.getByText("no recipient yet")).toBeTruthy()
     expect(
       screen.getByText(/This is how your email lands in the recipient's inbox/),
     ).toBeTruthy()
@@ -59,4 +70,27 @@ describe("EmailPreviewCard", () => {
     )
     expect(container.querySelector("em")?.textContent).toBe("Best, Cory")
   })
+
+  it("decodes preview copy, displays To/Cc/Bcc, and renders superscript signatures", () => {
+    const { container } = render(
+      <EmailPreviewCard
+        from={{ name: "Cory &amp; Co", email: "Cory Pitt <cory@withhandled.com>" }}
+        to={'"Jane &amp; Team" <jane@example.com>'}
+        cc={["Ops &lt;ops@example.com&gt;"]}
+        bcc="Audit <audit@example.com>"
+        subject="Quarterly &amp; renewal"
+        htmlBody="<p>Hello Jane &amp; team — it&#39;s ready.</p>"
+        signatureHtml="<p>Handled<sup>AI</sup></p>"
+      />,
+    )
+
+    expect(screen.getByText("Cory & Co")).toBeTruthy()
+    expect(screen.getByText("Quarterly & renewal")).toBeTruthy()
+    expect(screen.getByText("Jane & Team <jane@example.com>")).toBeTruthy()
+    expect(screen.getByText("Ops <ops@example.com>")).toBeTruthy()
+    expect(screen.getByText("Audit <audit@example.com>")).toBeTruthy()
+    expect(screen.getByText("Hello Jane & team — it's ready.")).toBeTruthy()
+    expect(container.querySelector("sup")?.textContent).toBe("AI")
+    expectNoVisibleEscapeArtifacts(container.textContent ?? "")
+  })
 })

package/src/components/__tests__/timeline-activity.test.tsx

@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom/vitest"
 import { describe, it, expect } from "vitest"
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { fireEvent, render, screen } from "@testing-library/react"
 import {
   TimelineActivity,
   TONE_CLASSES,
@@ -12,6 +12,17 @@ import {
 // Helpers
 // ---------------------------------------------------------------------------
 
+function expectNoVisibleEscapeArtifacts(value: string) {
+  expect(value).not.toMatch(/&#(?:x[0-9a-f]+|\d+);?/i)
+  expect(value).not.toContain("&")
+  expect(value).not.toContain("<")
+  expect(value).not.toContain(">")
+  expect(value).not.toContain(""")
+  expect(value).not.toContain('\\"')
+  expect(value).not.toContain("\\'")
+  expect(value).not.toContain("\\n")
+}
+
 function minimal(overrides: Partial<TimelineEvent> = {}): TimelineEvent {
   return {
     id: "e1",
@@ -328,4 +339,45 @@ describe("TimelineActivity", () => {
       "https://salesforce.example/case/1",
     )
   })
+
+  it("uses shared helpers for decoded timeline sender, timestamp, snippets, and collapsed details", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: false,
+      email: {
+        from: "Cory &amp; Co",
+        fromEmail: "cory@example.com",
+        to: "Jane &amp; Team <jane@example.com>",
+        cc: "Ops &lt;ops@example.com&gt;",
+        date: "2026-06-08T15:30:00.000Z",
+        subject: "Update &amp; next steps",
+        body: "plain fallback",
+        bodyHtml:
+          "<p>Hello Jane &amp; team — it&#39;s ready.</p><p>Thanks,</p><p>Cory Pitt</p><p>Handled<sup>AI</sup></p>",
+      },
+      preview: "Hello Jane &amp; team — it&#39;s ready.",
+    })
+
+    const { container } = render(<TimelineActivity events={[event]} />)
+    const collapsedText = container.textContent ?? ""
+
+    expect(collapsedText).toContain("Cory & Co")
+    expect(collapsedText).toContain("Update & next steps")
+    expect(collapsedText).toContain("Hello Jane & team — it's ready.")
+    expectNoVisibleEscapeArtifacts(collapsedText)
+
+    fireEvent.click(screen.getByRole("button", { name: /Expand/i }))
+
+    expect(screen.getByText("Jun 8, 2026, 3:30 PM")).toBeTruthy()
+    expect(screen.getByText(/Jane & Team <jane@example.com>/)).toBeTruthy()
+    expect(container.querySelector('[data-slot="email-body-details"]')).toBeNull()
+    expect(screen.getByRole("button", { name: "•••" })).toBeTruthy()
+    expect(container.textContent).not.toContain("HandledAI")
+
+    fireEvent.click(screen.getByRole("button", { name: "•••" }))
+    expect(container.querySelector("sup")?.textContent).toBe("AI")
+    expect(container.textContent).toContain("HandledAI")
+    expectNoVisibleEscapeArtifacts(container.textContent ?? "")
+  })
+
 })