diff --git a/webapp/src/tests/Login.test.js b/webapp/src/tests/Login.test.js new file mode 100644 index 00000000..1a20e7fc --- /dev/null +++ b/webapp/src/tests/Login.test.js @@ -0,0 +1,64 @@ +import React from 'react'; +import { render, fireEvent, waitFor, getByTestId, getAllByTestId } from '@testing-library/react'; +import axios from 'axios'; +import { MemoryRouter } from 'react-router'; +import Signup from '../pages/Signup'; + +describe('Signup Component', () => { + + it('renders form elements correctly', () => { + const { getByPlaceholderText } = render(); + + expect(getByPlaceholderText('session.email')).toBeInTheDocument(); + expect(getByPlaceholderText('session.username')).toBeInTheDocument(); + expect(getByPlaceholderText('session.password')).toBeInTheDocument(); + expect(getByPlaceholderText('session.confirm_password')).toBeInTheDocument(); + expect(getByTestId(document.body, 'Sign up')).toBeInTheDocument(); + }); + + it('toggles password visibility', () => { + const { getByPlaceholderText } = render(); + + const passwordInput = getByPlaceholderText('session.password'); + const confirmPasswordInput = getByPlaceholderText('session.confirm_password'); + const showPasswordButtons = getAllByTestId(document.body, 'show-confirm-password-button'); + + fireEvent.click(showPasswordButtons[0]); + fireEvent.click(showPasswordButtons[1]); + + expect(passwordInput.getAttribute('type')).toBe('text'); + expect(confirmPasswordInput.getAttribute('type')).toBe('text'); + }); + + it('submits form data correctly', async () => { + const axiosMock = jest.spyOn(axios, 'post'); + axiosMock.mockResolvedValueOnce({ status: 202 }); // Accepted status code + + // Render the Signup component + const { getByPlaceholderText } = render(); + + // Get form elements and submit button by their text and placeholder values + const emailInput = getByPlaceholderText('session.email'); + const usernameInput = getByPlaceholderText('session.username'); + const passwordInput = getByPlaceholderText('session.password'); + const signUpButton = getByTestId(document.body, 'Sign up'); + + // Fill out the form with valid data and submit it + fireEvent.change(emailInput, { target: { value: 'test@example.com' } }); + fireEvent.change(usernameInput, { target: { value: 'testuser' } }); + fireEvent.change(passwordInput, { target: { value: 'password' } }); + fireEvent.click(signUpButton); + + // Check if the form data was sent correctly + await waitFor(() => { + expect(axiosMock).toHaveBeenCalledWith(process.env.API_URL, { + email: 'test@example.com', + username: 'testuser', + password: 'password' + }); + expect(axiosMock).toHaveBeenCalledTimes(1); + }); + + axiosMock.mockRestore(); + }); +}); \ No newline at end of file