From 6c7ceb3eb39aa7a3b73826a8f62898dee99521e1 Mon Sep 17 00:00:00 2001 From: Loewy Date: Wed, 10 Jan 2024 16:34:27 -0800 Subject: [PATCH] add tests for helper functions on bar --- component/bar.tsx | 8 +- component/custom-bars.tsx | 2 +- package.json | 2 +- test/component/custom-bars.test.tsx | 117 +++++++++++++++------------- 4 files changed, 68 insertions(+), 61 deletions(-) diff --git a/component/bar.tsx b/component/bar.tsx index 716e3ad..79928fd 100644 --- a/component/bar.tsx +++ b/component/bar.tsx @@ -39,10 +39,10 @@ export const Bar: React.FC = ({ return ( ); }; diff --git a/component/custom-bars.tsx b/component/custom-bars.tsx index 5ffd759..4733832 100644 --- a/component/custom-bars.tsx +++ b/component/custom-bars.tsx @@ -21,7 +21,7 @@ interface CustomBarsProps { roundedRadius: number; } -export const CustomBars: React.FC> = ({ +export const CustomBars: React.FC = ({ x: scaleX, y: scaleY, bandwidth, diff --git a/package.json b/package.json index bbbe62f..831368d 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "jest": { "preset": "jest-expo", "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": { diff --git a/test/component/custom-bars.test.tsx b/test/component/custom-bars.test.tsx index 9798ba0..1b2fbb3 100644 --- a/test/component/custom-bars.test.tsx +++ b/test/component/custom-bars.test.tsx @@ -1,32 +1,33 @@ 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', () => { - 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( { const svgs = getAllByTestId(/svg-/); const bars = getAllByTestId(/bar-/); - expect(svgs.length).toHaveLength(mockRawData.length); - expect(bars.length).toHaveLength(mockCombinedData.length * mockRawData.length); + expect(svgs.length).toBe(mockRawData.length); + expect(bars.length).toBe(mockCombinedData.length * mockRawData.length); }); - it('should pass correct props to Bar components', () => { - const { getAllByTestId } = render( - - ); - - 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, +}); + +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); + }); + }); }); \ No newline at end of file