chore(tests): update tests

revert email input field

Author: juanchoperezj

src/api/auth/use-login.ts

@@ -3,6 +3,7 @@ import { createMutation } from 'react-query-kit';
 import { client } from '../common';
 
 type Variables = {
+  email?: string; // optional because API doesn't require email
   username: string;
   password: string;
   expiresInMins?: number;
@@ -20,7 +21,10 @@ const login = async (variables: Variables) => {
   const { data } = await client({
     url: 'auth/login',
     method: 'POST',
-    data: variables,
+    data: {
+      username: variables.username,
+      password: variables.password,
+    },
     headers: {
       'Content-Type': 'application/json',
     },

src/components/login-form.test.tsx

@@ -18,9 +18,9 @@ describe('LoginForm Form ', () => {
     render(<LoginForm />);
 
     const button = screen.getByTestId(LOGIN_BUTTON);
-    expect(screen.queryByText(/Email is required/i)).not.toBeOnTheScreen();
+    expect(screen.queryByText(/Username is required/i)).not.toBeOnTheScreen();
     fireEvent.press(button);
-    expect(await screen.findByText(/Email is required/i)).toBeOnTheScreen();
+    expect(await screen.findByText(/Username is required/i)).toBeOnTheScreen();
     expect(screen.getByText(/Password is required/i)).toBeOnTheScreen();
   });
 
@@ -29,24 +29,26 @@ describe('LoginForm Form ', () => {
 
     const button = screen.getByTestId(LOGIN_BUTTON);
     const emailInput = screen.getByTestId('email-input');
+    const usernameInput = screen.getByTestId('username-input');
     const passwordInput = screen.getByTestId('password-input');
 
-    fireEvent.changeText(emailInput, 'yyyyy');
+    fireEvent.changeText(emailInput, 'yyyy');
+    fireEvent.changeText(usernameInput, '  ');
     fireEvent.changeText(passwordInput, 'test');
     fireEvent.press(button);
 
-    expect(screen.queryByText(/Email is required/i)).not.toBeOnTheScreen();
+    expect(screen.queryByText(/Username is required/i)).not.toBeOnTheScreen();
     expect(await screen.findByText(/Invalid Email Format/i)).toBeOnTheScreen();
   });
 
   it('Should call LoginForm with correct values when values are valid', async () => {
     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');
 
-    fireEvent.changeText(emailInput, 'youssef@gmail.com');
+    fireEvent.changeText(emailInput, 'youssef');
     fireEvent.changeText(passwordInput, 'password');
     fireEvent.press(button);
     await waitFor(() => {
@@ -55,10 +57,11 @@ describe('LoginForm Form ', () => {
     // undefined because we don't use second argument of the  SubmitHandler
     expect(onSubmitMock).toHaveBeenCalledWith(
       {
-        email: '[email protected]',
+        email: undefined,
+        username: 'youssef',
         password: 'password',
       },
-      undefined
+      undefined,
     );
   });
 });

src/components/login-form.tsx

@@ -8,7 +8,10 @@ import { Button, ControlledInput, Text, View } from '@/ui';
 
 const MIN_CHARS = 6;
 const schema = z.object({
-  username: z.string(),
+  username: z.string({
+    required_error: 'Username is required',
+  }),
+  email: z.string().email('Invalid email format').optional(),
   password: z
     .string({
       required_error: 'Password is required',
@@ -38,7 +41,13 @@ export const LoginForm = ({ onSubmit = () => {} }: LoginFormProps) => {
         </Text>
 
         <ControlledInput
-          testID="username"
+          testID="email-input"
+          control={control}
+          name="email"
+          label="Email (optional)"
+        />
+        <ControlledInput
+          testID="username-input"
           control={control}
           name="username"
           label="Username"