@etus/ui 0.1.0 → 0.1.2

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

@@ -1,630 +0,0 @@
-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")
-      })
-    })
-  })
-})