Merge branch 'develop-QuestionGenerator' of https://github.com/Arquis…

…oft/wiq_es1b into develop-QuestionGenerator

webapp/src/App.js

@@ -18,6 +18,7 @@ function App() {
 
 
     <Container component="main" maxWidth="xs">
+
       <CssBaseline />
       {showLogin ? <Login /> : <AddUser />}
       <Typography component="div" align="center" sx={{ marginTop: 2 }}>
@@ -33,6 +34,7 @@ function App() {
             )}
 
       </Typography>
+
     </Container>
   );
 }

webapp/src/components/GetQuestion.js

@@ -155,6 +155,7 @@ const GetQuestion = () => {
               {index + 1}. 
             </Typography>
             <Button 
+                data-testid={`answer${index}Button`}
                 variant="contained" 
                 sx={{ backgroundColor: 'dimgrey', fontWeight: 'bold', '&:hover': { backgroundColor: 'black' }}}
                 key={index} 
@@ -181,6 +182,7 @@ const GetQuestion = () => {
     <div>
         {/* Button to request a new question It will be disabled when the question is not answered */}
         <Button
+          data-testid="nextQuestionButton"
           variant="contained" 
           style={{ width: '100%', fontWeight: 'bold' }}
           onClick={getQuestion}

webapp/src/components/GetQuestion.test.js

@@ -10,36 +10,81 @@ const mockAxios = new MockAdapter(axios);
 describe('GetQuestion component', () => {
   beforeEach(() => {
     mockAxios.reset();
-  });
-
-  it('should show the question', async () => {
     mockAxios.onPost('http://localhost:8000/getQuestion').reply(200, {
       question: 'Test question',
       correctAnswerLabel: 'Test correct answer',
-      answerLabelSet: ['Test answer 1', 'Test answer 2', 'Test answer 3', 'Test answer 4']
+      answerLabelSet: ['Test answer 1', 'Test answer 2', 'Test answer 3', 'Test correct answer']
     });
-
+
+    mockAxios.onPost('http://localhost:8000/saveHistorial').reply(200, {   
+    });
+  });
+
+  it('Should render question and answer buttons', async () => {   
     render(
     <Router>
       <Question />
     </Router>);
-
 
-    // Esperar a que la pregunta aparezca en el documento
+    // Wait for the question to appear in the document
     await waitFor(() => screen.getByText('Test question'));
-
 
-    // Comprobar que hay 5 botones, 4 de las respuestas y 1 del next question
+    // Check that there are 5 buttons, 4 for the answers and 1 for the next question
     const buttons = await screen.findAllByRole('button');
     expect(buttons.length).toBe(7);
 
-    // Comprobar que la pregunta y las respuestas están en la pantalla
+    // Check that the question and answers are on the screen
     expect(screen.getByText('Test question')).toBeInTheDocument();
     expect(screen.getByText('Test answer 1')).toBeInTheDocument();
     expect(screen.getByText('Test answer 2')).toBeInTheDocument();
     expect(screen.getByText('Test answer 3')).toBeInTheDocument();
-    expect(screen.getByText('Test answer 4')).toBeInTheDocument();
+    expect(screen.getByText('Test correct answer')).toBeInTheDocument();
+  });
 
+  it('Should play and guess the correct answer', async () => {    
+    render(
+    <Router>
+      <Question />
+    </Router>);
+
+    // Wait for the question to appear in the document
+    await waitFor(() => screen.getByText('Test question'));
+
+    // Click the correct answer
+    fireEvent.click(screen.getByText('Test correct answer')); 
+
+    // Wait for feedback to be rendered
+    await waitFor(() => expect(screen.getByText('You have won! Congratulations!')).toBeInTheDocument()); 
+  });
+
+  it('Should play and select an incorrect answer', async () => {    
+    render(
+    <Router>
+      <Question />
+    </Router>);
+
+    // Wait for the question to appear in the document
+    await waitFor(() => screen.getByText('Test question'));
+
+    // Click the correct answer
+    fireEvent.click(screen.getByText('Test answer 1')); 
+
+    // Wait for feedback to be rendered
+    await waitFor(() => expect(screen.getByText('You lost! Try again :(')).toBeInTheDocument()); 
   });
 
 });
+/*
+jest.mock('axios');
+
+  beforeEach(() => {
+      axios.post.mockResolvedValue({
+        data: {
+          question: 'What is the capital of France?',
+          correctAnswerLabel: 'Paris',
+          answerLabelSet: ['Paris', 'London', 'Madrid', 'Lisbon']
+        }
+      });
+    });
+    expect(screen.getByTestId('answer0Button')).toBeInTheDocument();
+*/