railbird-gql/test/component/custom-bars.test.tsx

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";

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);
		});
	});
});