diff --git a/webapp/src/components/ButtonEf.jsx b/webapp/src/components/ButtonEf.jsx index 746f07a8..2ca6e920 100644 --- a/webapp/src/components/ButtonEf.jsx +++ b/webapp/src/components/ButtonEf.jsx @@ -2,9 +2,9 @@ import React from 'react'; import { Button } from "@chakra-ui/react"; import '../styles/AppView.css'; -const ButtonEf = ({ variant, colorScheme, text, onClick }) => { +const ButtonEf = ({ dataTestId, variant, colorScheme, text, onClick }) => { return ( - + ); }; export default ButtonEf; \ No newline at end of file diff --git a/webapp/src/pages/Login.jsx b/webapp/src/pages/Login.jsx index bc3d9716..5ae7e1c1 100644 --- a/webapp/src/pages/Login.jsx +++ b/webapp/src/pages/Login.jsx @@ -59,11 +59,11 @@ export default function Login() { }/> - : }/> + : } data-testid="togglePasswordButton"/> - + diff --git a/webapp/src/tests/Login.test.js b/webapp/src/tests/Login.test.js index e18e7383..1b8b1986 100644 --- a/webapp/src/tests/Login.test.js +++ b/webapp/src/tests/Login.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, fireEvent, screen, waitFor, act } from '@testing-library/react'; +import { render, fireEvent, screen, waitFor, act, getByLabelText, getByTestId } from '@testing-library/react'; import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; import Login from '../pages/Login'; @@ -19,15 +19,15 @@ describe('Login component', () => { expect(getByPlaceholderText('session.email')).toBeInTheDocument(); expect(getByPlaceholderText('session.password')).toBeInTheDocument(); - expect(getByText('Login')).toBeInTheDocument(); + expect(getByTestId(document.body, 'Login')).toBeInTheDocument(); }); it('toggles password visibility', () => { const { getByPlaceholderText, getByText } = render(); const passwordInput = getByPlaceholderText('session.password'); - const showPasswordButton = getByText('Show'); - + const showPasswordButton = getByTestId(document.body, 'togglePasswordButton'); + fireEvent.click(showPasswordButton); expect(passwordInput.getAttribute('type')).toBe('text'); @@ -43,7 +43,7 @@ describe('Login component', () => { // Get form elements and submit button by their text and placeholder values const emailInput = getByPlaceholderText('session.email'); const passwordInput = getByPlaceholderText('session.password'); - const signUpButton = getByText('Login'); + const signUpButton = getByTestId(document.body, 'Login'); // Fill out the form with valid data and submit it fireEvent.change(emailInput, { target: { value: 'test@example.com' } });