98 lines
2.4 KiB
TypeScript
98 lines
2.4 KiB
TypeScript
import "@testing-library/jest-native/extend-expect";
|
|
import { render } from "@testing-library/react-native";
|
|
import * as scale from "d3-scale";
|
|
import React from "react";
|
|
|
|
import {
|
|
calculateBarOrigin,
|
|
drawBarPath,
|
|
} from "../../src/component/charts/custom-bar-utils";
|
|
import { CustomBars } from "../../src/component/charts/custom-bars";
|
|
|
|
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", () => {
|
|
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);
|
|
});
|
|
});
|
|
|
|
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),
|
|
});
|
|
});
|
|
});
|
|
|
|
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";
|
|
|
|
expect(path).toBe(expectedPath);
|
|
});
|
|
});
|
|
});
|