diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 29e5ad2..8868d53 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -4,6 +4,7 @@ on:
branches:
- master
- develop
+ - LaraFMz
pull_request:
types: [opened, synchronize, reopened]
jobs:
diff --git a/webapp/src/components/Pages/Juego.js b/webapp/src/components/Pages/Juego.js
index 4dc2a68..9e43abf 100644
--- a/webapp/src/components/Pages/Juego.js
+++ b/webapp/src/components/Pages/Juego.js
@@ -1,4 +1,3 @@
-// src/components/Login.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import '../Estilos/juego.css';
@@ -27,7 +26,7 @@ const Juego = ({isLogged, username, numPreguntas}) => {
const [numRespuestasCorrectas, setNumRespuestasCorrectas] = useState(0)
const [numRespuestasIncorrectas, setNumRespuestasIncorrectas] = useState(0)
- //Variables para la obtencion y modificacion de estadisticas del usuario
+ //Variables para la obtencion y modificacion de estadisticas del usuario y de preguntas
const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
//Primer render para un comportamiento diferente
@@ -69,7 +68,7 @@ const Juego = ({isLogged, username, numPreguntas}) => {
)
}
catch (error) {
- console.error('Error al actualizar las estadisticas:', error);
+ console.error('Error al crear las preguntas:', error);
// Manejar el error de acuerdo a tus necesidades
}
numPreguntas--;
@@ -110,7 +109,6 @@ const Juego = ({isLogged, username, numPreguntas}) => {
console.log("Incorrectas: "+numRespuestasIncorrectas)
setVictoria(false)
}
- //storeResult(victoria)
cambiarColorBotones(respuesta, true);
};
@@ -184,10 +182,10 @@ const Juego = ({isLogged, username, numPreguntas}) => {
console.log("termina descolorear")
}
- //Primer render para un comportamiento diferente
- useEffect(() => {
- //updateCompletedGames()
- }, [finishGame])
+ // //Primer render para un comportamiento diferente
+ // useEffect(() => {
+ //
+ // }, [finishGame])
//Funcion que se llama al hacer click en el boton Siguiente
const clickSiguiente = () => {
diff --git a/webapp/src/components/Pages/Juego.test.js b/webapp/src/components/Pages/Juego.test.js
index 1795313..86e8ea0 100644
--- a/webapp/src/components/Pages/Juego.test.js
+++ b/webapp/src/components/Pages/Juego.test.js
@@ -1,85 +1,41 @@
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';
-// Mock de axios para simular respuestas de la API
-jest.mock('axios');
+describe('Juego component', () => {
+ let mock;
-describe('', () => {
beforeEach(() => {
- // Limpiar todos los mocks antes de cada prueba
- jest.clearAllMocks();
+ mock = new MockAdapter(axios);
});
- it('debería renderizar el componente correctamente', () => {
- const { getByText } = render();
- expect(getByText('CARGANDO...')).toBeInTheDocument();
+ afterEach(() => {
+ mock.restore();
});
- it('debería mostrar la pregunta y las respuestas después de cargar', async () => {
- // Mock de respuesta exitosa de la API
- axios.get.mockResolvedValueOnce({
- data: {
- question: '¿Cuál es la capital de Francia?',
- answerGood: 'París',
- answers: ['Londres', 'Madrid', 'París', 'Berlín'],
- },
- });
+ it('fetches questions when mounted', async () => {
+ const mockData = {
+ question: '¿Cuál es la capital de Francia?',
+ answerGood: 'París',
+ answers: ['Londres', 'Madrid', 'Berlín', 'París']
+ };
- const { getByText, getByTestId } = render();
-
- // Esperar a que se carguen las preguntas
- await waitFor(() => {
- expect(getByText('¿Cuál es la capital de Francia?')).toBeInTheDocument();
- });
+ mock.onGet('http://localhost:8000/pregunta').reply(200, mockData);
- // Verificar que las respuestas se muestran correctamente
- expect(getByTestId('boton1')).toHaveTextContent('Londres');
- expect(getByTestId('boton2')).toHaveTextContent('Madrid');
- expect(getByTestId('boton3')).toHaveTextContent('París');
- expect(getByTestId('boton4')).toHaveTextContent('Berlín');
- });
-
- it('debería cambiar los colores de los botones al hacer clic en una respuesta', async () => {
- axios.get.mockResolvedValueOnce({
- data: {
- question: '¿Cuál es la capital de Francia?',
- answerGood: 'París',
- answers: ['Londres', 'Madrid', 'París', 'Berlín'],
- },
- });
+ const { container, getByText } = render();
+ await waitFor(() => getByText('CARGANDO...'));
- const { getByTestId } = render();
- await waitFor(() => {});
+ await waitFor(() => getByText(mockData.question));
- fireEvent.click(getByTestId('boton3')); // Seleccionar la respuesta correcta
-
- // Verificar que los colores de los botones se hayan actualizado correctamente
- expect(getByTestId('boton1')).toHaveStyle('background-color: #E14E4E');
- expect(getByTestId('boton2')).toHaveStyle('background-color: #E14E4E');
- expect(getByTestId('boton3')).toHaveStyle('background-color: #05B92B');
- expect(getByTestId('boton4')).toHaveStyle('background-color: #E14E4E');
- });
+ expect(getByText('¿Cuál es la capital de Francia?')).toBeInTheDocument();
+ expect(getByText('París')).toBeInTheDocument();
+ expect(getByText('Londres')).toBeInTheDocument();
+ expect(getByText('Berlín')).toBeInTheDocument();
+ expect(getByText('1 / 1')).toBeInTheDocument();
+ });
- it('debería avanzar a la siguiente pregunta al hacer clic en el botón SIGUIENTE', async () => {
- axios.get.mockResolvedValue({
- data: {
- question: '¿Cuál es la capital de Francia?',
- answerGood: 'París',
- answers: ['Londres', 'Madrid', 'París', 'Berlín'],
- },
- });
+
- const { getByText, getByTestId } = render();
- await waitFor(() => {});
-
- fireEvent.click(getByTestId('boton3')); // Seleccionar la respuesta correcta
- fireEvent.click(getByText('SIGUIENTE'));
-
- // Verificar que se cargue la siguiente pregunta
- await waitFor(() => {
- expect(getByText('¿Cuál es la capital de Francia?')).toBeInTheDocument();
- });
- });
-});
+});
\ No newline at end of file