add tests for helper functions on bar

This commit is contained in:
Loewy 2024-01-10 16:34:27 -08:00
parent 4dda9eb24c
commit 6c7ceb3eb3
4 changed files with 68 additions and 61 deletions

View File

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

View File

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

View File

@ -14,7 +14,7 @@
"jest": { "jest": {
"preset": "jest-expo", "preset": "jest-expo",
"transformIgnorePatterns": [ "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": { "dependencies": {

View File

@ -1,32 +1,33 @@
import React from 'react'; import React from 'react';
import { render } from '@testing-library/react-native'; import { render } from '@testing-library/react-native';
import "@testing-library/jest-native/extend-expect"; import "@testing-library/jest-native/extend-expect";
import * as scale from 'd3-scale'
import { CustomBars } from '../../component/custom-bars'; 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', () => { 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', () => { it('should render correct number of Svg and Bar components', () => {
const { getAllByTestId } = render( const { getAllByTestId } = render(
<CustomBars <CustomBars
x={mockScaleFunction} x={mockXScaleFunction}
y={mockScaleFunction} y={mockYScaleFunction}
bandwidth={mockBandwidth} bandwidth={mockBandwidth}
combinedData={mockCombinedData} combinedData={mockCombinedData}
rawData={mockRawData} rawData={mockRawData}
@ -39,45 +40,51 @@ describe('CustomBars Component Tests', () => {
const svgs = getAllByTestId(/svg-/); const svgs = getAllByTestId(/svg-/);
const bars = getAllByTestId(/bar-/); const bars = getAllByTestId(/bar-/);
expect(svgs.length).toHaveLength(mockRawData.length); expect(svgs.length).toBe(mockRawData.length);
expect(bars.length).toHaveLength(mockCombinedData.length * 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 describe('Bar utility functions', () => {
bars.forEach((bar) => { describe('calculateBarProps', () => {
// Extract indices from the testID it('calculates properties correctly', () => {
const testId = bar.props.testID; const mockData = { value: 10 };
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars const mockIndex = 1;
const [_, barNumber, index] = testId.split('-').map(Number); const mockBarNumber = 2;
const mockBarWidth = 20;
const mockGap = 5;
const item = mockCombinedData[barNumber]; const result = calculateBarProps({
const data = item.data[index]; scaleX: mockXScaleFunction,
scaleY: mockYScaleFunction,
expect(bar.props).toEqual({ data: mockData,
scaleX: mockScaleFunction, index: mockIndex,
scaleY: mockScaleFunction, barNumber: mockBarNumber,
data: data, barWidth: mockBarWidth,
barNumber: barNumber, gap: mockGap
index: index, });
fill: mockBarColors[barNumber], expect(result).toEqual({
barWidth: expect.any(Number), xOrigin: expect.any(Number),
gap: mockGap, yOrigin: expect.any(Number),
roundedRadius: mockRoundedRadius, 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);
});
});
}); });