fix: added Test as well

Author: biomathcode

src/Odontogram.tsx

@@ -229,15 +229,15 @@ export const Odontogram: FC<OdontogramProps> = ({
 	const themeColors =
 		theme === "dark"
 			? {
-				"--dark-blue": "#aab6ff",
-				"--base-blue": "#d0d5f6",
-				"--light-blue": "#5361e6",
-			}
+					"--dark-blue": "#aab6ff",
+					"--base-blue": "#d0d5f6",
+					"--light-blue": "#5361e6",
+				}
 			: {
-				"--dark-blue": "#3e5edc",
-				"--base-blue": "#8a98be",
-				"--light-blue": "#c6ccf8",
-			};
+					"--dark-blue": "#3e5edc",
+					"--base-blue": "#8a98be",
+					"--light-blue": "#c6ccf8",
+				};
 
 	const [selected, setSelected] = useState<Set<string>>(
 		new Set(defaultSelected),
@@ -292,31 +292,31 @@ export const Odontogram: FC<OdontogramProps> = ({
 		label: string;
 		position: { x: number; y: number };
 	}> = [
-			{
-				name: "first",
-				transform: "",
-				label: "Upper Right",
-				position: { x: 100, y: 30 },
-			},
-			{
-				name: "second",
-				transform: "scale(-1, 1) translate(-409, 0)",
-				label: "Upper Left",
-				position: { x: 309, y: 30 },
-			},
-			{
-				name: "third",
-				transform: "scale(1, -1) translate(0, -694)",
-				label: "Lower Right",
-				position: { x: 100, y: 664 },
-			},
-			{
-				name: "fourth",
-				transform: "scale(-1, -1) translate(-409, -694)",
-				label: "Lower Left",
-				position: { x: 309, y: 664 },
-			},
-		];
+		{
+			name: "first",
+			transform: "",
+			label: "Upper Right",
+			position: { x: 100, y: 30 },
+		},
+		{
+			name: "second",
+			transform: "scale(-1, 1) translate(-409, 0)",
+			label: "Upper Left",
+			position: { x: 309, y: 30 },
+		},
+		{
+			name: "third",
+			transform: "scale(1, -1) translate(0, -694)",
+			label: "Lower Right",
+			position: { x: 100, y: 664 },
+		},
+		{
+			name: "fourth",
+			transform: "scale(-1, -1) translate(-409, -694)",
+			label: "Lower Left",
+			position: { x: 309, y: 664 },
+		},
+	];
 
 	let visibleQuadrants = quadrants;
 	if (showHalf === "upper") {

tests/Odontogram.test.tsx

@@ -0,0 +1,69 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import Odontogram from "../src/Odontogram";
+
+describe("Odontogram Component Snapshots", () => {
+    it("renders full odontogram correctly", () => {
+        const { container } = render(
+            <Odontogram
+                theme="light"
+                colors={{
+                    darkBlue: "#0000ff",
+                    baseBlue: "#8888ff",
+                    lightBlue: "#ccccff",
+                }}
+                showHalf="full"
+            />
+        );
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders upper half odontogram", () => {
+        const { container } = render(
+            <Odontogram
+                theme="light"
+                colors={{
+                    darkBlue: "#0000ff",
+                    baseBlue: "#8888ff",
+                    lightBlue: "#ccccff",
+                }}
+                showHalf="upper"
+            />
+        );
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders lower half odontogram", () => {
+        const { container } = render(
+            <Odontogram
+                theme="light"
+                colors={{
+                    darkBlue: "#0000ff",
+                    baseBlue: "#8888ff",
+                    lightBlue: "#ccccff",
+                }}
+                showHalf="lower"
+            />
+        );
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders dark theme correctly", () => {
+        const { container } = render(
+            <Odontogram
+                theme="dark"
+                colors={{
+                    darkBlue: "#222222",
+                    baseBlue: "#444444",
+                    lightBlue: "#666666",
+                }}
+                showHalf="full"
+            />
+        );
+
+        expect(container).toMatchSnapshot();
+    });
+});