add custom-grid and associated files + test - test needs plugin config to work with d3-path and jest

test/component/custom-bars.test.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import "@testing-library/jest-native/extend-expect";
+
+import { CustomBars } from '../../component/custom-bars';
+
+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}
+        bandwidth={mockBandwidth}
+        combinedData={mockCombinedData}
+        rawData={mockRawData}
+        barColors={mockBarColors}
+        gap={mockGap}
+        roundedRadius={mockRoundedRadius}
+      />
+    );
+
+    const svgs = getAllByTestId(/svg-/);
+    const bars = getAllByTestId(/bar-/);
+
+    expect(svgs.length).toHaveLength(mockRawData.length);
+    expect(bars.length).toHaveLength(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);
+  
+      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,
+      });
+    });
+  });
+});