tests HistoricalUserData y ScoreBoard

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

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(
+      <Router>
+        <ScoreBoard />
+      </Router>
+    );
+
+    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(
+      <Router>
+        <ScoreBoard />
+      </Router>
+    );
+
+    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(
+      <Router>
+        <ScoreBoard />
+      </Router>
+    );
+    expect(screen.getByText('Ranking de Puntuaciones')).toBeInTheDocument();
+  });
+
+});