Pie Chart Tests (#12)

* Primer avance pruebas * All piechart tests passed * Fixes and linting
unosquare · Sep 18, 2024 · affc26c · affc26c
1 parent 185cf82
commit affc26c
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 22 deletions.
diff --git a/samples/pages/CustomActiveShapePieChart.tsx b/samples/pages/CustomActiveShapePieChart.tsx
@@ -26,7 +26,7 @@ const CustomActiveShapePieChart: React.FC = () => {
       showLabels: true,
       startAngle: 0,
       endAngle: 360,
-      label: 'percent',
+      label: 'percent' as "percent",
       activeShape: true,
     },
   ]);
@@ -52,7 +52,7 @@ const CustomActiveShapePieChart: React.FC = () => {
               startAngle={pie.startAngle}
               endAngle={pie.endAngle}
               fill="#8884d8"
-              label={pie.label}
+              label={pie.label as "percent"}
               activeShape={pie.activeShape}
             />
           ))}

diff --git a/samples/pages/PieChart.tsx b/samples/pages/PieChart.tsx
@@ -37,7 +37,7 @@ const PieChartExample: React.FC = () => {
             innerRadius={pies[0].innerRadius}
             outerRadius={pies[0].outerRadius}
             fill="#8884d8"
-            label={pies[0].showLabels}
+            label={pies[0].showLabels ? "percent" : undefined}
           />
           <Tooltip />
           <Legend />

diff --git a/samples/pages/PieChartWithCustomizedLabel.tsx b/samples/pages/PieChartWithCustomizedLabel.tsx
@@ -15,8 +15,21 @@ const data01 = [
   { "name": "Group F", "value": 189 }
 ];
 
+interface PieData {
+  id: number;
+  innerRadius?: number;
+  outerRadius?: number;
+  cx?: string | number;
+  cy?: string | number;
+  showLabels?: boolean;
+  startAngle?: number;
+  endAngle?: number;
+  label?: boolean | string[] | "percent";
+  activeShape?: boolean;
+}
+
 const PieChartWithCustomizedLabel: React.FC = () => {
-  const [pies, setPies] = useState([
+  const [pies, setPies] = useState<PieData[]>([
     {
       id: 1,
       innerRadius: 0,
@@ -49,14 +62,14 @@ const PieChartWithCustomizedLabel: React.FC = () => {
               data={data01}
               dataKey="value"
               nameKey="name"
-              cx={pie.cx}
-              cy={pie.cy}
+              cx={pie.cx ?? '50%'}
+              cy={pie.cy ?? '50%'}
               innerRadius={pie.innerRadius}
-              outerRadius={pie.outerRadius}
+              outerRadius={pie.outerRadius ?? 0}
               startAngle={pie.startAngle}
               endAngle={pie.endAngle}
               fill="#8884d8"
-              label={pie.showLabels ? pie.label : false}
+              label={pie.showLabels ? (pie.label as string[] | "percent") : undefined}
             />
           ))}
           <Tooltip />

diff --git a/samples/pages/PieChartWithPaddingAngle.tsx b/samples/pages/PieChartWithPaddingAngle.tsx
@@ -16,7 +16,18 @@ const data01 = [
 ];
 
 const PieChartWithPaddingAngle: React.FC = () => {
-  const [pies, setPies] = useState([{
+  const [pies, setPies] = useState<Array<{
+    id: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cx?: string | number;
+    cy?: string | number;
+    showLabels?: boolean;
+    startAngle?: number;
+    endAngle?: number;
+    paddingAngle?: number;
+    activeShape?: boolean;
+  }>>([{
     id: 1,
     innerRadius: 0,
     outerRadius: 80,
@@ -47,12 +58,12 @@ const PieChartWithPaddingAngle: React.FC = () => {
               data={data01} 
               dataKey="value" 
               nameKey="name" 
-              cx={pie.cx} 
-              cy={pie.cy} 
+              cx={pie.cx ?? '50%'} 
+              cy={pie.cy ?? '50%'} 
               innerRadius={pie.innerRadius} 
-              outerRadius={pie.outerRadius} 
+              outerRadius={pie.outerRadius ?? 0} 
               fill="#8884d8" 
-              label={pie.showLabels}
+              label={pie.showLabels ? "percent" : undefined}
               startAngle={pie.startAngle}
               endAngle={pie.endAngle}
               paddingAngle={pie.paddingAngle}

diff --git a/samples/pages/StraightAnglePieChart.tsx b/samples/pages/StraightAnglePieChart.tsx
@@ -17,7 +17,7 @@ const data = [
 
 const StraightAnglePieChart: React.FC = () => {
   const [showPolarGrid, setShowPolarGrid] = useState(true);
-  const [pies, setPies] = useState([
+  const [pies, setPies] = useState<{ id: number; innerRadius?: number; outerRadius?: number; cx?: string | number; cy?: string | number; showLabels?: boolean; startAngle?: number; endAngle?: number; activeShape?: boolean }[]>([
     { id: 1, innerRadius: 0, outerRadius: 80, cx: '50%', cy: '50%', showLabels: true, startAngle: 0, endAngle: 180 },
   ]);
 
@@ -32,12 +32,12 @@ const StraightAnglePieChart: React.FC = () => {
             data={data}
             dataKey="value"
             nameKey="name"
-            cx={pies[0].cx}
-            cy={pies[0].cy}
+            cx={pies[0].cx ?? '50%'}
+            cy={pies[0].cy ?? '50%'}
             innerRadius={pies[0].innerRadius}
-            outerRadius={pies[0].outerRadius}
+            outerRadius={pies[0].outerRadius ?? 0}
             fill="#8884d8"
-            label={pies[0].showLabels}
+            label={pies[0].showLabels ? "percent" : undefined}
             startAngle={pies[0].startAngle}
             endAngle={pies[0].endAngle}
           />

diff --git a/samples/utils/PieChartControls.tsx b/samples/utils/PieChartControls.tsx
@@ -32,7 +32,7 @@ interface PieChartControlsProps {
 }
 
 const PieChartControls: React.FC<PieChartControlsProps> = ({ pies, setPies, showPolarGrid, setShowPolarGrid }) => {
-  const handlePieChange = (index: number, key: keyof typeof pies[number], value: string | number | boolean) => {
+  const handlePieChange = <K extends keyof typeof pies[number]>(index: number, key: K, value: typeof pies[number][K]) => {
     const updatedPies = [...pies];
     updatedPies[index][key] = value;
     setPies(updatedPies);

diff --git a/src/Pie/Pie.spec.tsx b/src/Pie/Pie.spec.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Pie from './index';
+
+describe('Pie', () => {
+    const mockData = [
+        { name: 'Group A', value: 400 },
+        { name: 'Group B', value: 300 },
+        { name: 'Group C', value: 300 },
+    ];
+
+    it('renders without crashing', () => {
+        const { container } = render(
+            <svg>
+                <Pie data={mockData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} fill="#8884d8" />
+            </svg>
+        );
+        expect(container).toBeInTheDocument();
+    });
+
+    it('displays the correct number of pie segments', () => {
+        const { container } = render(
+            <svg>
+                <Pie data={mockData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} fill="#8884d8" />
+            </svg>
+        );
+        const paths = container.querySelectorAll('path');
+        expect(paths.length).toBe(mockData.length);
+    });
+
+    it('changes shape when activeShape is true', () => {
+        const { container } = render(
+          <Pie
+            data={mockData}
+            dataKey="value"
+            nameKey="name"
+            cx="50%"
+            cy="50%"
+            outerRadius={80}
+            fill="#8884d8"
+            activeShape={true}
+          />
+        );
+
+        const path = container.querySelector('path');
+        fireEvent.mouseEnter(path!);
+
+        setTimeout(() => {
+          expect(path).toHaveStyle('transform: scale(1.05)');
+        }, 200);
+      });
+});
diff --git a/src/Pie/index.tsx b/src/Pie/index.tsx
@@ -3,7 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 interface PieProps {
     data: Array<{ name: string; value: number }>;
-    dataKey: string;
+    dataKey: keyof { name: string; value: number };
     nameKey: string;
     cx: string | number;
     cy: string | number;
@@ -35,7 +35,7 @@ const Pie: React.FC<PieProps> = ({
     const computedCx = typeof cx === 'string' && cx.endsWith('%') ? (parseFloat(cx) / 100) * 730 : cx;
     const computedCy = typeof cy === 'string' && cy.endsWith('%') ? (parseFloat(cy) / 100) * 250 : cy;
 
-    const totalValue = data.reduce((acc, item) => acc + item[dataKey], 0);
+    const totalValue = data.reduce((acc, item) => acc + (item[dataKey] as number), 0); // Ajuste aquí
     const angleRange = endAngle - startAngle;
 
     let currentAngle = startAngle + 180;
@@ -45,7 +45,7 @@ const Pie: React.FC<PieProps> = ({
     return (
         <g transform={`translate(${computedCx}, ${computedCy})`}>
             {data.map((entry, index) => {
-                const value = entry[dataKey];
+                const value = entry[dataKey] as number; // Ajuste aquí
                 const angle = (value / totalValue) * angleRange - paddingAngle;
                 const nextAngle = currentAngle + angle;
                 const largeArcFlag = angle > 180 ? 1 : 0;

diff --git a/src/PieChart/PieChart.spec.tsx b/src/PieChart/PieChart.spec.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import PieChart from './index';
+import Pie from '../Pie';
+
+describe('PieChart', () => {
+    const mockData = [
+        { name: 'Group A', value: 400 },
+        { name: 'Group B', value: 300 },
+    ];
+
+    it('renders without crashing', () => {
+        const { container } = render(
+            <PieChart width={500} height={400}>
+                <Pie data={mockData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} fill="#8884d8" />
+            </PieChart>
+        );
+        expect(container).toBeInTheDocument();
+    });
+
+    it('renders with correct width and height', () => {
+        const { container } = render(
+            <PieChart width={500} height={400}>
+                <Pie data={mockData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} fill="#8884d8" />
+            </PieChart>
+        );
+        const svg = container.querySelector('svg');
+        expect(svg).toHaveAttribute('width', '500');
+        expect(svg).toHaveAttribute('height', '400');
+    });
+});
diff --git a/src/PolarGrid/PolarGrid.spec.tsx b/src/PolarGrid/PolarGrid.spec.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import PolarGrid from './index';
+
+describe('PolarGrid', () => {
+    it('renders without crashing', () => {
+        const { container } = render(
+            <svg>
+                <PolarGrid cx="50%" cy="50%" />
+            </svg>
+        );
+        expect(container).toBeInTheDocument();
+    });
+
+    it('renders correct number of radial lines and concentric circles', () => {
+        const { container } = render(
+            <svg>
+                <PolarGrid cx="50%" cy="50%" radialLines={8} concentricCircles={4} />
+            </svg>
+        );
+        const lines = container.querySelectorAll('line');
+        const circles = container.querySelectorAll('circle');
+        expect(lines.length).toBe(8);
+        expect(circles.length).toBe(4);
+    });
+
+    it('applies correct stroke color', () => {
+        const { container } = render(
+            <svg>
+                <PolarGrid cx="50%" cy="50%" stroke="#123456" />
+            </svg>
+        );
+        const lines = container.querySelector('line');
+        const circles = container.querySelector('circle');
+        expect(lines).toHaveAttribute('stroke', '#123456');
+        expect(circles).toHaveAttribute('stroke', '#123456');
+    });
+});