diff --git a/webapp/src/components/Inicio.test.js b/webapp/src/components/Inicio.test.js index 8faa1016..b59b9de7 100644 --- a/webapp/src/components/Inicio.test.js +++ b/webapp/src/components/Inicio.test.js @@ -1,14 +1,15 @@ import { render, screen, fireEvent } from '@testing-library/react'; import Inicio from './Inicio'; +import AuthProvider from './login/AuthProvider'; test('renders learn react link', () => { - render(); + render(); const linkElement = screen.getByText(/Welcome to WIQ/i); expect(linkElement).toBeInTheDocument(); }); test('test mostrar login', () => { - render(); + render(); const linkElement = screen.getByRole('button', { name: /login/i }) @@ -16,7 +17,7 @@ test('test mostrar login', () => { }); test('test crear cuenta', () => { -render(); +render(); fireEvent.click(screen.getByRole('button', { name: "Don't have an account? Register here." })); diff --git a/webapp/src/components/Navbar.test.js b/webapp/src/components/Navbar.test.js index c97585aa..4320d99f 100644 --- a/webapp/src/components/Navbar.test.js +++ b/webapp/src/components/Navbar.test.js @@ -1,9 +1,10 @@ import { render, screen } from '@testing-library/react'; import { BrowserRouter as Router } from "react-router-dom"; import Navbar from './Navbar'; +import AuthProvider from './login/AuthProvider'; test('renders navbar', () => { - render( ); + render( ); const linkElement = screen.getByText("Home"); expect(linkElement).toBeInTheDocument(); diff --git a/webapp/src/components/Primera.js b/webapp/src/components/Primera.js index e9be742f..2404f398 100644 --- a/webapp/src/components/Primera.js +++ b/webapp/src/components/Primera.js @@ -6,8 +6,6 @@ import "./Primera.css"; function Primera() { - - return (
diff --git a/webapp/src/components/QuizGame.test.js b/webapp/src/components/QuizGame.test.js index 20a6a4f0..017f562a 100644 --- a/webapp/src/components/QuizGame.test.js +++ b/webapp/src/components/QuizGame.test.js @@ -2,6 +2,7 @@ import { render, screen, fireEvent } from '@testing-library/react'; import QuizGame from './QuizGame'; import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; +import AuthProvider from './login/AuthProvider'; const mockAxios = new MockAdapter(axios); @@ -16,7 +17,7 @@ beforeEach(() => { allAnswers: ["correcta", "no1", "no2", "no3"] }); - render(); + render(); expect(screen.getByText(/Loading questions.../i)).toBeInTheDocument(); // Wait for the asynchronous operation to complete diff --git a/webapp/src/components/login/Login.js b/webapp/src/components/login/Login.js index 1a118a49..9ce35f80 100644 --- a/webapp/src/components/login/Login.js +++ b/webapp/src/components/login/Login.js @@ -1,9 +1,9 @@ // src/components/Login.js import React, { useState, useEffect } from 'react'; -import axios from 'axios'; import { Container, Typography, TextField, Button, Snackbar } from '@mui/material'; import './Login.css'; import { useAuth } from "./AuthProvider"; +import axios from 'axios'; const Login = () => { @@ -22,13 +22,7 @@ const Login = () => { const loginUser = async () => { try { - if (username.trim().length === 0 || password.trim().length === 0) { - setError("No se permite dejar espacios en blanco"); - return; - } - - let res = await axios.post(`${apiEndpoint}/login`, { username, password }); - + let res= await axios.post(`${apiEndpoint}/login`, { username, password }); // Extract data from the response setToken(res.data.token); @@ -48,6 +42,8 @@ const Login = () => { setError("No se permite dejar espacios en blanco"); return; } + + loginUser(); }; const handleCloseSnackbar = () => { @@ -83,7 +79,7 @@ const Login = () => { fullWidth label="Username" name='username' - id="input" + id="username" value={username} onChange={(e) => setUsername(e.target.value)} /> @@ -97,12 +93,12 @@ const Login = () => { name = "password" value={password} onChange={(e) => setPassword(e.target.value)} - id="input" + id="password" /> -
-
-
-
+
+
+
diff --git a/webapp/src/components/login/Login.test.js b/webapp/src/components/login/Login.test.js index 101c8673..2da3c5f7 100644 --- a/webapp/src/components/login/Login.test.js +++ b/webapp/src/components/login/Login.test.js @@ -3,6 +3,7 @@ import { render, fireEvent, screen, waitFor, act } from '@testing-library/react' import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; import Login from './Login'; +import AuthProvider from './AuthProvider'; const mockAxios = new MockAdapter(axios); @@ -12,29 +13,31 @@ describe('Login component', () => { }); it('should log in successfully', async () => { - render(); + render(); - const usernameInput = screen.getByLabelText(/Username/i); - const passwordInput = screen.getByLabelText(/Password/i); + //const usernameInput = screen.getByLabelText(/Username/i); + const usernameInput = document.getElementById("username"); + //const passwordInput = screen.getByLabelText(/Password/i); + const passwordInput = document.getElementById("password"); const loginButton = screen.getByRole('button', { name: /Login/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' }); + mockAxios.onPost('http://localhost:8000/login').reply(200, { createdAt: '2024-01-01T12:34:56Z', token:'12345' }); // Simulate user input - await act(async () => { - fireEvent.change(usernameInput, { target: { value: 'testUser' } }); - fireEvent.change(passwordInput, { target: { value: 'testPassword' } }); - fireEvent.click(loginButton); - }); + fireEvent.change(usernameInput, { target: { value: 'testUser' } }); + fireEvent.change(passwordInput, { target: { value: 'testPassword' } }); + fireEvent.click(loginButton); + // Verify that the user information is displayed - expect(screen.getByText(/Login successful/i)).toBeInTheDocument(); - //expect(screen.getByText(/Your account was created on 1\/1\/2024/i)).toBeInTheDocument(); + await waitFor(() => { + expect(screen.getByText(/Login successful/i)).toBeInTheDocument(); + }); }); it('should handle error when logging in', async () => { - render(); + render(); const usernameInput = screen.getByLabelText(/Username/i); const passwordInput = screen.getByLabelText(/Password/i); @@ -52,7 +55,7 @@ describe('Login component', () => { // Wait for the error Snackbar to be open await waitFor(() => { - expect(screen.getByText(/Error: Unauthorized/i)).toBeInTheDocument(); + expect(screen.getByText(/Error: /i)).toBeInTheDocument(); }); // Verify that the user information is not displayed diff --git a/webapp/src/components/register/AddUser.js b/webapp/src/components/register/AddUser.js index 557c424a..be41c45d 100644 --- a/webapp/src/components/register/AddUser.js +++ b/webapp/src/components/register/AddUser.js @@ -3,18 +3,20 @@ import React, { useState } from 'react'; import axios from 'axios'; import { Container, Typography, TextField, Button, Snackbar } from '@mui/material'; import './AddUser.css'; - +import { useAuth } from "../login/AuthProvider"; const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000'; const AddUser = () => { + const {setToken} = useAuth(); const [name, setName] = useState(''); const [surname, setSurName] = useState(''); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [passwordRepeat, setPasswordRepeat] = useState(''); const [error, setError] = useState(''); - const [openSnackbar, setOpenSnackbar] = useState(false); + const [openSnackbar, setOpenSnackbar] = useState(false); + const addUser = async () => { try { @@ -26,6 +28,11 @@ const AddUser = () => { passwordRepeat }); setOpenSnackbar(true); + + let res= await axios.post(`${apiEndpoint}/login`, { username, password }); + + setToken(res.data.token); + window.location.href = '/home'; } catch (error) { setError(error.response.data.error); diff --git a/webapp/src/components/register/AddUser.test.js b/webapp/src/components/register/AddUser.test.js index 2766df57..dd6d3b47 100644 --- a/webapp/src/components/register/AddUser.test.js +++ b/webapp/src/components/register/AddUser.test.js @@ -3,6 +3,7 @@ import { render, fireEvent, screen, waitFor } from '@testing-library/react'; import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; import AddUser from './AddUser'; +import AuthProvider from '../login/AuthProvider'; const mockAxios = new MockAdapter(axios); @@ -12,7 +13,7 @@ describe('AddUser component', () => { }); it('should add user successfully', async () => { - render(); + render(); /*const usernameInput = screen.getByLabelText(/Nombre de Usuario/i); const nameInput = screen.getByLabelText(/Nombre/i); @@ -31,6 +32,11 @@ describe('AddUser component', () => { // Mock the axios.post request to simulate a successful response mockAxios.onPost('http://localhost:8000/adduser').reply(200); + + mockAxios.onPost('http://localhost:8000/login').reply(200, + { + token:'12345' + }); // Simulate user input fireEvent.change(usernameInput, { target: { value: 'testUser' } }); @@ -49,25 +55,32 @@ describe('AddUser component', () => { }); it('should handle error when adding user', async () => { - render(); + render(); const usernameInput = document.getElementById("username"); - fireEvent.change(passwordInput, { target: { value: 'testPassword' } }); + const nameInput = document.getElementById("name"); + const surnameInput = document.getElementById("surname"); + const passwordInput = document.getElementById("password"); + const password2Input = document.getElementById("password2"); + 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' }); // Simulate user input - fireEvent.change(usernameInput, { target: { value: 'testUser' } }); - fireEvent.change(passwordInput, { target: { value: 'testPassword' } }); + fireEvent.change(usernameInput, { target: { value: 'testUser' } }); + fireEvent.change(nameInput, { target: { value: 'testUser' } }); + fireEvent.change(surnameInput, { target: { value: 'testUser' } }); + fireEvent.change(passwordInput, { target: { value: 'testPassword' } }); + fireEvent.change(password2Input, { target: { value: 'testPassword' } }); // Trigger the add user button click fireEvent.click(addUserButton); // Wait for the error Snackbar to be open - await waitFor(() => { - expect(screen.getByText(/Error: No se permite dejar espacios en blanco/i)).toBeInTheDocument(); + await waitFor(() => { + expect(screen.getByText(/Error: /i)).toBeInTheDocument(); }); - }); + }); });