unit tests

src/components/Warnings/StaleDataWarnings.spec.js

@@ -1,25 +1,31 @@
 import { testRender as render, screen } from '../../testUtils/test-utils';
 import { StaleDataWarnings } from './StaleDataWarnings';
-import { merge } from '../../testUtils/functionHelpers';
-import { aggsState } from '../../reducers/aggs/aggsSlice';
+import { resAggWarning } from './fixture';
+import fetchMock from 'jest-fetch-mock';
 
 describe('StaleDataWarnings', () => {
-  const renderComponent = (newAggsState) => {
-    merge(newAggsState, aggsState);
+  const renderComponent = () => {
     const data = {
-      aggs: newAggsState,
+      routes: { queryString: '?fdsfds' },
     };
 
     render(<StaleDataWarnings />, {
       preloadedState: data,
     });
   };
-  test('data issue warning', () => {
-    renderComponent({
-      hasDataIssue: true,
-      isDataStale: false,
-    });
 
+  beforeEach(() => {
+    fetchMock.resetMocks();
+  });
+  test('data issue warning', async () => {
+    const dataWarning = {
+      ...resAggWarning,
+    };
+    dataWarning._meta.has_data_issue = true;
+    fetchMock.mockResponseOnce(JSON.stringify(dataWarning));
+    renderComponent();
+
+    await screen.findByText(/We’re currently experiencing technical/);
     expect(
       screen.getByText(
         /We’re currently experiencing technical issues that have delayed the refresh of data on the Consumer Complaint Database./,
@@ -30,12 +36,15 @@ describe('StaleDataWarnings', () => {
     ).toBeInTheDocument();
   });
 
-  test('stale data warning', () => {
-    renderComponent({
-      hasDataIssue: false,
-      isDataStale: true,
-    });
+  test('stale data warning', async () => {
+    const dataWarning = {
+      ...resAggWarning,
+    };
+    dataWarning._meta.is_data_stale = true;
+    fetchMock.mockResponseOnce(JSON.stringify(dataWarning));
+    renderComponent();
 
+    await screen.findByText(/We’re currently experiencing technical/);
     expect(
       screen.getByText(
         /We’re currently experiencing technical issues that have delayed the refresh of data on the Consumer Complaint Database./,
@@ -45,12 +54,17 @@ describe('StaleDataWarnings', () => {
       screen.getByText(/We expect to refresh the data in the next few days./),
     ).toBeInTheDocument();
   });
-  test('both data issues', () => {
-    renderComponent({
-      hasDataIssue: true,
-      isDataStale: true,
-    });
+  test('both data issues', async () => {
+    const dataWarning = {
+      ...resAggWarning,
+    };
+    dataWarning._meta.has_data_issue = true;
+    dataWarning._meta.is_data_stale = true;
+
+    fetchMock.mockResponseOnce(JSON.stringify(dataWarning));
 
+    renderComponent();
+    await screen.findByText(/We’re currently experiencing technical/);
     expect(
       screen.getByText(
         /We’re currently experiencing technical issues that have delayed the refresh of data on the Consumer Complaint Database./,
@@ -62,7 +76,15 @@ describe('StaleDataWarnings', () => {
   });
 
   test('no issues', () => {
-    renderComponent({});
+    fetchMock.mockResponseOnce(
+      JSON.stringify({
+        _meta: {
+          is_data_stale: false,
+          has_data_issue: false,
+        },
+      }),
+    );
+    renderComponent();
     expect(
       screen.queryByText(/We expect to refresh the data in the next few days./),
     ).toBeNull();