railbird/railbird-gql
10
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Actually respect prettier configuration

Browse Source
This commit is contained in:
Ivan Malison
2024-02-03 20:23:31 -07:00
parent a6883a624a
commit 2276605e6d
37 changed files with 1629 additions and 1497 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
test/component/bar-graph.test.tsx
View File

@@ -1,20 +1,20 @@
import React from 'react';
import { render } from '@testing-library/react-native';
import BarGraph from '../../component/charts/bar-graph/bar-graph';
import { graph_data_two_measures } from '../../mock/charts/mock-data';
import React from "react";
import { render } from "@testing-library/react-native";
import BarGraph from "../../component/charts/bar-graph/bar-graph";
import { graph_data_two_measures } from "../../mock/charts/mock-data";
describe('BarGraph Component Tests', () => {
it('renders correctly with data', () => {
const { getByTestId } = render(<BarGraph data={graph_data_two_measures} testID='1'/>);
expect(getByTestId(`bar-graph-1`)).toBeTruthy();
});
it('does not render without data', () => {
// Have to ts-ignore to test null data conditions
// @ts-ignore
const { queryByTestId } = render(<BarGraph testID='2'/>);
expect(queryByTestId(`bar-graph-2`)).toBeNull();
});
describe("BarGraph Component Tests", () => {
it("renders correctly with data", () => {
const { getByTestId } = render(
<BarGraph data={graph_data_two_measures} testID="1" />,
);
expect(getByTestId(`bar-graph-1`)).toBeTruthy();
});
it("does not render without data", () => {
// Have to ts-ignore to test null data conditions
// @ts-ignore
const { queryByTestId } = render(<BarGraph testID="2" />);
expect(queryByTestId(`bar-graph-2`)).toBeNull();
});
});

62
test/component/chart-label.test.tsx
View File

@@ -1,38 +1,42 @@
import React from 'react';
import { render } from '@testing-library/react-native';
import React from "react";
import { render } from "@testing-library/react-native";
import "@testing-library/jest-native/extend-expect";
import ChartLabel from '../../component/charts/chart-label/chart-label';
import ChartLabel from "../../component/charts/chart-label/chart-label";
describe('ChartLabel Component Tests', () => {
const mockData = {
yLabels: [
{ displayName: 'Shots Taken', axis: 'LEFT' as 'LEFT', color: '#598EBB' },
{ displayName:'Make Percentage', axis: 'RIGHT' as 'RIGHT', color: '#F2D4BC'}
],
title: 'Shots Taken / Make Percentage by Cut Angle'
};
describe("ChartLabel Component Tests", () => {
const mockData = {
yLabels: [
{ displayName: "Shots Taken", axis: "LEFT" as "LEFT", color: "#598EBB" },
{
displayName: "Make Percentage",
axis: "RIGHT" as "RIGHT",
color: "#F2D4BC",
},
],
title: "Shots Taken / Make Percentage by Cut Angle",
};
it('should render the correct labels given yLabels', () => {
const { getByText } = render(
<ChartLabel title={mockData.title} yLabels={mockData.yLabels} />
);
it("should render the correct labels given yLabels", () => {
const { getByText } = render(
<ChartLabel title={mockData.title} yLabels={mockData.yLabels} />,
);
mockData.yLabels.forEach(label => {
expect(getByText(label.displayName)).toBeTruthy();
});
});
mockData.yLabels.forEach((label) => {
expect(getByText(label.displayName)).toBeTruthy();
});
});
it('should render the correct number of label boxes', () => {
const { getAllByText } = render(
<ChartLabel title={mockData.title} yLabels={mockData.yLabels} />
);
it("should render the correct number of label boxes", () => {
const { getAllByText } = render(
<ChartLabel title={mockData.title} yLabels={mockData.yLabels} />,
);
// Assuming displayName is unique and used only for labels
const labelElements = mockData.yLabels.map(label =>
getAllByText(label.displayName)
).flat();
// Assuming displayName is unique and used only for labels
const labelElements = mockData.yLabels
.map((label) => getAllByText(label.displayName))
.flat();
expect(labelElements.length).toBe(mockData.yLabels.length);
});
expect(labelElements.length).toBe(mockData.yLabels.length);
});
});

52
test/component/chart-view.test.tsx
View File

@@ -1,31 +1,31 @@
import React from 'react';
import { Text } from 'react-native'
import { render } from '@testing-library/react-native';
import React from "react";
import { Text } from "react-native";
import { render } from "@testing-library/react-native";
import "@testing-library/jest-native/extend-expect";
import ChartView from '../../component/charts/chart-view';
import ChartView from "../../component/charts/chart-view";
describe('ChartView Component Tests', () => {
it('applies the passed style prop correctly', () => {
const testStyle = { backgroundColor: 'blue', padding: 10 };
const { getByTestId } = render(
<ChartView style={testStyle} testID="chart-view">
<Text>Test Child</Text>
</ChartView>
);
const chartView = getByTestId('chart-view');
expect(chartView.props.style).toEqual(expect.arrayContaining([testStyle]));
});
describe("ChartView Component Tests", () => {
it("applies the passed style prop correctly", () => {
const testStyle = { backgroundColor: "blue", padding: 10 };
const { getByTestId } = render(
<ChartView style={testStyle} testID="chart-view">
<Text>Test Child</Text>
</ChartView>,
);
it('renders children correctly', () => {
const { getByText } = render(
<ChartView>
<Text testID="child-text">Child Component</Text>
</ChartView>
);
const chartView = getByTestId("chart-view");
expect(chartView.props.style).toEqual(expect.arrayContaining([testStyle]));
});
const childText = getByText('Child Component');
expect(childText).toBeTruthy();
});
});
it("renders children correctly", () => {
const { getByText } = render(
<ChartView>
<Text testID="child-text">Child Component</Text>
</ChartView>,
);
const childText = getByText("Child Component");
expect(childText).toBeTruthy();
});
});

148
test/component/custom-bars.test.tsx
View File

@@ -1,89 +1,97 @@
import React from 'react';
import { render } from '@testing-library/react-native';
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/charts/custom-bars';
import { calculateBarOrigin, drawBarPath } from '../../component/charts/custom-bar-utils';
import * as scale from "d3-scale";
import { CustomBars } from "../../component/charts/custom-bars";
import {
calculateBarOrigin,
drawBarPath,
} from "../../component/charts/custom-bar-utils";
const mockYScaleFunction = scale.scaleLinear();
const mockXScaleFunction = scale.scaleBand();
const mockBandwidth = 100;
const mockCombinedData = [
{
data: [{ value: 10 }, { value: 20 }],
svg: { fill: 'red' },
},
{
data: [{ value: 10 }, { value: 20 }],
svg: { fill: "red" },
},
];
const mockRawData = [
{ label: 'Full ball', shotsTaken: 10, makePercentage: 20 },
{ label: "Full ball", shotsTaken: 10, makePercentage: 20 },
];
const mockBarColors = ['red', 'blue'];
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}
barData={mockCombinedData}
xValues={mockRawData}
barColors={mockBarColors}
gap={mockGap}
roundedRadius={mockRoundedRadius}
/>
);
describe("CustomBars Component Tests", () => {
it("should render correct number of Svg and Bar components", () => {
const { getAllByTestId } = render(
<CustomBars
x={mockXScaleFunction}
y={mockYScaleFunction}
bandwidth={mockBandwidth}
barData={mockCombinedData}
xValues={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);
});
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('calculateBarOrigin', () => {
it('calculates properties correctly', () => {
const mockData = { value: 10 };
const mockIndex = 1;
const mockBarNumber = 2;
const mockBarWidth = 20;
const mockGap = 5;
describe("Bar utility functions", () => {
describe("calculateBarOrigin", () => {
it("calculates properties correctly", () => {
const mockData = { value: 10 };
const mockIndex = 1;
const mockBarNumber = 2;
const mockBarWidth = 20;
const mockGap = 5;
const result = calculateBarOrigin({
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)
});
});
});
const result = calculateBarOrigin({
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);
const expectedPath = 'M50,160L50,110A10,10,0,0,1,60,100L60,100A10,10,0,0,1,70,110L70,160L50,160Z'
describe("drawBarPath", () => {
it("generates a correct SVG path string", () => {
const xOrigin = 50;
const yOrigin = 100;
const barWidth = 20;
const height = 60;
const roundedRadius = 10;
expect(path).toBe(expectedPath);
});
});
});
const path = drawBarPath(
xOrigin,
yOrigin,
barWidth,
height,
roundedRadius,
);
const expectedPath =
"M50,160L50,110A10,10,0,0,1,60,100L60,100A10,10,0,0,1,70,110L70,160L50,160Z";
expect(path).toBe(expectedPath);
});
});
});

35
test/component/line-graph.test.tsx
View File

@@ -1,21 +1,20 @@
import React from 'react';
import { render } from '@testing-library/react-native';
import LineGraph from '../../component/charts/line-graph/line-graph';
import { line_chart_two_y_data } from '../../mock/charts/mock-data';
import React from "react";
import { render } from "@testing-library/react-native";
import LineGraph from "../../component/charts/line-graph/line-graph";
import { line_chart_two_y_data } from "../../mock/charts/mock-data";
describe('LineGraph Component Tests', () => {
it('renders correctly with data', () => {
const { getByTestId } = render(<LineGraph data={line_chart_two_y_data} testID='1'/>);
expect(getByTestId(`line-graph-1`)).toBeTruthy();
});
it('does not render without data', () => {
// Have to ts-ignore to test null data conditions
// @ts-ignore
const { queryByTestId } = render(<LineGraph testID='2'/>);
expect(queryByTestId(`line-graph-2`)).toBeNull();
});
describe("LineGraph Component Tests", () => {
it("renders correctly with data", () => {
const { getByTestId } = render(
<LineGraph data={line_chart_two_y_data} testID="1" />,
);
expect(getByTestId(`line-graph-1`)).toBeTruthy();
});
it("does not render without data", () => {
// Have to ts-ignore to test null data conditions
// @ts-ignore
const { queryByTestId } = render(<LineGraph testID="2" />);
expect(queryByTestId(`line-graph-2`)).toBeNull();
});
});

114
test/component/use-graph-data.test.tsx
View File

@@ -1,58 +1,66 @@
import { renderHook } from '@testing-library/react-native';
import { useGraphData } from '../../component/charts/use-graph-data';
import { GraphData, GraphProps } from '../../component/charts/graph-types';
import { renderHook } from "@testing-library/react-native";
import { useGraphData } from "../../component/charts/use-graph-data";
import { GraphData, GraphProps } from "../../component/charts/graph-types";
describe('useGraphData', () => {
it('should return correctly processed data from convertToGraphData', () => {
// mock values
const mockGraphData: GraphData = {
xValues: ['full hit', '3/4 ball ball', '1/2 ball'],
yValues: [
{ key: 'left', values: [10, 20, 30] },
{ key: 'right', values: [40, 50, 60] }
]
};
describe("useGraphData", () => {
it("should return correctly processed data from convertToGraphData", () => {
// mock values
const mockGraphData: GraphData = {
xValues: ["full hit", "3/4 ball ball", "1/2 ball"],
yValues: [
{ key: "left", values: [10, 20, 30] },
{ key: "right", values: [40, 50, 60] },
],
};
const mockProps: Partial<GraphProps> = {
yAxisProps: {
maxLeftYAxisValue: 30,
maxRightYAxisValue: 60,
selectedLeftYAxisLabel: 'left',
selectedRightYAxisLabel: 'right',
formatRightYAxisLabel: (value) => `${value}%`,
formatLeftYAxisLabel: (value) => `${value}%`
}
};
const mockProps: Partial<GraphProps> = {
yAxisProps: {
maxLeftYAxisValue: 30,
maxRightYAxisValue: 60,
selectedLeftYAxisLabel: "left",
selectedRightYAxisLabel: "right",
formatRightYAxisLabel: (value) => `${value}%`,
formatLeftYAxisLabel: (value) => `${value}%`,
},
};
const { result } = renderHook(() => useGraphData(mockGraphData, mockProps));
// values expected
const expectedYData = [
{
data: [{ value: 33.33 }, { value: 66.67 }, { value: 100 }],
svg: { fill: "transparent" },
},
{
data: [{ value: 66.67 }, { value: 83.33 }, { value: 100 }],
svg: { fill: "transparent" },
},
];
const expectedLeftLabels = { key: "left", values: [10, 20, 30] };
const expectedRightLabels = { key: "right", values: [40, 50, 60] };
const { result } = renderHook(() => useGraphData(mockGraphData, mockProps));
// values expected
const expectedYData = [
{
data: [{ value: 33.33 }, { value: 66.67 }, { value: 100 }],
svg: { fill: 'transparent' },
},
{
data: [{ value: 66.67 }, { value: 83.33 }, { value: 100 }],
svg: { fill: 'transparent' },
},
];
const expectedLeftLabels = { key: 'left', values: [10, 20, 30] };
const expectedRightLabels = { key: 'right', values: [40, 50, 60] };
expect(result.current).toBeDefined();
expect(result.current.xValues).toEqual(['full hit', '3/4 ball ball', '1/2 ball']);
result.current.yData.forEach((yDataItem, index) => {
yDataItem.data.forEach((dataItem, dataIndex) => {
expect(dataItem.value).toBeCloseTo(expectedYData[index].data[dataIndex].value, 2);
});
});
expect(result.current.yAxisLeftLabels).toEqual(expectedLeftLabels);
expect(result.current.yAxisRightLabels).toEqual(expectedRightLabels);
expect(result.current.defaultProps.yAxisProps.selectedLeftYAxisLabel).toEqual('left');
expect(result.current.defaultProps.yAxisProps.selectedRightYAxisLabel).toEqual('right');
expect(result.current.defaultProps).toBeDefined();
});
expect(result.current).toBeDefined();
expect(result.current.xValues).toEqual([
"full hit",
"3/4 ball ball",
"1/2 ball",
]);
result.current.yData.forEach((yDataItem, index) => {
yDataItem.data.forEach((dataItem, dataIndex) => {
expect(dataItem.value).toBeCloseTo(
expectedYData[index].data[dataIndex].value,
2,
);
});
});
expect(result.current.yAxisLeftLabels).toEqual(expectedLeftLabels);
expect(result.current.yAxisRightLabels).toEqual(expectedRightLabels);
expect(
result.current.defaultProps.yAxisProps.selectedLeftYAxisLabel,
).toEqual("left");
expect(
result.current.defaultProps.yAxisProps.selectedRightYAxisLabel,
).toEqual("right");
expect(result.current.defaultProps).toBeDefined();
});
});