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' } });