@etus/ui 0.1.1 → 0.1.2

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

@@ -1,655 +0,0 @@
-import type { ChartConfig } from "../Chart"
-import type { PieChartDataItem } from "./PieChart.types"
-
-import { render, screen } from "@testing-library/react"
-import { axe, toHaveNoViolations } from "jest-axe"
-import { describe, expect, it, vi } from "vitest"
-
-import { PieChart } from "./PieChart"
-
-expect.extend(toHaveNoViolations)
-
-// Sample data for tests
-const sampleData: PieChartDataItem[] = [
-  { fill: "var(--color-chrome)", name: "Chrome", value: 275 },
-  { fill: "var(--color-safari)", name: "Safari", value: 200 },
-  { fill: "var(--color-firefox)", name: "Firefox", value: 187 },
-  { fill: "var(--color-edge)", name: "Edge", value: 173 },
-  { fill: "var(--color-other)", name: "Other", value: 90 },
-]
-
-const sampleConfig: ChartConfig = {
-  chrome: { color: "hsl(var(--chart-1))", label: "Chrome" },
-  edge: { color: "hsl(var(--chart-4))", label: "Edge" },
-  firefox: { color: "hsl(var(--chart-3))", label: "Firefox" },
-  other: { color: "hsl(var(--chart-5))", label: "Other" },
-  safari: { color: "hsl(var(--chart-2))", label: "Safari" },
-}
-
-describe("PieChart", () => {
-  // ============================================
-  // RENDERING TESTS
-  // ============================================
-  describe("Rendering", () => {
-    it("renders with default props", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("renders with custom className", () => {
-      render(
-        <PieChart
-          className="custom-class"
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-        />
-      )
-      const chartContainer = screen.getByTestId("pie-chart").querySelector("[data-slot='chart']")
-      expect(chartContainer).toHaveClass("custom-class")
-    })
-
-    it("has correct data-slot attribute", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toHaveAttribute("data-slot", "pie-chart")
-    })
-
-    it("renders with custom data keys", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          dataKey="value"
-          nameKey="name"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // VARIANT TESTS
-  // ============================================
-  describe("Variants", () => {
-    it("renders pie variant (default)", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          variant="pie"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("renders donut variant", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          variant="donut"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("renders semi variant", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          variant="semi"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // RADIUS CONFIGURATION TESTS
-  // ============================================
-  describe("Radius Configuration", () => {
-    it("renders with custom innerRadius", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          innerRadius={50}
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("renders with custom outerRadius", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          outerRadius={100}
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("renders with paddingAngle", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          paddingAngle={5}
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("renders with cornerRadius", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          cornerRadius={8}
-          data={sampleData}
-          data-testid="pie-chart"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // ANGLE CONFIGURATION TESTS
-  // ============================================
-  describe("Angle Configuration", () => {
-    it("renders with custom startAngle and endAngle", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          endAngle={270}
-          startAngle={90}
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("renders semi-circle with proper angles", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          endAngle={0}
-          startAngle={180}
-          variant="semi"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // FEATURE TOGGLE TESTS
-  // ============================================
-  describe("Feature Toggles", () => {
-    it("hides tooltip when showTooltip is false", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          showTooltip={false}
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("shows legend when showLegend is true", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          showLegend={true}
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("shows labels when label is true", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          label={true}
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("shows labels with label config object", () => {
-      render(
-        <PieChart
-          label={{
-            line: true,
-            position: "outside",
-          }}
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // CENTER LABEL TESTS (DONUT)
-  // ============================================
-  describe("Center Label", () => {
-    it("renders center label for donut variant", () => {
-      render(
-        <PieChart
-          centerLabel={{
-            label: "Total",
-            value: 925,
-          }}
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          variant="donut"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("renders center label with only value", () => {
-      render(
-        <PieChart
-          centerLabel={{
-            value: 925,
-          }}
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          variant="donut"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("renders center label with only label", () => {
-      render(
-        <PieChart
-          centerLabel={{
-            label: "Visitors",
-          }}
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          variant="donut"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("does not render center label for pie variant", () => {
-      render(
-        <PieChart
-          centerLabel={{
-            label: "Total",
-            value: 925,
-          }}
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          variant="pie"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // TOOLTIP INDICATOR TESTS
-  // ============================================
-  describe("Tooltip Indicator", () => {
-    it("uses dot indicator by default", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          tooltipIndicator="dot"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("uses line indicator", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          tooltipIndicator="line"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("uses dashed indicator", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          tooltipIndicator="dashed"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // ACTIVE SHAPE TESTS
-  // ============================================
-  describe("Active Shape", () => {
-    it("renders with activeIndex", () => {
-      render(
-        <PieChart
-          activeIndex={0}
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("renders with activeShape config", () => {
-      render(
-        <PieChart
-          activeShape={{
-            outerRadius: 90,
-            stroke: "var(--primary)",
-            strokeWidth: 2,
-          }}
-          activeIndex={0}
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // EVENT HANDLER TESTS
-  // ============================================
-  describe("Event Handlers", () => {
-    it("accepts onClick handler", () => {
-      const handleClick = vi.fn()
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          onClick={handleClick}
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("accepts onMouseEnter handler", () => {
-      const handleMouseEnter = vi.fn()
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          onMouseEnter={handleMouseEnter}
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("accepts onMouseLeave handler", () => {
-      const handleMouseLeave = vi.fn()
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          onMouseLeave={handleMouseLeave}
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // ANIMATION TESTS
-  // ============================================
-  describe("Animation", () => {
-    it("renders with custom animationDuration", () => {
-      render(
-        <PieChart
-          animationDuration={500}
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("renders with zero animationDuration (no animation)", () => {
-      render(
-        <PieChart
-          animationDuration={0}
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // DATA ATTRIBUTE TESTS
-  // ============================================
-  describe("Data Attributes", () => {
-    it("supports data-testid", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="test-pie-chart"
-        />
-      )
-      expect(screen.getByTestId("test-pie-chart")).toBeInTheDocument()
-    })
-
-    it("passes through data-* attributes", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-custom="value"
-          data-testid="pie-chart"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toHaveAttribute("data-custom", "value")
-    })
-  })
-
-  // ============================================
-  // ACCESSIBILITY TESTS
-  // ============================================
-  describe("Accessibility", () => {
-    it("has no accessibility violations with basic pie chart", async () => {
-      const { container } = render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-        />
-      )
-
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with donut variant", async () => {
-      const { container } = render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          variant="donut"
-        />
-      )
-
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations with legend", async () => {
-      const { container } = render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          showLegend={true}
-        />
-      )
-
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations with semi variant", async () => {
-      const { container } = render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          variant="semi"
-        />
-      )
-
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-  })
-
-  // ============================================
-  // INTEGRATION TESTS
-  // ============================================
-  describe("Integration", () => {
-    it("renders complete donut chart with all features", () => {
-      render(
-        <PieChart
-          centerLabel={{
-            label: "Total",
-            value: 925,
-          }}
-          config={sampleConfig}
-          cornerRadius={4}
-          data={sampleData}
-          data-testid="pie-chart"
-          innerRadius={60}
-          outerRadius={80}
-          paddingAngle={2}
-          showLegend={true}
-          showTooltip={true}
-          variant="donut"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("renders complete pie chart with labels", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          label={true}
-          showLegend={true}
-          showTooltip={true}
-          variant="pie"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("renders empty data gracefully", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={[]}
-          data-testid="pie-chart"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("renders with single data item", () => {
-      render(
-        <PieChart
-          config={sampleConfig}
-          data={[{ fill: "var(--color-chrome)", name: "Chrome", value: 100 }]}
-          data-testid="pie-chart"
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-
-    it("renders interactive pie chart with all handlers", () => {
-      const handleClick = vi.fn()
-      const handleMouseEnter = vi.fn()
-      const handleMouseLeave = vi.fn()
-
-      render(
-        <PieChart
-          activeShape={{
-            outerRadius: 90,
-            stroke: "var(--primary)",
-            strokeWidth: 2,
-          }}
-          activeIndex={0}
-          config={sampleConfig}
-          data={sampleData}
-          data-testid="pie-chart"
-          onClick={handleClick}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-        />
-      )
-      expect(screen.getByTestId("pie-chart")).toBeInTheDocument()
-    })
-  })
-})