Organization Dashboard achieved 100% CC

PalisadoesFoundation · Sep 5, 2023 · 4233482 · 4233482
1 parent aff5149
commit 4233482
Show file tree

Hide file tree

Showing 6 changed files with 394 additions and 459 deletions.
diff --git a/src/components/OrganizationDashCards/CardItemLoading.tsx b/src/components/OrganizationDashCards/CardItemLoading.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from './CardItem.module.css';
+
+const cardItemLoading = (): JSX.Element => {
+  return (
+    <>
+      <div className={`${styles.cardItem} border-bottom`}>
+        <div className={`${styles.iconWrapper} me-3`}>
+          <div className={styles.themeOverlay} />
+        </div>
+        <span
+          className={`${styles.title} shimmer rounded`}
+          style={{
+            height: '1.5rem',
+          }}
+        >
+          &nbsp;
+        </span>
+      </div>
+    </>
+  );
+};
+
+export default cardItemLoading;
diff --git a/src/components/OrganizationDashCards/DashboardCard.tsx b/src/components/OrganizationDashCards/DashboardCard.tsx
@@ -6,7 +6,7 @@ import styles from './Dashboardcard.module.css';
 const dashBoardCard = (props: {
   icon: React.ReactNode;
   title: string;
-  count: number;
+  count?: number;
 }): JSX.Element => {
   const { icon, count, title } = props;
   return (
@@ -20,7 +20,7 @@ const dashBoardCard = (props: {
             </div>
           </Col>
           <Col sm={8} className={styles.textWrapper}>
-            <span className={styles.primaryText}>{count}</span>
+            <span className={styles.primaryText}>{count ?? 0}</span>
             <span className={styles.secondaryText}>{title}</span>
           </Col>
         </Row>

diff --git a/src/components/OrganizationDashCards/DashboardCardLoading.tsx b/src/components/OrganizationDashCards/DashboardCardLoading.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Card, Row } from 'react-bootstrap';
+import Col from 'react-bootstrap/Col';
+import styles from './Dashboardcard.module.css';
+
+const dashBoardCardLoading = (): JSX.Element => {
+  return (
+    <Card className="rounded-4" border="0">
+      <Card.Body className={styles.cardBody}>
+        <Row className="align-items-center">
+          <Col sm={4}>
+            <div className={styles.iconWrapper}>
+              <div className={styles.themeOverlay} />
+            </div>
+          </Col>
+          <Col sm={8} className={styles.textWrapper}>
+            <span
+              className={`${styles.primaryText} shimmer rounded w-75 mb-2`}
+              style={{
+                height: '1.75rem',
+              }}
+            />
+            <span
+              className={`${styles.secondaryText} shimmer rounded`}
+              style={{
+                height: '1.25rem',
+              }}
+            />
+          </Col>
+        </Row>
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default dashBoardCardLoading;
diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx
@@ -1,27 +1,27 @@
-import React from 'react';
 import { MockedProvider } from '@apollo/react-testing';
-import type { RenderResult } from '@testing-library/react';
 import {
   act,
-  render,
-  screen,
   fireEvent,
-  waitFor,
+  render,
+  screen
 } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
 import 'jest-location-mock';
 import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
 
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
 import OrganizationDashboard from './OrganizationDashboard';
 import {
-  MOCKS_WITHOUT_IMAGE,
-  MOCKS_WITH_IMAGE,
+  EMPTY_MOCKS,
+  ERROR_MOCKS,
+  MOCKS
 } from './OrganizationDashboardMocks';
-import { store } from 'state/store';
 import i18nForTest from 'utils/i18nForTest';
-import { USER_ORGANIZATION_LIST } from 'GraphQl/Queries/Queries';
-import { StaticMockLink } from 'utils/StaticMockLink';
+import dayjs from 'dayjs';
+import { toast } from 'react-toastify';
+import userEvent from '@testing-library/user-event';
 
 async function wait(ms = 100): Promise<void> {
   await act(() => {
@@ -30,125 +30,122 @@ async function wait(ms = 100): Promise<void> {
     });
   });
 }
-const link2 = new StaticMockLink(MOCKS_WITH_IMAGE, true);
-const link3 = new StaticMockLink(MOCKS_WITHOUT_IMAGE, true);
-const customRender = (userType: any): RenderResult => {
-  const mockedUser = {
-    request: {
-      query: USER_ORGANIZATION_LIST,
-      variables: { id: localStorage.getItem('id') },
-    },
-    result: {
-      data: {
-        user: {
-          userType,
-          firstName: 'John',
-          lastName: 'Doe',
-          image: '',
-          email: '[email protected]',
-          adminFor: {
-            _id: 1,
-            name: 'Akatsuki',
-            image: '',
-          },
-        },
-      },
-    },
-  };
-
-  const mocks = [mockedUser, ...MOCKS_WITHOUT_IMAGE];
-
-  const link1 = new StaticMockLink(mocks, true);
-
-  return render(
-    <MockedProvider addTypename={false} link={link1}>
-      <BrowserRouter>
-        <Provider store={store}>
-          <I18nextProvider i18n={i18nForTest}>
-            <OrganizationDashboard />
-          </I18nextProvider>
-        </Provider>
-      </BrowserRouter>
-    </MockedProvider>
+const link1 = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(EMPTY_MOCKS, true);
+const link3 = new StaticMockLink(ERROR_MOCKS, true);
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+beforeEach(() => {
+  localStorage.setItem('FirstName', 'John');
+  localStorage.setItem('LastName', 'Doe');
+  localStorage.setItem('UserType', 'SUPERADMIN');
+  localStorage.setItem(
+    'UserImage',
+    'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe'
   );
-};
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
+  localStorage.clear();
+});
+
 
 describe('Organisation Dashboard Page', () => {
-  test('should render props and text elements test for the screen', async () => {
-    window.location.replace('/orglist');
-
-    const { container } = render(
-      <MockedProvider addTypename={false} link={link3}>
-        <BrowserRouter>
-          <Provider store={store}>
-            <I18nextProvider i18n={i18nForTest}>
-              <OrganizationDashboard />
-            </I18nextProvider>
-          </Provider>
-        </BrowserRouter>
-      </MockedProvider>
-    );
-
-    expect(container.textContent).not.toBe('Loading data...');
+  test('Should render props and text elements test for the screen', async () => {
+
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link1}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <OrganizationDashboard />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>
+      )
+    });
+
     await wait();
-    expect(container.textContent).toMatch('Location');
-    expect(container.textContent).toMatch('About');
-    expect(container.textContent).toMatch('Statistics');
-    expect(window.location).toBeAt('/orglist');
-  });
+    expect(screen.getByText('Members')).toBeInTheDocument();
+    expect(screen.getByText('Admins')).toBeInTheDocument();
+    expect(screen.getAllByText('Posts')).toHaveLength(2);
+    expect(screen.getAllByText('Events')).toHaveLength(2);
+    expect(screen.getByText('Blocked Users')).toBeInTheDocument();
+    expect(screen.getByText('Requests')).toBeInTheDocument();
+    expect(screen.getByText('Upcoming events')).toBeInTheDocument();
+    expect(screen.getByText('Latest posts')).toBeInTheDocument();
+    expect(screen.getByText('Membership requests')).toBeInTheDocument();
+    expect(screen.getAllByText('View all')).toHaveLength(3);
 
-  test('should display delete button for SUPERADMIN', async () => {
-    const { getByTestId, queryByTestId } = customRender('SUPERADMIN');
-    await waitFor(() =>
-      expect(queryByTestId('deleteClick')).toBeInTheDocument()
-    );
+    // Checking if events are rendered 
+    expect(screen.getByText('Event 1')).toBeInTheDocument();
+    expect(screen.getByText(`${dayjs(new Date()).add(1, 'day').format('DD-MM-YYYY')}`)).toBeInTheDocument();
 
-    fireEvent.click(getByTestId('deleteClick'));
-    fireEvent.click(getByTestId(/deleteOrganizationBtn/i));
-    expect(window.location).not.toBeNull();
-  });
+    // Checking if posts are rendered 
+    expect(screen.getByText('Post 1')).toBeInTheDocument();
 
-  test('should not display delete button for non-SUPERADMIN', async () => {
-    const { queryByTestId } = customRender('ADMIN');
-    await waitFor(() =>
-      expect(queryByTestId('deleteClick')).not.toBeInTheDocument()
-    );
+    // Checking if membership requests are rendered 
+    expect(screen.getByText('Jane Doe')).toBeInTheDocument();
   });
 
-  test('Should check if organisation image is present', async () => {
-    const { container } = render(
-      <MockedProvider addTypename={false} link={link2}>
-        <BrowserRouter>
-          <Provider store={store}>
-            <I18nextProvider i18n={i18nForTest}>
-              <OrganizationDashboard />
-            </I18nextProvider>
-          </Provider>
-        </BrowserRouter>
-      </MockedProvider>
-    );
-
-    expect(container.textContent).not.toBe('Loading data...');
+  test('Testing buttons and checking empty events, posts and membership requests', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link2}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <OrganizationDashboard />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>
+      )
+    });
+
     await wait();
-    const image = screen.getByTestId(/orgDashImgPresent/i);
-    expect(image).toBeInTheDocument();
+    const viewEventsBtn = screen.getByTestId('viewAllEvents');
+    const viewPostsBtn = screen.getByTestId('viewAllPosts');
+    const viewMSBtn = screen.getByTestId('viewAllMembershipRequests');
+
+    userEvent.click(viewEventsBtn);
+    userEvent.click(viewPostsBtn);
+    fireEvent.click(viewMSBtn);
+    expect(toast.success).toBeCalledWith('Coming soon!');
+
+    expect(screen.getByText('No membership requests present')).toBeInTheDocument();
+    expect(screen.getByText('No upcoming events')).toBeInTheDocument();
+    expect(screen.getByText('No posts present')).toBeInTheDocument();
+
   });
-  test('Should check if organisation image is not present', async () => {
-    const { container } = render(
-      <MockedProvider addTypename={false} link={link3}>
-        <BrowserRouter>
-          <Provider store={store}>
-            <I18nextProvider i18n={i18nForTest}>
-              <OrganizationDashboard />
-            </I18nextProvider>
-          </Provider>
-        </BrowserRouter>
-      </MockedProvider>
-    );
-
-    expect(container.textContent).not.toBe('Loading data...');
+
+  test('Testing buttons and checking empty events, posts and membership requests', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link3}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <OrganizationDashboard />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>
+      )
+    });
+
     await wait();
-    const image = screen.getByTestId(/orgDashImgAbsent/i);
-    expect(image).toBeInTheDocument();
+    expect(window.location).toBeAt('/orglist');
   });
+
 });