Cubriendo codigo de Juego.js con tests

webapp/src/components/Pages/Juego.test.js

@@ -2,20 +2,28 @@ import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import Juego from './Juego';//
+import Juego from './Juego';
 
 describe('Juego component', () => {
   let mock;
+  //Toda la informacion mockeada
+  //Para las preguntas
   const mockData = {
     question: '¿Cuál es la capital de Francia?',
     answerGood: 'París',
     answers: ['Londres', 'Madrid', 'Berlín', 'París']
   };
+  //Para actualizar estadísticas
+  const responseData = { success: true };
+  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
+     //Al hacer la llamada a la pregunta, devolvemos la informacion mockeada
      mock.onGet('http://localhost:8000/pregunta').reply(200, mockData);
-  });
+     //Al hacer la llamada a la ruta de actualizar estadisticas, devolvemos el resultado mockeado
+     mock.onGet('http://localhost:8000/updateStats?username=test&numRespuestasCorrectas=0&numRespuestasIncorrectas=0').reply(200,responseData);
+    });
 
   afterEach(() => {
     mock.restore();
@@ -50,8 +58,8 @@ describe('Juego component', () => {
      expect(getByText('Madrid')).toBeDisabled();
    });
 
-   it('responde la pregunta incorrectamente', async () => {
-     const { container, getByText } = render(<Juego isLogged={true} username="test" numPreguntas={1} />);
+   it('responde la pregunta incorrectamente y despinta al hacer click en Siguiente', async () => {
+     const { container, getByText } = render(<Juego isLogged={true} username="test" numPreguntas={2} />);
 
      await waitFor(() => getByText(mockData.question));
 
@@ -64,30 +72,30 @@ describe('Juego component', () => {
      expect(getByText('Londres')).toBeDisabled();
      expect(getByText('Berlín')).toBeDisabled();
      expect(getByText('Madrid')).toBeDisabled();
-   });
-
-  //  it('se acaba el tiempo y se revelan las preguntas', async () => {
-  //   const { container, getByText } = render(<Juego isLogged={true} username="test" numPreguntas={1} />);
-
-  //   await waitFor(() => getByText(mockData.question));
-
-    //Esperamos a que el temporizador sea 0 (no funciona)
-    // await waitFor(() => {
-    //   const componente = getById('temp');
-    //   expect(componente.textContent).toBe(0);
-    // });
-
-    //Todos los botones deben deshabilitarse
-    // expect(getByText('París')).toBeDisabled();
-    // expect(getByText('Londres')).toBeDisabled();
-    // expect(getByText('Berlín')).toBeDisabled();
-    // expect(getByText('Madrid')).toBeDisabled();
 
-    //});
-
-
+     //Al hacer click en Siguiente, se habilitan los botones y se despintan
+     fireEvent.click(getByText('SIGUIENTE')); 
+     await waitFor(() => getByText(mockData.question));
+     expect(getByText('París')).toBeEnabled();
+     expect(getByText('Londres')).toBeEnabled();
+     expect(getByText('Berlín')).toBeEnabled();
+     expect(getByText('Madrid')).toBeEnabled();
+     expect(getByText('París')).toHaveStyle('background-color: #FFFFFF');
+     expect(getByText('París')).toHaveStyle('background-color: #FFFFFF');
+     expect(getByText('París')).toHaveStyle('background-color: #FFFFFF');
+     expect(getByText('París')).toHaveStyle('background-color: #FFFFFF');
+
+   });
 
-
+   it('finalizar Juego', async () => {
+     const { container, getByText } = render(<Juego isLogged={true} username="test" numPreguntas={1} />);
+     await waitFor(() => getByText(mockData.question));
+     fireEvent.click(getByText('SIGUIENTE')); 
+     fireEvent.click(getByText('FINALIZAR PARTIDA')); 
+     expect(getByText('FINALIZAR PARTIDA')).toBeDisabled();
+     console.log(container.numRespuestasCorrectas)
+     //expect(axios.get).toHaveBeenCalledWith('http://localhost:8000/updateStats?username=test&numRespuestasCorrectas=0&numRespuestasIncorrectas=0');
+    });