Test beginnings

frontend/package.json

@@ -12,23 +12,30 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.14.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.2",
+    "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.11.1",
     "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
+    "eslint-plugin-vitest": "^0.3.26",
     "globals": "^15.9.0",
+    "jsdom": "^22.1.0",
     "postcss": "^8.4.47",
     "socket.io-client": "^4.8.0",
     "tailwindcss": "^3.4.13",
     "vite": "^5.4.8",
-    "vitest": "^2.1.3"
+    "vitest": "^2.1.3",
+    "vitest-fetch-mock": "^0.2.2"
   }
 }

frontend/src/App.jsx

@@ -1,6 +1,33 @@
+//imports needed
 import { useEffect, useState } from "react";
-import "./App.css";
 import { socket } from "./socket";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import "./App.css";
+
+import { HomePage } from "./pages/HomePage";
+import { InGame } from "./pages/InGame";
+import { Lobby } from "./pages/Lobby";
+import { RoundEnd } from "./pages/RoundEnd";
+
+// router
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <HomePage />,
+  },
+  {
+    path: "/in-game",
+    element: <InGame />,
+  },
+  {
+    path: "/lobby",
+    element: <Lobby />,
+  },
+  {
+    path: "/round-end",
+    element: <RoundEnd />,
+  }      
+]);
 
 function App() {
 
@@ -25,12 +52,9 @@ function App() {
   })
   return (
     <>
-      <div>
-        <h1 className="text-6xl font-bold underline">Makers UI game group!</h1>
-        <div>{`Connected: ${isConnected}`}</div>
-      </div>
+      <RouterProvider router={router} />
     </>
   );
 }
 
-export default App;
+export default App;

frontend/src/pages/HomePage.jsx

@@ -1,22 +1,26 @@
 // the landing page with the create a game option
 
+//imports needed
 import { Link } from "react-router-dom";
-import { Button } from "../components/Button";
+{/*import { Button } from "../components/Button"; */}
 
+// page function
 export function HomePage() {
   return (
+    <>
     <div className="home">
-        <h1>Guess the number!</h1>
+        <h1 data-testid="game-name">Guess the number!</h1>
         <p>
             Rules of the game: 
             <ul>
                 <li>Guess the number between 1 and 100</li>
                 <li>2 to 6 players</li>
             </ul>
         </p>
-
-        <Button onClick={handleClick}>Create game</Button>
+        <Link to="/lobby" className="lobby-link"></Link>
+        {/* <Button onClick={handleClick}>Create game</Button> */}
 
     </div>
+    </>
   );
 }

frontend/src/pages/InGame.jsx

@@ -1,7 +1,8 @@
 // The page where the game happens
-import { Link } from "react-router-dom";
-
+// import { Link } from "react-router-dom";
+// import { Button } from "../components/Button";
 
+// in game page function
 export function InGame() {
     return (
       <div className="InGame">
@@ -20,12 +21,12 @@ export function InGame() {
           <div className="guess"> 
             <h1>Guess a number component placeholder</h1>
             <form>
-                <label for="number_guess">Guess a number between 1 and 100!</label>
+                <label htmlFor="number_guess" data-testId="guess-label">Guess a number between 1 and 100!</label>
                 <input type="number" id="number_guess" name="number_guess"></input>
             </form>
           </div>
 
-          <Button onClick={handleClick}>Submit</Button>
+          {/* <Button onClick={handleClick}>Submit</Button> */}
 
       </div>
     );

frontend/src/pages/Lobby.jsx

@@ -2,7 +2,7 @@
 // For the host, this is the page with the 'start the game' button
 
 import { Link } from "react-router-dom";
-import { Button } from "../components/Button";
+{/* import { Button } from "../components/Button"; */}
 
 export function Lobby() {
   return (
@@ -19,11 +19,12 @@ export function Lobby() {
             </p>
         </div>
 
-        <Button onClick={handleClick}>Start game</Button>
+        <Link to="/in-game" className="in-game-link"></Link>
+        {/* <Button onClick={handleClick}>Start game</Button> */}
 
         <div className="share_link">
             <h1>Share link component placeholder</h1>
-            <p>
+            <p data-testid="add-players-prompt">
                 Add up to 6 players using this link
             </p>
             <a> Link</a>

frontend/src/pages/RoundEnd.jsx

@@ -2,7 +2,7 @@
 // this page has the score and the option to do another round or quit
 
 import { Link } from "react-router-dom";
-import { Button } from "../components/Button";
+// import { Button } from "../components/Button";
 
 export function RoundEnd() {
   return (
@@ -11,16 +11,17 @@ export function RoundEnd() {
             <p>
                 Placeholder for the display number to guess component
             </p>
-            <p>
-                The number was: 42
-            </p>
+            <p data-testId="number-reveal">
+                The number was:
+            </p><br></br>
+            <p>42</p> 
         </div>
 
         <div className="winner">
             <p>
                 Placeholder for the winner component
             </p>
-            <p>
+            <p >
                 The winner is... Player3!
             </p>
         </div>
@@ -38,10 +39,11 @@ export function RoundEnd() {
         </div>
 
 
+        <Link to="/" className="homepage-link"></Link>
+        <Link to="/in-game" className="in-game-link"></Link>
+        {/* <Button onClick={handleClick}>Next round :D</Button>
 
-        <Button onClick={handleClick}>Next round :D</Button>
-
-        <Button onClick={handleClick}>Quit :'(</Button>
+        <Button onClick={handleClick}>Quit :'(</Button> */}
 
     </div>
   );

frontend/tests/pages/HomePage.test.jsx

@@ -0,0 +1,20 @@
+// Tests for the homepage where the host can create a game
+
+//required imports
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { HomePage } from "../../src/pages/HomePage";
+import { describe, expect, test } from "vitest";
+
+describe("Homepage tests", ()  => {
+    test("name of the game", () => {
+        render(
+            <BrowserRouter>
+                <HomePage />
+            </BrowserRouter>
+        );       
+
+        const heading = screen.getByTestId("game-name");
+        expect(heading.textContent).toEqual("Guess the number!");
+    });
+});

frontend/tests/pages/InGame.test.jsx

@@ -0,0 +1,21 @@
+// Tests for the in game page where players can guess a number, and submit
+// Everyone can all see the players in the game
+
+//required imports
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { InGame } from "../../src/pages/InGame";
+import { describe, expect, test } from "vitest";
+
+describe("InGame tests", ()  => {
+    test("name of the game", () => {
+        render(
+            <BrowserRouter>
+                <InGame />
+            </BrowserRouter>
+        );       
+
+        const heading = screen.getByTestId("guess-label");
+        expect(heading.textContent).toEqual("Guess a number between 1 and 100!");
+    });
+});

frontend/tests/pages/Lobby.test.jsx

@@ -0,0 +1,22 @@
+// Tests for the lobby page where the host and players can share a link to join
+// the game, the host can start the game, and everyone can see who has joined
+
+//required imports
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { Lobby } from "../../src/pages/Lobby";
+import { describe, expect, test } from "vitest";
+
+
+describe("Lobby tests", ()  => {
+    test("name of the game", () => {
+        render(
+            <BrowserRouter>
+                <Lobby />
+            </BrowserRouter>
+        );       
+
+        const heading = screen.getByTestId("add-players-prompt");
+        expect(heading.textContent).toEqual("Add up to 6 players using this link");
+    });
+});

frontend/tests/pages/RoundEnd.test.jsx

@@ -0,0 +1,21 @@
+// Tests for the round end page where players can view the scoreboard, the number, the winner(s), 
+// and choose whether to go to the next round or quit the game
+
+//required imports
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { RoundEnd } from "../../src/pages/RoundEnd";
+import { describe, expect, test } from "vitest";
+
+describe("Round end tests", ()  => {
+    test("name of the game", () => {
+        render(
+            <BrowserRouter>
+                <RoundEnd />
+            </BrowserRouter>
+        );       
+
+        const heading = screen.getByTestId("number-reveal");
+        expect(heading.textContent).toEqual("The number was:");
+    });
+});

frontend/vite.config.js

@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  test: {globals: true, 
+    environment: "jsdom"
+  }
 })