From a6fc94f3ad6acc94f60c1843861c353d198a3d19 Mon Sep 17 00:00:00 2001 From: Joe Winter Date: Wed, 16 Oct 2024 13:18:47 +0100 Subject: [PATCH 1/3] added backend listener --- api/app.js | 7 +++++++ frontend/src/socket.js | 4 ++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/api/app.js b/api/app.js index bd17718..1633f90 100644 --- a/api/app.js +++ b/api/app.js @@ -5,6 +5,7 @@ const http = require('http') const express = require("express"); const bodyParser = require("body-parser"); const cors = require("cors"); +const crypto = require("crypto") const app = express(); @@ -51,6 +52,12 @@ io.on('connection', (socket) => { console.log("User disconnected!") console.log(`Users Connected: ${io.engine.clientsCount}`) }) + + socket.on("create_room", () => { + const roomId = crypto.randomBytes(3).toString('hex') + const link = `http://localhost:5173/join/${roomId}` + socket.emit('receive_link', link) + }) }) server.listen(3001, () => { diff --git a/frontend/src/socket.js b/frontend/src/socket.js index 1aa3e89..4aa65a5 100644 --- a/frontend/src/socket.js +++ b/frontend/src/socket.js @@ -1,4 +1,4 @@ import { io } from "socket.io-client"; -const SOCKET_URL = import.meta.env.SOCKET_BACKEND_URL; +// const SOCKET_URL = import.meta.env.SOCKET_BACKEND_URL; -export const socket = io(SOCKET_URL) +export const socket = io("http://localhost:3001") From cc4c703ea4e908aa3c3ea2148625970131ced8a4 Mon Sep 17 00:00:00 2001 From: Joe Winter Date: Wed, 16 Oct 2024 13:30:17 +0100 Subject: [PATCH 2/3] added create room button --- frontend/src/App.jsx | 53 +++++++++++++++++++-------------- frontend/src/pages/HomePage.jsx | 29 ++++++++++-------- 2 files changed, 47 insertions(+), 35 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index f51ce5f..ebc1424 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -10,46 +10,53 @@ import { Lobby } from "./pages/Lobby"; import { RoundEnd } from "./pages/RoundEnd"; // router -const router = createBrowserRouter([ - { - path: "/", - element: , - }, - { - path: "/in-game", - element: , - }, - { - path: "/lobby", - element: , - }, - { - path: "/round-end", - element: , - } -]); function App() { - + const [isConnected, setIsConnected] = useState(socket.connected) - + const [gameLink, setGameLink] = useState("") + useEffect(() => { const onConnect = () => { setIsConnected(true) } - const onDisconnect = () => { setIsConnected(false) } - + const onReceiveLink = (data) => { + setGameLink(data) + } + socket.on('connect', onConnect) socket.on('disconnect', onDisconnect) - + socket.on('receive_link', (data) => onReceiveLink(data)) + return () => { socket.off('connect', onConnect) socket.off('disconnect', onDisconnect) + socket.off('receive_link', () => onReceiveLink("")) } }) + + const router = createBrowserRouter([ + { + path: "/", + element: , + }, + { + path: "/in-game", + element: , + }, + { + path: "/lobby", + element: , + }, + { + path: "/round-end", + element: , + } + ]); + return ( <> diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx index 4db776c..0710e62 100644 --- a/frontend/src/pages/HomePage.jsx +++ b/frontend/src/pages/HomePage.jsx @@ -2,25 +2,30 @@ //imports needed import { Link } from "react-router-dom"; -{/*import { Button } from "../components/Button"; */} +import { socket } from "../socket"; +import { Button } from "../components/Button"; // page function -export function HomePage() { +export function HomePage({gameLink}) { + + const handleClick = () => { + socket.emit("create_room"); + }; return ( <> -
+

Guess the number!

- Rules of the game: -

    -
  • Guess the number between 1 and 100
    • -
  • 2 to 6 players
    • -
+ Rules of the game: +
    +
  • Guess the number between 1 and 100
    • +
  • 2 to 6 players
    • +

- {/* */} - -
+ + {gameLink &&
{gameLink}
} +
); -} \ No newline at end of file +} From 4037920a560616d4b3f1ff2dd93e551b883d5ed4 Mon Sep 17 00:00:00 2001 From: Joe Winter Date: Wed, 16 Oct 2024 13:54:13 +0100 Subject: [PATCH 3/3] added tests for homepage component --- frontend/src/pages/HomePage.jsx | 8 ++-- frontend/tests/pages/HomePage.test.jsx | 56 +++++++++++++++++++------- 2 files changed, 45 insertions(+), 19 deletions(-) diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx index 0710e62..78f3d3e 100644 --- a/frontend/src/pages/HomePage.jsx +++ b/frontend/src/pages/HomePage.jsx @@ -1,7 +1,6 @@ // the landing page with the create a game option //imports needed -import { Link } from "react-router-dom"; import { socket } from "../socket"; import { Button } from "../components/Button"; @@ -22,10 +21,9 @@ export function HomePage({gameLink}) {
  • 2 to 6 players

    • - - - {gameLink &&
    {gameLink}
    } + + {gameLink &&
    Game Link: {gameLink}
    } ); -} +} \ No newline at end of file diff --git a/frontend/tests/pages/HomePage.test.jsx b/frontend/tests/pages/HomePage.test.jsx index c84e9aa..cb4c5e4 100644 --- a/frontend/tests/pages/HomePage.test.jsx +++ b/frontend/tests/pages/HomePage.test.jsx @@ -2,19 +2,47 @@ //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"; +import { describe, expect, test, vi } from "vitest"; +import userEvent from "@testing-library/user-event"; +import { socket } from "../../src/socket"; -describe("Homepage tests", () => { - test("name of the game", () => { - render( - - - - ); - - const heading = screen.getByTestId("game-name"); - expect(heading.textContent).toEqual("Guess the number!"); - }); -}); \ No newline at end of file +vi.mock("../../src/socket.js", () => { + return { socket: { emit: vi.fn() } }; +}); + +describe("Homepage tests", () => { + test("name of the game", () => { + render(); + const heading = screen.getByTestId("game-name"); + expect(heading.textContent).toEqual("Guess the number!"); + }); + test("rules of the game", () => { + 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(); + 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(); + 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(); + 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://example.com"); + }); +});