Merge branch 'develop' into develop-hugo

Arquisoft · Apr 27, 2024 · d787974 · d787974
2 parents d3af04c + d85a4df
commit d787974
Show file tree

Hide file tree

Showing 33 changed files with 1,653 additions and 2,072 deletions.
diff --git a/webapp/e2e/features/discoveringCitiesGame.feature b/webapp/e2e/features/discoveringCitiesGame.feature
@@ -3,9 +3,9 @@ Feature: Answer a question
 Scenario: Answering a question correctly
   Given A question
   When I click on the correct answer button
-  Then The button turns green
+  Then The selected answer is marked as right
 
 Scenario: Answering a question incorrectly
   Given A question
   When I click on an incorrect answer button
-  Then The button turns red
+  Then The selected answer is marked as wrong
diff --git a/webapp/e2e/features/wiseMenStackGame.feature b/webapp/e2e/features/wiseMenStackGame.feature
@@ -3,9 +3,4 @@ Feature: Answer a question
 Scenario: Answering a question correctly
   Given A question
   When I click on the correct answer button
-  Then The button turns green
-
-Scenario: Answering a question incorrectly
-  Given A question
-  When I click on an incorrect answer button
-  Then The button turns red
+  Then The selected answer is marked as right
diff --git a/webapp/e2e/steps/discoveringCitiesGame.steps.js b/webapp/e2e/steps/discoveringCitiesGame.steps.js
@@ -65,52 +65,48 @@ defineFeature(feature, test => {
   test('Answering a question correctly', ({given,when,then}) => {
 
     given('A question', async () => {
-        //await expect(page.findByText('Which is the capital of Spain?'));
-        const question = await page.$['data-testid="question"'];
-        await expect(page).toMatchElement("div", { text: 'Which is the capital of Spain?'});
-        expect(question).not.toBeNull();
-
-        const answers = await page.$x('//*[@data-testid="answer"]');
-        expect(answers.length).toBe(4);
+      const question = await page.$['data-testid="question"'];
+      await expect(page).toMatchElement("div", { text: 'WHICH IS THE CAPITAL OF SPAIN?'});
+      expect(question).not.toBeNull();
+
+      const answers = await page.$x('//*[contains(@data-testid, "answer")]');
+      expect(answers.length).toBe(4);
     });
 
     when('I click on the correct answer button', async () => {
-        const answers = await page.$x('(//*[@data-testid="answer"])[1]');
-        await answers[0].click();
+      const answers = await page.$x('//*[contains(@data-testid, "answer")]');
+      await answers[0].click();
     });
 
-    then('The button turns green', async () => {
-        const answerButton = await page.$x('(//*[@data-testid="answer"])[1]');
-        const textoBoton = await page.evaluate(button => button.innerText, answerButton[0]);
-        await expect(textoBoton).toMatch(/Madrid/i);
-        await expect(page).toMatchElement("button", { style: { color: 'green' } });
+    then('The selected answer is marked as right', async () => {
+      const answer = await page.$x('//*[contains(@data-testid, "success")]');
+      expect(answer.length).toBe(1);
+      const textoBoton = await page.evaluate(button => button.innerText, answer[0]);
+      await expect(textoBoton).toMatch(/Madrid/i);
     });
   })
 
   test('Answering a question incorrectly', ({given,when,then}) => {
 
     given('A question', async () => {
-        //await expect(page.findByText('Which is the capital of Spain?'));
-        const question = await page.$['data-testid="question"'];
-        await expect(page).toMatchElement("div", { text: 'Which is the capital of Spain?'});
-        expect(question).not.toBeNull();
-
-        const answers = await page.$x('//*[@data-testid="answer"]');
-        expect(answers.length).toBe(4);
+      const question = await page.$['data-testid="question"'];
+      await expect(page).toMatchElement("div", { text: 'WHICH IS THE CAPITAL OF SPAIN?'});
+      expect(question).not.toBeNull();
+
+      const answers = await page.$x('//*[contains(@data-testid, "answer")]');
+      expect(answers.length).toBe(4);
     });
 
     when('I click on an incorrect answer button', async () => {
-        const answers = await page.$x('(//*[@data-testid="answer"])[2]');
-        await answers[0].click();
+      const answers = await page.$x('//*[contains(@data-testid, "answer")]');
+      await answers[1].click();
     });
 
-    then('The button turns red', async () => {
-        const answerButton = await page.$x('(//*[@data-testid="answer"])[2]');
-        const textoBoton = await page.evaluate(button => button.innerText, answerButton[0]);
-        await expect(textoBoton).toMatch(/Barcelona/i);
-        await expect(page).toMatchElement("button", { style: { color: 'red' } });
-        await expect(page).toMatchElement("button", { style: { color: 'green' } });
-
+    then('The selected answer is marked as wrong', async () => {
+      const answer = await page.$x('//*[contains(@data-testid, "fail")]');
+      expect(answer.length).toBe(1);
+      const textoBoton = await page.evaluate(button => button.innerText, answer[0]);
+      await expect(textoBoton).toMatch(/Barcelona/i);
     });
   })
 

diff --git a/webapp/e2e/steps/wiseMenStackGame.steps.js b/webapp/e2e/steps/wiseMenStackGame.steps.js
@@ -10,7 +10,7 @@ defineFeature(feature, test => {
 
   beforeAll(async () => {
 
-      browser = process.env.GITHUB_ACTIONS
+    browser = process.env.GITHUB_ACTIONS
       ? await puppeteer.launch()
       : await puppeteer.launch({ headless: false, slowMo: 40 });
     page = await browser.newPage();
@@ -65,77 +65,32 @@ defineFeature(feature, test => {
   test('Answering a question correctly', ({given,when,then}) => {
 
     given('A question', async () => {
-        const button = await page.$('[data-testid="start-button"]');
-        await button.click();
+      const button = await page.$('[data-testid="start-button"]');
+      await button.click();
 
-        //await expect(page.findByText('Which is the capital of Spain?'));
-        const question = await page.$['data-testid="question"'];
-        await expect(page).toMatchElement("div", { text: 'Which is the capital of Spain?'});
-        expect(question).not.toBeNull();
-
-        const answers = await page.$x('//*[@data-testid="answer"]');
-        expect(answers.length).toBe(2);
+      const question = await page.$['data-testid="question"'];
+      expect(question).not.toBeNull();
+      await expect(page).toMatchElement("div", { text: 'WHICH IS THE CAPITAL OF SPAIN?'});
+
+      const answers = await page.$x('//*[contains(@data-testid, "answer")]');
+      expect(answers.length).toBe(2);
     });
 
     when('I click on the correct answer button', async () => {
-        const answers = await page.$x('//*[@data-testid="answer"]');
-        const textoBoton1 = await page.evaluate(button => button.innerText, answers[0]);
-        if(textoBoton1 === "Madrid") {
-          await answers[0].click();
-        } else {
-          await answers[1].click();
-        }
-    });
-
-    then('The button turns green', async () => {
-        /*const answerButton = await page.$x('(//*[@data-testid="answer"])[1]');
-        const textoBoton1 = await page.evaluate(button => button.innerText, answerButton[0]);
-        const textoBoton2 = await page.evaluate(button => button.innerText, answerButton[1]);
-        if(textoBoton1 === "Madrid") {
-          await expect(textoBoton1).toMatch(/Madrid/i);
-        } else {
-          await expect(textoBoton2).toMatch(/Madrid/i);
-        }*/
-        await expect(page).toMatchElement("button", { style: { color: 'green' } });
-    });
-  })
-
-  test('Answering a question incorrectly', ({given,when,then}) => {
-
-    given('A question', async () => {
-        const button = await page.$('[data-testid="start-button"]');
-        await button.click();
-
-        //await expect(page.findByText('Which is the capital of Spain?'));
-        const question = await page.$['data-testid="question"'];
-        await expect(page).toMatchElement("div", { text: 'Which is the capital of Spain?'});
-        expect(question).not.toBeNull();
-
-        const answers = await page.$x('//*[@data-testid="answer"]');
-        expect(answers.length).toBe(2);
-    });
-
-    when('I click on an incorrect answer button', async () => {
-        const answers = await page.$x('//*[@data-testid="answer"]');
-        const textoBoton1 = await page.evaluate(button => button.innerText, answers[0]);
-        if(textoBoton1 !== "Madrid") {
-          await answers[0].click();
-        } else {
-          await answers[1].click();
-        }
+      const answers = await page.$x('//*[contains(@data-testid, "answer")]');
+      const textoBoton1 = await page.evaluate(button => button.innerText, answers[0]);
+      if(textoBoton1 === "MADRID") {
+        await answers[0].click();
+      } else {
+        await answers[1].click();
+      }
     });
 
-    then('The button turns red', async () => {
-        /*const answerButton = await page.$x('(//*[@data-testid="answer"])[2]');
-        const textoBoton1 = await page.evaluate(button => button.innerText, answerButton[0]);
-        const textoBoton2 = await page.evaluate(button => button.innerText, answerButton[1]);
-        if(textoBoton1 !== "Madrid") {
-          await expect(textoBoton1).not.toMatch(/Madrid/i);
-        } else {
-          await expect(textoBoton2).toMatch(/Madrid/i);
-        }*/
-        await expect(page).toMatchElement("button", { style: { color: 'red' } });
-        await expect(page).toMatchElement("button", { style: { color: 'green' } });
+    then('The selected answer is marked as right', async () => {
+      const answer = await page.$x('//*[contains(@data-testid, "success")]');
+      expect(answer.length).toBe(1);
+      const textoBoton = await page.evaluate(button => button.innerText, answer[0]);
+      await expect(textoBoton).toMatch(/Madrid/i);
     });
   })
 

diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -6,22 +6,22 @@ import NavBar from './components/NavBar';
 import Footer from './components/Footer';
 import Home from './pages/Home';
 import Homepage from './pages/Homepage';
-import Game from './pages/Game';
-import DiscoveringCitiesGame from './pages/DiscoveringCitiesGame';
-import WiseMenStackGame from './pages/WiseMenStackGame';
+import Game from './pages/games/Game';
+import DiscoveringCitiesGame from './pages/games/DiscoveringCitiesGame';
+import WiseMenStackGame from './pages/games/WiseMenStackGame';
 import Groups from './pages/Groups';
 import GroupDetails from './pages/GroupDetails';
 import Statistics from './pages/Statistics';
 import Ranking from './pages/Ranking'
 import Profile from './pages/Profile'
-import MultiplayerRoom from './pages/MultiplayerRoom';
-import MultiplayerGame from './pages/MultiplayerGame';
-import TheChallengeGame from './pages/TheChallengeGame';
-import WarmQuestion from './pages/WarmQuestionGame';
+import MultiplayerRoom from './pages/games/MultiplayerRoom';
+import MultiplayerGame from './pages/games/MultiplayerGame';
+import TheChallengeGame from './pages/games/TheChallengeGame';
+import WarmQuestionGame from './pages/games/WarmQuestionGame';
 import {Route, Routes} from 'react-router-dom';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { Box } from '@mui/material';
-import PrivateRoute from './PrivateRoute';
+import PrivateRoute from './pages/PrivateRoute';
 import NotFound from './pages/NotFound';
 
 const theme = createTheme({
@@ -66,7 +66,7 @@ function App() {
             <Route path="/multiplayerRoom" element={<PrivateRoute element={MultiplayerRoom}/>}/>
             <Route path="/theChallengeGame" element={<PrivateRoute element={TheChallengeGame}/>}/>
             <Route path="/multiplayerGame" element={<PrivateRoute element={MultiplayerGame}/>}/>
-            <Route path="/warmQuestionGame" element={<PrivateRoute element={WarmQuestion}/>}/>
+            <Route path="/warmQuestionGame" element={<PrivateRoute element={WarmQuestionGame}/>}/>
             <Route path="/group/menu" element={<PrivateRoute element={Groups}/>}/>
             <Route path="/group/:groupName" element={<PrivateRoute element={GroupDetails}/>} />
             <Route path="/statistics/:user" element={<PrivateRoute element={Statistics }/>}/>

diff --git a/webapp/src/__tests__/components/Chat.test.js b/webapp/src/__tests__/components/Chat.test.js
@@ -33,8 +33,8 @@ describe('Chat component', () => {
 
     test('sends a message', async () => {
 
-      jest.mock('../../pages/MultiplayerRoom', () => ({
-          ...jest.requireActual('../../pages/MultiplayerRoom'),
+      jest.mock('../../pages/games/MultiplayerRoom', () => ({
+          ...jest.requireActual('../../pages/games/MultiplayerRoom'),
           generateRoomCode: jest.fn().mockReturnValue('AAAAA'),
       }));
 

diff --git a/webapp/src/__tests__/components/NavBar.test.js b/webapp/src/__tests__/components/NavBar.test.js
@@ -26,8 +26,10 @@ describe('NavBar component', () => {
         </BrowserRouter>
       </SessionContext.Provider>
     );
-    const logo = screen.getByAltText('Logo');
-    await expect(logo).toBeInTheDocument();
+    const logo = screen.getAllByAltText('Logo');
+    // There should be the one for mobile and the one for normal devices
+    await expect(logo[0]).toBeInTheDocument();
+    await expect(logo[1]).toBeInTheDocument();
   });
 
   it('should render log-in option', async () => {
@@ -42,6 +44,7 @@ describe('NavBar component', () => {
     await expect(logIn).toBeInTheDocument();
   });
 
+
   // As there s a link for the menu (mobiles version) and in the propper nav, we have to check 2 elements appear
   it('should render navigation links', async () => {
     render(