-
Equipo WIQ_es1a
-
Nuestro equipo de desarrollo
-
-
-
- | Nombre |
- UO |
- GitHub |
-
-
-
+
+ Equipo WIQ_es1a
+ Nuestro equipo de desarrollo
+
+
+
+ | Nombre |
+ UO |
+ GitHub |
+
+
+
{designers.map((designer, index) => (
-
- | {designer.name} |
- {designer.id} |
- Mi GitHub |
-
+
+ | {designer.name} |
+ {designer.id} |
+ Mi GitHub |
+
))}
-
-
-
+
+
+
);
};
-export default Sobre;
\ No newline at end of file
+export default Sobre;
diff --git a/webapp/src/pages/Sobre/Sobre.test.js b/webapp/src/pages/Sobre/Sobre.test.js
new file mode 100644
index 00000000..426c4654
--- /dev/null
+++ b/webapp/src/pages/Sobre/Sobre.test.js
@@ -0,0 +1,37 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import Sobre from "./Sobre";
+
+describe("Sobre component", () => {
+ test("renders heading with team name", () => {
+ render(
+
+
+
+ );
+ const headingElement = screen.getByRole("heading", { name: /Equipo WIQ_es1a/i });
+ expect(headingElement).toBeInTheDocument();
+ });
+
+ test("renders table with designer information", () => {
+ render(
+
+
+
+ );
+
+ const designerNames = ["Martín Cancio Barrera", "Iyán Fernández Riol", "Rodrigo García Iglesias"];
+ designerNames.forEach(name => {
+ const nameElement = screen.getByText(name);
+ expect(nameElement).toBeInTheDocument();
+ });
+
+ const githubLinks = ["https://github.com/CANCI0", "https://github.com/iyanfdezz", "https://github.com/Rodrox11"];
+ githubLinks.forEach(link => {
+ const linkElements = screen.getAllByRole("link", { href: link });
+ expect(linkElements.length).toBeGreaterThanOrEqual(1);
+ });
+ });
+});
+
diff --git a/webapp/src/pages/Stats/Stats.css b/webapp/src/pages/Stats/Stats.css
deleted file mode 100644
index 866c84cf..00000000
--- a/webapp/src/pages/Stats/Stats.css
+++ /dev/null
@@ -1,53 +0,0 @@
-/* Stats.css */
-body {
- font-family: 'Arial', sans-serif;
- margin: 0;
- padding: 0;
- background-color: #fff;
-}
-
-.container {
- max-width: 800px;
- margin: 0 auto;
- padding: 1.5rem;
- background-color: #fff;
- border-radius: 8px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-}
-
-#usernameInput {
- margin-bottom: 2rem;
-}
-
-#usernameInput input[type="text"] {
- width: 100%;
- padding: 0.5rem;
- font-size: 1rem;
-}
-
-table {
- width: 100%;
- border-radius: 15px;
- border-collapse: collapse;
- background-color: #f9f9f9;
- box-shadow: 5px 5px 6px 0px var(--shadow);
- border: 1px solid var(--borders);
-}
-
-table th,
-table td {
- padding: 0.75rem;
- text-align: center;
-}
-
-table th {
- background-color: #eee;
- font-weight: bold;
- color: #333;
- box-shadow: 5px 5px 6px 0px var(--shadow);
-}
-
-table td {
- font-size: 1rem;
- color: #555;
-}
diff --git a/webapp/src/pages/Stats/Stats.js b/webapp/src/pages/Stats/Stats.js
index cafb9745..34103fe8 100644
--- a/webapp/src/pages/Stats/Stats.js
+++ b/webapp/src/pages/Stats/Stats.js
@@ -1,42 +1,80 @@
import React, { useState, useEffect } from "react";
+import {
+ Input,
+ Button,
+ Heading,
+ Table,
+ Tbody,
+ Tr,
+ Td,
+ Box,
+ Flex
+} from "@chakra-ui/react";
import Nav from "../../components/Nav/Nav.js";
import Footer from "../../components/Footer/Footer.js";
-import "./Stats.css";
const Stats = () => {
const gatewayUrl = process.env.GATEWAY_SERVICE_URL || "http://localhost:8000";
- const [username, setUsername] = useState(localStorage.username);
+ const [username, setUsername] = useState(localStorage.username || "error");
const [stats, setStats] = useState(null);
- const [isLoading, setIsLoading] = useState(true);
+ const [gamemode, setGamemode] = useState("clasico");
+ const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
+ const [fetched, setFetched] = useState(false);
+
+ const fetchStats = () => {
+ setIsLoading(true);
+ fetch(gatewayUrl + `/stats?user=${username}&gamemode=${gamemode}`)
+ .then((response) => response.json())
+ .then((data) => {
+ setStats(data);
+ setIsLoading(false);
+ })
+ .catch((error) => {
+ console.error("Error al obtener las estadísticas:", error);
+ setError(
+ error.message || "Ha ocurrido un error al obtener las estadísticas"
+ );
+ setIsLoading(false);
+ });
+ };
useEffect(() => {
- const delayDebounceFn = setTimeout(() => {
- fetch(gatewayUrl + `/getstats?user=${username}`)
- .then((response) => response.json())
- .then((data) => {
- setStats(data);
- setIsLoading(false);
- })
- .catch((error) => {
- console.error("Error al obtener las preguntas:", error);
- setError(error);
- setIsLoading(false);
- });
- }, 2000);
- return () => clearTimeout(delayDebounceFn);
+ if (!fetched) {
+ fetchStats();
+ setFetched(true);
+ }
// eslint-disable-next-line
- }, [username]);
+ }, [username, gamemode]);
const handleUsernameChange = (event) => {
setUsername(event.target.value);
};
+ const handleGamemodeChange = (mode) => {
+ setGamemode(mode);
+ // Llama a fetchStats() para actualizar las estadísticas cuando se cambia el modo de juego
+ fetchStats();
+ };
+
+ const handleSearch = () => {
+ fetchStats();
+ };
+
+ const getModeName = () => {
+ if (gamemode === "clasico") {
+ return "Clásico";
+ } else if (gamemode === "bateria") {
+ return "Batería de sabios";
+ }
+ return gamemode;
+ };
+
if (isLoading) {
return (
-
Cargando ...
+
Cargando ...
Se está consultando su búsqueda, espere unos instantes.
);
@@ -46,21 +84,22 @@ const Stats = () => {
return (
<>
-
-
-
+
+
-
Error: {error}
-
+
+ Error: {error}
+
Por favor compruebe si los valores del formulario son correctos e
inténtelo de nuevo
-
+
);
@@ -68,64 +107,96 @@ const Stats = () => {
return (
<>
-
-
-
Estadísticas de Usuario
-
-
- {stats === null && !isLoading && (
+
+
+
+
+
+
+
+
+
+
+
+ {stats === null && !isLoading && (
+ El usuario no ha jugado ninguna partida.
+ )}
+ {stats && (
-
El usuario no ha jugado ninguna partida.
+
+ Estadísticas de {stats.username} - modo {getModeName()}
+
+
+
+
+ |
+ Partidas jugadas
+ |
+ {stats.nGamesPlayed} |
+
+
+ |
+ Puntos por partida
+ |
+ {stats.avgPoints.toFixed(2)} |
+
+
+ |
+ Puntos totales
+ |
+ {stats.totalPoints} |
+
+
+ |
+ Preguntas correctas totales
+ |
+ {stats.totalCorrectQuestions} |
+
+
+ |
+ Preguntas incorrectas totales
+ |
+ {stats.totalIncorrectQuestions} |
+
+
+ |
+ Porcentaje de aciertos
+ |
+ {stats.ratioCorrect.toFixed(2)}% |
+
+
+ |
+ Tiempo por pregunta (s):
+ |
+ {stats.avgTime.toFixed(2)} |
+
+
+
-
-
- | Usuario: |
- {stats.username} |
-
-
- | Juegos Jugados: |
- {stats.nGamesPlayed} |
-
-
- | Promedio de Puntos: |
- {stats.avgPoints.toFixed(2)} |
-
-
- | Puntos Totales: |
- {stats.totalPoints} |
-
-
- | Preguntas Correctas Totales: |
- {stats.totalCorrectQuestions} |
-
-
- | Preguntas Incorrectas Totales: |
- {stats.totalIncorrectQuestions} |
-
-
- | Ratio Correctas/Incorrectas: |
- {stats.ratioCorrectToIncorrect.toFixed(2)} |
-
-
- | Tiempo por pregunta (s): |
- {stats.avgTime.toFixed(2)} |
-
-
-
-
+
+
-
);
};
diff --git a/webapp/src/pages/Stats/Stats.test.js b/webapp/src/pages/Stats/Stats.test.js
new file mode 100644
index 00000000..78f856f2
--- /dev/null
+++ b/webapp/src/pages/Stats/Stats.test.js
@@ -0,0 +1,187 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import Stats from './Stats';
+import { BrowserRouter as Router } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+
+describe('Stats component', () => {
+ beforeEach(() => {
+ // Limpiamos el localStorage antes de cada prueba
+ localStorage.clear();
+ });
+
+ test('renders user statistics', async () => {
+ render(
+
+
+
+ );
+
+ // Espera hasta que el texto "Cargando ..." desaparezca
+ await waitFor(() => {
+ expect(screen.queryByText('Cargando ...')).not.toBeInTheDocument();
+ });
+
+ // Ahora, realiza las aserciones sobre las estadísticas
+ const statisticWordArray = screen.getAllByText(/Estadísticas/i);
+ statisticWordArray.forEach(statisticWord => {
+ expect(statisticWord).toBeInTheDocument();
+ });
+ });
+
+ test('fetches user statistics and displays them', async () => {
+ const userData = {
+ username: 'testUser',
+ nGamesPlayed: 10,
+ avgPoints: 7,
+ totalPoints: 70,
+ totalCorrectQuestions: 20,
+ totalIncorrectQuestions: 5,
+ ratioCorrect: 80,
+ avgTime: 15
+ };
+
+ // Simulamos el usuario almacenado en localStorage
+ localStorage.setItem('username', 'testUser'); // Establecer el nombre de usuario aquí
+
+ // Mock de la respuesta de la API
+ global.fetch = jest.fn().mockResolvedValue({
+ json: jest.fn().mockResolvedValue(userData)
+ });
+
+ // Renderizamos el componente
+ render(
+
+
+
+ );
+
+
+ // Verificamos que se muestre una tabla
+ const table = await screen.findByRole('table');
+ expect(table).toBeInTheDocument();
+
+ // Verificar que la tabla contiene las columnas esperadas
+ const columnHeaders = ['Partidas jugadas', 'Puntos por partida', 'Puntos totales', 'Preguntas correctas totales', 'Preguntas incorrectas totales', 'Porcentaje de aciertos', 'Tiempo por pregunta (s):'];
+ columnHeaders.forEach(headerText => {
+ const headerElement = screen.getByText(headerText);
+ expect(headerElement).toBeInTheDocument();
+ });
+
+ // Verificar que la tabla contiene los datos esperados
+ expect(screen.getByText(userData.nGamesPlayed.toString())).toBeInTheDocument();
+ expect(screen.getByText(userData.avgPoints.toFixed(2))).toBeInTheDocument();
+ expect(screen.getByText(userData.totalPoints.toString())).toBeInTheDocument();
+ expect(screen.getByText(userData.totalCorrectQuestions.toString())).toBeInTheDocument();
+ expect(screen.getByText(userData.totalIncorrectQuestions.toString())).toBeInTheDocument();
+ expect(screen.getByText(userData.ratioCorrect.toFixed(2) + '%')).toBeInTheDocument();
+ expect(screen.getByText(userData.avgTime.toFixed(2))).toBeInTheDocument();
+ });
+
+ test('displays an error message when fetching statistics fails', async () => {
+ // Simulamos el usuario almacenado en localStorage
+ const userId = 'testUser';
+ localStorage.setItem('username', userId);
+
+ // Mock de la respuesta de la API para simular un error
+ global.fetch = jest.fn().mockRejectedValue(new Error('Failed to fetch'));
+
+ // Renderizamos el componente
+ render(
+
+
+
+ );
+
+ // Verificamos que se muestre el mensaje de error
+ await screen.findByText("Error: Failed to fetch");
+ });
+
+ test('updates user statistics when username changes', async () => {
+ const userData = {
+ username: 'testUser',
+ nGamesPlayed: 10,
+ avgPoints: 7,
+ totalPoints: 70,
+ totalCorrectQuestions: 20,
+ totalIncorrectQuestions: 5,
+ ratioCorrect: 80,
+ avgTime: 15
+ };
+
+ // Simulamos el usuario almacenado en localStorage
+ localStorage.setItem('username', 'testUser');
+
+ // Mock de la respuesta de la API
+ global.fetch = jest.fn().mockResolvedValue({
+ json: jest.fn().mockResolvedValue(userData)
+ });
+
+ // Renderizamos el componente
+ render(
+
+
+
+ );
+
+ await screen.findByRole('table');
+
+ const newUsername = 'newUser';
+ localStorage.setItem('username', newUsername);
+
+ const searchbutton=await screen.findByText('Buscar');
+ userEvent.click(searchbutton);
+
+ render(
+
+
+
+ );
+
+ expect(fetch).toHaveBeenCalledWith(expect.stringContaining(newUsername));
+ });
+
+ test('updates user statistics when game mode changes', async () => {
+ const userData = {
+ username: 'testUser',
+ nGamesPlayed: 10,
+ avgPoints: 7,
+ totalPoints: 70,
+ totalCorrectQuestions: 20,
+ totalIncorrectQuestions: 5,
+ ratioCorrect: 80,
+ avgTime: 15
+ };
+
+ // Simulamos el usuario almacenado en localStorage
+ localStorage.setItem('username', 'testUser');
+
+ // Mock de la respuesta de la API
+ global.fetch = jest.fn().mockResolvedValue({
+ json: jest.fn().mockResolvedValue(userData)
+ });
+
+ // Renderizamos el componente
+ render(
+
+
+
+ );
+ await screen.findByRole('table');
+ const modeButton = screen.getByRole('button', { name: /Batería de sabios/i });
+ userEvent.click(modeButton);
+
+ render(
+
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.queryByText('Estadísticas de testUser - modo Batería de sabios')).toBeInTheDocument();
+ });
+
+ });
+});
+
+
diff --git a/webapp/src/pages/WrongRoute/WrongRoute.css b/webapp/src/pages/WrongRoute/WrongRoute.css
deleted file mode 100644
index 219fa1e9..00000000
--- a/webapp/src/pages/WrongRoute/WrongRoute.css
+++ /dev/null
@@ -1,164 +0,0 @@
-#notfound{
- width: 90%;
- display: flex;
- justify-content: center;
- margin: auto 0;
-}
-
-#notfound .notfound-bg>div {
- overflow: hidden;
- position: absolute;
- top: 0;
- bottom: 0;
- width: 1px;
- background-color: #eee
-}
-.notfound-bg>div{
- z-index: -1;
-}
-
-#notfound .notfound-bg>div:nth-child(1) {
- left: 20%
-}
-
-#notfound .notfound-bg>div:nth-child(2) {
- left: 40%
-}
-
-#notfound .notfound-bg>div:nth-child(3) {
- left: 60%
-}
-
-#notfound .notfound-bg>div:nth-child(4) {
- left: 80%
-}
-
-#notfound .notfound-bg>div:after {
- content: '';
- position: absolute;
- top: 0;
- left: -.5px;
- transform: translateY(50%);
- height: 160px;
- width: 10rem;
- background-color: orange
-}
-
-@keyframes drop {
- 90% {
- height: 20px
- }
-
- 100% {
- height: 160px;
- -webkit-transform: translateY(calc(100vh + 160px));
- transform: translateY(calc(100vh + 160px))
- }
-}
-
-#notfound .notfound-bg>div:nth-child(1):after {
- animation: drop 3s infinite linear;
- animation-delay: .2s
-}
-
-#notfound .notfound-bg>div:nth-child(2):after {
- animation: drop 2s infinite linear;
- animation-delay: .7s
-}
-
-#notfound .notfound-bg>div:nth-child(3):after {
- animation: drop 3s infinite linear;
- animation-delay: .9s
-}
-
-#notfound .notfound-bg>div:nth-child(4):after {
- animation: drop 2s infinite linear;
- animation-delay: 1.2s
-}
-
-.notfound {
- max-width: 520px;
- width: 100%;
- text-align: center
-}
-
-.notfound .notfound-404 {
- height: 210px;
- line-height: 210px
-}
-
-.notfound .notfound-404 h1 {
- font-family: oswald,sans-serif;
- font-size: 188px;
- font-weight: 700;
- margin: 0;
- text-shadow: 4px 4px 0 orange;
-}
-
-.notfound h2 {
- font-family: oswald,sans-serif;
- font-size: 42px;
- font-weight: 700;
- margin: 0;
- text-transform: uppercase;
- letter-spacing: 1.6px
-}
-
-.notfound p {
- font-family: lato,sans-serif;
- font-weight: 400;
- margin-top: 20px;
- margin-bottom: 25px
-}
-
-.notfound a {
- font-family: lato,sans-serif;
- padding: 10px 30px;
- display: inline-block;
- font-weight: 400;
- text-transform: uppercase;
- -webkit-box-shadow: 0 0 0 2px #000,2px 2px 0 2px orange;
- box-shadow: 0 0 0 2px #000,2px 2px 0 2px orange;
- text-decoration: none;
- -webkit-transition: .2s all;
- transition: .2s all
-}
-
-.notfound a:hover {
- background-color: orange;
- -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px orange;
- box-shadow: 0 0 0 0 #000,0 0 0 2px orange;
-}
-
-.notfound-social {
- margin-top: 35px
-}
-
-.notfound-social>a {
- width: 40px;
- height: 40px;
- line-height: 40px;
- padding: 0;
- margin: 0 5px
-}
-
-.notfound-social>a:hover {
- background-color: orange;
- -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px orange;
- box-shadow: 0 0 0 0 #000,0 0 0 2px orange;
-}
-
-@media only screen and (max-width: 480px) {
- .notfound .notfound-404 {
- height:122px;
- line-height: 122px
- }
-
- .notfound .notfound-404 h1 {
- font-size: 122px
- }
-
- .notfound h2 {
- font-size: 26px
- }
-}
diff --git a/webapp/src/pages/WrongRoute/WrongRoute.js b/webapp/src/pages/WrongRoute/WrongRoute.js
index d8dacad9..b6db262d 100644
--- a/webapp/src/pages/WrongRoute/WrongRoute.js
+++ b/webapp/src/pages/WrongRoute/WrongRoute.js
@@ -1,5 +1,4 @@
import React from "react";
-import "./WrongRoute.css";
import { Link } from 'react-router-dom';
const WrongRoute = () => {
@@ -19,7 +18,7 @@ const WrongRoute = () => {
La página que estabas buscando no está disponible
-
Página principal
+
Página principal