railbird-gql/test/component/use-graph-data.test.tsx

import { renderHook } from "@testing-library/react-native";
import { GraphProps, XYValues } from "../../src/component/charts/graph-types";
import {
	computeYAxisConfig,
	useGraphData,
} from "../../src/component/charts/use-graph-data";

describe("useGraphData", () => {
	it("should return correctly processed data from convertToGraphData", () => {
		// mock values
		const mockGraphData: XYValues = {
			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 yAxisProps = computeYAxisConfig(
			mockGraphData,
			mockProps.yAxisProps || {},
		);

		const { result } = renderHook(() =>
			useGraphData(mockGraphData, yAxisProps, 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);
	});
});