railbird-gql/test/component/chart-label.test.tsx

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

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

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

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