added tests for pages

shammy642 · Oct 16, 2024 · 84e3042 · 84e3042
1 parent 57254b1
commit 84e3042
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 12 deletions.
diff --git a/frontend/src/pages/InGame.jsx b/frontend/src/pages/InGame.jsx
@@ -21,7 +21,7 @@ export function InGame() {
           <div className="guess"> 
             <h1>Guess a number component placeholder</h1>
             <form>
-                <label htmlFor="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>

diff --git a/frontend/src/pages/Lobby.jsx b/frontend/src/pages/Lobby.jsx
@@ -24,7 +24,7 @@ export function Lobby() {
 
         <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>

diff --git a/frontend/src/pages/RoundEnd.jsx b/frontend/src/pages/RoundEnd.jsx
@@ -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>

diff --git a/frontend/tests/pages/HomePage.test.jsx b/frontend/tests/pages/HomePage.test.jsx
@@ -6,7 +6,6 @@ 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(
@@ -18,5 +17,4 @@ describe("Homepage tests", ()  => {
         const heading = screen.getByTestId("game-name");
         expect(heading.textContent).toEqual("Guess the number!");
     });
-});
-
+});
diff --git a/frontend/tests/pages/InGame.test.jsx b/frontend/tests/pages/InGame.test.jsx
@@ -4,4 +4,18 @@
 //required imports
 import { render, screen } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
-import { InGame } from "../../src/pages/InGame";
+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!");
+    });
+});
diff --git a/frontend/tests/pages/Lobby.test.jsx b/frontend/tests/pages/Lobby.test.jsx
@@ -4,4 +4,19 @@
 //required imports
 import { render, screen } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
-import { Lobby } from "../../src/pages/Lobby";
+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");
+    });
+});
diff --git a/frontend/tests/pages/RoundEnd.test.jsx b/frontend/tests/pages/RoundEnd.test.jsx
@@ -4,4 +4,18 @@
 //required imports
 import { render, screen } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
-import { RoundEnd } from "../../src/pages/RoundEnd";
+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:");
+    });
+});