From e6fd4a2e8976ff6bd86ce7eff233e5dfa751e6a5 Mon Sep 17 00:00:00 2001 From: Joe Winter Date: Wed, 16 Oct 2024 15:50:55 +0100 Subject: [PATCH] updated page file names and added links between pages --- frontend/src/App.jsx | 23 +++++++--- .../pages/{HomePage.jsx => LandingHost.jsx} | 7 +++- frontend/src/pages/LandingPlayer.jsx | 14 +++++++ frontend/src/pages/Lobby.jsx | 35 ---------------- frontend/src/pages/LobbyHost.jsx | 42 +++++++++++++++++++ frontend/src/pages/LobbyPlayer.jsx | 8 ++++ frontend/src/pages/RoundEnd.jsx | 2 +- ...HomePage.test.jsx => LandingHost.test.jsx} | 28 +++++++------ frontend/tests/pages/LandingPlayer.test.jsx | 21 ++++++++++ frontend/tests/pages/Lobby.test.jsx | 22 ---------- frontend/tests/pages/LobbyHost.test.jsx | 22 ++++++++++ frontend/tests/pages/LobbyPlayer.test.jsx | 21 ++++++++++ 12 files changed, 168 insertions(+), 77 deletions(-) rename frontend/src/pages/{HomePage.jsx => LandingHost.jsx} (80%) create mode 100644 frontend/src/pages/LandingPlayer.jsx delete mode 100644 frontend/src/pages/Lobby.jsx create mode 100644 frontend/src/pages/LobbyHost.jsx create mode 100644 frontend/src/pages/LobbyPlayer.jsx rename frontend/tests/pages/{HomePage.test.jsx => LandingHost.test.jsx} (72%) create mode 100644 frontend/tests/pages/LandingPlayer.test.jsx delete mode 100644 frontend/tests/pages/Lobby.test.jsx create mode 100644 frontend/tests/pages/LobbyHost.test.jsx create mode 100644 frontend/tests/pages/LobbyPlayer.test.jsx diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 72661df..d8078ee 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -4,10 +4,13 @@ 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 { LobbyHost } from "./pages/LobbyHost"; import { RoundEnd } from "./pages/RoundEnd"; +import { LandingPlayer } from "./pages/LandingPlayer"; +import { LobbyPlayer } from "./pages/LobbyPlayer"; +import { LandingHost } from "./pages/LandingHost"; // router @@ -41,15 +44,25 @@ function App() { const router = createBrowserRouter([ { path: "/", - element: , + element: , + }, + { + path: "/lobby/player", + element: }, + + { + path: "/join/:roomId", + element: + }, + { path: "/in-game", element: , }, { - path: "/lobby", - element: , + path: "/lobby/host", + element: , }, { path: "/round-end", diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/LandingHost.jsx similarity index 80% rename from frontend/src/pages/HomePage.jsx rename to frontend/src/pages/LandingHost.jsx index 81fa1f5..98bb63e 100644 --- a/frontend/src/pages/HomePage.jsx +++ b/frontend/src/pages/LandingHost.jsx @@ -3,11 +3,15 @@ //imports needed import { socket } from "../socket"; import { Button } from "../components/Button"; +import { useNavigate } from "react-router-dom"; // page function -export function HomePage({ gameRoom }) { +export function LandingHost() { + const navigate = useNavigate() const handleClick = () => { socket.emit("create_room"); + navigate('/lobby/host') + }; return ( <> @@ -21,7 +25,6 @@ export function HomePage({ gameRoom }) {

- {gameRoom &&
Game Link: {`${window.location.href}join/${gameRoom}`}
} ); diff --git a/frontend/src/pages/LandingPlayer.jsx b/frontend/src/pages/LandingPlayer.jsx new file mode 100644 index 0000000..a6d52d8 --- /dev/null +++ b/frontend/src/pages/LandingPlayer.jsx @@ -0,0 +1,14 @@ +import { Button } from "../components/Button" +import { useNavigate } from "react-router-dom" + +export function LandingPlayer() { + const navigate = useNavigate() + const handleClick = () => { + navigate('/lobby/player') + } + return ( + <> + */} - -
-

Share link component placeholder

-

- Add up to 6 players using this link -

- Link -
- - - ); -} \ No newline at end of file diff --git a/frontend/src/pages/LobbyHost.jsx b/frontend/src/pages/LobbyHost.jsx new file mode 100644 index 0000000..c45569f --- /dev/null +++ b/frontend/src/pages/LobbyHost.jsx @@ -0,0 +1,42 @@ +// The page where the players are waiting while everybody joins the game +// 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 LobbyHost({ gameRoom }) { + return ( + <> + */} + + //
+ //

Share link component placeholder

+ //

+ // Add up to 6 players using this link + //

+ // Link + //
+ + // + // ); +} \ No newline at end of file diff --git a/frontend/src/pages/LobbyPlayer.jsx b/frontend/src/pages/LobbyPlayer.jsx new file mode 100644 index 0000000..d28b959 --- /dev/null +++ b/frontend/src/pages/LobbyPlayer.jsx @@ -0,0 +1,8 @@ +export function LobbyPlayer({ gameRoom }) { + return ( + <> +
Waiting for host to start game...
+
{`Game Room: http://localhost:5173/join/${gameRoom}`}
+ + ) +} \ No newline at end of file diff --git a/frontend/src/pages/RoundEnd.jsx b/frontend/src/pages/RoundEnd.jsx index e0a7798..fd82901 100644 --- a/frontend/src/pages/RoundEnd.jsx +++ b/frontend/src/pages/RoundEnd.jsx @@ -39,7 +39,7 @@ export function RoundEnd() { - + {/* diff --git a/frontend/tests/pages/HomePage.test.jsx b/frontend/tests/pages/LandingHost.test.jsx similarity index 72% rename from frontend/tests/pages/HomePage.test.jsx rename to frontend/tests/pages/LandingHost.test.jsx index 449c78e..cc71557 100644 --- a/frontend/tests/pages/HomePage.test.jsx +++ b/frontend/tests/pages/LandingHost.test.jsx @@ -2,47 +2,51 @@ //required imports import { render, screen } from "@testing-library/react"; -import { HomePage } from "../../src/pages/HomePage"; +import { LandingHost } from "../../src/pages/LandingHost"; import { describe, expect, test, vi } from "vitest"; import userEvent from "@testing-library/user-event"; import { socket } from "../../src/socket"; +import { useNavigate } from "react-router-dom"; vi.mock("../../src/socket.js", () => { return { socket: { emit: vi.fn() } }; }); -describe("Homepage tests", () => { +vi.mock("react-router-dom", () => { + const navigateMock = vi.fn() + const useNavigateMock = () => navigateMock + return { useNavigate: useNavigateMock} +}) + + + +describe("LandingHost tests", () => { test("name of the game", () => { - render(); + render(); const heading = screen.getByTestId("game-name"); expect(heading.textContent).toEqual("Guess the number!"); }); test("rules of the game", () => { - render(); + render(); expect(screen.getByText("Rules of the game:")).toBeTruthy(); expect(screen.getByText("Guess the number between 1 and 100")).toBeTruthy(); expect(screen.getByText("2 to 6 players")).toBeTruthy(); }); test("create game button appears on page", () => { - render(); + render(); const buttonEl = screen.getByRole("button"); expect(buttonEl.textContent).toEqual("Create Game"); }); test('when a user clicks on the button the socket emits to "create_room"', async () => { - render(); + render(); const buttonEl = screen.getByRole("button"); const user = userEvent.setup(); await user.click(buttonEl); expect(socket.emit).toHaveBeenCalledWith("create_room"); }); test("when no link is passed into the component it is not visible", () => { - render(); + render(); const link = screen.queryByTestId("game-link"); expect(link).toBeNull(); }); - test("given a link passed into the components", () => { - render(); - const link = screen.getByTestId("game-link"); - expect(link.textContent).toEqual("Game Link: http://localhost:3000/join/abc123"); - }); }); diff --git a/frontend/tests/pages/LandingPlayer.test.jsx b/frontend/tests/pages/LandingPlayer.test.jsx new file mode 100644 index 0000000..d805138 --- /dev/null +++ b/frontend/tests/pages/LandingPlayer.test.jsx @@ -0,0 +1,21 @@ +// Tests for the landing page where the players can share a link to join +// the game, and the players can join the game + +//required imports +import { render, screen } from "@testing-library/react"; +import { BrowserRouter } from "react-router-dom"; +import { describe, expect, test } from "vitest"; +import { LandingPlayer } from "../../src/pages/LandingPlayer"; + + +describe("LandingPlayer tests", () => { + test("join room button is visible", () => { + render( + + + + ); + const buttonEl = screen.getByRole("button") + expect(buttonEl.textContent).toEqual("Join Room") + }); +}); \ No newline at end of file diff --git a/frontend/tests/pages/Lobby.test.jsx b/frontend/tests/pages/Lobby.test.jsx deleted file mode 100644 index 1907927..0000000 --- a/frontend/tests/pages/Lobby.test.jsx +++ /dev/null @@ -1,22 +0,0 @@ -// 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( - - - - ); - - const heading = screen.getByTestId("add-players-prompt"); - expect(heading.textContent).toEqual("Add up to 6 players using this link"); - }); -}); \ No newline at end of file diff --git a/frontend/tests/pages/LobbyHost.test.jsx b/frontend/tests/pages/LobbyHost.test.jsx new file mode 100644 index 0000000..d2c7a51 --- /dev/null +++ b/frontend/tests/pages/LobbyHost.test.jsx @@ -0,0 +1,22 @@ +// Tests for the lobby page where the host can share a link to join +// the game, the host can start the game, and the host can see who has joined + +//required imports +import { render, screen } from "@testing-library/react"; +import { BrowserRouter } from "react-router-dom"; +import { LobbyHost } from "../../src/pages/LobbyHost"; +import { describe, expect, test } from "vitest"; + + +describe("LobbyHost tests", () => { + test("there is a button", () => { + render( + + + + ); + + const buttonEl = screen.getByRole("button"); + expect(buttonEl.textContent).toEqual("Start Game"); + }); +}); \ No newline at end of file diff --git a/frontend/tests/pages/LobbyPlayer.test.jsx b/frontend/tests/pages/LobbyPlayer.test.jsx new file mode 100644 index 0000000..9945734 --- /dev/null +++ b/frontend/tests/pages/LobbyPlayer.test.jsx @@ -0,0 +1,21 @@ +// Tests for the lobby page where the players can share a link to join +// the game, and the players can see who has joined + +//required imports +import { render, screen } from "@testing-library/react"; +import { BrowserRouter } from "react-router-dom"; +import { LobbyPlayer } from "../../src/pages/LobbyPlayer"; +import { describe, expect, test } from "vitest"; + + +describe("LobbyPlayer tests", () => { + test("name of the game", () => { + render( + + + + ); + + expect(screen.getByText("Waiting for host to start game...")).toBeTruthy(); + }); +}); \ No newline at end of file