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

67 lines
2.0 KiB
TypeScript

import { renderHook } from "@testing-library/react-native";
import { GraphData, GraphProps } from "../../component/charts/graph-types";
import { useGraphData } from "../../component/charts/use-graph-data";
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 { 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();
});
});