remove unnecessary refactor

update stuff

move queryManager to another dir, update store test util, removed unused selector file

update test coverage

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.5",
-    "@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",
@@ -94,14 +96,12 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.6.0",
     "react-bootstrap-typeahead": "^6.3.2",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-modal": "^3.16.1",
-    "react-redux": "^7.2.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",
-    "redux": "^4.0.5",
-    "redux-devtools-extension": "^2.13.2",
     "release-it": "^17.3.0",
     "string-replace-loader": "^3.1.0",
     "stylelint": "^16.5.0",
@@ -132,7 +132,7 @@
     "coverageThreshold": {
       "global": {
         "branches": 85,
-        "functions": 91,
+        "functions": 89,
         "lines": 93,
         "statements": 93
       }

src/App.spec.js

@@ -1,7 +1,7 @@
 import App from './App';
 import { Provider } from 'react-redux';
 import 'regenerator-runtime/runtime';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import * as useUpdateLocationHook from './hooks/useUpdateLocation';
 import store from './app/store';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
@@ -11,7 +11,28 @@ jest.mock('highcharts/modules/accessibility');
 jest.mock('highcharts/highmaps');
 
 describe('initial state', () => {
-  test('renders search page', () => {
+  it('renders search page', () => {
+    const updateLocationHookSpy = jest.spyOn(
+      useUpdateLocationHook,
+      'useUpdateLocation',
+    );
+
+    render(
+      <Provider store={store}>
+        <App />
+      </Provider>,
+    );
+
+    expect(updateLocationHookSpy).toBeCalled();
+
+    expect(screen.getByText(/Consumer Complaint Database/)).toBeDefined();
+    expect(screen.getByText(/Search within/)).toBeDefined();
+    expect(
+      screen.getByRole('button', { name: /Show advanced search tips/ }),
+    ).toBeInTheDocument();
+  });
+
+  it('renders tour button', async () => {
     const updateLocationHookSpy = jest
       .spyOn(useUpdateLocationHook, 'useUpdateLocation')
       .mockImplementation(() => jest.fn());
@@ -29,9 +50,12 @@ describe('initial state', () => {
     expect(
       screen.getByRole('button', { name: /Show advanced search tips/ }),
     ).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', { name: /Take a tour/ }),
-    ).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /Take a tour/ }),
+      ).toBeInTheDocument();
+    });
   });
 
   it('renders the detail route', () => {

src/app/store.js

@@ -1,4 +1,4 @@
-import queryManager from '../middleware/queryManager';
+import queryManager from '../middleware/queryManager/queryManager';
 import synchUrl from '../middleware/synchUrl/synchUrl';
 import aggReducer from '../reducers/aggs/aggs';
 import detailReducer from '../reducers/detail/detail';

src/components/Filters/Aggregation/AggregationBranch/AggregationBranch.js

@@ -8,7 +8,10 @@ import {
   sanitizeHtmlId,
   slugify,
 } from '../../../../utils';
-import { removeMultipleFilters, replaceFilters } from '../../../../actions';
+import {
+  removeMultipleFilters,
+  replaceFilters,
+} from '../../../../actions/filter';
 import { selectQueryState } from '../../../../reducers/query/selectors';
 import { AggregationItem } from '../AggregationItem/AggregationItem';
 import getIcon from '../../../iconMap';

src/components/Map/TileChartMap/TileChartMap.js

@@ -1,6 +1,6 @@
 import './TileChartMap.less';
 import { addStateFilter, removeStateFilter } from '../../../actions/map';
-import { coalesce, sendAnalyticsEvent } from '../../../utils';
+import { cloneDeep, coalesce, sendAnalyticsEvent } from '../../../utils';
 import { GEO_NORM_NONE, STATE_DATA } from '../../../constants';
 import { useDispatch, useSelector } from 'react-redux';
 import { useCallback, useEffect, useMemo } from 'react';
@@ -23,7 +23,8 @@ export const TileChartMap = () => {
   const stateFilters = useSelector(selectQueryStateFilters);
   const stateMapResultsState = useSelector(selectMapResultsState);
   const data = useMemo(() => {
-    return stateMapResultsState.map((state) => {
+    const newData = cloneDeep(stateMapResultsState);
+    return newData.map((state) => {
       const stateInfo = coalesce(STATE_DATA, state.name, {
         name: '',
         population: 1,

src/components/Search/SearchComponents.js

@@ -10,7 +10,7 @@ import { Tour } from '../Tour/Tour';
 import { useUpdateLocation } from '../../hooks/useUpdateLocation';
 import { useWindowSize } from '../../hooks/useWindowSize';
 import { useEvent } from '../../hooks/useEvent';
-import { printModeOff, printModeOn } from '../../actions';
+import { printModeOff, printModeOn } from '../../actions/view';
 
 export const SearchComponents = () => {
   useUpdateLocation();

src/components/Tour/Tour.js

@@ -11,16 +11,24 @@ import {
 import { Steps } from 'intro.js-react';
 import { TOUR_STEPS } from './constants/tourStepsConstants';
 import { TourButton } from './TourButton';
-import { tourHidden } from '../../actions';
+import { tourHidden } from '../../actions/view';
+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(selectQueryTab);
   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,7 +157,7 @@ export const Tour = () => {
     return true;
   }
 
-  return isPrintMode ? null : (
+  return isPrintMode || isLoading ? null : (
     // eslint-disable-next-line react/react-in-jsx-scope
     <>
       <TourButton />

src/components/Tour/Tour.spec.js

@@ -0,0 +1,60 @@
+import { Tour } from './Tour';
+import { testRender as render, screen } from '../../testUtils/test-utils';
+import { defaultAggs } from '../../reducers/aggs/aggs';
+import { defaultQuery } from '../../reducers/query/query';
+import { defaultView } from '../../reducers/view/view';
+import { merge } from '../../testUtils/functionHelpers';
+import userEvent from '@testing-library/user-event';
+import { MODE_LIST } from '../../constants';
+import * as viewActions from '../../actions/view';
+
+const renderComponent = (newAggsState, newQueryState, newViewModelState) => {
+  merge(newAggsState, defaultAggs);
+  merge(newQueryState, defaultQuery);
+  merge(newViewModelState, defaultView);
+
+  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/middleware/queryManager.js → src/middleware/queryManager/queryManager.js

@@ -1,6 +1,6 @@
-import * as constants from '../constants';
-import { sendHitsQuery, sendQuery } from '../actions';
-import { coalesce } from '../utils';
+import * as constants from '../../constants';
+import { sendHitsQuery, sendQuery } from '../../actions';
+import { coalesce } from '../../utils';
 
 export const queryManager = (store) => (next) => (action) => {
   // call the next function

src/middleware/queryManager.spec.js → src/middleware/queryManager/queryManager.spec.js

@@ -3,10 +3,10 @@ import {
   REQUERY_ALWAYS,
   REQUERY_HITS_ONLY,
   REQUERY_NEVER,
-} from '../constants';
-import { initialState, setupStore } from '../testUtils/setupStore';
+} from '../../constants';
+import { initialState, setupStore } from '../../testUtils/setupStore';
 import queryManager from './queryManager';
-import { AGGREGATIONS_API_CALLED, COMPLAINTS_API_CALLED } from '../actions';
+import { AGGREGATIONS_API_CALLED, COMPLAINTS_API_CALLED } from '../../actions';
 
 describe('redux middleware::queryManager', () => {
   let targetStore;

src/reducers/aggs/aggs.js

@@ -15,7 +15,6 @@ export const defaultAggs = {
   error: '',
   lastUpdated: null,
   lastIndexed: null,
-  loadingAggregations: false,
   hasDataIssue: false,
   isDataStale: false,
   company: [],
@@ -68,6 +67,7 @@ export function processAggregationResults(state, action) {
 
   const result = {
     ...state,
+    activeCall: '',
     doc_count,
     error: '',
     isLoading: false,
@@ -95,6 +95,7 @@ export function processAggregationResults(state, action) {
 export function processAggregationError(state, action) {
   return {
     ...defaultAggs,
+    activeCall: '',
     isLoading: false,
     error: processErrorMessage(action.error),
   };

src/reducers/aggs/aggs.spec.js

@@ -68,6 +68,7 @@ describe('reducer:aggs', () => {
       },
     };
     const expected = {
+      activeCall: '',
       doc_count: 162576,
       company_response: [{ key: 'foo', doc_count: 99 }],
       isLoading: false,
@@ -79,6 +80,8 @@ describe('reducer:aggs', () => {
       isDataStale: undefined,
     };
 
-    expect(target({ doc_count: 100 }, action)).toEqual(expected);
+    expect(target({ activeCall: 'foobar', doc_count: 100 }, action)).toEqual(
+      expected,
+    );
   });
 });

src/reducers/aggs/selectors.js

@@ -1,4 +1,5 @@
 export const selectAggsState = (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;

src/reducers/map/map.js

@@ -1,8 +1,7 @@
 // reducer for the Map Tab
 import * as actions from '../../actions';
-
 import { processAggregations } from '../trends/trends';
-import { processErrorMessage } from '../../utils';
+import { cloneDeep, processErrorMessage } from '../../utils';
 import { TILE_MAP_STATES } from '../../constants';
 
 export const defaultMap = {
@@ -71,6 +70,10 @@ export function statesCallInProcess(state, action) {
     activeCall: action.url,
     error: false,
     isLoading: true,
+    results: {
+      product: [],
+      state: [],
+    },
   };
 }
 
@@ -83,7 +86,7 @@ export function statesCallInProcess(state, action) {
  */
 export function processStatesResults(state, action) {
   const aggregations = action.data.aggregations;
-  const { state: stateData } = aggregations;
+  const { state: stateData } = cloneDeep(aggregations);
   // add in "issue" if we ever need issue row chart again
   const keys = ['product'];
   const results = {};

src/reducers/map/map.spec.js

@@ -28,6 +28,10 @@ describe('reducer:map', () => {
       activeCall: 'http://www.example.org',
       error: false,
       isLoading: true,
+      results: {
+        product: [],
+        state: [],
+      },
     });
   });