Merge pull request #1175 from CruGlobal/MPDX-8429

MPDX-8429 Fix 502 error on 14-month report
CruGlobal · Nov 6, 2024 · 0b78e24 · 0b78e24
2 parents 8031fd4 + 4279e9d
commit 0b78e24
Show file tree

Hide file tree

Showing 8 changed files with 834 additions and 643 deletions.
diff --git a/pages/accountLists/[accountListId]/reports/partnerCurrency/[[...contactId]].page.test.tsx b/pages/accountLists/[accountListId]/reports/partnerCurrency/[[...contactId]].page.test.tsx
@@ -1,9 +1,11 @@
 import { ThemeProvider } from '@mui/material/styles';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import fetchMock from 'jest-fetch-mock';
 import { SnackbarProvider } from 'notistack';
 import TestRouter from '__tests__/util/TestRouter';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import { fourteenMonthReportMock } from 'src/components/Reports/FourteenMonthReports/FourteenMonthReportMock';
 import theme from 'src/theme';
 import PartnerCurrencyReportPage from './[[...contactId]].page';
 
@@ -25,29 +27,10 @@ const TestingComponent: React.FC<TestingComponentProps> = ({
     push,
   };
 
-  const mocks = {
-    FourteenMonthReport: {
-      fourteenMonthReport: {
-        currencyGroups: [
-          {
-            contacts: [
-              {
-                id: 'contact-1',
-                name: 'John Doe',
-                lastDonationCurrency: 'USD',
-                pledgeCurrency: 'USD',
-              },
-            ],
-          },
-        ],
-      },
-    },
-  };
-
   return (
     <ThemeProvider theme={theme}>
       <TestRouter router={router}>
-        <GqlMockedProvider mocks={mocks}>
+        <GqlMockedProvider>
           <SnackbarProvider>
             <PartnerCurrencyReportPage />
           </SnackbarProvider>
@@ -58,6 +41,15 @@ const TestingComponent: React.FC<TestingComponentProps> = ({
 };
 
 describe('partnerCurrency page', () => {
+  fetchMock.enableMocks();
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    fetchMock.mockResponses([
+      JSON.stringify(fourteenMonthReportMock),
+      { status: 200 },
+    ]);
+    process.env.REST_API_URL = 'https://api.stage.mpdx.org/api/v2/';
+  });
   it('renders', () => {
     const { getByRole } = render(<TestingComponent />);
 

diff --git a/pages/accountLists/[accountListId]/reports/salaryCurrency/[[...contactId]].page.test.tsx b/pages/accountLists/[accountListId]/reports/salaryCurrency/[[...contactId]].page.test.tsx
@@ -1,9 +1,11 @@
 import { ThemeProvider } from '@mui/material/styles';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import fetchMock from 'jest-fetch-mock';
 import { SnackbarProvider } from 'notistack';
 import TestRouter from '__tests__/util/TestRouter';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import { fourteenMonthReportMock } from 'src/components/Reports/FourteenMonthReports/FourteenMonthReportMock';
 import theme from 'src/theme';
 import SalaryCurrencyReportPage from './[[...contactId]].page';
 
@@ -25,39 +27,29 @@ const TestingComponent: React.FC<TestingComponentProps> = ({
     push,
   };
 
-  const mocks = {
-    FourteenMonthReport: {
-      fourteenMonthReport: {
-        currencyGroups: [
-          {
-            contacts: [
-              {
-                id: 'contact-1',
-                name: 'John Doe',
-                lastDonationCurrency: 'USD',
-                pledgeCurrency: 'USD',
-              },
-            ],
-          },
-        ],
-      },
-    },
-  };
-
   return (
     <ThemeProvider theme={theme}>
-      <TestRouter router={router}>
-        <GqlMockedProvider mocks={mocks}>
+      <GqlMockedProvider>
+        <TestRouter router={router}>
           <SnackbarProvider>
             <SalaryCurrencyReportPage />
           </SnackbarProvider>
-        </GqlMockedProvider>
-      </TestRouter>
+        </TestRouter>
+      </GqlMockedProvider>
     </ThemeProvider>
   );
 };
 
 describe('salaryCurrency page', () => {
+  fetchMock.enableMocks();
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    fetchMock.mockResponses([
+      JSON.stringify(fourteenMonthReportMock),
+      { status: 200 },
+    ]);
+    process.env.REST_API_URL = 'https://api.stage.mpdx.org/api/v2/';
+  });
   it('renders', () => {
     const { getByRole } = render(<TestingComponent />);
 

diff --git a/pages/api/Schema/reports/fourteenMonth/datahandler.ts b/pages/api/Schema/reports/fourteenMonth/datahandler.ts
@@ -4,6 +4,9 @@ import {
   FourteenMonthReportCurrencyType,
 } from '../../../graphql-rest.page.generated';
 
+// We have switched to call the REST API directly from the frontend
+// due to Next.js having issues when the size of the response is too large.
+
 export interface FourteenMonthReportResponse {
   id: string;
   type: