Test MainPage y cambios primer prototipo

webapp/src/components/Game.css

@@ -14,7 +14,7 @@ button[title="btnsPreg"]{
     margin: 0.5em;
     padding-top: 0.2em;
     padding-bottom: 0.2em;
-    background-color: rgba(41, 120, 152, 0.764);
+    background-color: rgba(29, 86, 109, 0.764);
 }
 
 button[title="puntuacion"]:disabled{

webapp/src/components/Game.js

@@ -289,7 +289,7 @@ const getQuestions = () => {
     console.log("finishGame " + correctCounter);
     var correctas = (correctCounter / numberOfQuestions) * 100;
     console.log("corr1 " + correctas);
-    if (!Number.isInteger(percentage)){
+    if (!Number.isInteger(correctas)){
       correctas = correctas.toFixed(2);
       console.log("dentro " + correctas);
     }

webapp/src/components/HistoricalData.js

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import React, { useState} from 'react';
+import React, { useState, useEffect} from 'react';
 import { useNavigate} from 'react-router-dom';
 import { Container, Button} from '@mui/material';
 import './HistoricalData.css';
@@ -10,6 +10,11 @@ const HistoricalData = () => {
 
   const [questionsHistory, setQuestionsHistory] = useState([]);
 
+  useEffect(() => {
+    handleShowHistory();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const  handleShowHistory = async () => {
     try{
       // It makes a petition to the api and store the response
@@ -34,9 +39,7 @@ const HistoricalData = () => {
           Página anterior
         </Button>
 
-        <Button variant="contained" color="primary" onClick={handleShowHistory}> 
-          Cargar histórico
-        </Button>
+
     </div>
     <div>
         <table>

webapp/src/components/HistoricalUserData.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
 import { Container, Button } from '@mui/material';
@@ -9,6 +9,12 @@ const HistoricalUserData = () => {
 
   const [gameHistory, setGameHistory] = useState([]);
 
+
+  useEffect(() => {
+    handleLoadHistory();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
 
   const handleLoadHistory = async () => {
     try {
@@ -39,9 +45,6 @@ const HistoricalUserData = () => {
           Página anterior
         </Button>
 
-      <Button variant="contained" color="primary" onClick={handleLoadHistory}>
-        Cargar historial de partidas
-      </Button>
       <div>
         <h2>Historial de Partidas:</h2>
         <table>

webapp/src/components/MainPage.js

@@ -52,7 +52,7 @@ const MainPage = () => {
                     <Grid item xs={12} md={6}>
                         <div title='main'>
                             <Button variant="contained" color="primary" fullWidth onClick={handleShowGame}  >
-                                Empezar juego
+                                Nuevo juego
                             </Button>
                             <Button variant="contained" color="primary" fullWidth onClick={handleShowHistoricalData}  >
                                 Histórico de preguntas

webapp/src/components/MainPage.test.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import MainPage from './MainPage';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+const mockAxios = new MockAdapter(axios);
+
+describe('MainPage component', () => {
+  beforeEach(() => {
+    mockAxios.reset();
+  });
+
+  it('muestra la página principal correctamente', async () => {
+
+    render(<Router>
+        <MainPage />
+      </Router>);
+
+    const element1 = screen.getByText(/¡Bienvenido a/);
+    const element2 = screen.getByText(/WIQ 2024!/);
+    const newGameButton = screen.getByRole('button', { name: 'Nuevo juego' });
+    const historicalQuestionsButton = screen.getByRole('button', { name: 'Historial de preguntas' });
+    const historialUserDataButton = screen.getByRole('button', { name: 'Historial del usuario' });
+    const registerUsersButton = screen.getByRole('button', { name: 'Usuarios Registrados' });
+
+    // Verifica si el elemento se encuentra en el DOM
+    expect(element1).toBeInTheDocument();
+    expect(element2).toBeInTheDocument();
+
+    // Simulate user input
+    await act(async () => {
+        fireEvent.click(newGameButton);
+        fireEvent.click(historicalQuestionsButton);
+        fireEvent.click(historialUserDataButton);
+        fireEvent.click(registerUsersButton);
+      });
+  });
+});
+
+