pabloYalberto work on style and format of the application

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

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

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);
     });
   })
 

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);
     });
   })
 

webapp/src/App.js

@@ -17,7 +17,7 @@ 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 WarmQuestionGame from './pages/WarmQuestionGame';
 import {Route, Routes} from 'react-router-dom';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { Box } from '@mui/material';
@@ -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 }/>}/>

webapp/src/__tests__/pages/DiscoveringCitiesGame.test.js

@@ -4,12 +4,12 @@ import { SessionContext } from '../../SessionContext'; // Importa el contexto ne
 import { BrowserRouter as Router } from 'react-router-dom';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import Game from '../../pages/DiscoveringCitiesGame';
+import DiscoveringCitiesGame from '../../pages/DiscoveringCitiesGame';
 import '../../localize/i18n';
 
 const mockAxios = new MockAdapter(axios);
-
-describe('Game component', () => {
+ 
+describe('Discovering Cities component', () => {
   beforeEach(() => {
     mockAxios.reset();
     // Mock the axios.post request to simulate a successful response
@@ -32,85 +32,78 @@ describe('Game component', () => {
     render( 
       <SessionContext.Provider value={{ username: 'exampleUser' }}>
         <Router>
-          <Game />
+          <DiscoveringCitiesGame />
         </Router>
       </SessionContext.Provider>
     );
 
     expect(screen.getByRole('progressbar'));
-    //expect(screen.findByText('1'));
-    //expect(screen.findByText('1/5'));
 
     // waits for the question to appear
-    await waitFor(() => screen.getByText('Which is the capital of Spain?'));
+    await waitFor(() => screen.getByTestId('question'));
 
-    expect(screen.findByText('Which is the capital of Spain?'));
+    expect(screen.getByTestId('question'));
     expect(screen.findByText('Madrid'));
     expect(screen.findByText('Barcelona'));
     expect(screen.findByText('Paris'));
     expect(screen.findByText('London'));
-
-    expect(screen.getByRole('button', { name: /Pause/i }));
 
   });
 
   it('should guess correct answer', async () => {
     render( 
       <SessionContext.Provider value={{ username: 'exampleUser' }}>
         <Router>
-          <Game />
+          <DiscoveringCitiesGame />
         </Router>
       </SessionContext.Provider>
     );
 
     // waits for the question to appear
-    await waitFor(() => screen.getByText('Which is the capital of Spain?'));
+    await waitFor(() => screen.getByTestId('question'));
     const correctAnswer = screen.getByRole('button', { name: 'Madrid' });
 
-    expect(correctAnswer).not.toHaveStyle({ backgroundColor: 'green' });
+    expect(correctAnswer).toHaveStyle({ backgroundColor: 'rgb(0, 102, 153);' });
 
     //selects correct answer
     fireEvent.click(correctAnswer);
 
-    //expect(screen.findByText('1')).toHaveStyle({ backgroundColor: 'lightgreen' });
-
-    expect(correctAnswer).toHaveStyle({ backgroundColor: 'green' });
+    expect(correctAnswer).toHaveStyle({ backgroundColor: 'rgb(51, 153, 102);' });
 
   });
 
   it('should choose incorrect answer', async () => {
     render( 
       <SessionContext.Provider value={{ username: 'exampleUser' }}>
         <Router>
-          <Game />
+          <DiscoveringCitiesGame />
         </Router>
       </SessionContext.Provider>
     );
     // waits for the question to appear
-    await waitFor(() => screen.getByText('Which is the capital of Spain?'));
+    await waitFor(() => screen.getByTestId('question'));
     const incorrectAnswer = screen.getByRole('button', { name: 'Barcelona' });
 
-    expect(incorrectAnswer).not.toHaveStyle({ backgroundColor: 'red' });
+    expect(incorrectAnswer).toHaveStyle({ backgroundColor: 'rgb(0, 102, 153);' });
 
     //selects correct answer
     fireEvent.click(incorrectAnswer);
 
-    expect(incorrectAnswer).toHaveStyle({ backgroundColor: 'red' });
-    //expect(screen.findByText('1')).toHaveStyle({ backgroundColor: 'salmon' });
+    expect(incorrectAnswer).toHaveStyle({ backgroundColor: 'rgb(153, 0, 0);' });
 
   });
 
   it('should not answer the question', async () => {
     render( 
       <SessionContext.Provider value={{ username: 'exampleUser' }}>
         <Router>
-          <Game />
+          <DiscoveringCitiesGame />
         </Router>
       </SessionContext.Provider>
     );
 
     // waits for the question to appear
-    await waitFor(() => screen.getByText('Which is the capital of Spain?'));
+    await waitFor(() => screen.getByTestId('question'));
 
     setTimeout(() => {
       // Comprobamos que el callback ha sido llamado después del tiempo especificado
@@ -119,4 +112,24 @@ describe('Game component', () => {
 
   }, 4500);
 
+  it('should pause and resume the game after answering a question', async () => {
+    render(
+        <SessionContext.Provider value={{ username: 'exampleUser' }}>
+            <Router>
+                <DiscoveringCitiesGame />
+            </Router>
+        </SessionContext.Provider>
+    );
+
+    await waitFor(() => screen.getByTestId('question'));
+
+    fireEvent.click(screen.getByRole('button', { name: 'Madrid' }));
+
+    await waitFor(() => screen.getByTestId('pause'));
+
+    fireEvent.click(screen.getByTestId('pause'));
+
+    expect(screen.getByTestId('play')).toBeInTheDocument();
+  });
+
 });

webapp/src/__tests__/pages/Game.test.js

@@ -35,11 +35,7 @@ describe('Game component', () => {
     );
   });
 
-  it('should render question, answers and other ', async () => {
-    expect(screen.getByRole('progressbar'));
-    expect(screen.findByText('1'));
-    //expect(screen.findByText('1/3'));
-
+  it('should render question', async () => {
     // waits for the question to appear
     await waitFor(() => screen.getByText('Which is the capital of Spain?'.toUpperCase()));
 
@@ -94,6 +90,12 @@ describe('Game component', () => {
     expect(pauseButton);
     fireEvent.click(pauseButton);
     expect(screen.getByTestId("play"));
-  })
+  });
+
+  it('should render progress bar', async () => {
+    await waitFor(() => screen.getByText('Which is the capital of Spain?'.toUpperCase()));
+    const progressBar = screen.getByTestId('prog_bar0');
+    await expect(progressBar).toBeInTheDocument();
+  });
 
 });