ryan/feat(ux: create input loading spinner)

app/(main)/login/page.test.tsx

@@ -1,10 +1,18 @@
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import React, { Dispatch, useState as useStateMock } from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import Login from './page';
+import { loginAccount } from '@/api/apiFunctions';
 
 const mockLogin = jest.fn();
 const mockPush = jest.fn();
 const getUser = jest.fn();
+const setIsLoading = jest.fn();
+const setState = jest.fn();
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useState: jest.fn(),
+}));
 
 let continueButton: HTMLElement,
   emailInput: HTMLInputElement,
@@ -33,10 +41,17 @@ jest.mock('../../../context/AuthContextProvider', () => ({
 }));
 
 describe('Login', () => {
+  const setIsLoading = jest.fn();
+  const useStateMock = (init: any): [unknown, Dispatch<unknown>] => [
+    init,
+    setState,
+  ];
   beforeEach(() => {
     jest.clearAllMocks();
+    jest.spyOn(React, 'useState').mockImplementation(useStateMock);
 
     render(<Login />);
+
     emailInput = screen.getByTestId('email');
     passwordInput = screen.getByTestId('password');
     continueButton = screen.getByTestId('continue-button');
@@ -60,9 +75,10 @@ describe('Login', () => {
   test('should call loginAccount function with email and password when continue button is clicked', async () => {
     fireEvent.change(emailInput, { target: { value: '[email protected]' } });
     fireEvent.change(passwordInput, { target: { value: 'password123' } });
-    fireEvent.click(continueButton);
+    fireEvent.submit(continueButton);
 
     await waitFor(() => {
+      expect(mockLogin).toHaveBeenCalledTimes(1);
       expect(mockLogin).toHaveBeenCalledWith({
         email: '[email protected]',
         password: 'password123',
@@ -87,3 +103,30 @@ describe('Login', () => {
     expect(mockPush).toHaveBeenCalledWith('/league/all');
   });
 });
+
+describe('Login loading spinner', () => {
+  it('should show the loading spinner', async () => {
+    (useStateMock as jest.Mock).mockImplementation((init: boolean) => [
+      true,
+      setIsLoading,
+    ]);
+
+    render(<Login />);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('loading-spinner')).toBeInTheDocument();
+    });
+  });
+  it('should not show the loading spinner', async () => {
+    (useStateMock as jest.Mock).mockImplementation((init: boolean) => [
+      false,
+      setIsLoading,
+    ]);
+
+    render(<Login />);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
+    });
+  });
+});

app/(main)/login/page.tsx

@@ -13,14 +13,14 @@ import {
 } from '../../../components/Form/Form';
 import { Input } from '@/components/Input/Input';
 import { useAuthContext } from '@/context/AuthContextProvider';
+import { useRouter } from 'next/navigation';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import LinkCustom from '@/components/LinkCustom/LinkCustom';
 import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner';
 import Logo from '@/components/Logo/Logo';
 import logo from '@/public/assets/logo-colored-outline.svg';
 import React, { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
 
 /**
  * The schema for the login form.
@@ -82,10 +82,19 @@ const Login = (): React.JSX.Element => {
    * Handles the form submission.
    * @param {LoginUserSchemaType} data - The data from the form.
    */
-  const onSubmit: SubmitHandler<LoginUserSchemaType> = async (data) => {
-    setIsLoading(true);
-    await login(data);
-    setIsLoading(false);
+  const onSubmit: SubmitHandler<LoginUserSchemaType> = async (
+    data: LoginUserSchemaType,
+  ): Promise<void> => {
+    try {
+      setIsLoading(true);
+      await login(data);
+      setIsLoading(false);
+    } catch (error) {
+      console.error(error);
+      throw new Error('An error occurred while logging in');
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (
@@ -130,7 +139,7 @@ const Login = (): React.JSX.Element => {
                       {...field}
                     />
                   </FormControl>
-                  {form.formState.errors.email && (
+                  {form.formState.errors?.email && (
                     <FormMessage>
                       {form.formState.errors.email.message}
                     </FormMessage>
@@ -151,9 +160,9 @@ const Login = (): React.JSX.Element => {
                       {...field}
                     />
                   </FormControl>
-                  {form.formState.errors.password && (
+                  {form.formState.errors?.password && (
                     <FormMessage>
-                      {form.formState.errors.password.message}
+                      {form.formState.errors?.password.message}
                     </FormMessage>
                   )}
                 </FormItem>

app/(main)/register/page.test.tsx

@@ -1,4 +1,10 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
+import React, { Dispatch, useState as useStateMock } from 'react';
 import Register from './page';
 import { registerAccount } from '@/api/apiFunctions';
 import Alert from '@/components/AlertNotification/AlertNotification';
@@ -7,8 +13,15 @@ import { toast } from 'react-hot-toast';
 
 const mockLogin = jest.fn();
 const mockPush = jest.fn();
+const setIsLoading = jest.fn();
+const setState = jest.fn();
 
-jest.mock('../../../api/apiFunctions', () => ({
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useState: jest.fn()
+}));
+
+jest.mock('@/api/apiFunctions', () => ({
   registerAccount: jest.fn(),
 }));
 
@@ -44,8 +57,11 @@ jest.mock('../../../context/AuthContextProvider', () => ({
 }));
 
 describe('Register', () => {
+  const setIsLoading = jest.fn();
+  const useStateMock = (init: any): [unknown, Dispatch<unknown>] => [init, setState];
   beforeEach(() => {
     jest.clearAllMocks();
+    jest.spyOn(React, 'useState').mockImplementation(useStateMock);
 
     render(<Register />);
 
@@ -84,9 +100,10 @@ describe('Register', () => {
     fireEvent.change(emailInput, { target: { value: '[email protected]' } });
     fireEvent.change(passwordInput, { target: { value: 'rawr123' } });
     fireEvent.change(confirmPasswordInput, { target: { value: 'rawr123' } });
-    fireEvent.click(continueButton);
+    fireEvent.submit(continueButton);
 
     await waitFor(() => {
+      expect(registerAccount).toHaveBeenCalledTimes(1);
       expect(registerAccount).toHaveBeenCalledWith({
         email: '[email protected]',
         password: 'rawr123',
@@ -116,7 +133,7 @@ describe('Register', () => {
     fireEvent.change(emailInput, { target: { value: '[email protected]' } });
     fireEvent.change(passwordInput, { target: { value: 'pw1234' } });
     fireEvent.change(confirmPasswordInput, { target: { value: 'pw1234' } });
-    fireEvent.click(continueButton);
+    fireEvent.submit(continueButton);
 
     await waitFor(() => {
       expect(registerAccount).toHaveBeenCalledWith({
@@ -147,7 +164,7 @@ describe('Register', () => {
     fireEvent.change(emailInput, { target: { value: '[email protected]' } });
     fireEvent.change(passwordInput, { target: { value: 'pw1234' } });
     fireEvent.change(confirmPasswordInput, { target: { value: 'pw1234' } });
-    fireEvent.click(continueButton);
+    fireEvent.submit(continueButton);
 
     await waitFor(() => {
       expect(registerAccount).toHaveBeenCalledWith({
@@ -171,3 +188,24 @@ describe('Register', () => {
     expect(darkModeSection).toHaveClass('dark:bg-gradient-to-b');
   });
 });
+
+describe('Register loading spinner', () => {
+  it('should show the loading spinner', async () => {
+    (useStateMock as jest.Mock).mockImplementation((init: boolean) => [true, setIsLoading]);
+
+    render(<Register />);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('loading-spinner')).toBeInTheDocument();
+    });
+  });
+  it('should not show the loading spinner', async () => {
+    (useStateMock as jest.Mock).mockImplementation((init: boolean) => [false, setIsLoading]);
+
+    render(<Register />);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
+    });
+  });
+});

app/(main)/register/page.tsx

@@ -23,7 +23,8 @@ import Alert from '@/components/AlertNotification/AlertNotification';
 import LinkCustom from '@/components/LinkCustom/LinkCustom';
 import Logo from '@/components/Logo/Logo';
 import logo from '/public/assets/logo-colored-outline.svg';
-import React, { JSX, useEffect } from 'react';
+import React, { JSX, useEffect, useState } from 'react';
+import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner';
 
 const RegisterUserSchema = z
   .object({
@@ -54,6 +55,7 @@ type RegisterUserSchemaType = z.infer<typeof RegisterUserSchema>;
 const Register = (): JSX.Element => {
   const router = useRouter();
   const { login, isSignedIn } = useAuthContext();
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     if (isSignedIn) {
@@ -105,8 +107,10 @@ const Register = (): JSX.Element => {
     data: RegisterUserSchemaType,
   ): Promise<void> => {
     try {
+      setIsLoading(true);
       await registerAccount(data);
       await login(data);
+      setIsLoading(false);
       router.push('/league/all');
       toast.custom(
         <Alert
@@ -115,6 +119,7 @@ const Register = (): JSX.Element => {
         />,
       );
     } catch (error) {
+      setIsLoading(false);
       console.error('Registration Failed', error);
       toast.custom(
         <Alert variant={AlertVariants.Error} message="Something went wrong!" />,
@@ -169,9 +174,9 @@ const Register = (): JSX.Element => {
                       {...field}
                     />
                   </FormControl>
-                  {form.formState.errors.email && (
+                  {form.formState.errors?.email && (
                     <FormMessage>
-                      {form.formState.errors.email.message}
+                      {form.formState.errors?.email.message}
                     </FormMessage>
                   )}
                 </FormItem>
@@ -190,9 +195,9 @@ const Register = (): JSX.Element => {
                       {...field}
                     />
                   </FormControl>
-                  {form.formState.errors.password && (
+                  {form.formState.errors?.password && (
                     <FormMessage>
-                      {form.formState.errors.password.message}
+                      {form.formState.errors?.password.message}
                     </FormMessage>
                   )}
                 </FormItem>
@@ -211,9 +216,9 @@ const Register = (): JSX.Element => {
                       {...field}
                     />
                   </FormControl>
-                  {form.formState.errors.confirmPassword && (
+                  {form.formState.errors?.confirmPassword && (
                     <FormMessage>
-                      {form.formState.errors.confirmPassword.message}
+                      {form.formState.errors?.confirmPassword.message}
                     </FormMessage>
                   )}
                 </FormItem>
@@ -222,7 +227,7 @@ const Register = (): JSX.Element => {
 
             <Button
               data-testid="continue-button"
-              label="Register"
+              label={isLoading ? <LoadingSpinner /> : 'Continue'}
               type="submit"
               disabled={isDisabled}
             />

components/Button/Button.tsx

@@ -38,7 +38,7 @@ const buttonVariants = cva(
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  label?: React.ReactNode;
+  label?: boolean | JSX.Element | string;
   icon?: JSX.Element;
 }