Merge pull request #2672 from OneCommunityGlobal/shefali-Unit-Test-Pi…

…eChart

Shefali unit test pie chart

src/components/common/PieChart/__tests__/PieChart.test.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { PieChart } from '../PieChart';
+
+let container = null;
+beforeEach(() => {
+  // setup a DOM element as a render target
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  // cleanup on exiting
+  unmountComponentAtNode(container);
+  container.remove();
+  container = null;
+});
+
+describe('PieChart', () => {
+  it('renders without crashing', () => {
+    act(() => {
+      render(
+        <PieChart data={{}} dataLegend={{}} pieChartId="test" dataLegendHeader="Test" />,
+        container,
+      );
+    });
+  });
+
+  it('renders correct total hours', () => {
+    act(() => {
+      render(
+        <PieChart
+          data={{ a: 1, b: 2 }}
+          dataLegend={{ a: ['A'], b: ['B'] }}
+          pieChartId="test"
+          dataLegendHeader="Test"
+        />,
+        container,
+      );
+    });
+    expect(container.textContent).toContain('Total Hours : 3.00');
+  });
+
+  it('renders correct legend', () => {
+    act(() => {
+      render(
+        <PieChart
+          data={{ a: 1, b: 2 }}
+          dataLegend={{ a: ['A'], b: ['B'] }}
+          pieChartId="test"
+          dataLegendHeader="Test"
+        />,
+        container,
+      );
+    });
+    expect(container.textContent).toContain('A');
+    expect(container.textContent).toContain('B');
+  });
+
+  it('applies dark mode class correctly', () => {
+    act(() => {
+      render(
+        <PieChart
+          data={{ a: 1, b: 2 }}
+          dataLegend={{ a: ['A'], b: ['B'] }}
+          pieChartId="test"
+          dataLegendHeader="Test"
+          darkMode={true}
+        />,
+        container,
+      );
+    });
+
+    // Check if the dark mode class 'text-light' is applied
+    const pieChartWrapper = container.querySelector('.pie-chart-wrapper');
+    expect(pieChartWrapper.classList.contains('text-light')).toBe(true);
+  });
+
+  it('renders the SVG pie chart', () => {
+    act(() => {
+      render(
+        <PieChart
+          data={{ a: 1, b: 2 }}
+          dataLegend={{ a: ['A'], b: ['B'] }}
+          pieChartId="test"
+          dataLegendHeader="Test"
+        />,
+        container,
+      );
+    });
+
+    // Check if the SVG element is rendered
+    const svgElement = container.querySelector('svg');
+    expect(svgElement).toBeInTheDocument();
+
+    // Ensure correct number of pie slices (based on the data length)
+    const paths = svgElement.querySelectorAll('path');
+    expect(paths.length).toBe(2); // since we have 2 data entries (a and b)
+  });
+
+  it('generates the correct number of unique colors', () => {
+    act(() => {
+      render(
+        <PieChart
+          data={{ a: 1, b: 2, c: 3, d: 4 }}
+          dataLegend={{ a: ['A'], b: ['B'], c: ['C'], d: ['D'] }}
+          pieChartId="test"
+          dataLegendHeader="Test"
+        />,
+        container,
+      );
+    });
+
+    // Ensure 4 unique colors are generated (since we have 4 data entries)
+    const legendItems = container.querySelectorAll('.data-legend-color');
+    expect(legendItems.length).toBe(4);
+  });
+
+  it('removes SVG on unmount', () => {
+    act(() => {
+      render(
+        <PieChart
+          data={{ a: 1, b: 2 }}
+          dataLegend={{ a: ['A'], b: ['B'] }}
+          pieChartId="test"
+          dataLegendHeader="Test"
+        />,
+        container,
+      );
+    });
+
+    // Check if the SVG element is present initially
+    expect(container.querySelector('svg')).toBeInTheDocument();
+
+    // Unmount the component
+    act(() => {
+      unmountComponentAtNode(container);
+    });
+
+    // After unmounting, the SVG should be removed
+    expect(container.querySelector('svg')).toBeNull();
+  });
+});

src/components/common/PieChart/colorsGenerator.test.jsx → src/components/common/PieChart/__tests__/colorsGenerator.test.js

@@ -1,4 +1,4 @@
-import { pieChartColors, generateArrayOfUniqColors } from './colorsGenerator'; // Replace 'yourFile' with the actual path to your file
+import { pieChartColors, generateArrayOfUniqColors } from '../colorsGenerator';
 
 describe('pieChartColors', () => {
   test('contains the correct number of colors', () => {
@@ -7,7 +7,7 @@ describe('pieChartColors', () => {
 
   test('contains valid RGB color strings', () => {
     pieChartColors.forEach(color => {
-      expect(color).toMatch(/^rgb\(\d+, \d+, \d+\)$/);
+      expect(color).toMatch(/^rgb\(\d{1,3}, \d{1,3}, \d{1,3}\)$/);
     });
   });
 });
@@ -25,7 +25,7 @@ describe('generateArrayOfUniqColors', () => {
     const result = generateArrayOfUniqColors(numberOfColors);
 
     result.forEach(color => {
-      expect(color).toMatch(/^rgb\(\d+, \d+, \d+\)$/);
+      expect(color).toMatch(/^rgb\(\d{1,3}, \d{1,3}, \d{1,3}\)$/);
     });
   });
 
@@ -35,4 +35,25 @@ describe('generateArrayOfUniqColors', () => {
 
     expect(result).toEqual(pieChartColors.slice(0, numberOfColors));
   });
-});
+
+  test('returns additional unique colors when numberOfColors exceeds the length of pieChartColors', () => {
+    const numberOfColors = 10;
+    const result = generateArrayOfUniqColors(numberOfColors);
+
+    expect(result).toHaveLength(numberOfColors);
+
+    const uniqueSet = new Set(result);
+    expect(uniqueSet.size).toBe(numberOfColors);
+
+    result.forEach(color => {
+      expect(color).toMatch(/^rgb\(\d{1,3}, \d{1,3}, \d{1,3}\)$/);
+    });
+  });
+
+  test('returns an empty array when numberOfColors is 0', () => {
+    const numberOfColors = 0;
+    const result = generateArrayOfUniqColors(numberOfColors);
+
+    expect(result).toEqual([]);
+  });
+});