Merge pull request #99 from Arquisoft/dev

Dev

.env

@@ -1 +1,2 @@
-teamname="wiq_en2a"
+teamname="wiq_en2a"
+WIQ_EXTERNAL_DNS_NAME_OR_IP=$DOCKER_HOST_IP

.github/workflows/release.yml

@@ -59,7 +59,7 @@ jobs:
           password: ${{ secrets.GITHUB_TOKEN }}
           registry: ghcr.io
           workdir: webapp
-          buildargs: API_URI
+          buildargs: API_URI,MULTIPLAYER_URI
 
   docker-push-qgservice:
     name: Push question generator service Docker Image to GitHub Packages
@@ -152,6 +152,7 @@ jobs:
         password: ${{ secrets.GH_PAT }}
         registry: ghcr.io
         workdir: multiplayerservice
+        buildargs: WEBAPP_URI
 
   docker-push-groupservice:
     name: Push group service Docker Image to GitHub Packages

docker-compose.yml

@@ -128,6 +128,9 @@ services:
       - gatewayservice
     ports:
       - "80:80" 
+    environment:
+      REACT_APP_API_ENDPOINT: http://${WIQ_EXTERNAL_DNS_NAME_OR_IP:-localhost}:8000
+      REACT_APP_MULTIPLAYER_ENDPOINT: http://${WIQ_EXTERNAL_DNS_NAME_OR_IP:-localhost}:8006
 
   prometheus:
     image: prom/prometheus

webapp/Dockerfile

@@ -3,16 +3,11 @@ FROM node:20
 COPY . /app
 WORKDIR /app
 
+RUN rm -f .env
+
 #Install the dependencies
 RUN npm install
 
-ARG API_URI="http://localhost:8000"
-ENV REACT_APP_API_ENDPOINT=$API_URI
-
-ARG MULTIPLAYER_URI="http://localhost:8006"
-ENV REACT_APP_MULTIPLAYER_ENDPOINT=$MULTIPLAYER_URI
-
-
 #Create an optimized version of the webapp
 RUN npm run build
 RUN npm install serve

webapp/package.json

@@ -26,7 +26,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "prod": "serve -s build",
+    "prod": "serve -s build 80",
     "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!axios)/'",
     "test:e2e": "start-server-and-test 'node e2e/test-environment-setup.js' http://localhost:8000/health prod 3000 \"cd e2e && jest\"",
     "eject": "react-scripts eject",

webapp/src/common/Nav.test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, fireEvent, getByTestId } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom'; // Importa MemoryRouter
+import NavBar from './Nav';
+
+describe('NavBar Component', () => {
+  it('should render without crashing', () => {
+    const { getByTestId } = render(
+      <MemoryRouter> {/* Envuelve el componente en MemoryRouter */}
+        <NavBar />
+      </MemoryRouter>
+    );
+    const appName = getByTestId('app_name'); // Reemplaza 'app_name' con el texto real del nombre de la aplicación
+    expect(appName).toBeInTheDocument();
+  });
+/** 
+  it('should navigate to "/game" when "Game" button is clicked', () => {
+    const { getByTestId } = render(
+      <MemoryRouter> 
+        <NavBar />
+      </MemoryRouter>
+    );
+    const gameButton = getByTestId('nav_game'); // Reemplaza 'nav_game' con el botón de juego
+    fireEvent.click(gameButton);
+    expect(window.location.pathname).toBe('/game');
+  });
+
+  it('should navigate to "/groups" when "Groups" button is clicked', () => {
+    const { getByTestId } = render(
+      <MemoryRouter> 
+        <NavBar />
+      </MemoryRouter>
+    );
+    const groupsButton = getByTestId('nav_groups'); // Reemplaza 'nav_groups' con el botón de grupos
+    fireEvent.click(groupsButton);
+    expect(window.location.pathname).toBe('/groups');
+  });
+
+  it('should navigate to "/scoreboard" when "Scoreboard" button is clicked', () => {
+    const { getByTestId: getByTestId } = render(
+      <MemoryRouter> 
+        <NavBar />
+      </MemoryRouter>
+    );
+    const scoreboardButton = getByTestId('nav_scoreboard'); // Reemplaza 'nav_scoreboard' con el botón de marcador
+    fireEvent.click(scoreboardButton);
+    expect(window.location.pathname).toBe('/scoreboard');
+  });
+**/
+  // Agrega más pruebas similares para los otros botones y funcionalidades del componente NavBar
+});

webapp/src/common/Nav.tsx

@@ -70,15 +70,16 @@ const NavBar: React.FC<{}> = () =>
                     >
                         <Grid item>
                             <Stack direction="row" spacing={2}>
-                                <div className="logo">
+                                <div  data-testid="app_name" className="logo">
                                     {t('app_name')}
                                 </div>
-                                <Button variant="contained" onClick={() => navigate("/game")}>
+                                <Button variant="contained"  data-testid="nav_game" onClick={() => navigate("/game")}>
                                     {t('nav_game')}
                                 </Button>
-                                <Button variant="contained" onClick={() => navigate("/groups")}>
+                                <Button variant="contained"  data-testid="nav_groups" onClick={() => navigate("/groups")}>
                                     {t('nav_groups')}
                                 </Button>
+
                             </Stack>
                         </Grid>
                         <Grid item>

webapp/src/components/g-login-button/GLoginButton.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import GLoginButton from './GLoginButton';
+import { GoogleOAuthProvider } from '@react-oauth/google';
+
+describe('GLoginButton Component', () => {
+  it('should render without crashing', () => {
+    render(
+      <GoogleOAuthProvider>
+        <GLoginButton />
+      </GoogleOAuthProvider>
+    );
+  });
+
+});
+

webapp/src/components/game-layout/GameLayout.test.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import GameLayout from './GameLayout';
+import { MemoryRouter } from 'react-router-dom'; // Importa MemoryRouter
+
+describe('GameLayout component', () => {
+  it('renders Game by default', () => {
+    render(
+        <MemoryRouter>
+            <GameLayout />
+        </MemoryRouter>
+);
+    expect(screen.getByTestId('game-header')).toBeInTheDocument();
+    expect(screen.getByTestId('game-link')).toBeInTheDocument();
+    expect(screen.getByTestId('groups-link')).toBeInTheDocument();
+    expect(screen.getByTestId('scoreboard-link')).toBeInTheDocument();
+
+  });
+
+  it('renders GroupsPage when Groups link is clicked', () => {
+    render(
+        <MemoryRouter>
+            <GameLayout />
+        </MemoryRouter>
+);
+    waitFor(() => {
+        fireEvent.click(screen.getByTestId('groups-link'));
+        expect(screen.queryByTestId('game-component')).toBeNull();
+        expect(screen.getByTestId('groups-page-component')).toBeInTheDocument();
+        expect(screen.queryByTestId('scoreboard-component')).toBeNull();
+    });
+
+  });
+
+  it('renders Scoreboard when Scoreboard link is clicked', () => {
+
+    render(
+      <MemoryRouter>
+    <GameLayout />
+    </MemoryRouter>
+    );
+    waitFor(() => {
+        fireEvent.click(screen.getByTestId('scoreboard-link'));
+        expect(screen.queryByTestId('game-component')).toBeNull();
+        expect(screen.queryByTestId('groups-page-component')).toBeNull();
+        expect(screen.getByTestId('scoreboard-component')).toBeInTheDocument();
+    });
+
+  });
+});

webapp/src/components/game-layout/GameLayout.tsx

@@ -1,41 +1,44 @@
 import { useState } from "react";
 import Game from "../game/singleplayer/GameSinglePlayer";
-import {GroupsPage} from "../../pages/groups/index";
+import { GroupsPage } from "../../pages/groups/index";
 import Scoreboard from "../scoreboard/Scoreboard";
 
-
 const GameLayout = () => {
+  const [currentView, setCurrentView] = useState("Game");
 
-const [currentView, setCurrentView] = useState("Game");
-
-return(
-    <head className="GameHead">
-    <nav className="GameNav">
-        <ul>
+  return (
+    <div>
+      <header className="GameHead">
+        <nav className="GameNav">
+          <ul>
             <li>
-                <p>Game</p>
+              <p data-testid="game-header">Game</p>
             </li>
             <li>
-                <a onClick={()=>setCurrentView("Game")}>Game</a>
+              <a data-testid="game-link" onClick={() => setCurrentView("Game")}>
+                Game
+              </a>
             </li>
             <li>
-                <a onClick={()=>setCurrentView("Group")} >Groups</a>
+              <a data-testid="groups-link" onClick={() => setCurrentView("Group")}>
+                Groups
+              </a>
             </li>
             <li>
-                <a onClick={()=>setCurrentView("Scoreboard")}>Scoreboard</a>
+              <a data-testid="scoreboard-link" onClick={() => setCurrentView("Scoreboard")}>
+                Scoreboard
+              </a>
             </li>
-        </ul>
-    </nav>
-
-    import Game from "./Game"; // Import the 'Game' component
-
-    <body>
-        {currentView === "Game" ? <Game /> :
-            currentView === "Group" ? <GroupsPage /> :
-                <Scoreboard />}
-    </body>
-    </head>
+          </ul>
+        </nav>
+      </header>
+      <main>
+        {currentView === "Game" ? <Game /> : currentView === "Group" ? <GroupsPage data-testid="groups-page-component" /> : 
+        <Scoreboard data-testid="scoreboard-component"/>}
+      </main>
+    </div>
+  );
+};
 
-)
+export default GameLayout;
 
-}; export default GameLayout; // Export the 'GameLayout' component

webapp/src/components/game/ScoreboardGame.test.js

@@ -0,0 +1,29 @@
+import { render,screen,within } from '@testing-library/react';
+import ScoreboardGame from './ScoreboardGame';
+
+describe('ScoreboardGame component', () => {
+  it('renders correctly with single player scores', () => {
+    const mockUserScoresSinglePlayer = [
+      { username: 'Player 1', points: 100 },
+      { username: 'Player 2', points: 80 },
+      { username: 'Player 3', points: 120 },
+    ];
+
+    const { getByTestId, getAllByTestId } = render(
+      <ScoreboardGame userScoresSinglePlayer={mockUserScoresSinglePlayer} />
+    );
+
+    // Verificar que el caption está presente
+    expect(getByTestId('scoreboard-caption')).toBeInTheDocument();
+
+    // Verificar que todas las filas de la tabla están presentes
+    const tableRows = getAllByTestId(/position-\d+/);
+    expect(tableRows.length).toBe(mockUserScoresSinglePlayer.length); // No hay fila de encabezado en este caso
+
+    // Verificar que los tres nombres de usuario estén presentes en la vista
+    mockUserScoresSinglePlayer.forEach((score) => {
+        const usernameCell = screen.getByText(score.username);
+        expect(usernameCell).toBeInTheDocument();
+    });
+  });
+});

webapp/src/components/game/ScoreboardGame.tsx

@@ -18,29 +18,38 @@ const ScoreboardGame:FC<ScoreboardGameProps> = ({userScoresSinglePlayer, userSco
     sorted = userScoresMultiPlayer.sort((a, b) => b.points - a.points);
   }
     return (
-        <table>
-            <caption>Game Scoreboard</caption>
+        <table data-testid="scoreboard-table">
+            <caption data-testid="scoreboard-caption">Game Scoreboard</caption>
           <thead>
             <tr>
-              <th scope="col" id="rankingHeader">Position</th>
-              <th scope="col" id="usernameHeader">Username</th>
-              <th scope="col" id="pointsHeader">Points</th>
+              <th scope="col" id="rankingHeader" data-testid="ranking-header">
+                Position</th>
+              <th scope="col" id="usernameHeader" data-testid="username-header">
+                Username</th>
+              <th scope="col" id="pointsHeader" data-testid="points-header">
+                Points</th>
             </tr>
           </thead>
           <tbody>
             {sorted.map((score, index) => {
               if(score.username === username) return(
                 <tr key={score.username} className='selected'>
-                  <td headers="rankingHeader">{index+1}</td>
-                  <td headers="usernameHeader">{score.username}</td>
-                  <td headers="pointsHeader">{score.points}</td>
+                  <td headers="rankingHeader" data-testid={`position-${index}`}>
+                    {index+1}</td>
+                  <td headers="usernameHeader" data-testid={`username-${index}`}>
+                    {score.username}</td>
+                  <td headers="pointsHeader" data-testid={`points-${index}`}>
+                    {score.points}</td>
                 </tr>
               );
               return (
                 <tr key={score.username} >
-                  <td headers="rankingHeader">{index+1}</td>
-                  <td headers="usernameHeader">{score.username}</td>
-                  <td headers="pointsHeader">{score.points}</td>
+                  <td headers="rankingHeader" data-testid={`position-${index}`}>
+                    {index+1}</td>
+                  <td headers="usernameHeader" data-testid={`username-${index}`}>
+                    {score.username}</td>
+                  <td headers="pointsHeader" data-testid={`points-${index}`}>
+                    {score.points}</td>
                 </tr>
               );
             })}

webapp/src/components/game/singleplayer/GameSinglePlayer.tsx

@@ -76,8 +76,8 @@ const GameSinglePlayer = () => {
   };
 
   return (
-    <Container sx={{ mt: 9 }}>
-      {currentStage === 1 && (<LobbyGame players={players} setPlayers={handlePlayers} setCurrentStage={handleCurrentStage} isFetched={fetched}/>)}
+    <Container  sx={{ mt: 9 }}>
+      {currentStage === 1 && (<LobbyGame  players={players} setPlayers={handlePlayers} setCurrentStage={handleCurrentStage} isFetched={fetched}/>)}
       {currentStage === 2 && (<PlayingGame questions={questions} setCurrentStage={handleCurrentStage} setPlayers={handlePlayers} players={players}/>)}
       {currentStage === 3 && (<ScoreboardGame userScoresSinglePlayer={players}/> )}
     </Container>