Fixes Organization Not Found in Left Drawer (#1592)

* Fixed Organization Not Found in Left Drawer * Fix State update when MemberDetail is unmounted * Shifted UseEffect to be called from top level function * Shift useEffect to be called form top-level * Add Test Coverage for images in MemberDetail * Fixed Linting issues & removed unrelated code to current PR from LoginPage * prettier update * Fix improper testcase in MemberDetail.test * State Update on Unmount Resolved in Testing * Added dicebear url constants * Revert changes in Readme & package-lock.json * Added tests for LeftDrawer & MemberDetail for full coverage * Refactor OrganizationScreen & SuperAdminScreen * Remove commented line * Modified tests in OrganizationScreen & SuperAdminScreen * Revert README.md --------- Co-authored-by: Peter Harrison <[email protected]>
PalisadoesFoundation · Mar 2, 2024 · c284e07 · c284e07
1 parent 3601c92
commit c284e07
Show file tree

Hide file tree

Showing 12 changed files with 616 additions and 538 deletions.
diff --git a/src/components/LeftDrawer/LeftDrawer.module.css b/src/components/LeftDrawer/LeftDrawer.module.css
@@ -60,9 +60,9 @@
 .leftDrawer .profileContainer {
   border: none;
   width: 100%;
+  padding: 2.1rem 0.5rem;
   height: 52px;
   border-radius: 8px;
-  background-color: var(--bs-white);
   display: flex;
   align-items: center;
 }

diff --git a/src/components/LeftDrawer/LeftDrawer.test.tsx b/src/components/LeftDrawer/LeftDrawer.test.tsx
@@ -64,9 +64,11 @@ afterEach(() => {
 });
 
 describe('Testing Left Drawer component for SUPERADMIN', () => {
+  beforeEach(() => {
+    setItem('UserType', 'SUPERADMIN');
+  });
   test('Component should be rendered properly', () => {
     setItem('UserImage', '');
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -104,7 +106,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing in roles screen', () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -127,7 +128,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing Drawer when hideDrawer is null', () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -140,7 +140,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing logout functionality', async () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -157,8 +156,10 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
 });
 
 describe('Testing Left Drawer component for ADMIN', () => {
-  test('Components should be rendered properly', () => {
+  beforeEach(() => {
     setItem('UserType', 'ADMIN');
+  });
+  test('Components should be rendered properly', () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>

diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
+import { useHistory, Link } from 'react-router-dom';
 import { ReactComponent as AngleRightIcon } from 'assets/svgs/angleRight.svg';
 import { ReactComponent as LogoutIcon } from 'assets/svgs/logout.svg';
 import { ReactComponent as OrganizationsIcon } from 'assets/svgs/organizations.svg';
@@ -42,75 +42,77 @@ const leftDrawer = ({
   };
 
   return (
-    <>
-      <div
-        className={`${styles.leftDrawer} customScroll ${
-          hideDrawer === null
-            ? styles.hideElemByDefault
-            : hideDrawer
-              ? styles.inactiveDrawer
-              : styles.activeDrawer
-        }`}
-        data-testid="leftDrawerContainer"
-      >
-        <TalawaLogo className={styles.talawaLogo} />
-        <p className={styles.talawaText}>{t('talawaAdminPortal')}</p>
-        <h5 className={styles.titleHeader}>{t('menu')}</h5>
-        <div className={styles.optionList}>
+    <div
+      className={`${styles.leftDrawer} customScroll ${
+        hideDrawer === null
+          ? styles.hideElemByDefault
+          : hideDrawer
+            ? styles.inactiveDrawer
+            : styles.activeDrawer
+      }`}
+      data-testid="leftDrawerContainer"
+    >
+      <TalawaLogo className={styles.talawaLogo} />
+      <p className={styles.talawaText}>{t('talawaAdminPortal')}</p>
+      <h5 className={styles.titleHeader}>{t('menu')}</h5>
+      <div className={styles.optionList}>
+        <Button
+          variant={screenName === 'My Organizations' ? 'success' : 'light'}
+          className={`${
+            screenName === 'My Organizations' ? 'text-white' : 'text-secondary'
+          }`}
+          data-testid="orgsBtn"
+          onClick={(): void => {
+            history.push('/orglist');
+          }}
+        >
+          <div className={styles.iconWrapper}>
+            <OrganizationsIcon
+              stroke={`${
+                screenName === 'My Organizations'
+                  ? 'var(--bs-white)'
+                  : 'var(--bs-secondary)'
+              }`}
+            />
+          </div>
+          {t('my organizations')}
+        </Button>
+        {userType === 'SUPERADMIN' && (
           <Button
-            variant={screenName === 'My Organizations' ? 'success' : 'light'}
+            variant={screenName === 'Users' ? 'success' : 'light'}
             className={`${
-              screenName === 'My Organizations'
-                ? 'text-white'
-                : 'text-secondary'
+              screenName === 'Users' ? 'text-white' : 'text-secondary'
             }`}
-            data-testid="orgsBtn"
             onClick={(): void => {
-              history.push('/orglist');
+              history.push('/users');
             }}
+            data-testid="rolesBtn"
           >
             <div className={styles.iconWrapper}>
-              <OrganizationsIcon
-                stroke={`${
-                  screenName === 'My Organizations'
+              <RolesIcon
+                fill={`${
+                  screenName === 'Users'
                     ? 'var(--bs-white)'
                     : 'var(--bs-secondary)'
                 }`}
               />
             </div>
-            {t('my organizations')}
+            {t('users')}
           </Button>
-          {userType === 'SUPERADMIN' && (
-            <Button
-              variant={screenName === 'Users' ? 'success' : 'light'}
-              className={`${
-                screenName === 'Users' ? 'text-white' : 'text-secondary'
-              }`}
-              onClick={(): void => {
-                history.push('/users');
-              }}
-              data-testid="rolesBtn"
-            >
-              <div className={styles.iconWrapper}>
-                <RolesIcon
-                  fill={`${
-                    screenName === 'Users'
-                      ? 'var(--bs-white)'
-                      : 'var(--bs-secondary)'
-                  }`}
-                />
-              </div>
-              {t('users')}
-            </Button>
-          )}
-        </div>
-        <div style={{ marginTop: 'auto' }}>
-          <button
+        )}
+      </div>
+      <div style={{ marginTop: 'auto' }}>
+        <Link
+          to={{
+            pathname: `/member/id=${userId}`,
+            state: { from: 'orglist' },
+          }}
+        >
+          <Button
+            key={'profileBtn'}
             className={styles.profileContainer}
+            variant={screenName === 'Profile' ? 'success' : 'light'}
             data-testid="profileBtn"
-            onClick={(): void => {
-              history.push(`/member/id=${userId}`);
-            }}
           >
             <div className={styles.imageContainer}>
               {userImage && userImage !== 'null' ? (
@@ -126,27 +128,31 @@ const leftDrawer = ({
               <span className={styles.primaryText}>
                 {firstName} {lastName}
               </span>
-              <span className={styles.secondaryText}>
+              <span
+                className={`${styles.secondaryText} ${
+                  screenName === 'Profile' && 'text-white'
+                }`}
+              >
                 {`${userType}`.toLowerCase()}
               </span>
             </div>
             <AngleRightIcon fill={'var(--bs-secondary)'} />
-          </button>
-
-          <Button
-            variant="light"
-            className={`mt-4 d-flex justify-content-start px-0 w-100 bg-danger text-white  ${styles.logout}`}
-            onClick={(): void => logout()}
-            data-testid="logoutBtn"
-          >
-            <div className={styles.imageContainer}>
-              <LogoutIcon fill={'white'} />
-            </div>
-            {t('logout')}
           </Button>
-        </div>
+        </Link>
+
+        <Button
+          variant="light"
+          className={`mt-4 d-flex justify-content-start px-0 w-100 bg-danger text-white  ${styles.logout}`}
+          onClick={(): void => logout()}
+          data-testid="logoutBtn"
+        >
+          <div className={styles.imageContainer}>
+            <LogoutIcon fill={'white'} />
+          </div>
+          {t('logout')}
+        </Button>
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
@@ -87,9 +87,9 @@
   border: none;
   width: 100%;
   margin-top: 5rem;
+  padding: 2.1rem 0.5rem;
   height: 52px;
   border-radius: 8px;
-  background-color: var(--bs-white);
   display: flex;
   align-items: center;
 }

diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import 'jest-localstorage-mock';
 import { I18nextProvider } from 'react-i18next';
@@ -71,7 +71,11 @@ const MOCKS = [
     request: {
       query: REVOKE_REFRESH_TOKEN,
     },
-    result: {},
+    result: {
+      data: {
+        revokeRefreshTokenForUser: true,
+      },
+    },
   },
   {
     request: {
@@ -196,6 +200,7 @@ const MOCKS_WITH_IMAGE = [
     },
   },
 ];
+
 const MOCKS_EMPTY = [
   {
     request: {
@@ -254,10 +259,39 @@ const link = new StaticMockLink(MOCKS, true);
 const linkImage = new StaticMockLink(MOCKS_WITH_IMAGE, true);
 const linkEmpty = new StaticMockLink(MOCKS_EMPTY, true);
 
-describe('Testing Left Drawer component for SUPERADMIN', () => {
+describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
+  beforeEach(() => {
+    setItem('UserType', 'SUPERADMIN');
+  });
+
+  test('Testing Profile button & its styling when screenName is Profile', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawerOrg
+                {...props}
+                screenName="Profile"
+                hideDrawer={false}
+              />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    const profileButton = screen.getByTestId('profileBtn');
+    const userTypeSpan = screen.getByText(/Superadmin/i);
+
+    expect(profileButton).toHaveClass('btn-success');
+    expect(profileButton).not.toHaveClass('btn-light');
+    expect(userTypeSpan).toHaveClass('text-white');
+  });
+
   test('Component should be rendered properly', async () => {
     setItem('UserImage', '');
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -279,7 +313,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing Profile Page & Organization Detail Modal', async () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -297,7 +330,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing Menu Buttons', async () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -315,7 +347,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing when image is present for Organization', async () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={linkImage}>
         <BrowserRouter>
@@ -331,7 +362,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing when Organization does not exists', async () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={linkEmpty}>
         <BrowserRouter>
@@ -350,7 +380,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing Drawer when hideDrawer is null', () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -365,7 +394,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing Drawer when hideDrawer is true', () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -380,7 +408,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing logout functionality', async () => {
-    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -393,7 +420,9 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
       </MockedProvider>,
     );
     userEvent.click(screen.getByTestId('logoutBtn'));
-    expect(localStorage.clear).toHaveBeenCalled();
-    expect(global.window.location.pathname).toBe('/');
+    await waitFor(() => {
+      expect(localStorage.clear).toHaveBeenCalled();
+      expect(global.window.location.pathname).toBe('/');
+    });
   });
 });