Forgot Password Screen Tests done!

PalisadoesFoundation · Oct 27, 2023 · c831bb2 · c831bb2
1 parent dde8409
commit c831bb2
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 21 deletions.
diff --git a/src/screens/ForgotPassword/ForgotPassword.test.tsx b/src/screens/ForgotPassword/ForgotPassword.test.tsx
@@ -1,21 +1,21 @@
 import React from 'react';
 import { MockedProvider } from '@apollo/react-testing';
 import { act, render, screen } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
 import userEvent from '@testing-library/user-event';
 import 'jest-localstorage-mock';
 import 'jest-location-mock';
 import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
 
-import ForgotPassword from './ForgotPassword';
-import { store } from 'state/store';
 import {
   FORGOT_PASSWORD_MUTATION,
   GENERATE_OTP_MUTATION,
 } from 'GraphQl/Mutations/mutations';
-import i18nForTest from 'utils/i18nForTest';
+import { store } from 'state/store';
 import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import ForgotPassword from './ForgotPassword';
 
 const MOCKS = [
   {
@@ -57,7 +57,9 @@ async function wait(ms = 100): Promise<void> {
     });
   });
 }
-
+beforeEach(() => {
+  localStorage.setItem('IsLoggedIn', 'FALSE');
+});
 afterEach(() => {
   localStorage.clear();
 });
@@ -81,7 +83,9 @@ describe('Testing Forgot Password screen', () => {
     await wait();
 
     expect(screen.getByText(/Forgot Password/i)).toBeInTheDocument();
-    expect(screen.getByText(/Back to Home/i)).toBeInTheDocument();
+    expect(screen.getByText(/Registered Email/i)).toBeInTheDocument();
+    expect(screen.getByText(/Get Otp/i)).toBeInTheDocument();
+    expect(screen.getByText(/Back to Login/i)).toBeInTheDocument();
     expect(window.location).toBeAt('/orglist');
   });
 
@@ -128,13 +132,15 @@ describe('Testing Forgot Password screen', () => {
     );
 
     userEvent.click(screen.getByText('Get OTP'));
+    await wait();
   });
 
   test('Testing forgot password functionality', async () => {
     const formData = {
       userOtp: '12345',
       newPassword: 'johnDoe',
       confirmNewPassword: 'johnDoe',
+      email: '[email protected]',
     };
 
     render(
@@ -151,18 +157,28 @@ describe('Testing Forgot Password screen', () => {
 
     await wait();
 
+    userEvent.type(
+      screen.getByPlaceholderText(/Registered email/i),
+      formData.email
+    );
+
+    userEvent.click(screen.getByText('Get OTP'));
+    await wait();
+
     userEvent.type(screen.getByPlaceholderText('e.g. 12345'), formData.userOtp);
     userEvent.type(screen.getByTestId('newPassword'), formData.newPassword);
     userEvent.type(
       screen.getByTestId('confirmNewPassword'),
       formData.confirmNewPassword
     );
-
+    localStorage.setItem('otpToken', 'lorem ipsum');
     userEvent.click(screen.getByText('Change Password'));
+    await wait();
   });
 
   test('Testing forgot password functionality, when new password and confirm password is not same', async () => {
     const formData = {
+      email: '[email protected]',
       userOtp: '12345',
       newPassword: 'johnDoe',
       confirmNewPassword: 'doeJohn',
@@ -182,6 +198,14 @@ describe('Testing Forgot Password screen', () => {
 
     await wait();
 
+    userEvent.type(
+      screen.getByPlaceholderText(/Registered email/i),
+      formData.email
+    );
+
+    userEvent.click(screen.getByText('Get OTP'));
+    await wait();
+
     userEvent.type(screen.getByPlaceholderText('e.g. 12345'), formData.userOtp);
     userEvent.type(screen.getByTestId('newPassword'), formData.newPassword);
     userEvent.type(
@@ -197,6 +221,7 @@ describe('Testing Forgot Password screen', () => {
       userOtp: '12345',
       newPassword: 'johnDoe',
       confirmNewPassword: 'johnDoe',
+      email: '[email protected]',
     };
 
     localStorage.setItem('otpToken', '');
@@ -215,13 +240,20 @@ describe('Testing Forgot Password screen', () => {
 
     await wait();
 
+    userEvent.type(
+      screen.getByPlaceholderText(/Registered email/i),
+      formData.email
+    );
+
+    userEvent.click(screen.getByText('Get OTP'));
+    await wait();
+
     userEvent.type(screen.getByPlaceholderText('e.g. 12345'), formData.userOtp);
     userEvent.type(screen.getByTestId('newPassword'), formData.newPassword);
     userEvent.type(
       screen.getByTestId('confirmNewPassword'),
       formData.confirmNewPassword
     );
-
     userEvent.click(screen.getByText('Change Password'));
   });
 });
diff --git a/src/screens/ForgotPassword/ForgotPassword.tsx b/src/screens/ForgotPassword/ForgotPassword.tsx
@@ -29,7 +29,6 @@ const ForgotPassword = (): JSX.Element => {
 
   const [showEnterEmail, setShowEnterEmail] = useState(true);
 
-  const [componentLoader, setComponentLoader] = useState(true);
   const [registeredEmail, setregisteredEmail] = useState('');
 
   const [forgotPassFormData, setForgotPassFormData] = useState({
@@ -38,22 +37,24 @@ const ForgotPassword = (): JSX.Element => {
     confirmNewPassword: '',
   });
 
-  const [otp, { loading: otpLoading }] = useMutation(GENERATE_OTP_MUTATION);
+  const [otp, { loading: otpLoading, error }] = useMutation(
+    GENERATE_OTP_MUTATION
+  );
   const [forgotPassword, { loading: forgotPasswordLoading }] = useMutation(
     FORGOT_PASSWORD_MUTATION
   );
-
+  const isLoggedIn = localStorage.getItem('IsLoggedIn');
   useEffect(() => {
-    const isLoggedIn = localStorage.getItem('IsLoggedIn');
     if (isLoggedIn == 'TRUE') {
       window.location.replace('/orglist');
     }
-    setComponentLoader(false);
+    return () => {
+      localStorage.removeItem('otpToken');
+    };
   }, []);
 
   const getOTP = async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault();
-    setShowEnterEmail(false);
 
     try {
       const { data } = await otp({
@@ -62,14 +63,12 @@ const ForgotPassword = (): JSX.Element => {
         },
       });
 
-      /* istanbul ignore next */
       if (data) {
         localStorage.setItem('otpToken', data.otp.otpToken);
         toast.success(t('OTPsent'));
         setShowEnterEmail(false);
       }
     } catch (error: any) {
-      /* istanbul ignore next */
       if (error.message === 'User not found') {
         toast.warn(t('emailNotRegistered'));
       } else if (error.message === 'Failed to fetch') {
@@ -117,16 +116,15 @@ const ForgotPassword = (): JSX.Element => {
         });
       }
     } catch (error: any) {
-      /* istanbul ignore next */
       setShowEnterEmail(true);
+      /* istanbul ignore next */
       errorHandler(t, error);
     }
   };
 
-  if (componentLoader || otpLoading || forgotPasswordLoading) {
+  if (otpLoading || forgotPasswordLoading) {
     return <Loader />;
   }
-
   return (
     <>
       <div className={styles.pageWrapper}>
@@ -158,7 +156,11 @@ const ForgotPassword = (): JSX.Element => {
                         }
                       />
                     </div>
-                    <Button type="submit" className="mt-4 w-100">
+                    <Button
+                      type="submit"
+                      className="mt-4 w-100"
+                      data-testid="getOtpBtn"
+                    >
                       {t('getOtp')}
                     </Button>
                   </Form>