update test to be for the container rather than component

src/component/charts/container/chart-container.tsx

@@ -54,7 +54,7 @@ const ChartContainer: React.FC<ChartContainerProps> = ({
 		<ChartView>
 			<View
 				style={[graphStyles.rowContainer, { height: height }]}
-				testID={`line-graph-${testID}`}
+				testID={`chart-container-${testID}`}
 			>
 				<YAxis
 					data={yAxisLeftLabels.values}

test/component/chart-container.test.tsx

@@ -0,0 +1,24 @@
+import { render } from "@testing-library/react-native";
+import React from "react";
+import ChartContainer from "../../src/component/charts/container/chart-container";
+import LineGraph from "../../src/component/charts/line-graph/line-graph";
+import { line_chart_two_y_data } from "../mock/charts/mock-data";
+describe("ChartContainer Component Tests", () => {
+	it("renders correctly with data -- line graph", () => {
+		const { getByTestId } = render(
+			<ChartContainer
+				data={line_chart_two_y_data}
+				testID="1"
+				ChartComponent={LineGraph}
+			/>,
+		);
+		expect(getByTestId(`chart-container-1`)).toBeTruthy();
+	});
+
+	it("does not render without data props", () => {
+		// Have to ts-ignore to test null data conditions
+		// @ts-ignore
+		const { queryByTestId } = render(<ChartContainer testID="2" />);
+		expect(queryByTestId(`chart-container-2`)).toBeNull();
+	});
+});

test/component/line-graph.test.tsx

@@ -1,20 +0,0 @@
-import { render } from "@testing-library/react-native";
-import React from "react";
-import LineGraph from "../../src/component/charts/line-graph/line-graph";
-import { line_chart_two_y_data } from "../mock/charts/mock-data";
-
-describe("LineGraph Component Tests", () => {
-	it("renders correctly with data", () => {
-		const { getByTestId } = render(
-			<LineGraph data={line_chart_two_y_data} testID="1" />,
-		);
-		expect(getByTestId(`line-graph-1`)).toBeTruthy();
-	});
-
-	it("does not render without data", () => {
-		// Have to ts-ignore to test null data conditions
-		// @ts-ignore
-		const { queryByTestId } = render(<LineGraph testID="2" />);
-		expect(queryByTestId(`line-graph-2`)).toBeNull();
-	});
-});

test/mock/charts/mock-data.ts

@@ -62,3 +62,38 @@ export const line_chart_two_y_data = {
 		},
 	],
 };
+
+export const mockYData = [
+	{
+		data: [
+			{ value: 71.42857142857143 },
+			{ value: 100 },
+			{ value: 64.28571428571429 },
+			{ value: 57.14285714285714 },
+			{ value: 28.57142857142857 },
+			{ value: 14.285714285714285 },
+			{ value: 50 },
+			{ value: 14.285714285714285 },
+			{ value: 21.428571428571427 },
+			{ value: 21.428571428571427 },
+		],
+		svg: { fill: "transparent", stroke: "#598EBB" },
+	},
+	{
+		data: [
+			{ value: 27.77777777777778 },
+			{ value: 37.22222222222222 },
+			{ value: 68.33333333333333 },
+			{ value: 77.77777777777779 },
+			{ value: 86.66666666666667 },
+			{ value: 81.66666666666667 },
+			{ value: 70 },
+			{ value: 100 },
+			{ value: 68.33333333333333 },
+			{ value: 48.333333333333336 },
+		],
+		svg: { fill: "transparent", stroke: "#F2D4BC" },
+	},
+];
+
+export const mockXValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];