From 4e7046bd28290938e4ead200b149d4f2b9a85867 Mon Sep 17 00:00:00 2001
From: Loewy <loewy@chainstarters.com>
Date: Tue, 13 Feb 2024 14:10:05 -0800
Subject: [PATCH] update test to be for the container rather than component

---
 .../charts/container/chart-container.tsx      |  2 +-
 test/component/chart-container.test.tsx       | 24 +++++++++++++
 test/component/line-graph.test.tsx            | 20 -----------
 test/mock/charts/mock-data.ts                 | 35 +++++++++++++++++++
 4 files changed, 60 insertions(+), 21 deletions(-)
 create mode 100644 test/component/chart-container.test.tsx
 delete mode 100644 test/component/line-graph.test.tsx

diff --git a/src/component/charts/container/chart-container.tsx b/src/component/charts/container/chart-container.tsx
index 096405f..3b62f53 100644
--- a/src/component/charts/container/chart-container.tsx
+++ b/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}
diff --git a/test/component/chart-container.test.tsx b/test/component/chart-container.test.tsx
new file mode 100644
index 0000000..3b62ef1
--- /dev/null
+++ b/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();
+	});
+});
diff --git a/test/component/line-graph.test.tsx b/test/component/line-graph.test.tsx
deleted file mode 100644
index 5c1e745..0000000
--- a/test/component/line-graph.test.tsx
+++ /dev/null
@@ -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();
-	});
-});
diff --git a/test/mock/charts/mock-data.ts b/test/mock/charts/mock-data.ts
index 94800a3..3a7e472 100644
--- a/test/mock/charts/mock-data.ts
+++ b/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];