merge main

cypress/e2e/common/filters.cy.js

@@ -51,8 +51,15 @@ describe('Filter Panel', () => {
       });
       cy.log('apply dates');
 
-      cy.get('#date_received-from').clear();
-      cy.get('#date_received-from').type('2015-09-11');
+      cy.get('#date_received-from').clear({
+        force: true,
+      });
+
+      // TODO: this fails in headless mode for some reason without force:true but it works fine in
+      // electron / chrome headed version
+      cy.get('#date_received-from').type('2015-09-11', {
+        force: true,
+      });
       cy.get('#date_received-from').blur();
 
       cy.wait('@getComplaintsDateFrom');
@@ -61,8 +68,15 @@ describe('Filter Panel', () => {
 
       cy.log('apply a through date');
 
-      cy.get('#date_received-through').clear();
-      cy.get('#date_received-through').type('2020-10-31');
+      cy.get('#date_received-through').clear({
+        force: true,
+      });
+
+      // TODO: this fails in headless mode for some reason without force:true but it works fine in
+      // electron / chrome headed version
+      cy.get('#date_received-through').type('2020-10-31', {
+        force: true,
+      });
       cy.get('#date_received-through').blur();
 
       cy.url().should('include', 'date_received_max=2020-10-31');

package.json

@@ -52,10 +52,12 @@
     "@cfpb/cfpb-tables": "1.2.0",
     "@cfpb/cfpb-typography": "1.3.2",
     "@craco/craco": "^7.1.0",
-    "@reduxjs/toolkit": "^2.2.1",
-    "@testing-library/cypress": "^10.0.1",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "15.0.7",
+    "@reduxjs/toolkit": "^2.2.7",
+    "@testing-library/cypress": "^10.0.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@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",
     "coveralls": "^3.0.9",
@@ -72,7 +74,6 @@
     "eslint-plugin-react-redux": "^4.1.0",
     "highcharts": "9.2.2",
     "history": "^5.3.0",
-    "http-proxy-middleware": "^2.0.6",
     "husky": "^9.0.11",
     "identity-obj-proxy": "3.0.0",
     "intro.js": "^7.2.0",
@@ -95,12 +96,12 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.6.0",
     "react-bootstrap-typeahead": "^6.3.2",
-    "react-dom": "^18.2.0",
-    "react-fast-compare": "^3.2.2",
+    "react-dom": "^18.3.1",
     "react-modal": "^3.16.1",
-    "react-redux": "^9.1.0",
-    "react-router-dom": "^6.23.1",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.26.0",
     "react-scripts": "^5.0.1",
+    "react-test-renderer": "^18.2.0",
     "release-it": "^17.3.0",
     "string-replace-loader": "^3.1.0",
     "stylelint": "^16.5.0",
@@ -131,7 +132,7 @@
     "coverageThreshold": {
       "global": {
         "branches": 85,
-        "functions": 91,
+        "functions": 89,
         "lines": 93,
         "statements": 93
       }
@@ -153,5 +154,6 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "proxy": "https://www.consumerfinance.gov"
+  "proxy": "https://www.consumerfinance.gov",
+  "dependencies": {}
 }

src/components/ActionBar/ActionBar.js

@@ -24,23 +24,19 @@ export const ActionBar = () => {
   return (
     <div>
       <summary className="action-bar" id="search-summary">
-        <div>
-          {total === docCount ? (
-            <h2>
-              Showing&nbsp;
-              {docCount.toLocaleString()}
-              &nbsp;total complaints
-            </h2>
-          ) : (
-            <h2>
-              Showing&nbsp;
-              {total.toLocaleString()}
-              &nbsp;matches out of&nbsp;
-              {docCount.toLocaleString()}
-              &nbsp;total complaints
-            </h2>
-          )}
-        </div>
+        {total === docCount ? (
+          <h2>
+            {'Showing ' + docCount.toLocaleString() + ' total complaints'}
+          </h2>
+        ) : (
+          <h2>
+            {'Showing ' +
+              total.toLocaleString() +
+              ' matches out of ' +
+              docCount.toLocaleString() +
+              ' total complaints'}
+          </h2>
+        )}
         <div>
           <h3 className="h4 flex-all export-results">
             <button

src/components/ActionBar/ActionBar.less

@@ -26,6 +26,24 @@
     }
   }
 
+  .a-btn--link {
+    color: var(--pacific-dark);
+
+    &:hover {
+      color: var(--navy);
+    }
+
+    &:focus {
+      color: var(--pacific-dark);
+      border: 1px dotted var(--pacific-dark);
+    }
+
+    &:active {
+      color: var(--navy);
+      border: 1px dotted var(--navy);
+    }
+  }
+
   @media @phone {
     padding-left: 0;
     border: 1px solid var(--gray-40);

src/components/Dialogs/DataExport/DataExport.js

@@ -151,8 +151,9 @@ export const DataExport = () => {
                   value="filtered"
                 />
                 <label className="a-label" htmlFor="dataset_filtered">
-                  Filtered dataset ({someComplaintsCount.toLocaleString()}
-                  &nbsp;complaints)
+                  {'Filtered dataset (' +
+                    someComplaintsCount.toLocaleString() +
+                    ' complaints)'}
                   <br />
                   (only the results of the last search and/or filter)
                 </label>
@@ -170,8 +171,9 @@ export const DataExport = () => {
                   value="full"
                 />
                 <label className="a-label" htmlFor="dataset_full">
-                  Full dataset ({allComplaintsCount.toLocaleString()}
-                  &nbsp;complaints)
+                  {'Full dataset (' +
+                    allComplaintsCount.toLocaleString() +
+                    ' complaints)'}
                   <br />
                   (not recommended due to very large file size)
                 </label>

src/components/List/ListPanel/ListPanel.spec.js

@@ -66,7 +66,7 @@ describe('ListPanel', () => {
       error: '',
     };
     const newResultsState = {
-      isLoading: false,
+      activeCall: '',
       items: [],
     };
 

src/components/Map/MapPanel.js

@@ -38,7 +38,7 @@ import {
   selectViewWidth,
 } from '../../reducers/view/selectors';
 
-import { shortFormat } from '../../utils';
+import { formatDisplayDate } from '../../utils/formatDate';
 
 const WARNING_MESSAGE =
   '“Complaints per 1,000 population” is not available with your filter ' +
@@ -70,9 +70,9 @@ export const MapPanel = () => {
     return processRows(results.product, false, 'Product', expandedRows);
   }, [results, expandedRows]);
 
-  const MAP_ROWCHART_TITLE = `Product by highest complaint volume ${shortFormat(
+  const MAP_ROWCHART_TITLE = `Product by highest complaint volume ${formatDisplayDate(
     minDate,
-  )} to ${shortFormat(maxDate)}`;
+  )} to ${formatDisplayDate(maxDate)}`;
 
   const onDismissWarning = () => {
     dispatch(mapWarningDismissed());

src/components/Tour/Tour.js

@@ -2,25 +2,33 @@ import './Tour.less';
 import * as d3 from 'd3';
 import { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { selectViewTab } from '../../reducers/view/selectors';
 import {
   selectViewIsPrintMode,
   selectViewShowTour,
+  selectViewTab,
   selectViewWidth,
 } from '../../reducers/view/selectors';
 import { Steps } from 'intro.js-react';
 import { TOUR_STEPS } from './constants/tourStepsConstants';
 import { TourButton } from './TourButton';
 import { tourHidden } from '../../reducers/view/viewSlice';
+import { selectAggsActiveCall } from '../../reducers/aggs/selectors';
+import { selectResultsActiveCall } from '../../reducers/results/selectors';
+import { selectMapActiveCall } from '../../reducers/map/selectors';
+import { selectTrendsActiveCall } from '../../reducers/trends/selectors';
 
 export const Tour = () => {
   const dispatch = useDispatch();
+  const aggsLoading = useSelector(selectAggsActiveCall);
+  const mapLoading = useSelector(selectMapActiveCall);
+  const resultsLoading = useSelector(selectResultsActiveCall);
+  const trendsLoading = useSelector(selectTrendsActiveCall);
   const showTour = useSelector(selectViewShowTour);
   const tab = useSelector(selectViewTab);
   const isPrintMode = useSelector(selectViewIsPrintMode);
   const viewWidth = useSelector(selectViewWidth);
   const stepRef = useRef();
-
+  const isLoading = aggsLoading + mapLoading + resultsLoading + trendsLoading;
   const mobileStepOpen = {
     disableInteraction: false,
     element: '.filter-panel-toggle .m-btn-group .a-btn',
@@ -66,6 +74,10 @@ export const Tour = () => {
    * @param {object} ref - React component reference.
    */
   function handleBeforeChange(ref) {
+    if (!ref.current) {
+      // early exit, tour not set
+      return;
+    }
     const currentStep = ref.current.introJs.currentStep();
 
     // exit out when we're on last step and keyboard nav pressed
@@ -145,19 +157,15 @@ export const Tour = () => {
     return true;
   }
 
-  return isPrintMode ? null : (
+  return isPrintMode || isLoading ? null : (
     // eslint-disable-next-line react/react-in-jsx-scope
     <>
       <TourButton />
       <Steps
         enabled={showTour}
         initialStep={0}
         steps={steps}
-        onExit={() => {
-          if (showTour) {
-            dispatch(tourHidden());
-          }
-        }}
+        onExit={() => dispatch(tourHidden())}
         options={options}
         onBeforeChange={() => handleBeforeChange(stepRef)}
         onBeforeExit={() => handleBeforeExit(stepRef)}

src/components/Tour/Tour.spec.js

@@ -0,0 +1,60 @@
+import { Tour } from './Tour';
+import { testRender as render, screen } from '../../testUtils/test-utils';
+import { aggsState } from '../../reducers/aggs/aggsSlice';
+import { queryState } from '../../reducers/query/querySlice';
+import { viewState } from '../../reducers/view/viewSlice';
+import { merge } from '../../testUtils/functionHelpers';
+import userEvent from '@testing-library/user-event';
+import { MODE_LIST } from '../../constants';
+import * as viewActions from '../../reducers/view/viewSlice';
+
+const renderComponent = (newAggsState, newQueryState, newViewModelState) => {
+  merge(newAggsState, aggsState);
+  merge(newQueryState, queryState);
+  merge(newViewModelState, viewState);
+
+  const data = {
+    aggs: newAggsState,
+    query: newQueryState,
+    view: newViewModelState,
+  };
+  return render(<Tour />, { preloadedState: data });
+};
+
+describe('Tour loading behavior', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  const user = userEvent.setup({ delay: null });
+
+  test("Tour doesn't load if page still loading", async () => {
+    renderComponent({}, {}, { showTour: false });
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  test("Tour doesn't load unless tourShown state is true", async () => {
+    renderComponent({ activeCall: '' }, {}, { showTour: false });
+    expect(screen.queryByRole('dialog')).toBeNull();
+    renderComponent({ activeCall: '' }, {}, { showTour: true });
+    expect(await screen.findByRole('dialog')).toBeDefined();
+  });
+
+  test('Tour launches by clicking button', async () => {
+    const tourShownSpy = jest
+      .spyOn(viewActions, 'tourShown')
+      .mockImplementation(() => jest.fn());
+
+    renderComponent(
+      { activeCall: '' },
+      { tab: MODE_LIST },
+      {
+        showTour: false,
+      },
+    );
+
+    expect(screen.getByRole('button', { name: /Take a tour/ })).toBeVisible();
+    await user.click(screen.getByRole('button', { name: /Take a tour/ }));
+    expect(tourShownSpy).toHaveBeenCalled();
+  });
+});

src/components/Trends/TrendsPanel/TrendsPanel.js

@@ -29,7 +29,7 @@ import {
   trendsDateWarningDismissed,
 } from '../../../reducers/query/querySlice';
 import { processRows } from '../../../utils/chart';
-import { shortFormat, sendAnalyticsEvent } from '../../../utils';
+import { sendAnalyticsEvent } from '../../../utils';
 import { showCompanyOverLay, getIntervals } from '../../../utils/trends';
 import { ActionBar } from '../../ActionBar/ActionBar';
 import { TabbedNavigation } from '../../TabbedNavigation';
@@ -50,6 +50,7 @@ import { Loading } from '../../Loading/Loading';
 import { LensTabs } from '../LensTabs';
 import { selectFiltersCompany } from '../../../reducers/filters/selectors';
 import { dataLensChanged } from '../../../reducers/trends/trendsSlice';
+import { formatDisplayDate } from '../../../utils/formatDate';
 
 const WARNING_MESSAGE =
   '“Day” interval is disabled when the date range is longer than one year';
@@ -129,8 +130,8 @@ export const TrendsPanel = () => {
     lens,
     expandedRows,
   );
-  const minDate = shortFormat(dateReceivedMin);
-  const maxDate = shortFormat(dateReceivedMax);
+  const minDate = formatDisplayDate(dateReceivedMin);
+  const maxDate = formatDisplayDate(dateReceivedMax);
   const hasOverview = lens === 'Overview';
   const hasMobileFilters = width < 750;
   const subLensTitle =
@@ -304,7 +305,7 @@ export const TrendsPanel = () => {
       ) : null}
       {total > 0 && phaseMap()}
       <TrendDepthToggle />
-      <Loading isLoading={isLoading || false} />
+      <Loading isLoading={!!isLoading} />
     </section>
   );
 };

src/middleware/actionLogger/actionLogger.spec.js

@@ -1,7 +1,7 @@
 import { setupStore } from '../../testUtils/setupStore';
 
 describe('redux middleware::actionLogger', () => {
-  test('it logs actions', () => {
+  it('logs actions', () => {
     const store = setupStore();
     const action = {
       type: 'fake action',

src/reducers/aggs/selectors.js

@@ -1,4 +1,5 @@
 export const selectAggsRootState = (state) => state.aggs;
+export const selectAggsActiveCall = (state) => state.aggs.activeCall;
 export const selectAggsDocCount = (state) => state.aggs.doc_count;
 export const selectAggsHasDataIssue = (state) => state.aggs.hasDataIssue;
 export const selectAggsHasError = (state) => state.aggs.error;