From 35d7609a424af4bbef3fa7ba7baeed4a110ebabd Mon Sep 17 00:00:00 2001 From: Zohaib Akhtar Kausar Date: Fri, 29 Mar 2024 17:44:49 +0100 Subject: [PATCH 1/8] base de datos para cada microservicio --- docker-compose.yml | 4 ++-- questionservice/question-service.js | 2 +- users/userservice/user-service.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 671f497..323584d 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -51,7 +51,7 @@ services: networks: - mynetwork environment: - MONGODB_URI: mongodb://mongodb:27017/userdb + MONGODB_URI: mongodb://mongodb:27017/questiondb historyservice: container_name: historyservice-${teamname:-wiq_es04d} @@ -65,7 +65,7 @@ services: networks: - mynetwork environment: - MONGODB_URI: mongodb://mongodb:27017/userdb + MONGODB_URI: mongodb://mongodb:27017/historydb gatewayservice: container_name: gatewayservice-${teamname:-defaultASW} diff --git a/questionservice/question-service.js b/questionservice/question-service.js index 8cf4e32..e0cf20c 100644 --- a/questionservice/question-service.js +++ b/questionservice/question-service.js @@ -6,7 +6,7 @@ const port = 8003; // Importamos la función desde questionTemplates.js const templates = require('./templates.json') // Connect to MongoDB -const mongoUri = process.env.MONGODB_URI || 'mongodb://localhost:27017/userdb'; +const mongoUri = process.env.MONGODB_URI || 'mongodb://localhost:27017/questiondb'; mongoose.connect(mongoUri); const WikiQuery = require('./wikiUtils/wikiQuery'); diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js index b230906..1a37717 100644 --- a/users/userservice/user-service.js +++ b/users/userservice/user-service.js @@ -12,7 +12,7 @@ const port = 8001; app.use(bodyParser.json()); // Connect to MongoDB -const mongoUri = process.env.MONGODB_URI || 'mongodb://localhost:27017/userdb'; +const mongoUri = process.env.MONGODB_URI || 'mongodb://localhost:27017/historydb'; mongoose.connect(mongoUri); From 2e6b0a4fecfbe77f8fdd0de9ce2b66f5775e4a4b Mon Sep 17 00:00:00 2001 From: Zohaib Akhtar Kausar Date: Fri, 29 Mar 2024 19:08:45 +0100 Subject: [PATCH 2/8] Arreglar tests addUser,Home,Login. --- webapp/src/components/AddUser.test.js | 14 +++++++------- webapp/src/components/Login.test.js | 12 ++++++------ webapp/src/components/pages/Home.test.js | 2 +- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/webapp/src/components/AddUser.test.js b/webapp/src/components/AddUser.test.js index 9f83f8e..7994288 100644 --- a/webapp/src/components/AddUser.test.js +++ b/webapp/src/components/AddUser.test.js @@ -19,9 +19,9 @@ describe('AddUser component', () => { ); - const usernameInput = screen.getByLabelText(/Username/i); - const passwordInput = screen.getByLabelText(/Password/i); - const addUserButton = screen.getByRole('button', { name: /Add User/i }); + const usernameInput = screen.getByLabelText(/Nombre de Usuario/i); + const passwordInput = screen.getByLabelText(/Contraseña/i); + const addUserButton = screen.getByRole('button', { name: /Registrarse/i }); // Mock the axios.post request to simulate a successful response mockAxios.onPost('http://localhost:8000/adduser').reply(200); @@ -35,7 +35,7 @@ describe('AddUser component', () => { // Wait for the Snackbar to be open await waitFor(() => { - expect(screen.getByText(/User added successfully/i)).toBeInTheDocument(); + expect(screen.getByText(/Usuario añadido correctamente/i)).toBeInTheDocument(); }); }); @@ -46,9 +46,9 @@ describe('AddUser component', () => { ); - const usernameInput = screen.getByLabelText(/Username/i); - const passwordInput = screen.getByLabelText(/Password/i); - const addUserButton = screen.getByRole('button', { name: /Add User/i }); + const usernameInput = screen.getByLabelText(/Nombre de Usuario/i); + const passwordInput = screen.getByLabelText(/Contraseña/i); + const addUserButton = screen.getByRole('button', { name: /Registrarse/i }); // Mock the axios.post request to simulate an error response mockAxios.onPost('http://localhost:8000/adduser').reply(500, { error: 'Internal Server Error' }); diff --git a/webapp/src/components/Login.test.js b/webapp/src/components/Login.test.js index b667a81..9f0fa6e 100644 --- a/webapp/src/components/Login.test.js +++ b/webapp/src/components/Login.test.js @@ -22,9 +22,9 @@ describe('Login component', () => { ); - const usernameInput = screen.getByLabelText(/Username/i); - const passwordInput = screen.getByLabelText(/Password/i); - const loginButton = screen.getByRole('button', { name: /Login/i }); + const usernameInput = screen.getByLabelText(/Nombre de Usuario/i); + const passwordInput = screen.getByLabelText(/Contraseña/i); + const loginButton = screen.getByRole('button', { name: /Entrar/i }); // Mock the axios.post request to simulate a successful response mockAxios.onPost('http://localhost:8000/login').reply(200, { createdAt: '2024-01-01T12:34:56Z' }); @@ -50,9 +50,9 @@ describe('Login component', () => { ); - const usernameInput = screen.getByLabelText(/Username/i); - const passwordInput = screen.getByLabelText(/Password/i); - const loginButton = screen.getByRole('button', { name: /Login/i }); + const usernameInput = screen.getByLabelText(/Nombre de Usuario/i); + const passwordInput = screen.getByLabelText(/Contraseña/i); + const loginButton = screen.getByRole('button', { name: /Entrar/i }); // Mock the axios.post request to simulate an error response mockAxios.onPost('http://localhost:8000/login').reply(401, { error: 'Unauthorized' }); diff --git a/webapp/src/components/pages/Home.test.js b/webapp/src/components/pages/Home.test.js index 05a3387..674456a 100644 --- a/webapp/src/components/pages/Home.test.js +++ b/webapp/src/components/pages/Home.test.js @@ -14,7 +14,7 @@ describe('Home Component Tests', () => { test('renders Home component correctly', () => { renderWithRouter(); expect(screen.getByRole('heading', { name: /wiq/i })).toBeInTheDocument(); - expect(screen.getByText(/what are you waiting for\?/i)).toBeInTheDocument(); + expect(screen.getByText(/¿A que estás esperando?/i)).toBeInTheDocument(); expect(screen.getByText(/jugar/i)).toBeInTheDocument(); }); From a443489c3c8f1e9d1f7500f4ae29b0bdb532612b Mon Sep 17 00:00:00 2001 From: Zohaib Akhtar Kausar Date: Fri, 29 Mar 2024 20:24:39 +0100 Subject: [PATCH 3/8] Arreglo de bug --- webapp/src/components/Button.css | 1 - webapp/src/components/pages/Jugar.css | 1 - 2 files changed, 2 deletions(-) diff --git a/webapp/src/components/Button.css b/webapp/src/components/Button.css index 8f7448e..ad7f7f0 100644 --- a/webapp/src/components/Button.css +++ b/webapp/src/components/Button.css @@ -39,5 +39,4 @@ transition: all 0.3s ease-out; background: #fff; color: #242424; - transition: 250ms; } diff --git a/webapp/src/components/pages/Jugar.css b/webapp/src/components/pages/Jugar.css index 58628b0..49c1d18 100644 --- a/webapp/src/components/pages/Jugar.css +++ b/webapp/src/components/pages/Jugar.css @@ -89,7 +89,6 @@ body, html { border: none; border-radius: 5px; cursor: pointer; - transition: background-color 0.3s; display: block; /* Asegura que el botón sea un bloque */ width: 100%; /* Hace que el botón ocupe todo el ancho disponible */ box-sizing: border-box; /* Asegura que el padding no afecte el ancho final */ From c35811c31d4992e6f264fbccc800965288d70215 Mon Sep 17 00:00:00 2001 From: Zohaib Akhtar Kausar Date: Fri, 29 Mar 2024 20:25:02 +0100 Subject: [PATCH 4/8] =?UTF-8?q?A=C3=B1adido=20test=20del=20componente=20Na?= =?UTF-8?q?vbar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webapp/src/components/Navbar.css | 10 ++++- webapp/src/components/Navbar.js | 9 ++-- webapp/src/components/Navbar.test.js | 66 ++++++++++++++++++++++++++++ 3 files changed, 81 insertions(+), 4 deletions(-) create mode 100644 webapp/src/components/Navbar.test.js diff --git a/webapp/src/components/Navbar.css b/webapp/src/components/Navbar.css index 8066fd1..c19a9d6 100644 --- a/webapp/src/components/Navbar.css +++ b/webapp/src/components/Navbar.css @@ -86,7 +86,14 @@ background: #242222; transition: all 0.5s ease; } - + .menu-icon button { + background: none; + border: none; + cursor: pointer; + color: #fff; + font-size: 1.8rem; /* Adjusted to ensure the icon inside the button matches your design */ + padding: 0; /* Removes default button padding */ + } .nav-menu.active { left: 0; opacity: 1; @@ -101,6 +108,7 @@ transition: all 0.3s ease-out; } + .nav-links:hover { background-color: #fff; color: #242424; diff --git a/webapp/src/components/Navbar.js b/webapp/src/components/Navbar.js index 8bb1057..87f4430 100644 --- a/webapp/src/components/Navbar.js +++ b/webapp/src/components/Navbar.js @@ -54,11 +54,14 @@ function Navbar() {
WIQ
- +
- + + {isLoggedIn ? ( - showButton && + showButton && ) : ( <> {showButton && } diff --git a/webapp/src/components/Navbar.test.js b/webapp/src/components/Navbar.test.js new file mode 100644 index 0000000..7d55299 --- /dev/null +++ b/webapp/src/components/Navbar.test.js @@ -0,0 +1,66 @@ +import React from 'react'; +import { render, screen, fireEvent } from '@testing-library/react'; +import { BrowserRouter as Router } from 'react-router-dom'; +import Navbar from './Navbar'; +import { AuthContext } from '../AuthContext'; + +// Función mock para simular el contexto de autenticación +const mockContext = (isLoggedIn) => ({ + isLoggedIn +}); + +// Función de utilidad para renderizar el Navbar bajo diferentes condiciones +const renderNavbar = (contextValue, width = 1024) => { + window.innerWidth = width; // Simula el ancho de la ventana para pruebas de responsividad + return render( + + + + + + ); +}; + +describe('Componente Navbar', () => { + test('Se muestra correctamente cuando el usuario está logueado', () => { + renderNavbar(true); + + expect(screen.getByRole('link', { name: 'Inicio' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Salir' })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Historial' })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Jugar' })).toBeInTheDocument(); + }); + + test('Reacciona correctamente al redimensionar la ventana cuando el usuario está logueado', () => { + renderNavbar(true, 500); + + fireEvent.click(screen.getByRole('button', { name: /Menu toggle/i })); + expect(screen.getByRole('link', { name: 'Salir' })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Historial' })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Jugar' })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Inicio' })).toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Salir' })).not.toBeInTheDocument(); + }); + + test('Se muestra correctamente cuando el usuario no está logueado', () => { + renderNavbar(false); + expect(screen.getByRole('link', { name: 'Inicio' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Registrarse' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Entrar' })).toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Salir' })).not.toBeInTheDocument(); + expect(screen.queryByRole('link', { name: 'Historial' })).not.toBeInTheDocument(); + expect(screen.queryByRole('link', { name: 'Jugar' })).not.toBeInTheDocument(); + }); + test('Reacciona correctamente al redimensionar la ventana cuando el usuario no está logueado', () => { + renderNavbar(false, 500); + + fireEvent.click(screen.getByRole('button', { name: /Menu toggle/i })); + expect(screen.getByRole('link', { name: 'Inicio' })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Registrarse' })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Entrar' })).toBeInTheDocument(); + expect(screen.queryByRole('link', { name: 'Historial' })).not.toBeInTheDocument(); + expect(screen.queryByRole('link', { name: 'Jugar' })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Registrarse' })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Entrar' })).not.toBeInTheDocument(); + }); +}); From 438b9a008d0c9b812b3de0871aba4303fb83e2eb Mon Sep 17 00:00:00 2001 From: Zohaib Akhtar Kausar Date: Fri, 29 Mar 2024 20:25:50 +0100 Subject: [PATCH 5/8] =?UTF-8?q?A=C3=B1adido=20test=20del=20componente=20Ca?= =?UTF-8?q?rditem?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webapp/src/components/CardItem.test.js | 36 ++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 webapp/src/components/CardItem.test.js diff --git a/webapp/src/components/CardItem.test.js b/webapp/src/components/CardItem.test.js new file mode 100644 index 0000000..39e5680 --- /dev/null +++ b/webapp/src/components/CardItem.test.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { BrowserRouter } from 'react-router-dom'; +import CardItem from './CardItem'; + +describe('Componente CardItem', () => { + const mockProps = { + path: '/test-path', + label: 'Test Label', + src: 'test-img.jpg', + text: 'Test Text' + }; + + test('Renderiza correctamente con los props dados', () => { + render( + + + + ); + + // Verifica que el componente Link lleve a la ruta correcta + expect(screen.getByRole('link')).toHaveAttribute('href', mockProps.path); + + // Verifica que la imagen tenga el src correcto y alt text vacío + expect(screen.getByRole('img')).toHaveAttribute('src', mockProps.src); + expect(screen.getByRole('img')).toHaveAttribute('alt', ''); + + // Verifica que el texto sea correcto + expect(screen.getByText(mockProps.text)).toBeInTheDocument(); + + // Encuentra el elemento por su atributo data-category usando mockProps.label + // y verifica que el contenido sea correcto + const figure = document.querySelector(`[data-category='${mockProps.label}']`); + expect(figure).toBeInTheDocument(); + }); +}); From 695ff7b5cc4cb4aa29f2c13d09ebe1105cdd7280 Mon Sep 17 00:00:00 2001 From: Zohaib Akhtar Kausar Date: Fri, 29 Mar 2024 20:26:06 +0100 Subject: [PATCH 6/8] =?UTF-8?q?A=C3=B1adido=20test=20del=20componente=20La?= =?UTF-8?q?yout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webapp/src/components/Layout.test.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 webapp/src/components/Layout.test.js diff --git a/webapp/src/components/Layout.test.js b/webapp/src/components/Layout.test.js new file mode 100644 index 0000000..2d354b1 --- /dev/null +++ b/webapp/src/components/Layout.test.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import Layout from './Layout'; + +// Mock del componente Navbar para controlar su salida en el test +jest.mock('./Navbar', () => () =>
Navbar
); + +describe('Componente Layout', () => { + test('Renderiza el Navbar y el contenido de children correctamente', () => { + const childText = 'Contenido de prueba'; + render( + +
{childText}
+ + ); + + // Verifica que el Navbar se renderiza correctamente + expect(screen.getByTestId('navbar')).toBeInTheDocument(); + + // Verifica que el contenido de children se renderiza correctamente + expect(screen.getByText(childText)).toBeInTheDocument(); + }); +}); From 442c371e5c0bdff7e965646ea0c6ab59c431947a Mon Sep 17 00:00:00 2001 From: Zohaib Akhtar Kausar Date: Fri, 29 Mar 2024 20:26:19 +0100 Subject: [PATCH 7/8] =?UTF-8?q?A=C3=B1adido=20test=20del=20componente=20Lo?= =?UTF-8?q?gout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webapp/src/components/Logout.test.js | 38 ++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 webapp/src/components/Logout.test.js diff --git a/webapp/src/components/Logout.test.js b/webapp/src/components/Logout.test.js new file mode 100644 index 0000000..858c3f8 --- /dev/null +++ b/webapp/src/components/Logout.test.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { BrowserRouter } from 'react-router-dom'; +import { AuthContext } from '../AuthContext'; +import Logout from './Logout'; + + +// Mocks para las funciones que serán utilizadas por el componente +const mockHandleLogout = jest.fn(); +const mockNavigate = jest.fn(); + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useNavigate: () => mockNavigate, +})); + +// Prueba para el componente Logout +describe('Logout Component', () => { + beforeEach(() => { + // Limpiar mocks antes de cada prueba + mockHandleLogout.mockClear(); + mockNavigate.mockClear(); + }); + + it('Llama a handleLogout y navega a la página de inicio en Mount', () => { + render( + + + + + + ); + + // Verificar si handleLogout y navigate fueron llamados correctamente + expect(mockHandleLogout).toHaveBeenCalledTimes(1); + expect(mockNavigate).toHaveBeenCalledWith('/'); + }); +}); From 28790b8984b5b446790b20a9af4ac29c1bbef541 Mon Sep 17 00:00:00 2001 From: Zohaib Akhtar Kausar Date: Sun, 31 Mar 2024 15:17:29 +0200 Subject: [PATCH 8/8] =?UTF-8?q?A=C3=B1adido=20test=20del=20componente=20Er?= =?UTF-8?q?ror404Page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webapp/src/components/pages/Error404Page.js | 36 ++++++++------- .../src/components/pages/Error404Page.test.js | 45 +++++++++++++++++++ 2 files changed, 65 insertions(+), 16 deletions(-) create mode 100644 webapp/src/components/pages/Error404Page.test.js diff --git a/webapp/src/components/pages/Error404Page.js b/webapp/src/components/pages/Error404Page.js index 462ce7b..abbed6c 100644 --- a/webapp/src/components/pages/Error404Page.js +++ b/webapp/src/components/pages/Error404Page.js @@ -1,33 +1,37 @@ import React, { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { Button } from '../Button'; -import './Error404Page.css'; // Asegúrate de tener este archivo en el mismo directorio +import './Error404Page.css'; -function Error404Page() { - const navigate = useNavigate(); - const [countdown, setCountdown] = useState(15); +function Error404Page({ initialCountdown = 15 }) { + const navigate = useNavigate(); // Hook para navegar programáticamente. + const [countdown, setCountdown] = useState(initialCountdown); // Estado para la cuenta regresiva + // Efecto que maneja la cuenta regresiva y redirige cuando llega a 0. useEffect(() => { if (countdown === 0) { - navigate('/'); + navigate('/'); // Redirige a la página de inicio. return; } + // Establece un temporizador que decrementa 'countdown' cada segundo. const timerId = setTimeout(() => setCountdown(countdown - 1), 1000); + // Limpieza: cancela el temporizador para evitar efectos secundarios. return () => clearTimeout(timerId); - }, [countdown, navigate]); + }, [countdown, navigate]); // Dependencias del efecto. + // Renderizado de la página 404 con video de fondo y mensaje de cuenta regresiva. return ( -
- -
-

404 - ¡Ups! Te quedaste sin oxígeno

-

La página que estas buscando está fuera de nuestro alcance. Vamos a por ti.

-
Vuelta al inicio en {countdown} segundos...
- +
+ +
+

404 - ¡Ups! Te quedaste sin oxígeno

+

La página que estas buscando está fuera de nuestro alcance. Vamos a por ti.

+
Vuelta al inicio en {countdown} segundos...
+ +
-
); } diff --git a/webapp/src/components/pages/Error404Page.test.js b/webapp/src/components/pages/Error404Page.test.js new file mode 100644 index 0000000..e6e1b8c --- /dev/null +++ b/webapp/src/components/pages/Error404Page.test.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import { BrowserRouter } from 'react-router-dom'; +import Error404Page from './Error404Page'; + +const mockNavigate = jest.fn(); +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useNavigate: () => mockNavigate, +})); +describe('Error404Page Tests', () => { + beforeEach(() => { + // Limpiar mocks antes de cada prueba + mockNavigate.mockClear(); + }); + + test('renders 404 message', () => { + render( + + + + ); + + // Verifica que el mensaje de 404 esté presente + expect(screen.getByText(/404 - ¡Ups! Te quedaste sin oxígeno/i)).toBeInTheDocument(); + expect(screen.getByText(/La página que estas buscando está fuera de nuestro alcance/i)).toBeInTheDocument(); + }); + test('Go home after 15 seconds', () => { + render( + + + + ); + + expect(mockNavigate).toHaveBeenCalledWith('/'); + }); + + + +}); + +async function wait(milliseconds) { + jest.advanceTimersByTime(milliseconds); +}