add tests for helper functions on bar

component/bar.tsx

@@ -39,10 +39,10 @@ export const Bar: React.FC<BarProps> = ({
 
   return (
     <Path
-    key={`bar-${barNumber}-${index}`}
-    d={drawBarPath(xOrigin, yOrigin, barWidth, height, roundedRadius)}
-    fill={fill}
-    testID={`bar-${barNumber}-${index}`}
+      key={`bar-path-${barNumber}-${index}`}
+      d={drawBarPath(xOrigin, yOrigin, barWidth, height, roundedRadius)}
+      fill={fill}
+      testID={`bar-${barNumber}-${index}`}
     />
   );
 };

component/custom-bars.tsx

@@ -21,7 +21,7 @@ interface CustomBarsProps {
   roundedRadius: number;
 }
 
-export const CustomBars: React.FC<Partial<CustomBarsProps>> = ({
+export const CustomBars: React.FC<CustomBarsProps> = ({
   x: scaleX,
   y: scaleY,
   bandwidth,

package.json

@@ -14,7 +14,7 @@
     "jest": {
         "preset": "jest-expo",
         "transformIgnorePatterns": [
-            "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
+            "node_modules/(?!((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|d3-path)/)"
         ]
     },
     "dependencies": {

test/component/custom-bars.test.tsx

@@ -1,32 +1,33 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 import "@testing-library/jest-native/extend-expect";
+import * as scale from 'd3-scale'
 
 import { CustomBars } from '../../component/custom-bars';
+import { calculateBarProps, drawBarPath } from '../../component/custom-bar-utils';
 
+
+const mockYScaleFunction = scale.scaleLinear();
+const mockXScaleFunction = scale.scaleBand();
+const mockBandwidth = 100;
+const mockCombinedData = [
+  {
+    data: [{ value: 10 }, { value: 20 }],
+    svg: { fill: 'red' },
+  },
+];
+const mockRawData = [
+  { label: 'Full ball', shotsTaken: 10, makePercentage: 20 },
+];
+const mockBarColors = ['red', 'blue'];
+const mockGap = 2;
+const mockRoundedRadius = 4;
 describe('CustomBars Component Tests', () => {
-  const mockScaleFunction = jest.fn();
-  const mockCombinedData = [
-    {
-      data: [{ value: 10 }],
-      svg: { fill: 'red' },
-    },
-    {
-      data: [{ value: 20 }],
-      svg: { fill: 'blue' },
-    },
-  ];
-  const mockRawData = [{}, {}];
-  const mockBarColors = ['red', 'blue'];
-  const mockBandwidth = 100;
-  const mockGap = 2;
-  const mockRoundedRadius = 4;
-
   it('should render correct number of Svg and Bar components', () => {
     const { getAllByTestId } = render(
       <CustomBars
-        x={mockScaleFunction}
-        y={mockScaleFunction}
+        x={mockXScaleFunction}
+        y={mockYScaleFunction}
         bandwidth={mockBandwidth}
         combinedData={mockCombinedData}
         rawData={mockRawData}
@@ -39,45 +40,51 @@ describe('CustomBars Component Tests', () => {
     const svgs = getAllByTestId(/svg-/);
     const bars = getAllByTestId(/bar-/);
 
-    expect(svgs.length).toHaveLength(mockRawData.length);
-    expect(bars.length).toHaveLength(mockCombinedData.length * mockRawData.length);
+    expect(svgs.length).toBe(mockRawData.length);
+    expect(bars.length).toBe(mockCombinedData.length * mockRawData.length);
   });
 
-  it('should pass correct props to Bar components', () => {
-    const { getAllByTestId } = render(
-      <CustomBars
-        x={mockScaleFunction}
-        y={mockScaleFunction}
-        bandwidth={mockBandwidth}
-        combinedData={mockCombinedData}
-        rawData={mockRawData}
-        barColors={mockBarColors}
-        gap={mockGap}
-        roundedRadius={mockRoundedRadius}
-      />
-    );
+});
 
-    const bars = getAllByTestId(/bar-/);  // Regex pattern to match testIDs of Bar components
-    bars.forEach((bar) => {
-      // Extract indices from the testID
-      const testId = bar.props.testID;
-      // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-      const [_, barNumber, index] = testId.split('-').map(Number);
+describe('Bar utility functions', () => {
+  describe('calculateBarProps', () => {
+    it('calculates properties correctly', () => {
+      const mockData = { value: 10 };
+      const mockIndex = 1;
+      const mockBarNumber = 2;
+      const mockBarWidth = 20;
+      const mockGap = 5;
 
-      const item = mockCombinedData[barNumber];
-      const data = item.data[index];
-  
-      expect(bar.props).toEqual({
-        scaleX: mockScaleFunction,
-        scaleY: mockScaleFunction,
-        data: data,
-        barNumber: barNumber,
-        index: index,
-        fill: mockBarColors[barNumber],
-        barWidth: expect.any(Number),
-        gap: mockGap,
-        roundedRadius: mockRoundedRadius,
+      const result = calculateBarProps({
+        scaleX: mockXScaleFunction,
+        scaleY: mockYScaleFunction,
+        data: mockData,
+        index: mockIndex,
+        barNumber: mockBarNumber,
+        barWidth: mockBarWidth,
+        gap: mockGap
+      });
+      expect(result).toEqual({
+        xOrigin: expect.any(Number),
+        yOrigin: expect.any(Number),
+        height: expect.any(Number)
       });
     });
   });
+
+  describe('drawBarPath', () => {
+    it('generates a correct SVG path string', () => {
+      const xOrigin = 50;
+      const yOrigin = 100;
+      const barWidth = 20;
+      const height = 60;
+      const roundedRadius = 10;
+      
+      const path = drawBarPath(xOrigin, yOrigin, barWidth, height, roundedRadius);
+
+      expect(typeof path).toBe('string');
+      const regexPattern = /M.*,.*L.*,.*A.*,.*,.*,.*,.*,.*,.*L.*,.*A.*,.*,.*,.*,.*,.*,.*L.*,.*L.*,.*Z/;
+      expect(path).toMatch(regexPattern);
+    });
+  });
 });