revert(merge): use incoming change

Author: juanchoperezj

src/components/login-form.test.tsx

@@ -1,4 +1,4 @@
-import { cleanup, screen, setup, waitFor } from '@/core/test-utils';
+import { cleanup, fireEvent, render, screen, waitFor } from '@/core/test-utils';
 
 import type { LoginFormProps } from './login-form';
 import { LoginForm } from './login-form';
@@ -10,55 +10,58 @@ const onSubmitMock: jest.Mock<LoginFormProps['onSubmit']> = jest.fn();
 describe('LoginForm Form ', () => {
   const LOGIN_BUTTON = 'login-button';
   it('renders correctly', async () => {
-    setup(<LoginForm />);
+    render(<LoginForm />);
     expect(await screen.findByText(/Sign in/i)).toBeOnTheScreen();
   });
 
   it('should display required error when values are empty', async () => {
-    const { user } = setup(<LoginForm />);
+    render(<LoginForm />);
 
     const button = screen.getByTestId(LOGIN_BUTTON);
-    expect(screen.queryByText(/Email is required/i)).not.toBeOnTheScreen();
-    await user.press(button);
-    expect(await screen.findByText(/Email is required/i)).toBeOnTheScreen();
+    expect(screen.queryByText(/Username is required/i)).not.toBeOnTheScreen();
+    fireEvent.press(button);
+    expect(await screen.findByText(/Username is required/i)).toBeOnTheScreen();
     expect(screen.getByText(/Password is required/i)).toBeOnTheScreen();
   });
 
   it('should display matching error when email is invalid', async () => {
-    const { user } = setup(<LoginForm />);
+    render(<LoginForm />);
 
     const button = screen.getByTestId(LOGIN_BUTTON);
     const emailInput = screen.getByTestId('email-input');
+    const usernameInput = screen.getByTestId('username-input');
     const passwordInput = screen.getByTestId('password-input');
 
-    await user.type(emailInput, 'yyyyy');
-    await user.type(passwordInput, 'test');
-    await user.press(button);
+    fireEvent.changeText(emailInput, 'yyyy');
+    fireEvent.changeText(usernameInput, '  ');
+    fireEvent.changeText(passwordInput, 'test');
+    fireEvent.press(button);
 
+    expect(screen.queryByText(/Username is required/i)).not.toBeOnTheScreen();
     expect(await screen.findByText(/Invalid Email Format/i)).toBeOnTheScreen();
-    expect(screen.queryByText(/Email is required/i)).not.toBeOnTheScreen();
   });
 
   it('Should call LoginForm with correct values when values are valid', async () => {
-    const { user } = setup(<LoginForm onSubmit={onSubmitMock} />);
+    render(<LoginForm onSubmit={onSubmitMock} />);
 
     const button = screen.getByTestId(LOGIN_BUTTON);
-    const emailInput = screen.getByTestId('email-input');
+    const emailInput = screen.getByTestId('username-input');
     const passwordInput = screen.getByTestId('password-input');
 
-    await user.type(emailInput, 'youssef@gmail.com');
-    await user.type(passwordInput, 'password');
-    await user.press(button);
+    fireEvent.changeText(emailInput, 'youssef');
+    fireEvent.changeText(passwordInput, 'password');
+    fireEvent.press(button);
     await waitFor(() => {
       expect(onSubmitMock).toHaveBeenCalledTimes(1);
     });
-    // expect.objectContaining({}) because we don't want to test the target event we are receiving from the onSubmit function
+    // undefined because we don't use second argument of the  SubmitHandler
     expect(onSubmitMock).toHaveBeenCalledWith(
       {
-        email: '[email protected]',
+        email: undefined,
+        username: 'youssef',
         password: 'password',
       },
-      expect.objectContaining({}),
+      undefined,
     );
   });
 });