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

83 lines
2.4 KiB
TypeScript

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