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();
+ });
+
+});