From 048acf3c2f3323f376ebe8795ff770b728e50d4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Cadenas?= <77900120+andrrsin@users.noreply.github.com> Date: Sun, 7 Apr 2024 20:44:13 +0200 Subject: [PATCH] front end coverage tests --- webapp/src/App.test.js | 25 ++++++++-- webapp/src/components/AddUser.jsx | 7 ++- webapp/src/components/AddUser.test.js | 69 +++++++++++++++++++++++--- webapp/src/components/Login.jsx | 11 +++- webapp/src/components/Login.test.js | 66 ++++++++++++++++++------ webapp/src/components/MainPage.jsx | 4 +- webapp/src/components/MainPage.test.js | 30 +++++++++++ 7 files changed, 181 insertions(+), 31 deletions(-) create mode 100644 webapp/src/components/MainPage.test.js diff --git a/webapp/src/App.test.js b/webapp/src/App.test.js index 5e3b731..b3ff564 100644 --- a/webapp/src/App.test.js +++ b/webapp/src/App.test.js @@ -1,8 +1,27 @@ import { render, screen } from '@testing-library/react'; import App from './App'; +import AuthProvider from 'react-auth-kit/AuthProvider'; +import createStore from 'react-auth-kit/createStore'; -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/Welcome to the 2024 edition of the Software Architecture course/i); + +test('renders /', () => { + const store = createStore({ + authName: '_auth', + authType: 'cookie', + cookieDomain: window.location.hostname, + cookieSecure: window.location.protocol === 'https:', + }); + + render( + + + + + ); + const linkElement = screen.getByText(/Welcome to WIQ, Please log in to play!/i); expect(linkElement).toBeInTheDocument(); + const button = screen.getByRole('button', { name: /Create account/i }); + expect(button).toBeInTheDocument(); }); diff --git a/webapp/src/components/AddUser.jsx b/webapp/src/components/AddUser.jsx index 09dcdba..68e0e44 100644 --- a/webapp/src/components/AddUser.jsx +++ b/webapp/src/components/AddUser.jsx @@ -25,7 +25,12 @@ const AddUser = () => { setOpenSnackbar(true); navigate('/login'); } catch (error) { - setError(error.response.data.error); + if(error.response===undefined){ + setError("Error: There was a problem..."); + } + else{ + setError(error.response.data.error); + } } }; diff --git a/webapp/src/components/AddUser.test.js b/webapp/src/components/AddUser.test.js index 8733488..e6e6817 100644 --- a/webapp/src/components/AddUser.test.js +++ b/webapp/src/components/AddUser.test.js @@ -1,22 +1,45 @@ import React from 'react'; -import { render, fireEvent, screen, waitFor } from '@testing-library/react'; +import { fireEvent, screen, waitFor } from '@testing-library/react'; import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; import AddUser from './AddUser'; +import { render } from '@testing-library/react'; +import { BrowserRouter } from 'react-router-dom'; + + + const mockAxios = new MockAdapter(axios); + describe('AddUser component', () => { beforeEach(() => { mockAxios.reset(); }); + it('renders correctly', () => { + render( + + + ); + + expect(screen.getByLabelText('Username')).toBeInTheDocument(); + expect(screen.getByLabelText('Email')).toBeInTheDocument(); + expect(screen.getByLabelText('Password')).toBeInTheDocument(); + expect(screen.getByLabelText('Confirm Password')).toBeInTheDocument(); + }); + it('should add user successfully', async () => { - render(); + render( + + ); + const usernameInput = screen.getByLabelText(/Username/i); - const passwordInput = screen.getByLabelText(/Password/i); - const addUserButton = screen.getByRole('button', { name: /Add User/i }); + const emailInput = screen.getByLabelText(/Email/i); + const passwordInput = screen.getByLabelText("Password"); + const cpasswordInput = screen.getByLabelText(/Confirm Password/i); + const addUserButton = screen.getByRole('button', { name: /Register/i }); // Mock the axios.post request to simulate a successful response mockAxios.onPost('http://localhost:8000/adduser').reply(200); @@ -24,6 +47,8 @@ describe('AddUser component', () => { // Simulate user input fireEvent.change(usernameInput, { target: { value: 'testUser' } }); fireEvent.change(passwordInput, { target: { value: 'testPassword' } }); + fireEvent.change(cpasswordInput, { target: { value: 'testPassword' } }); + fireEvent.change(emailInput, { target: { value: 'test@test.com' } }); // Trigger the add user button click fireEvent.click(addUserButton); @@ -34,12 +59,40 @@ describe('AddUser component', () => { }); }); + it('should handle wrong passwords when adding user', async () => { + render( + + ); + + const usernameInput = screen.getByLabelText(/Username/i); + const passwordInput = screen.getByLabelText("Password"); + const addUserButton = screen.getByRole('button', { name: /Register/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(passwordInput, { 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: Passwords do not match")).toBeInTheDocument(); + }); + }); + it('should handle error when adding user', async () => { - render(); + render( + + ); const usernameInput = screen.getByLabelText(/Username/i); - const passwordInput = screen.getByLabelText(/Password/i); - const addUserButton = screen.getByRole('button', { name: /Add User/i }); + const passwordInput = screen.getByLabelText("Password"); + const addUserButton = screen.getByRole('button', { name: /Register/i }); // Mock the axios.post request to simulate an error response mockAxios.onPost('http://localhost:8000/adduser').reply(500, { error: 'Internal Server Error' }); @@ -53,7 +106,7 @@ describe('AddUser component', () => { // Wait for the error Snackbar to be open await waitFor(() => { - expect(screen.getByText(/Error: Internal Server Error/i)).toBeInTheDocument(); + expect(screen.getByText("Error: Passwords do not match")).toBeInTheDocument(); }); }); }); diff --git a/webapp/src/components/Login.jsx b/webapp/src/components/Login.jsx index 433d0ea..4c73cbe 100644 --- a/webapp/src/components/Login.jsx +++ b/webapp/src/components/Login.jsx @@ -18,6 +18,7 @@ const Login = () => { const loginUser = async () => { try { const response = await axios.post(`${apiEndpoint}/login`, { username, password }).then((res) => { + if (res.status === 200) { if (signIn({ auth: { @@ -35,14 +36,22 @@ const Login = () => { navigate('/'); } else { //Throw error + throw new Error('Error while signing in'); } + } }); setOpenSnackbar(true); } catch (error) { - setError(error.response.data.error); + if(error.response===undefined){ + setError("Error: There was a problem..."); + } + else{ + setError(error.response.data.error); + } + } }; diff --git a/webapp/src/components/Login.test.js b/webapp/src/components/Login.test.js index af102dc..af02d63 100644 --- a/webapp/src/components/Login.test.js +++ b/webapp/src/components/Login.test.js @@ -3,7 +3,9 @@ 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 'react-auth-kit/AuthProvider'; +import { BrowserRouter } from 'react-router-dom'; +import createStore from 'react-auth-kit/createStore'; const mockAxios = new MockAdapter(axios); describe('Login component', () => { @@ -12,29 +14,62 @@ describe('Login component', () => { }); it('should log in successfully', async () => { - render(); + const store = createStore({ + authName: '_auth', + authType: 'cookie', + cookieDomain: window.location.hostname, + cookieSecure: window.location.protocol === 'https:', + }); + render( + + + + + ); + const usernameInput = screen.getByLabelText(/Username/i); const passwordInput = screen.getByLabelText(/Password/i); const loginButton = screen.getByRole('button', { name: /Login/i }); - + const mock = jest.fn(); + jest.mock('react-router-dom', () => ({ + useNavigate: () => mock, + })); // 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, { username:"testUser",email:"test@test.com",createdAt: '2024-01-01T12:34:56Z',token: 'testToken'}); // Simulate user input await act(async () => { - 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(/Hello testUser!/i)).toBeInTheDocument(); - expect(screen.getByText(/Your account was created on 1\/1\/2024/i)).toBeInTheDocument(); + fireEvent.change(usernameInput, { target: { value: 'testUser' } }); + fireEvent.change(passwordInput, { target: { value: 'testPassword' } }); + fireEvent.click(loginButton); + }); + + + const linkElement = screen.getByText(/Error: Error: There was a problem.../i); + expect(linkElement).toBeInTheDocument(); + + }); it('should handle error when logging in', async () => { - render(); + const store = createStore({ + authName: '_auth', + authType: 'cookie', + cookieDomain: window.location.hostname, + cookieSecure: window.location.protocol === 'https:', + }); + + render( + + + + + ); const usernameInput = screen.getByLabelText(/Username/i); const passwordInput = screen.getByLabelText(/Password/i); @@ -55,8 +90,7 @@ describe('Login component', () => { expect(screen.getByText(/Error: Unauthorized/i)).toBeInTheDocument(); }); - // Verify that the user information is not displayed - expect(screen.queryByText(/Hello testUser!/i)).toBeNull(); - expect(screen.queryByText(/Your account was created on/i)).toBeNull(); }); + + }); diff --git a/webapp/src/components/MainPage.jsx b/webapp/src/components/MainPage.jsx index 435a356..e4ea156 100644 --- a/webapp/src/components/MainPage.jsx +++ b/webapp/src/components/MainPage.jsx @@ -26,13 +26,13 @@ const MainPage = () => {

Welcome back, {auth.username}!

-
:

Welcome to WIQ, Please log in to play!

-
diff --git a/webapp/src/components/MainPage.test.js b/webapp/src/components/MainPage.test.js new file mode 100644 index 0000000..f91691e --- /dev/null +++ b/webapp/src/components/MainPage.test.js @@ -0,0 +1,30 @@ +import React from 'react'; +import { render, fireEvent } from '@testing-library/react'; +import { jest } from '@jest/globals'; +import MainPage from './MainPage'; +import useIsAuthenticated from 'react-auth-kit/hooks/useIsAuthenticated'; +import useAuthUser from 'react-auth-kit/hooks/useAuthUser'; + + +jest.mock('react-auth-kit/hooks/useIsAuthenticated'); +jest.mock('react-auth-kit/hooks/useAuthUser'); +const mock = jest.fn(); +jest.mock('react-router-dom', () => ({ + useNavigate: () => mock, +})); +describe('MainPage', () => { + it('renders welcome message for authenticated user', () => { + useIsAuthenticated.mockReturnValue(() => true); + useAuthUser.mockReturnValue({ username: 'testUser' }); + const { getByText } = render(); + expect(getByText('Welcome back, testUser!')).toBeInTheDocument(); + }); + + it('renders welcome message for unauthenticated user', () => { + useIsAuthenticated.mockReturnValue(() => false); + const { getByText } = render(); + expect(getByText('Welcome to WIQ, Please log in to play!')).toBeInTheDocument(); + }); + + +}); \ No newline at end of file