@etus/ui 0.1.0

package/src/components/data-display/Timeline/Timeline.test.tsx

@@ -0,0 +1,701 @@
+// Timeline/Timeline.test.tsx
+import type { TimelineItem as TimelineItemData } from "./Timeline.types"
+
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { Check, CircleAlert, Clock } from "lucide-react"
+import { describe, expect, it } from "vitest"
+
+import { Timeline, TimelineItem } from "./Timeline"
+
+expect.extend(toHaveNoViolations)
+
+// Sample data for tests
+const sampleItems: TimelineItemData[] = [
+  {
+    id: "1",
+    title: "Started",
+    description: "Project initiated",
+    status: "complete",
+  },
+  {
+    id: "2",
+    title: "In Progress",
+    description: "Currently working",
+    status: "current",
+  },
+  {
+    id: "3",
+    title: "Pending",
+    description: "Waiting to start",
+    status: "pending",
+  },
+]
+
+// ============================================
+// RENDERING TESTS
+// ============================================
+describe("Timeline", () => {
+  describe("Rendering", () => {
+    it("renders timeline items correctly", () => {
+      render(<Timeline items={sampleItems} />)
+      expect(screen.getByText("Started")).toBeInTheDocument()
+      expect(screen.getByText("In Progress")).toBeInTheDocument()
+      expect(screen.getByText("Pending")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <Timeline
+          className="custom-class"
+          data-testid="timeline"
+          items={sampleItems}
+        />
+      )
+      expect(screen.getByTestId("timeline")).toHaveClass("custom-class")
+    })
+
+    it("renders items with descriptions", () => {
+      render(<Timeline items={sampleItems} />)
+      expect(screen.getByText("Project initiated")).toBeInTheDocument()
+      expect(screen.getByText("Currently working")).toBeInTheDocument()
+    })
+
+    it("renders items with icons", () => {
+      const itemsWithIcons: TimelineItemData[] = [
+        {
+          id: "1",
+          title: "Complete",
+          status: "complete",
+          icon: <Check data-testid="check-icon" />,
+        },
+      ]
+      render(<Timeline items={itemsWithIcons} />)
+      expect(screen.getByTestId("check-icon")).toBeInTheDocument()
+    })
+
+    it("renders items with timestamps", () => {
+      const itemsWithTimestamps: TimelineItemData[] = [
+        {
+          id: "1",
+          title: "Event",
+          timestamp: new Date("2024-01-15T10:00:00"),
+          status: "complete",
+        },
+      ]
+      render(<Timeline items={itemsWithTimestamps} />)
+      const timeElement = screen.getByRole("time")
+      expect(timeElement).toHaveAttribute("datetime")
+    })
+
+    it("renders children when no items provided", () => {
+      render(
+        <Timeline>
+          <div data-testid="custom-child">Custom content</div>
+        </Timeline>
+      )
+      expect(screen.getByTestId("custom-child")).toBeInTheDocument()
+    })
+
+    it("renders empty when no items and no children", () => {
+      render(<Timeline data-testid="timeline" />)
+      expect(screen.getByTestId("timeline")).toBeInTheDocument()
+      expect(screen.getByTestId("timeline").children).toHaveLength(0)
+    })
+  })
+
+  // ============================================
+  // DATA SLOT TESTS
+  // ============================================
+  describe("Data Slot Attributes", () => {
+    it("has data-slot attribute on root", () => {
+      render(<Timeline data-testid="timeline" items={sampleItems} />)
+      expect(screen.getByTestId("timeline")).toHaveAttribute(
+        "data-slot",
+        "timeline"
+      )
+    })
+
+    it("has data-slot on timeline items", () => {
+      const { container } = render(<Timeline items={sampleItems} />)
+      const timelineItems = container.querySelectorAll(
+        '[data-slot="timeline-item"]'
+      )
+      expect(timelineItems).toHaveLength(3)
+    })
+
+    it("has data-slot on marker", () => {
+      const { container } = render(<Timeline items={sampleItems} />)
+      expect(
+        container.querySelector('[data-slot="timeline-marker"]')
+      ).toBeInTheDocument()
+    })
+
+    it("has data-slot on content container", () => {
+      const { container } = render(<Timeline items={sampleItems} />)
+      expect(
+        container.querySelector('[data-slot="timeline-content"]')
+      ).toBeInTheDocument()
+    })
+
+    it("has data-slot on title", () => {
+      const { container } = render(<Timeline items={sampleItems} />)
+      expect(
+        container.querySelector('[data-slot="timeline-title"]')
+      ).toBeInTheDocument()
+    })
+
+    it("has data-slot on description when provided", () => {
+      const { container } = render(<Timeline items={sampleItems} />)
+      expect(
+        container.querySelector('[data-slot="timeline-description"]')
+      ).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // VARIANT TESTS
+  // ============================================
+  describe("Variants", () => {
+    it("applies default variant", () => {
+      render(<Timeline data-testid="timeline" items={sampleItems} />)
+      const timeline = screen.getByTestId("timeline")
+      expect(timeline).toHaveAttribute("data-variant", "default")
+      expect(timeline.className).toContain("flex-col")
+    })
+
+    it("applies horizontal variant", () => {
+      render(
+        <Timeline
+          data-testid="timeline"
+          items={sampleItems}
+          variant="horizontal"
+        />
+      )
+      const timeline = screen.getByTestId("timeline")
+      expect(timeline).toHaveAttribute("data-variant", "horizontal")
+      expect(timeline.className).toContain("flex-row")
+    })
+
+    it("applies compact variant", () => {
+      render(
+        <Timeline data-testid="timeline" items={sampleItems} variant="compact" />
+      )
+      const timeline = screen.getByTestId("timeline")
+      expect(timeline).toHaveAttribute("data-variant", "compact")
+      expect(timeline.className).toContain("gap-[var(--timeline-root-gap-compact)]")
+    })
+
+    it("applies detailed variant", () => {
+      render(
+        <Timeline
+          data-testid="timeline"
+          items={sampleItems}
+          variant="detailed"
+        />
+      )
+      const timeline = screen.getByTestId("timeline")
+      expect(timeline).toHaveAttribute("data-variant", "detailed")
+      expect(timeline.className).toContain("gap-[var(--timeline-root-gap-detailed)]")
+    })
+  })
+
+  // ============================================
+  // SIZE TESTS
+  // ============================================
+  describe("Sizes", () => {
+    it("applies default size", () => {
+      render(<Timeline data-testid="timeline" items={sampleItems} />)
+      const timeline = screen.getByTestId("timeline")
+      expect(timeline.className).toContain("gap-[var(--timeline-root-gap-default)]")
+    })
+
+    it("applies sm size", () => {
+      render(
+        <Timeline data-testid="timeline" items={sampleItems} size="sm" />
+      )
+      // Size affects marker and text sizing
+      expect(screen.getByTestId("timeline")).toBeInTheDocument()
+    })
+
+    it("applies lg size", () => {
+      render(
+        <Timeline data-testid="timeline" items={sampleItems} size="lg" />
+      )
+      expect(screen.getByTestId("timeline")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // STATUS TESTS
+  // ============================================
+  describe("Status States", () => {
+    it("displays correct status colors", () => {
+      const { container } = render(<Timeline items={sampleItems} />)
+      const markers = container.querySelectorAll('[data-slot="timeline-marker"]')
+      expect(markers[0]).toHaveAttribute("data-status", "complete")
+      expect(markers[1]).toHaveAttribute("data-status", "current")
+      expect(markers[2]).toHaveAttribute("data-status", "pending")
+    })
+
+    it("displays error status", () => {
+      const itemsWithError: TimelineItemData[] = [
+        { id: "1", title: "Failed", status: "error" },
+      ]
+      const { container } = render(<Timeline items={itemsWithError} />)
+      const marker = container.querySelector('[data-slot="timeline-marker"]')
+      expect(marker).toHaveAttribute("data-status", "error")
+      expect(marker?.className).toContain("bg-destructive")
+    })
+
+    it("applies pulse animation to current status", () => {
+      const { container } = render(<Timeline items={sampleItems} />)
+      const currentMarker = container.querySelectorAll(
+        '[data-slot="timeline-marker"]'
+      )[1]
+      expect(currentMarker?.className).toContain("animate-pulse")
+    })
+  })
+
+  // ============================================
+  // CONNECTOR TESTS
+  // ============================================
+  describe("Connectors", () => {
+    it("shows connectors by default", () => {
+      const { container } = render(<Timeline items={sampleItems} />)
+      const connectors = container.querySelectorAll(
+        '[data-slot="timeline-connector"]'
+      )
+      // Should have 2 connectors (one less than items)
+      expect(connectors).toHaveLength(2)
+    })
+
+    it("hides connectors when connector is false", () => {
+      const { container } = render(
+        <Timeline connector={false} items={sampleItems} />
+      )
+      const connectors = container.querySelectorAll(
+        '[data-slot="timeline-connector"]'
+      )
+      expect(connectors).toHaveLength(0)
+    })
+  })
+
+  // ============================================
+  // COMPLETED PROP TESTS
+  // ============================================
+  describe("Completed Prop", () => {
+    it("auto-sets complete status based on completed count", () => {
+      const itemsWithoutStatus: TimelineItemData[] = [
+        { id: "1", title: "Step 1" },
+        { id: "2", title: "Step 2" },
+        { id: "3", title: "Step 3" },
+      ]
+      const { container } = render(
+        <Timeline completed={2} items={itemsWithoutStatus} />
+      )
+      const markers = container.querySelectorAll('[data-slot="timeline-marker"]')
+      expect(markers[0]).toHaveAttribute("data-status", "complete")
+      expect(markers[1]).toHaveAttribute("data-status", "complete")
+      expect(markers[2]).toHaveAttribute("data-status", "current")
+    })
+
+    it("marks remaining items as pending", () => {
+      const itemsWithoutStatus: TimelineItemData[] = [
+        { id: "1", title: "Step 1" },
+        { id: "2", title: "Step 2" },
+        { id: "3", title: "Step 3" },
+        { id: "4", title: "Step 4" },
+      ]
+      const { container } = render(
+        <Timeline completed={1} items={itemsWithoutStatus} />
+      )
+      const markers = container.querySelectorAll('[data-slot="timeline-marker"]')
+      expect(markers[0]).toHaveAttribute("data-status", "complete")
+      expect(markers[1]).toHaveAttribute("data-status", "current")
+      expect(markers[2]).toHaveAttribute("data-status", "pending")
+      expect(markers[3]).toHaveAttribute("data-status", "pending")
+    })
+  })
+
+  // ============================================
+  // ACTIVE INDEX TESTS
+  // ============================================
+  describe("Active Index", () => {
+    it("marks item as active based on activeIndex", () => {
+      const { container } = render(
+        <Timeline activeIndex={1} items={sampleItems} />
+      )
+      const items = container.querySelectorAll('[data-slot="timeline-item"]')
+      expect(items[0]).not.toHaveAttribute("data-active")
+      expect(items[1]).toHaveAttribute("data-active", "")
+      expect(items[2]).not.toHaveAttribute("data-active")
+    })
+  })
+
+  // ============================================
+  // KEYBOARD NAVIGATION TESTS
+  // ============================================
+  describe("Keyboard Navigation", () => {
+    it("timeline items are focusable", async () => {
+      const user = userEvent.setup()
+      const { container } = render(<Timeline items={sampleItems} />)
+      const firstItem = container.querySelector('[data-slot="timeline-item"]')
+
+      await user.tab()
+      expect(firstItem).toHaveFocus()
+    })
+
+    it("can navigate through items with Tab", async () => {
+      const user = userEvent.setup()
+      const { container } = render(<Timeline items={sampleItems} />)
+      const items = container.querySelectorAll('[data-slot="timeline-item"]')
+
+      await user.tab()
+      expect(items[0]).toHaveFocus()
+
+      await user.tab()
+      expect(items[1]).toHaveFocus()
+
+      await user.tab()
+      expect(items[2]).toHaveFocus()
+    })
+
+    it("can navigate with arrow keys", async () => {
+      const user = userEvent.setup()
+      const { container } = render(<Timeline items={sampleItems} />)
+      const items = container.querySelectorAll('[data-slot="timeline-item"]')
+
+      await user.tab()
+      expect(items[0]).toHaveFocus()
+
+      await user.keyboard("{ArrowDown}")
+      expect(items[1]).toHaveFocus()
+
+      await user.keyboard("{ArrowDown}")
+      expect(items[2]).toHaveFocus()
+
+      await user.keyboard("{ArrowUp}")
+      expect(items[1]).toHaveFocus()
+    })
+
+    it("navigates with ArrowLeft/ArrowRight", async () => {
+      const user = userEvent.setup()
+      const { container } = render(<Timeline items={sampleItems} />)
+      const items = container.querySelectorAll('[data-slot="timeline-item"]')
+
+      await user.tab()
+      expect(items[0]).toHaveFocus()
+
+      await user.keyboard("{ArrowRight}")
+      expect(items[1]).toHaveFocus()
+
+      await user.keyboard("{ArrowLeft}")
+      expect(items[0]).toHaveFocus()
+    })
+  })
+
+  // ============================================
+  // ARIA ATTRIBUTES TESTS
+  // ============================================
+  describe("ARIA Attributes", () => {
+    it("has role=list on root", () => {
+      render(<Timeline data-testid="timeline" items={sampleItems} />)
+      expect(screen.getByTestId("timeline")).toHaveAttribute("role", "list")
+    })
+
+    it("has role=listitem on items", () => {
+      render(<Timeline items={sampleItems} />)
+      const items = screen.getAllByRole("listitem")
+      expect(items).toHaveLength(3)
+    })
+
+    it("has aria-label on root", () => {
+      render(<Timeline data-testid="timeline" items={sampleItems} />)
+      expect(screen.getByTestId("timeline")).toHaveAttribute(
+        "aria-label",
+        "Timeline"
+      )
+    })
+
+    it("supports custom aria-label", () => {
+      render(
+        <Timeline
+          aria-label="Project Timeline"
+          data-testid="timeline"
+          items={sampleItems}
+        />
+      )
+      expect(screen.getByTestId("timeline")).toHaveAttribute(
+        "aria-label",
+        "Project Timeline"
+      )
+    })
+
+    it("has aria-current=step on current item", () => {
+      const { container } = render(<Timeline items={sampleItems} />)
+      const currentItem = container.querySelectorAll(
+        '[data-slot="timeline-item"]'
+      )[1]
+      expect(currentItem).toHaveAttribute("aria-current", "step")
+    })
+
+    it("has data-completed on complete items", () => {
+      const { container } = render(<Timeline items={sampleItems} />)
+      const completeItem = container.querySelector('[data-slot="timeline-item"]')
+      expect(completeItem).toHaveAttribute("data-completed", "")
+    })
+
+    it("has aria-label with status on items", () => {
+      const { container } = render(<Timeline items={sampleItems} />)
+      const completeItem = container.querySelector('[data-slot="timeline-item"]')
+      expect(completeItem).toHaveAttribute("aria-label", "Started - Completed")
+    })
+  })
+
+  // ============================================
+  // CLASSNAME MERGING TESTS
+  // ============================================
+  describe("ClassName Merging", () => {
+    it("merges custom className with base styles", () => {
+      render(
+        <Timeline className="mt-4" data-testid="timeline" items={sampleItems} />
+      )
+      const timeline = screen.getByTestId("timeline")
+      expect(timeline).toHaveClass("mt-4")
+      expect(timeline).toHaveClass("flex")
+    })
+
+    it("allows overriding gap with className", () => {
+      render(
+        <Timeline className="gap-8" data-testid="timeline" items={sampleItems} />
+      )
+      expect(screen.getByTestId("timeline")).toHaveClass("gap-8")
+    })
+  })
+
+  // ============================================
+  // EDGE CASE TESTS
+  // ============================================
+  describe("Edge Cases", () => {
+    it("renders with empty items array", () => {
+      render(<Timeline data-testid="timeline" items={[]} />)
+      expect(screen.getByTestId("timeline")).toBeInTheDocument()
+    })
+
+    it("renders with single item", () => {
+      render(<Timeline items={sampleItems.slice(0, 1)} />)
+      expect(screen.getByText("Started")).toBeInTheDocument()
+    })
+
+    it("handles items with all optional fields", () => {
+      const fullItem: TimelineItemData[] = [
+        {
+          id: "1",
+          title: "Full item",
+          description: "With description",
+          icon: <Check data-testid="icon" />,
+          timestamp: new Date("2024-01-15"),
+          status: "complete",
+          content: <div data-testid="custom-content">Extra content</div>,
+        },
+      ]
+      render(<Timeline items={fullItem} />)
+      expect(screen.getByText("Full item")).toBeInTheDocument()
+      expect(screen.getByText("With description")).toBeInTheDocument()
+      expect(screen.getByTestId("icon")).toBeInTheDocument()
+      expect(screen.getByTestId("custom-content")).toBeInTheDocument()
+    })
+
+    it("handles items with only required fields", () => {
+      const minimalItem: TimelineItemData[] = [
+        {
+          id: "1",
+          title: "Minimal item",
+        },
+      ]
+      render(<Timeline items={minimalItem} />)
+      expect(screen.getByText("Minimal item")).toBeInTheDocument()
+    })
+
+    it("handles long titles gracefully", () => {
+      const longTitle = "A".repeat(200)
+      const itemWithLongTitle: TimelineItemData[] = [
+        {
+          id: "1",
+          title: longTitle,
+        },
+      ]
+      render(<Timeline items={itemWithLongTitle} />)
+      expect(screen.getByText(longTitle)).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations with items", async () => {
+      const { container } = render(<Timeline items={sampleItems} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations with empty items", async () => {
+      const { container } = render(<Timeline items={[]} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations with icons", async () => {
+      const itemsWithIcons: TimelineItemData[] = [
+        {
+          id: "1",
+          title: "Test",
+          icon: <Check className="size-4" />,
+          status: "complete",
+        },
+      ]
+      const { container } = render(<Timeline items={itemsWithIcons} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all variants", async () => {
+      for (const variant of [
+        "default",
+        "horizontal",
+        "compact",
+        "detailed",
+      ] as const) {
+        const { container } = render(
+          <Timeline items={sampleItems} variant={variant} />
+        )
+        const results = await axe(container)
+        expect(results).toHaveNoViolations()
+      }
+    })
+
+    it("has no violations with all sizes", async () => {
+      for (const size of ["sm", "default", "lg"] as const) {
+        const { container } = render(<Timeline items={sampleItems} size={size} />)
+        const results = await axe(container)
+        expect(results).toHaveNoViolations()
+      }
+    })
+
+    it("has no violations with all statuses", async () => {
+      for (const status of [
+        "pending",
+        "complete",
+        "current",
+        "error",
+      ] as const) {
+        const items: TimelineItemData[] = [
+          { id: "1", title: "Test", status },
+        ]
+        const { container } = render(<Timeline items={items} />)
+        const results = await axe(container)
+        expect(results).toHaveNoViolations()
+      }
+    })
+  })
+
+  // ============================================
+  // INTEGRATION TESTS
+  // ============================================
+  describe("Integration", () => {
+    it("renders complete process timeline", () => {
+      const processItems: TimelineItemData[] = [
+        {
+          id: "1",
+          title: "Approved",
+          description: "Review completed",
+          icon: <Check data-testid="check" />,
+          status: "complete",
+        },
+        {
+          id: "2",
+          title: "In Analysis",
+          description: "Awaiting feedback",
+          icon: <Clock data-testid="clock" />,
+          status: "current",
+        },
+        {
+          id: "3",
+          title: "Rejected",
+          description: "Changes required",
+          icon: <CircleAlert data-testid="alert" />,
+          status: "error",
+        },
+      ]
+
+      render(<Timeline items={processItems} />)
+
+      expect(screen.getByText("Approved")).toBeInTheDocument()
+      expect(screen.getByText("In Analysis")).toBeInTheDocument()
+      expect(screen.getByText("Rejected")).toBeInTheDocument()
+      expect(screen.getByTestId("check")).toBeInTheDocument()
+      expect(screen.getByTestId("clock")).toBeInTheDocument()
+      expect(screen.getByTestId("alert")).toBeInTheDocument()
+    })
+
+    it("renders onboarding steps", () => {
+      const onboardingSteps: TimelineItemData[] = [
+        { id: "1", title: "Registration", status: "complete" },
+        { id: "2", title: "Verification", status: "complete" },
+        { id: "3", title: "Approval", status: "current" },
+        { id: "4", title: "Activation", status: "pending" },
+      ]
+
+      render(<Timeline completed={2} items={onboardingSteps} />)
+
+      expect(screen.getByText("Registration")).toBeInTheDocument()
+      expect(screen.getByText("Verification")).toBeInTheDocument()
+      expect(screen.getByText("Approval")).toBeInTheDocument()
+      expect(screen.getByText("Activation")).toBeInTheDocument()
+    })
+  })
+})
+
+// ============================================
+// TIMELINE ITEM COMPONENT TESTS
+// ============================================
+describe("TimelineItem", () => {
+  it("renders with custom children", () => {
+    render(
+      <TimelineItem>
+        <div data-testid="custom-content">Custom content</div>
+      </TimelineItem>
+    )
+    expect(screen.getByTestId("custom-content")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", () => {
+    const { container } = render(<TimelineItem>Content</TimelineItem>)
+    expect(
+      container.querySelector('[data-slot="timeline-item"]')
+    ).toBeInTheDocument()
+  })
+
+  it("applies active state", () => {
+    render(
+      <TimelineItem isActive data-testid="item">
+        Active item
+      </TimelineItem>
+    )
+    const item = screen.getByTestId("item")
+    expect(item).toHaveAttribute("data-active", "")
+  })
+
+  it("applies complete state", () => {
+    render(
+      <TimelineItem isComplete data-testid="item">
+        Complete item
+      </TimelineItem>
+    )
+    const item = screen.getByTestId("item")
+    expect(item).toHaveAttribute("data-completed", "")
+  })
+})