From 8da9d047353050abbf2f2e564bd381f457709d49 Mon Sep 17 00:00:00 2001 From: Raymond Debasa Peralta Date: Sun, 28 Apr 2024 16:51:27 +0200 Subject: [PATCH] tests HistoricalUserData y ScoreBoard --- .../src/components/HistoricalUserData.test.js | 127 ++++++++++++++++++ webapp/src/components/ScoreBoard.test.js | 84 ++++++++++++ 2 files changed, 211 insertions(+) create mode 100644 webapp/src/components/HistoricalUserData.test.js create mode 100644 webapp/src/components/ScoreBoard.test.js diff --git a/webapp/src/components/HistoricalUserData.test.js b/webapp/src/components/HistoricalUserData.test.js new file mode 100644 index 00000000..cf3f12fc --- /dev/null +++ b/webapp/src/components/HistoricalUserData.test.js @@ -0,0 +1,127 @@ +import React from 'react'; +import { render, screen, waitFor, fireEvent } from '@testing-library/react'; +import axios from 'axios'; +import MockAdapter from 'axios-mock-adapter'; +import HistoricalUserData from './HistoricalUserData'; +import { BrowserRouter as Router } from 'react-router-dom'; + +const mockAxios = new MockAdapter(axios); + +describe('HistoricalUserData component', () => { + beforeEach(() => { + mockAxios.reset(); + localStorage.setItem('username', 'testUser'); + }); + + it('renders the main title correctly', () => { + render( + + + + ); + expect(screen.getByText('Historial de partidas de testUser')).toBeInTheDocument(); + }); + + it('fetches game history, renders game data, expands game details, and renders questions', async () => { + const mockGameHistory = [ + { + id: 1, + date: '2024-04-27T08:00:00', + duration: 60, + percentage: 75, + totalQuestions: 10, + correctAnswers: 7, + incorrectAnswers: 3, + questions: [ + { question: 'Question 1', correctAnswer: 'Answer 1', userAnswer: 'Answer 1' }, + { question: 'Question 2', correctAnswer: 'Answer 2', userAnswer: 'Answer 3' } + ] + } + ]; + + mockAxios.onGet('http://localhost:8000/getgamehistory/testUser').reply(200, mockGameHistory); + + render( + + + + ); + + // Espera a que se muestre la información de la partida + await waitFor(() => { + expect(screen.getByText('27/04/2024 08:00')).toBeInTheDocument(); + expect(screen.getByText('60 segundos')).toBeInTheDocument(); + expect(screen.getByText('75.00%')).toBeInTheDocument(); + expect(screen.getByText('10')).toBeInTheDocument(); + expect(screen.getByText('7')).toBeInTheDocument(); + expect(screen.getByText('3')).toBeInTheDocument(); + }); + + // Simula hacer clic en el botón de expansión para mostrar las preguntas ocultas + fireEvent.click(screen.getByText('+')); + + // Espera a que se muestre la pregunta esperada + await waitFor(() => { + expect(screen.getByText('Pregunta 1:')).toBeInTheDocument(); + expect(screen.getByText('Respuesta Correcta: Answer 1')).toBeInTheDocument(); + expect(screen.getByText('Respuesta del Usuario: Answer 1')).toBeInTheDocument(); + expect(screen.getByText('La respuesta fue: Correcta')).toBeInTheDocument(); + }); + + // Espera a que se muestre la segunda pregunta + await waitFor(() => { + expect(screen.getByText('Pregunta 2:')).toBeInTheDocument(); + expect(screen.getByText('Respuesta Correcta: Answer 2')).toBeInTheDocument(); + expect(screen.getByText('Respuesta del Usuario: Answer 3')).toBeInTheDocument(); + expect(screen.getByText('La respuesta fue: Incorrecta')).toBeInTheDocument(); + }); + }); + + it('handles pagination correctly', async () => { + const mockGameHistory = Array.from({ length: 20 }, (_, index) => ({ + id: index + 1, + date: `2024-04-${index < 9 ? '0' + (index + 1) : index + 1}T08:00:00`, + duration: 60, + percentage: 75, + totalQuestions: 10, + correctAnswers: 7, + incorrectAnswers: 3, + questions: [ + { question: `Question ${index + 1}`, correctAnswer: 'Answer 1', userAnswer: 'Answer 1' }, + { question: `Question ${index + 2}`, correctAnswer: 'Answer 2', userAnswer: 'Answer 3' } + ] + })); + + mockAxios.onGet('http://localhost:8000/getgamehistory/testUser').reply(200, mockGameHistory); + + render( + + + + ); + + // Espera a que se muestre la información de la primera página + await waitFor(() => { + // Busca la información de la fecha y el tiempo de partida utilizando texto exacto + expect(screen.queryAllByText('60 segundos')).not.toBeNull(); + expect(screen.queryAllByText('75.00%')).not.toBeNull(); + expect(screen.queryAllByText('10')).not.toBeNull(); + expect(screen.queryAllByText('7')).not.toBeNull(); + expect(screen.queryAllByText('3')).not.toBeNull(); + }); + + // Simula hacer clic en el botón para ir a la siguiente página + fireEvent.click(screen.getByLabelText('Go to next page')); + + // Espera a que se muestre la información de la segunda página + await waitFor(() => { + // Busca la información de la fecha y el tiempo de partida utilizando texto exacto en la segunda página + expect(screen.queryAllByText('60 segundos')).not.toBeNull(); + expect(screen.queryAllByText('75.00%')).not.toBeNull(); + expect(screen.queryAllByText('10')).not.toBeNull(); + expect(screen.queryAllByText('7')).not.toBeNull(); + expect(screen.queryAllByText('3')).not.toBeNull(); + }); + }); + +}); diff --git a/webapp/src/components/ScoreBoard.test.js b/webapp/src/components/ScoreBoard.test.js new file mode 100644 index 00000000..5416b221 --- /dev/null +++ b/webapp/src/components/ScoreBoard.test.js @@ -0,0 +1,84 @@ +import React from 'react'; +import { BrowserRouter as Router } from 'react-router-dom'; +import { render, screen, waitFor, fireEvent } from '@testing-library/react'; +import axios from 'axios'; +import MockAdapter from 'axios-mock-adapter'; +import ScoreBoard from './ScoreBoard'; + +const mockAxios = new MockAdapter(axios); + +describe('ScoreBoard component', () => { + beforeEach(() => { + mockAxios.reset(); + }); + + it('renders the scoreboard table with correct data', async () => { + const scoreboardData = [ + { id: 1, username: 'user1', totalCorrect: 5, totalIncorrect: 4, points: 15 }, + { id: 2, username: 'user2', totalCorrect: 7, totalIncorrect: 2, points: 30 }, + ]; + mockAxios.onGet('http://localhost:8000/getScoreBoard').reply(200, scoreboardData); + + render( + + + + ); + + await waitFor(() => { + const user1Element = screen.getByText('user1'); + const user2Element = screen.getByText('user2'); + + expect(user1Element).toBeInTheDocument(); + expect(user2Element).toBeInTheDocument(); + + // Check for specific cell values within user1Element + const user1Cells = screen.getAllByText('user1')[0].parentElement.querySelectorAll('td'); + expect(user1Cells[2]).toHaveTextContent('5'); + expect(user1Cells[3]).toHaveTextContent('4'); + expect(user1Cells[4]).toHaveTextContent('15'); + + // Check for specific cell values within user2Element + const user2Cells = screen.getAllByText('user2')[0].parentElement.querySelectorAll('td'); + expect(user2Cells[2]).toHaveTextContent('7'); + expect(user2Cells[3]).toHaveTextContent('2'); + expect(user2Cells[4]).toHaveTextContent('30'); + }); + }); + + it('handles pagination correctly', async () => { + const scoreboardData = Array.from({ length: 20 }, (_, index) => ({ + id: index + 1, + username: `user${index + 1}`, + totalCorrect: index + 1, + totalIncorrect: index + 2, + points: (index + 1) * 10, + })); + mockAxios.onGet('http://localhost:8000/getScoreBoard').reply(200, scoreboardData); + + render( + + + + ); + + await waitFor(() => { + expect(screen.getByText('user1')).toBeInTheDocument(); + expect(screen.getByText('user5')).toBeInTheDocument(); + expect(screen.queryByText('user6')).not.toBeInTheDocument(); // Not on first page + fireEvent.click(screen.getByLabelText('Go to next page')); + + expect(screen.getByText('user6')).toBeInTheDocument(); // On second page + }); + }); + + it('renders the main title correctly', () => { + render( + + + + ); + expect(screen.getByText('Ranking de Puntuaciones')).toBeInTheDocument(); + }); + +});