From 4086fe4ce15dbd49910e0216cd53c63058031db9 Mon Sep 17 00:00:00 2001
From: robertcrockett <robertwcrockett@hotmail.com>
Date: Mon, 7 Apr 2025 19:46:38 -0400
Subject: [PATCH] Fix Jest errors from stylesheet implementation

---
 src/components/Cell.jsx      |  2 +-
 src/components/Cell.test.jsx | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Cell.jsx b/src/components/Cell.jsx
index 5af3fd8..865e13a 100644
--- a/src/components/Cell.jsx
+++ b/src/components/Cell.jsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 import PropTypes from "prop-types";
-import "../styles/Cell.css";
+import "../index.css";
 
 /**
  * Cell Component
diff --git a/src/components/Cell.test.jsx b/src/components/Cell.test.jsx
index b4be371..a331931 100644
--- a/src/components/Cell.test.jsx
+++ b/src/components/Cell.test.jsx
@@ -19,8 +19,8 @@ describe("Renders the Cell component when unselected", () => {
 
     const cellButton = screen.getByRole("button");
     expect(cellButton).toBeTypeOf("object");
-    expect(cellButton.style.backgroundColor).toBe("white");
-    expect(cellButton.style.width).toBe("20%");
+    expect(cellButton).toHaveClass("unselected");
+    expect(cellButton).toHaveClass("cell");
   });
 });
 
@@ -37,8 +37,8 @@ describe("Renders the Cell component when it is part of challenge", () => {
 
     const cellButton = screen.getByRole("button");
     expect(cellButton).toBeTypeOf("object");
-    expect(cellButton.style.backgroundColor).toBe("lightblue");
-    expect(cellButton.style.width).toBe("20%");
+    expect(cellButton).toHaveClass("blue");
+    expect(cellButton).toHaveClass("cell");
   });
 });
 
@@ -55,8 +55,8 @@ describe("Renders the Cell component when correctly selected", () => {
 
     const cellButton = screen.getByRole("button");
     expect(cellButton).toBeTypeOf("object");
-    expect(cellButton.style.backgroundColor).toBe("lightgreen");
-    expect(cellButton.style.width).toBe("20%");
+    expect(cellButton).toHaveClass("correct");
+    expect(cellButton).toHaveClass("cell");
   });
 });
 
@@ -73,8 +73,8 @@ describe("Renders the Cell component when incorrectly selected", () => {
 
     const cellButton = screen.getByRole("button");
     expect(cellButton).toBeTypeOf("object");
-    expect(cellButton.style.backgroundColor).toBe("lightcoral");
-    expect(cellButton.style.width).toBe("20%");
+    expect(cellButton).toHaveClass("incorrect");
+    expect(cellButton).toHaveClass("cell");
   });
 });
 
@@ -91,8 +91,8 @@ describe("Renders the Cell component after a click event", () => {
 
     const cellButton = screen.getByTestId("cell");
     expect(cellButton).toBeTypeOf("object");
-    expect(cellButton.style.backgroundColor).toBe("white");
-    expect(cellButton.style.width).toBe("20%");
+    expect(cellButton).toHaveClass("unselected");
+    expect(cellButton).toHaveClass("cell");
 
     // Create a spy on the cell click event
     const cellClickSpy = vi.spyOn(cellButton, "click");