fix: Changing the Signup.test to pass with the new conventions

Arquisoft · Mar 4, 2024 · 17beee4 · 17beee4
1 parent f8eecc9
commit 17beee4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/webapp/src/pages/Signup.jsx b/webapp/src/pages/Signup.jsx
@@ -105,7 +105,7 @@ export default function Signup() {
                                     onChange={(e) => setPassword(e.target.value)}
                                 />
                                 <InputRightElement width="4.5rem">
-                                    <Button h="1.75rem" size="sm" onClick={() => setShowPassword(!showPassword)}>
+                                    <Button data-testid="show-confirm-password-button" h="1.75rem" size="sm" onClick={() => setShowPassword(!showPassword)}>
                                         {showPassword ? <ViewOffIcon/> : <ViewIcon/>}
                                     </Button>
                                 </InputRightElement>
@@ -121,7 +121,7 @@ export default function Signup() {
                                     onChange={(e) => setConfirmPassword(e.target.value)}
                                 />
                                 <InputRightElement width="4.5rem">
-                                    <Button h="1.75rem" size="sm" onClick={() => setShowConfirmPassword(!showConfirmPassword)}>
+                                    <Button data-testid="show-confirm-password-button" h="1.75rem" size="sm" onClick={() => setShowConfirmPassword(!showConfirmPassword)}>
                                         {showConfirmPassword ? <ViewOffIcon/> : <ViewIcon/>}
                                     </Button>
                                 </InputRightElement>

diff --git a/webapp/src/tests/Signup.test.js b/webapp/src/tests/Signup.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent, waitFor } from '@testing-library/react';
+import { render, fireEvent, waitFor, getByTestId, getAllByTestId } from '@testing-library/react';
 import axios from 'axios';
 import { MemoryRouter, createMemoryRouter } from 'react-router';
 import Signup from '../pages/Signup';
@@ -13,16 +13,16 @@ describe('Signup Component', () => {
     expect(getByPlaceholderText('session.username')).toBeInTheDocument();
     expect(getByPlaceholderText('session.password')).toBeInTheDocument();
     expect(getByPlaceholderText('session.confirm_password')).toBeInTheDocument();
-    expect(getByText('Sign Up')).toBeInTheDocument();
+    expect(getByTestId(document.body, 'Sign up')).toBeInTheDocument();
   });
 
   it('toggles password visibility', () => {
     const { getByPlaceholderText, getAllByRole } = render(<MemoryRouter><Signup /></MemoryRouter>);
 
     const passwordInput = getByPlaceholderText('session.password');
     const confirmPasswordInput = getByPlaceholderText('session.confirm_password');
-    const showPasswordButtons = getAllByRole('button', { name: /Show/i });
-  
+    const showPasswordButtons = getAllByTestId(document.body, 'show-confirm-password-button');
+
     fireEvent.click(showPasswordButtons[0]);
     fireEvent.click(showPasswordButtons[1]);
 
@@ -41,7 +41,7 @@ describe('Signup Component', () => {
     const emailInput = getByPlaceholderText('session.email');
     const usernameInput = getByPlaceholderText('session.username');
     const passwordInput = getByPlaceholderText('session.password');
-    const signUpButton = getByText('Sign Up');
+    const signUpButton = getByTestId(document.body, 'Sign up');
 
     // Fill out the form with valid data and submit it
     fireEvent.change(emailInput, { target: { value: '[email protected]' } });