diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 079d454..b58f220 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -4,7 +4,11 @@ on: branches: - master - develop +<<<<<<< HEAD - jota +======= + - LaraFMz +>>>>>>> LaraFMz pull_request: types: [opened, synchronize, reopened] jobs: diff --git a/webapp/src/components/Pages/Estadisticas.js b/webapp/src/components/Pages/Estadisticas.js index 866ecf9..dcaa63f 100644 --- a/webapp/src/components/Pages/Estadisticas.js +++ b/webapp/src/components/Pages/Estadisticas.js @@ -32,13 +32,14 @@ const Estadisticas = ({isLogged, username}) => { setCompletedGames(datos.user.completedGames); setAverageTime(datos.user.averageTime); } catch (error) { - setError(error.response.data.error); + setError('Error al cargar la información'); } }; return (

ESTADÍSTICAS

+ {error &&

{error}

} diff --git a/webapp/src/components/Pages/Estadisticas.test.js b/webapp/src/components/Pages/Estadisticas.test.js new file mode 100644 index 0000000..2e7b9d5 --- /dev/null +++ b/webapp/src/components/Pages/Estadisticas.test.js @@ -0,0 +1,57 @@ +import React from 'react'; +import { render, waitFor } from '@testing-library/react'; +import axiosMock from 'axios'; +import Estadisticas from './Estadisticas'; + +// Mock de datos para simular la respuesta del servidor +const mockUserData = { + user: { + correctAnswers: 10, + incorrectAnswers: 5, + completedGames: 20, + averageTime: 30, + }, +}; + +// Mock de axios.get para simular la solicitud al servidor +jest.mock('axios'); + +describe('Estadisticas Component', () => { + it('renders estadisticas component with user data', async () => { + // Configuración del mock de axios.get para devolver los datos simulados + axiosMock.get.mockResolvedValueOnce({ data: mockUserData }); + + // Renderizar el componente + const { getByText } = render(); + + // Esperar a que se carguen los datos del usuario + await waitFor(() => { + // Verificar que los datos del usuario se muestran en el componente + expect(getByText('Nº Preguntas acertadas:')).toBeInTheDocument(); + expect(getByText('10')).toBeInTheDocument(); // Verifica que el número de preguntas acertadas sea 10 + + expect(getByText('Nº Preguntas falladas:')).toBeInTheDocument(); + expect(getByText('5')).toBeInTheDocument(); // Verifica que el número de preguntas falladas sea 5 + + expect(getByText('Nº Juegos completados:')).toBeInTheDocument(); + expect(getByText('20')).toBeInTheDocument(); // Verifica que el número de juegos completados sea 20 + + expect(getByText('Tiempo medio por juego:')).toBeInTheDocument(); + expect(getByText('30')).toBeInTheDocument(); // Verifica que el tiempo medio por juego sea 30 + }); + }); + + it('renders error message if user data fetching fails', async () => { + // Configuración del mock de axios.get para simular un error al obtener los datos del usuario + axiosMock.get.mockRejectedValueOnce(new Error('Network Error')); + + // Renderizar el componente + const { getByText } = render(); + + // Esperar a que se cargue el mensaje de error + await waitFor(() => { + // Verificar que el mensaje de error se muestra en el componente + expect(getByText('Error al cargar la información')).toBeInTheDocument(); + }); + }); +}); diff --git a/webapp/src/components/Pages/Juego.js b/webapp/src/components/Pages/Juego.js index 0f4c1d2..da5b307 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'; @@ -32,7 +31,7 @@ const Juego = ({isLogged, username, numPreguntas}) => { const navigate= useNavigate() - //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--; @@ -107,7 +106,6 @@ const Juego = ({isLogged, username, numPreguntas}) => { setNumRespuestasIncorrectas(numRespuestasIncorrectas + 1); setVictoria(false) } - //storeResult(victoria) cambiarColorBotones(respuesta, true); }; @@ -179,10 +177,10 @@ const Juego = ({isLogged, username, numPreguntas}) => { buttonContainer.querySelector('#boton4').style.border = "6px solid #1948D9"; } - //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