add tests for helper functions on bar
This commit is contained in:
parent
4dda9eb24c
commit
6c7ceb3eb3
@ -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}`}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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,
|
||||||
|
@ -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": {
|
||||||
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
Loading…
Reference in New Issue
Block a user