generated from Arquisoft/wiq_0
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
93 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(<Estadisticas isLogged={true} username="testUser" />); | ||
|
|
||
| // 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(<Estadisticas isLogged={true} username="testUser" />); | ||
|
|
||
| // 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(); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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('<Juego />', () => { | ||
| 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(<Juego />); | ||
| 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(<Juego />); | ||
|
|
||
| // 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(<Juego isLogged={true} username="test" numPreguntas={1} />); | ||
| await waitFor(() => getByText('CARGANDO...')); | ||
|
|
||
| const { getByTestId } = render(<Juego />); | ||
| 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(<Juego />); | ||
| 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(); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |