unit test :(

package.json

@@ -50,6 +50,7 @@
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^14.5.2",
     "britecharts": "git+https://github.com/cfpb/britecharts.git#v2.4.2",
+    "canvas": "^2.11.2",
     "coveralls": "^3.0.9",
     "craco-esbuild": "^0.6.1",
     "cypress": "^13.11.0",
@@ -67,6 +68,7 @@
     "identity-obj-proxy": "3.0.0",
     "intro.js": "^7.2.0",
     "intro.js-react": "1.0.0",
+    "jest-canvas-mock": "^2.5.2",
     "jest-fetch-mock": "^3.0.3",
     "lint-staged": "^15.2.7",
     "lodash": "^4.17.21",

src/components/Charts/RowChart/RowChart.js

@@ -255,7 +255,7 @@ export const RowChart = ({
     <div className="row-chart-section">
       <h3>{title}</h3>
       <p>{helperText}</p>
-      <div id={'row-chart-' + id} />
+      <div id={'row-chart-' + id} data-testid={'row-chart-' + id} />
     </div>
   ) : null;
 };
@@ -267,5 +267,5 @@ RowChart.propTypes = {
     .isRequired,
   data: PropTypes.array.isRequired,
   title: PropTypes.string.isRequired,
-  total: PropTypes.number.isRequired,
+  total: PropTypes.number,
 };

src/components/Map/MapPanel.js

@@ -46,7 +46,7 @@ export const MapPanel = () => {
   const dispatch = useDispatch();
   const { data } = useGetAggregations();
   const { data: results, isLoading, isFetching, error: hasError } = useGetMap();
-  const total = data?.total;
+  const total = data?.total || 0;
   const enablePer1000 = useSelector(selectFiltersEnablePer1000);
   const mapWarningEnabled = useSelector(selectFiltersMapWarningEnabled);
   const maxDate = useSelector(selectQueryDateReceivedMax);

src/components/Map/MapPanel.spec.js

@@ -1,7 +1,4 @@
-import React from 'react';
-import { aggsState } from '../../reducers/aggs/aggsSlice';
 import { filtersState } from '../../reducers/filters/filtersSlice';
-import { mapState } from '../../reducers/map/mapSlice';
 import { queryState } from '../../reducers/query/querySlice';
 import { viewState } from '../../reducers/view/viewSlice';
 import { MapPanel } from './MapPanel';
@@ -13,26 +10,28 @@ import {
 } from '../../testUtils/test-utils';
 import { MODE_MAP } from '../../constants';
 import * as viewActions from '../../reducers/filters/filtersSlice';
+import fetchMock from 'jest-fetch-mock';
+import { aggResponse, geoResponse } from './fixture';
+import { trendsState } from '../../reducers/trends/trendsSlice';
+
+// have to stub this out because I can't figure out how to get the d3 chart to render
+// without mocking everything
+jest.mock('../Charts/RowChart/RowChart', () => ({
+  RowChart: () => <div>ROW CHART</div>,
+}));
 
 describe('MapPanel', () => {
-  const renderComponent = (
-    newAggsState,
-    newFiltersState,
-    newMapState,
-    newQueryState,
-    newViewState,
-  ) => {
-    merge(newAggsState, aggsState);
+  const renderComponent = (newFiltersState, newQueryState, newViewState) => {
     merge(newFiltersState, filtersState);
-    merge(newMapState, mapState);
     merge(newQueryState, queryState);
+    // merge({}, trendsState);
     merge(newViewState, viewState);
 
     const data = {
-      aggs: newAggsState,
       filters: newFiltersState,
-      map: newMapState,
       query: newQueryState,
+      routes: { queryString: '?dsfsf' },
+      trends: trendsState,
       view: newViewState,
     };
 
@@ -41,8 +40,16 @@ describe('MapPanel', () => {
     });
   };
 
-  it('renders empty state without crashing', () => {
-    renderComponent({}, {}, {}, {}, {});
+  beforeEach(() => {
+    fetchMock.resetMocks();
+  });
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('renders empty state without crashing', async () => {
+    renderComponent({}, {}, {});
+    await screen.findByText('Showing 0 total complaints');
     expect(screen.getByText(/Showing 0 total complaints/)).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Trends/ })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /List/ })).toBeInTheDocument();
@@ -58,33 +65,28 @@ describe('MapPanel', () => {
     expect(screen.getByRole('button', { name: /Print/ })).toBeInTheDocument();
   });
 
-  it('renders warning', () => {
-    const items = [
-      { key: 'CA', doc_count: 62519 },
-      { key: 'FL', doc_count: 47358 },
-    ];
-    const aggs = {
-      doc_count: 100,
-      total: items.length,
-    };
+  it('renders warning', async () => {
+    fetchMock.mockResponse((req) => {
+      if (req.url.indexOf('API/geo/states?') > -1) {
+        return Promise.resolve({
+          body: JSON.stringify(geoResponse),
+        });
+      } else if (req.url.indexOf('API?') > -1) {
+        return Promise.resolve({
+          body: JSON.stringify(aggResponse),
+        });
+      }
+    });
 
     const filters = {
       enablePer1000: false,
       has_narrative: true,
       mapWarningEnabled: true,
     };
 
-    const map = {
-      error: false,
-      results: {
-        product: [],
-        state: [],
-      },
-    };
-
     const query = {
-      date_received_min: new Date('7/10/2017'),
-      date_received_max: new Date('7/10/2020'),
+      date_received_min: '2017-10-07',
+      date_received_max: '2020-10-07',
     };
 
     const view = {
@@ -97,11 +99,10 @@ describe('MapPanel', () => {
       .spyOn(viewActions, 'mapWarningDismissed')
       .mockReturnValue(jest.fn());
 
-    renderComponent(aggs, filters, map, query, view);
-    expect(
-      screen.getByText(/Showing 2 matches out of 100 total complaints/),
-    ).toBeInTheDocument();
+    renderComponent(filters, query, view);
 
+    await screen.findByRole('alert');
+    await screen.findByTestId('tile-chart-map');
     expect(screen.getByRole('alert')).toHaveTextContent(
       '“Complaints per 1,000 population” is not available with your filter selections.',
     );
@@ -114,36 +115,19 @@ describe('MapPanel', () => {
     ).not.toBeInTheDocument();
 
     expect(document.getElementById('tile-chart-map')).toBeInTheDocument();
-    expect(document.getElementById('row-chart-product')).toBeInTheDocument();
+    expect(screen.getByText('ROW CHART')).toBeInTheDocument();
   });
 
   it('renders error', () => {
-    const items = [
-      { key: 'CA', doc_count: 62519 },
-      { key: 'FL', doc_count: 47358 },
-    ];
-    const aggs = {
-      doc_count: 100,
-      total: items.length,
-    };
-
     const filters = {
       enablePer1000: true,
       has_narrative: true,
       mapWarningEnabled: false,
     };
 
-    const map = {
-      error: true,
-      results: {
-        product: [],
-        state: [],
-      },
-    };
-
     const query = {
-      date_received_min: new Date('7/10/2017'),
-      date_received_max: new Date('7/10/2020'),
+      date_received_min: '2017/10/07',
+      date_received_max: '2020/10/07',
     };
 
     const view = {
@@ -152,7 +136,7 @@ describe('MapPanel', () => {
       width: 1000,
     };
 
-    renderComponent(aggs, filters, map, query, view);
+    renderComponent(filters, query, view);
     expect(
       screen.getByText(/Showing 2 matches out of 100 total complaints/),
     ).toBeInTheDocument();

src/setupTests.js

@@ -1,6 +1,7 @@
 // add custom jest matchers from jest-dom for testing library tests
 import '@testing-library/jest-dom';
 import fetchMock from 'jest-fetch-mock';
+// import 'jest-canvas-mock';
 
 fetchMock.enableMocks();
 jest.useFakeTimers().setSystemTime(new Date('2020-05-05T04:00:00.000Z'));