Add tests for clicks

src/App.test.tsx

@@ -1,9 +1,63 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import App from "./App";
+import { act } from "react-dom/test-utils";
 
 test("Renders", () => {
   render(<App />);
   const linkElement = screen.getAllByText(/None/i);
   expect(linkElement[0]).toBeInTheDocument();
 });
+
+test("Clicking on an option changes the displayed piece", () => {
+  // const { container } = render(<App />);
+  render(<App />);
+
+  const radio = screen.getAllByRole('radio');
+
+  console.log(radio)
+
+  act(() => {
+    radio[0].click();
+  });
+  let pieceDisplay = screen.getByRole("none");
+  let style = getComputedStyle(pieceDisplay).backgroundColor;
+
+  expect(style).toEqual("yellow");
+
+  act(() => {
+    radio[1].click();
+  });
+  pieceDisplay = screen.getByRole("none");
+  style = getComputedStyle(pieceDisplay).backgroundColor;
+  expect(style).toEqual("violet");
+
+  act(() => {
+    radio[2].click();
+  });
+  pieceDisplay = screen.getByRole("none");
+  style = getComputedStyle(pieceDisplay).backgroundColor;
+  expect(style).toEqual("grey");
+});
+
+test("Clicking on a node should change it", () => {
+  render(<App />);
+
+  const table = screen.getAllByRole("btn");
+
+  for (let i = 0; i < table.length; i++) {
+    const item = table[i];
+
+    let style = getComputedStyle(item).backgroundColor;
+
+    expect(style).toEqual("red");
+
+    act(() => {
+      item.click();
+    });
+
+    style = getComputedStyle(item).backgroundColor;
+
+    expect(style).toEqual("green");
+  }
+});

src/App.tsx

@@ -18,6 +18,7 @@ function ConeOrCube(props: { piece: cubeOrCone }): JSX.Element {
   return (
     <div
       className="coneOrCube"
+      role="none"
       style={{
         backgroundColor:
           piece === "None" ? "grey" : piece === "Cube" ? "violet" : "yellow",
@@ -42,31 +43,34 @@ function Table(props: {
 
   return (
     <table className="table">
-      {[0, 1, 2].map(function (key, row) {
-        return (
-          <tr key={key}>
-            {table[row].map(function (item, key) {
-              return (
-                <td key={key}>
-                  <p style={{ fontSize: "12px" }}>Node ID #{row * 9 + key}</p>
-                  <Button
-                    onClick={() => {
-                      handleButtonClick(key, row);
-                    }}
-                    variant="contained"
-                    className="gridButton"
-                    style={{
-                      backgroundColor: item ? "green" : "red",
-                    }}
-                  >
-                    {item ? "o" : "x"}
-                  </Button>
-                </td>
-              );
-            })}
-          </tr>
-        );
-      })}
+      <tbody>
+        {[0, 1, 2].map(function (key, row) {
+          return (
+            <tr key={key}>
+              {table[row].map(function (item, key) {
+                return (
+                  <td key={key}>
+                    <p style={{ fontSize: "12px" }}>Node ID #{row * 9 + key}</p>
+                    <Button
+                      onClick={() => {
+                        handleButtonClick(key, row);
+                      }}
+                      role="btn"
+                      variant="contained"
+                      className="gridButton"
+                      style={{
+                        backgroundColor: item ? "green" : "red",
+                      }}
+                    >
+                      {item ? "o" : "x"}
+                    </Button>
+                  </td>
+                );
+              })}
+            </tr>
+          );
+        })}
+      </tbody>
     </table>
   );
 }