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