railbird-gql/test/component/custom-bars.test.tsx

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', () => {
  it('should render correct number of Svg and Bar components', () => {
    const { getAllByTestId } = render(
      <CustomBars
        x={mockXScaleFunction}
        y={mockYScaleFunction}
        bandwidth={mockBandwidth}
        combinedData={mockCombinedData}
        rawData={mockRawData}
        barColors={mockBarColors}
        gap={mockGap}
        roundedRadius={mockRoundedRadius}
      />
    );

    const svgs = getAllByTestId(/svg-/);
    const bars = getAllByTestId(/bar-/);

    expect(svgs.length).toBe(mockRawData.length);
    expect(bars.length).toBe(mockCombinedData.length * mockRawData.length);
  });

});

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 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);
    });
  });
});