[MPDX-8481] Health Indicator graph component

__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(() => {

graphql.config.json

@@ -0,0 +1,4 @@
+{
+  "schema": "src/graphql/schema.graphql",
+  "documents": "**/*.graphql"
+}

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,

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' },

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 />);
 

src/components/Contacts/ContactDetails/ContactDonationsTab/DonationsGraph/DonationsGraph.test.tsx

@@ -2,10 +2,6 @@ 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 donorAccountIds = ['donor-Account-Id'];
 const currency = 'USD';
 
 describe('Donations Graph', () => {
-  beforeEach(() => {
-    beforeTestResizeObserver();
-  });
-
-  afterEach(() => {
-    afterTestResizeObserver();
-  });
-
   it('test renderer', async () => {
     const { findByText } = render(
       <GqlMockedProvider<{ GetDonationsGraph: GetDonationsGraphQuery }>

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 () => {

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', () => {