@etus/ui 0.1.0

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

@@ -0,0 +1,630 @@
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { describe, expect, it, vi } from "vitest"
+
+import { Heatmap } from "./Heatmap"
+
+expect.extend(toHaveNoViolations)
+
+// Sample test data
+const testData = [
+  { value: 10, x: "A", y: "1" },
+  { value: 20, x: "B", y: "1" },
+  { value: 30, x: "A", y: "2" },
+  { value: 40, x: "B", y: "2" },
+]
+
+const activityData = [
+  { value: 45, x: "9am", y: "Mon" },
+  { value: 78, x: "10am", y: "Mon" },
+  { value: 32, x: "9am", y: "Tue" },
+  { value: 65, x: "10am", y: "Tue" },
+]
+
+describe("Heatmap", () => {
+  describe("Rendering", () => {
+    it("renders cells correctly", () => {
+      render(
+        <Heatmap
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          xLabels={["A", "B"]}
+          yKey="y"
+          yLabels={["1", "2"]}
+        />
+      )
+
+      // Verify cells are rendered
+      const cells = document.querySelectorAll('[data-slot="heatmap-cell"]')
+      expect(cells).toHaveLength(4)
+    })
+
+    it("renders with default props", () => {
+      render(
+        <Heatmap
+          data={testData}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      expect(screen.getByRole("region")).toBeInTheDocument()
+    })
+
+    it("renders y-axis labels", () => {
+      render(
+        <Heatmap
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          xLabels={["A", "B"]}
+          yKey="y"
+          yLabels={["1", "2"]}
+        />
+      )
+
+      // Labels appear in both sr-only table and visual labels
+      const labels1 = screen.getAllByText("1")
+      const labels2 = screen.getAllByText("2")
+      expect(labels1.length).toBeGreaterThan(0)
+      expect(labels2.length).toBeGreaterThan(0)
+    })
+
+    it("renders x-axis labels", () => {
+      render(
+        <Heatmap
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          xLabels={["A", "B"]}
+          yKey="y"
+          yLabels={["1", "2"]}
+        />
+      )
+
+      // X labels appear multiple times (in cells and labels)
+      const aLabels = screen.getAllByText("A")
+      const bLabels = screen.getAllByText("B")
+      expect(aLabels.length).toBeGreaterThan(0)
+      expect(bLabels.length).toBeGreaterThan(0)
+    })
+
+    it("derives labels from data when not provided", () => {
+      render(
+        <Heatmap
+          data={activityData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      // Labels appear in both sr-only table and visual labels
+      const monLabels = screen.getAllByText("Mon")
+      const tueLabels = screen.getAllByText("Tue")
+      expect(monLabels.length).toBeGreaterThan(0)
+      expect(tueLabels.length).toBeGreaterThan(0)
+    })
+
+    it("renders empty cells for missing data", () => {
+      const sparseData = [
+        { value: 10, x: "A", y: "1" },
+        // B,1 is missing
+        { value: 30, x: "A", y: "2" },
+        { value: 40, x: "B", y: "2" },
+      ]
+
+      render(
+        <Heatmap
+          data={sparseData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          xLabels={["A", "B"]}
+          yKey="y"
+          yLabels={["1", "2"]}
+        />
+      )
+
+      const emptyCells = document.querySelectorAll('[data-empty="true"]')
+      expect(emptyCells).toHaveLength(1)
+    })
+  })
+
+  describe("Variants", () => {
+    it("renders grid variant by default", () => {
+      render(
+        <Heatmap
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      const cells = document.querySelectorAll('[data-slot="heatmap-cell"]')
+      expect(cells).toHaveLength(4)
+    })
+
+    it("renders triangular variant correctly", () => {
+      render(
+        <Heatmap
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          variant="triangular"
+          xKey="x"
+          xLabels={["A", "B"]}
+          yKey="y"
+          yLabels={["1", "2"]}
+        />
+      )
+
+      // Triangular variant only shows lower triangle
+      const cells = document.querySelectorAll('[data-slot="heatmap-cell"]:not([data-empty])')
+      // For a 2x2 grid, triangular should show: (0,0), (0,1), (1,1) = 3 cells
+      expect(cells.length).toBeLessThanOrEqual(4)
+    })
+
+    it("renders calendar variant", () => {
+      render(
+        <Heatmap
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          variant="calendar"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      expect(screen.getByRole("region")).toBeInTheDocument()
+    })
+  })
+
+  describe("Color Scales", () => {
+    it("applies sequential color scale by default", () => {
+      render(
+        <Heatmap
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      const cells = document.querySelectorAll('[data-slot="heatmap-cell"]:not([data-empty])')
+      cells.forEach((cell) => {
+        expect(cell).toHaveStyle({ backgroundColor: expect.any(String) })
+      })
+    })
+
+    it("applies diverging color scale", () => {
+      render(
+        <Heatmap
+          colorScale="diverging"
+          data={testData}
+          maxColor="green"
+          minColor="red"
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      const cells = document.querySelectorAll('[data-slot="heatmap-cell"]:not([data-empty])')
+      expect(cells.length).toBeGreaterThan(0)
+    })
+
+    it("applies custom min/max colors", () => {
+      render(
+        <Heatmap
+          data={testData}
+          maxColor="#00ff00"
+          minColor="#ff0000"
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      const cells = document.querySelectorAll('[data-slot="heatmap-cell"]:not([data-empty])')
+      expect(cells.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe("Legend", () => {
+    it("renders legend when showLegend is true", () => {
+      render(
+        <Heatmap
+          showLegend
+          data={testData}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      expect(document.querySelector('[data-slot="heatmap-legend"]')).toBeInTheDocument()
+    })
+
+    it("hides legend when showLegend is false", () => {
+      render(
+        <Heatmap
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      expect(document.querySelector('[data-slot="heatmap-legend"]')).not.toBeInTheDocument()
+    })
+
+    it("displays min and max values in legend", () => {
+      render(
+        <Heatmap
+          showLegend
+          data={testData}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      // Min/max values appear in the legend element
+      const legend = document.querySelector('[data-slot="heatmap-legend"]')
+      expect(legend).toBeInTheDocument()
+      expect(legend?.textContent).toContain("10")
+      expect(legend?.textContent).toContain("40")
+    })
+  })
+
+  describe("Interactivity", () => {
+    it("calls onCellClick when cell is clicked", async () => {
+      const user = userEvent.setup()
+      const handleClick = vi.fn()
+
+      render(
+        <Heatmap
+          data={testData}
+          showLegend={false}
+          showTooltip={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+          onCellClick={handleClick}
+        />
+      )
+
+      const cells = document.querySelectorAll('[data-slot="heatmap-cell"]:not([data-empty])')
+      const [firstCell] = cells
+      if (!firstCell) {
+        throw new Error("Expected at least one heatmap cell.")
+      }
+      await user.click(firstCell)
+
+      expect(handleClick).toHaveBeenCalledWith(
+        expect.any(Object),
+        expect.objectContaining({
+          timestamp: expect.any(Number) as number,
+          value: expect.any(Number) as number,
+        })
+      )
+    })
+
+    it("handles keyboard navigation", async () => {
+      const user = userEvent.setup()
+      const handleClick = vi.fn()
+
+      render(
+        <Heatmap
+          data={testData}
+          showLegend={false}
+          showTooltip={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+          onCellClick={handleClick}
+        />
+      )
+
+      const cells = document.querySelectorAll('[data-slot="heatmap-cell"]:not([data-empty])')
+      const firstCell = cells[0] as HTMLElement
+      firstCell.focus()
+      await user.keyboard("{Enter}")
+
+      expect(handleClick).toHaveBeenCalled()
+    })
+
+    it("highlights selected cell", () => {
+      render(
+        <Heatmap
+          data={testData}
+          selectedCell={{ x: "A", y: "1" }}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      const selectedCell = document.querySelector('[data-selected="true"]')
+      expect(selectedCell).toBeInTheDocument()
+    })
+
+    it("calls onRowHover when row is hovered", async () => {
+      const user = userEvent.setup()
+      const handleRowHover = vi.fn()
+
+      render(
+        <Heatmap
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+          onRowHover={handleRowHover}
+        />
+      )
+
+      const rows = document.querySelectorAll('[data-slot="heatmap-row"]')
+      const [firstRow] = rows
+      if (!firstRow) {
+        throw new Error("Expected at least one heatmap row.")
+      }
+      await user.hover(firstRow)
+
+      expect(handleRowHover).toHaveBeenCalled()
+    })
+  })
+
+  describe("Tooltip", () => {
+    it("shows tooltip on hover when enabled", async () => {
+      const user = userEvent.setup({ delay: null })
+
+      render(
+        <Heatmap
+          showTooltip
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      const cells = document.querySelectorAll('[data-slot="heatmap-cell"]:not([data-empty])')
+      const [firstCell] = cells
+      if (!firstCell) {
+        throw new Error("Expected at least one heatmap cell.")
+      }
+      await user.hover(firstCell)
+
+      // Wait for tooltip to appear (Radix duplicates content for a11y)
+      const tooltipTexts = await screen.findAllByText("Value:", {}, { timeout: 2000 })
+      expect(tooltipTexts.length).toBeGreaterThan(0)
+    })
+
+    it("hides tooltip when disabled", async () => {
+      const user = userEvent.setup()
+
+      render(
+        <Heatmap
+          data={testData}
+          showLegend={false}
+          showTooltip={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      const cells = document.querySelectorAll('[data-slot="heatmap-cell"]:not([data-empty])')
+      const [firstCell] = cells
+      if (!firstCell) {
+        throw new Error("Expected at least one heatmap cell.")
+      }
+      await user.hover(firstCell)
+
+      // Wait a bit to ensure tooltip would have appeared if enabled
+      await new Promise((resolve) => { setTimeout(resolve, 100) })
+      expect(screen.queryByText("Value:")).not.toBeInTheDocument()
+    })
+
+    it("renders custom tooltip content", async () => {
+      const user = userEvent.setup({ delay: null })
+
+      render(
+        <Heatmap
+          showTooltip
+          renderTooltip={(data) => (
+            <div data-testid="custom-tooltip">Custom: {data.value}</div>
+          )}
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      const cells = document.querySelectorAll('[data-slot="heatmap-cell"]:not([data-empty])')
+      const [firstCell] = cells
+      if (!firstCell) {
+        throw new Error("Expected at least one heatmap cell.")
+      }
+      await user.hover(firstCell)
+
+      // Wait for tooltip to appear (Radix duplicates content for a11y)
+      const customTooltips = await screen.findAllByTestId("custom-tooltip", {}, { timeout: 2000 })
+      expect(customTooltips.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe("Styling", () => {
+    it("applies custom className", () => {
+      render(
+        <Heatmap
+          className="custom-class"
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      expect(document.querySelector(".custom-class")).toBeInTheDocument()
+    })
+
+    it("applies custom cell size", () => {
+      render(
+        <Heatmap
+          cellSize={30}
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      const cells = document.querySelectorAll('[data-slot="heatmap-cell"]:not([data-empty])')
+      cells.forEach((cell) => {
+        expect(cell).toHaveStyle({ height: "30px", width: "30px" })
+      })
+    })
+
+    it("applies custom cell gap", () => {
+      render(
+        <Heatmap
+          cellGap={4}
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      const grid = document.querySelector('[data-slot="heatmap-grid"]')
+      expect(grid).toHaveStyle({ gap: "4px" })
+    })
+  })
+
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <Heatmap
+          ariaLabel="Activity heatmap showing usage patterns"
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          xLabels={["A", "B"]}
+          yKey="y"
+          yLabels={["1", "2"]}
+        />
+      )
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has role=region on container", () => {
+      render(
+        <Heatmap
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      expect(screen.getByRole("region")).toBeInTheDocument()
+    })
+
+    it("has aria-label on container", () => {
+      render(
+        <Heatmap
+          ariaLabel="Custom heatmap description"
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      expect(screen.getByLabelText("Custom heatmap description")).toBeInTheDocument()
+    })
+
+    it("renders screen reader accessible table", () => {
+      render(
+        <Heatmap
+          data={testData}
+          showLegend={false}
+          valueKey="value"
+          xKey="x"
+          xLabels={["A", "B"]}
+          yKey="y"
+          yLabels={["1", "2"]}
+        />
+      )
+
+      // Table should exist with sr-only class
+      const table = document.querySelector("table.sr-only")
+      expect(table).toBeInTheDocument()
+    })
+
+    it("cells have proper aria-label", () => {
+      render(
+        <Heatmap
+          data={testData}
+          showLegend={false}
+          showTooltip={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      const cells = document.querySelectorAll('[data-slot="heatmap-cell"]:not([data-empty])')
+      cells.forEach((cell) => {
+        expect(cell).toHaveAttribute("aria-label")
+      })
+    })
+
+    it("cells are focusable", () => {
+      render(
+        <Heatmap
+          data={testData}
+          showLegend={false}
+          showTooltip={false}
+          valueKey="value"
+          xKey="x"
+          yKey="y"
+        />
+      )
+
+      const cells = document.querySelectorAll('[data-slot="heatmap-cell"]:not([data-empty])')
+      cells.forEach((cell) => {
+        expect(cell).toHaveAttribute("tabIndex", "0")
+      })
+    })
+  })
+})