CruGlobal · dr-bizz · Dec 5, 2024 · Dec 5, 2024 · Dec 5, 2024 · Dec 6, 2024
diff --git a/__tests__/util/setup.ts b/__tests__/util/setup.ts
@@ -55,6 +55,12 @@ Object.defineProperty(window, 'location', {
 
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
+window.ResizeObserver = jest.fn().mockReturnValue({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+});
+
 window.URL.revokeObjectURL = jest.fn();
 
 beforeEach(() => {

diff --git a/__tests__/util/windowResizeObserver.ts b/__tests__/util/windowResizeObserver.ts
diff --git a/graphql.config.json b/graphql.config.json
@@ -0,0 +1,4 @@
+{
+  "schema": "src/graphql/schema.graphql",
+  "documents": "**/*.graphql"
+}
diff --git a/pages/accountLists/[accountListId]/reports/healthIndicator/index.page.test.tsx b/pages/accountLists/[accountListId]/reports/healthIndicator/index.page.test.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { ThemeProvider } from '@mui/material/styles';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SnackbarProvider } from 'notistack';
+import { I18nextProvider } from 'react-i18next';
+import TestRouter from '__tests__/util/TestRouter';
+import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import i18n from 'src/lib/i18n';
+import theme from 'src/theme';
+import HealthIndicatorPage from './index.page';
+
+const accountListId = 'account-list-1';
+const router = {
+  query: { accountListId },
+  isReady: true,
+};
+
+const Components = () => (
+  <I18nextProvider i18n={i18n}>
+    <LocalizationProvider dateAdapter={AdapterLuxon}>
+      <SnackbarProvider>
+        <ThemeProvider theme={theme}>
+          <TestRouter router={router}>
+            <GqlMockedProvider>
+              <HealthIndicatorPage />
+            </GqlMockedProvider>
+          </TestRouter>
+        </ThemeProvider>
+      </SnackbarProvider>
+    </LocalizationProvider>
+  </I18nextProvider>
+);
+
+describe('MPD Health Indicator Page', () => {
+  it('should show initial financial accounts page', async () => {
+    const { findByText } = render(<Components />);
+
+    expect(await findByText('Overall Staff MPD Health')).toBeInTheDocument();
+  });
+
+  it('should open and close  menu', async () => {
+    const { findByRole, getByRole, queryByRole } = render(<Components />);
+
+    userEvent.click(
+      await findByRole('button', { name: 'Toggle Navigation Panel' }),
+    );
+    expect(getByRole('heading', { name: 'Reports' })).toBeInTheDocument();
+    userEvent.click(getByRole('img', { name: 'Close' }));
+    expect(queryByRole('heading', { name: 'Reports' })).not.toBeInTheDocument();
+  });
+});
diff --git a/pages/accountLists/[accountListId]/reports/healthIndicator/index.page.tsx b/pages/accountLists/[accountListId]/reports/healthIndicator/index.page.tsx
@@ -0,0 +1,66 @@
+import Head from 'next/head';
+import React, { useState } from 'react';
+import { Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { ensureSessionAndAccountList } from 'pages/api/utils/pagePropsHelpers';
+import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
+import Loading from 'src/components/Loading';
+import { HealthIndicatorReport } from 'src/components/Reports/HealthIndicatorReport/HealthIndicatorReport';
+import { headerHeight } from 'src/components/Shared/Header/ListHeader';
+import {
+  MultiPageMenu,
+  NavTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
+import { useAccountListId } from 'src/hooks/useAccountListId';
+import useGetAppSettings from 'src/hooks/useGetAppSettings';
+
+const HealthIndicatorPage: React.FC = () => {
+  const { t } = useTranslation();
+  const accountListId = useAccountListId();
+  const { appName } = useGetAppSettings();
+  const [navListOpen, setNavListOpen] = useState(false);
+
+  const handleNavListToggle = () => {
+    setNavListOpen(!navListOpen);
+  };
+  return (
+    <>
+      <Head>
+        <title>{`${appName} | ${t('Reports - MPD Health')}`}</title>
+      </Head>
+
+      {accountListId ? (
+        <Box sx={{ background: 'common.white' }}>
+          <SidePanelsLayout
+            headerHeight={headerHeight}
+            isScrollBox={false}
+            leftOpen={navListOpen}
+            leftWidth="290px"
+            mainContent={
+              <HealthIndicatorReport
+                accountListId={accountListId}
+                isNavListOpen={navListOpen}
+                onNavListToggle={handleNavListToggle}
+                title={t('Overall Staff MPD Health')}
+              />
+            }
+            leftPanel={
+              <MultiPageMenu
+                isOpen={navListOpen}
+                selectedId="healthIndicator"
+                onClose={handleNavListToggle}
+                navType={NavTypeEnum.Reports}
+              />
+            }
+          />
+        </Box>
+      ) : (
+        <Loading loading />
+      )}
+    </>
+  );
+};
+
+export const getServerSideProps = ensureSessionAndAccountList;
+
+export default HealthIndicatorPage;
diff --git a/pages/api/Schema/CoachingAnswerSets/dataHandler.ts b/pages/api/Schema/CoachingAnswerSets/dataHandler.ts
@@ -3,8 +3,7 @@ import {
   CoachingAnswerSet,
   CoachingQuestion,
 } from 'src/graphql/types.generated';
-
-const isNotNull = <T>(item: T | null): item is T => item !== null;
+import { isNotNullish } from 'src/lib/typeGuards';
 
 interface CoachingAnswerSetData {
   id: string;
@@ -77,10 +76,10 @@ const parseCoachingAnswerSet = (
   };
   const answers = relationships.answers.data
     .map(({ id }) => getIncludedAnswer(id, included))
-    .filter(isNotNull);
+    .filter(isNotNullish);
   const questions = relationships.questions.data
     .map(({ id }) => getIncludedQuestion(id, included))
-    .filter(isNotNull);
+    .filter(isNotNullish);
 
   return {
     id,

diff --git a/src/components/Coaching/CoachingDetail/CoachingDetail.test.tsx b/src/components/Coaching/CoachingDetail/CoachingDetail.test.tsx
@@ -5,10 +5,6 @@ import TestRouter from '__tests__/util/TestRouter';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
 import matchMediaMock from '__tests__/util/matchMediaMock';
 import { render } from '__tests__/util/testingLibraryReactMock';
-import {
-  afterTestResizeObserver,
-  beforeTestResizeObserver,
-} from '__tests__/util/windowResizeObserver';
 import theme from 'src/theme';
 import { AccountListTypeEnum, CoachingDetail } from './CoachingDetail';
 import { LevelOfEffortQuery } from './LevelOfEffort/LevelOfEffort.generated';
@@ -121,14 +117,6 @@ const TestComponent: React.FC<TestComponentProps> = ({
 
 const accountListId = 'account-list-1';
 describe('LoadCoachingDetail', () => {
-  beforeEach(() => {
-    beforeTestResizeObserver();
-  });
-
-  afterEach(() => {
-    afterTestResizeObserver();
-  });
-
   describe.each([
     { type: AccountListTypeEnum.Coaching, name: 'coaching' },
     { type: AccountListTypeEnum.Own, name: 'own' },

diff --git a/src/components/Coaching/CoachingDetail/MonthlyCommitment/MonthlyCommitment.test.tsx b/src/components/Coaching/CoachingDetail/MonthlyCommitment/MonthlyCommitment.test.tsx
@@ -1,10 +1,6 @@
 import { render } from '@testing-library/react';
 import { DateTime } from 'luxon';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
-import {
-  afterTestResizeObserver,
-  beforeTestResizeObserver,
-} from '__tests__/util/windowResizeObserver';
 import { AccountListTypeEnum } from '../CoachingDetail';
 import { MonthlyCommitment, MonthlyCommitmentProps } from './MonthlyCommitment';
 import { GetReportsPledgeHistoriesQuery } from './MonthlyCommitment.generated';
@@ -60,14 +56,6 @@ const TestComponent: React.FC<TestComponentProps> = ({
 );
 
 describe('MonthlyCommitment', () => {
-  beforeEach(() => {
-    beforeTestResizeObserver();
-  });
-
-  afterEach(() => {
-    afterTestResizeObserver();
-  });
-
   it('renders', async () => {
     const { findByTestId } = render(<TestComponent missingData />);
 

diff --git a/...onents/Contacts/ContactDetails/ContactDonationsTab/DonationsGraph/DonationsGraph.test.tsx b/...onents/Contacts/ContactDetails/ContactDonationsTab/DonationsGraph/DonationsGraph.test.tsx
@@ -1,11 +1,7 @@
 import React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
 import { render } from '__tests__/util/testingLibraryReactMock';
-import {
-  afterTestResizeObserver,
-  beforeTestResizeObserver,
-} from '__tests__/util/windowResizeObserver';
 import { DonationsGraph } from './DonationsGraph';
 import {
   GetDonationsGraphQuery,
@@ -30,14 +26,6 @@
 const currency = 'USD';
 
 describe('Donations Graph', () => {
-  beforeEach(() => {
-    beforeTestResizeObserver();
-  });
-
-  afterEach(() => {
-    afterTestResizeObserver();
-  });
-
   it('test renderer', async () => {
     const { findByText } = render(
       <GqlMockedProvider<{ GetDonationsGraph: GetDonationsGraphQuery }>

diff --git a/src/components/Dashboard/Dashboard.test.tsx b/src/components/Dashboard/Dashboard.test.tsx
@@ -4,10 +4,6 @@ import { ThemeProvider } from '@mui/material/styles';
 import { render, waitFor } from '@testing-library/react';
 import { SnackbarProvider } from 'notistack';
 import matchMediaMock from '__tests__/util/matchMediaMock';
-import {
-  afterTestResizeObserver,
-  beforeTestResizeObserver,
-} from '__tests__/util/windowResizeObserver';
 import { GetDashboardQuery } from 'pages/accountLists/GetDashboard.generated';
 import useTaskModal from '../../hooks/useTaskModal';
 import theme from '../../theme';
@@ -125,11 +121,6 @@ const data: GetDashboardQuery = {
 describe('Dashboard', () => {
   beforeEach(() => {
     matchMediaMock({ width: '1024px' });
-    beforeTestResizeObserver();
-  });
-
-  afterEach(() => {
-    afterTestResizeObserver();
   });
 
   it('default', async () => {

diff --git a/src/components/Dashboard/DonationHistories/DonationHistories.test.tsx b/src/components/Dashboard/DonationHistories/DonationHistories.test.tsx
@@ -1,10 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import TestRouter from '__tests__/util/TestRouter';
-import {
-  afterTestResizeObserver,
-  beforeTestResizeObserver,
-} from '__tests__/util/windowResizeObserver';
 import DonationHistories from '.';
 
 const setTime = jest.fn();
@@ -29,9 +25,7 @@ describe('DonationHistories', () => {
       </TestRouter>,
     );
     expect(getByTestId('DonationHistoriesBoxEmpty')).toBeInTheDocument();
-    expect(
-      queryByTestId('DonationHistoriesGridLoading'),
-    ).not.toBeInTheDocument();
+    expect(queryByTestId('BarChartSkeleton')).not.toBeInTheDocument();
   });
 
   it('empty periods', () => {
@@ -59,9 +53,7 @@ describe('DonationHistories', () => {
       </TestRouter>,
     );
     expect(getByTestId('DonationHistoriesBoxEmpty')).toBeInTheDocument();
-    expect(
-      queryByTestId('DonationHistoriesGridLoading'),
-    ).not.toBeInTheDocument();
+    expect(queryByTestId('BarChartSkeleton')).not.toBeInTheDocument();
   });
 
   it('loading', () => {
@@ -70,7 +62,7 @@ describe('DonationHistories', () => {
         <DonationHistories setTime={setTime} loading={true} />
       </TestRouter>,
     );
-    expect(getByTestId('DonationHistoriesGridLoading')).toBeInTheDocument();
+    expect(getByTestId('BarChartSkeleton')).toBeInTheDocument();
     expect(queryByTestId('DonationHistoriesBoxEmpty')).not.toBeInTheDocument();
   });
 
@@ -91,11 +83,6 @@ describe('DonationHistories', () => {
         ],
         averageIgnoreCurrent: 1000,
       };
-      beforeTestResizeObserver();
-    });
-
-    afterEach(() => {
-      afterTestResizeObserver();
     });
 
     it('shows references', () => {