refactor(Schedules): Consolidate schedules react trees into one tree (#…

…2069)

* refactor(Schedules): Consolidate schedules react trees into one tree

* Added empty support and reworked data importing

* Cleaned up code

* Working on the tests

* Rewrote tests, and working on updating react state properly

* Reworked the schedule modal content tests

* Fixed tests

* Fixed linting

* Reworked schedule loader into schedule page

* Moved state management fully to react-redux

* Fixed hours of operation tests

* Updated schedule direction test

* Removed console logs

* Fixed tests for SchedulePage and the Line Diagram

* Fixed ScheduleFinderModalTests

* Fixed ScheduleModalContentTests

* Removed un-needed import

* Fixed schedulefinderformtest

* Fixed schedule finder tests, and removed unsupported test

* Removed old snapshots

* Removed unused functions from the old schedule store

* Fixed linting

* Consolidated render logic to use new helper

* Cleaned up comment

* Fixed code covereage

* Addressed PR feedback

* Addressed linting

* Changed schedule smoke test to support flexible directions

* Actually fixed the smoke tests

* Cleaned up skipped test

assets/ts/__tests__/test-render-helper.tsx

@@ -0,0 +1,70 @@
+import React, { PropsWithChildren } from "react";
+import {
+  StoreProps,
+  scheduleStoreReducer
+} from "../schedule/store/ScheduleStore";
+import { Provider } from "react-redux";
+import { render } from "@testing-library/react";
+import { Store, createStore } from "redux";
+
+// as allows the user to specify other things such as initialState, store.
+interface ExtendedRenderOptions {
+  preloadedState?: Partial<StoreProps>;
+  store?: Store;
+}
+
+const partialToStoreProps = (
+  preloadedState: Partial<StoreProps>
+): StoreProps => {
+  return {
+    selectedDirection:
+      preloadedState.selectedDirection !== undefined
+        ? preloadedState.selectedDirection
+        : 0,
+    selectedOrigin:
+      preloadedState.selectedOrigin !== undefined
+        ? preloadedState.selectedOrigin
+        : "",
+    modalOpen: !!preloadedState.modalOpen,
+    modalMode: preloadedState.modalMode ? preloadedState.modalMode : "schedule"
+  };
+};
+
+export const createScheduleStoreFromPartial = (
+  partialState: Partial<StoreProps>
+): Store => {
+  const {
+    selectedDirection,
+    selectedOrigin,
+    modalOpen,
+    modalMode
+  } = partialToStoreProps(partialState);
+  return createStore(scheduleStoreReducer, {
+    selectedDirection,
+    selectedOrigin,
+    modalOpen,
+    modalMode
+  });
+};
+
+export function renderWithProviders(
+  ui: React.ReactElement,
+  extendedRenderOptions: ExtendedRenderOptions = {}
+) {
+  const {
+    preloadedState = {},
+    // Automatically create a store instance if no store was passed in
+    store = createScheduleStoreFromPartial(preloadedState),
+    ...renderOptions
+  } = extendedRenderOptions;
+
+  const Wrapper = ({ children }: PropsWithChildren<React.ReactNode>) => {
+    return <Provider store={store}>{children}</Provider>;
+  };
+
+  // Return an object with the store and all of RTL's query functions
+  return {
+    store,
+    ...render(ui, { wrapper: Wrapper, ...renderOptions })
+  };
+}

assets/ts/jest.config.js

@@ -57,6 +57,7 @@ module.exports = {
     "./ts-build",
     "./tnm/__tests__/setupTests.ts",
     "./tnm/__tests__/helpers",
+    "./ts/__tests__/test-render-helper.tsx",
     "./stop/__tests__/helpers.ts"
   ],
   moduleNameMapper: {

assets/ts/schedule/components/RapidTransitHoursOfOperation.tsx

@@ -1,11 +1,11 @@
 import { isDate, isSaturday, isSunday, parseISO } from "date-fns";
 import { min } from "lodash";
 import React, { ReactElement } from "react";
+import { useDispatch } from "react-redux";
 import { formatToBostonTime } from "../../helpers/date";
 import useHoursOfOperation from "../../hooks/useHoursOfOperation";
 import { EnhancedRoute, StopHours, TransitHours } from "../../__v3api";
 import { ScheduleNote } from "./__schedule";
-import { storeHandler } from "../store/ScheduleStore";
 
 const trainsEveryHTML = (minuteString: string | undefined): JSX.Element => (
   <div className="fs-14 pt-8">{`Trains depart every ${minuteString}`}</div>
@@ -75,9 +75,10 @@ const RapidTransitHoursOfOperation = ({
   date?: Date;
 }): ReactElement<HTMLElement> => {
   const hours = useHoursOfOperation(route.id) as TransitHours | null;
+  const dispatch = useDispatch();
 
   const openModal = (): void => {
-    storeHandler({
+    dispatch({
       type: "OPEN_MODAL",
       newStoreValues: {
         modalMode: "origin"

assets/ts/schedule/components/ScheduleDirection.tsx

@@ -19,7 +19,7 @@ import {
   isACommuterRailRoute
 } from "../../models/route";
 import LineDiagram from "./line-diagram/LineDiagram";
-import { fromStopTreeData } from "./ScheduleLoader";
+import { fromStopTreeData } from "./SchedulePage";
 
 export interface Props {
   route: EnhancedRoute;
@@ -240,7 +240,6 @@ const ScheduleDirection = ({
           alerts={alerts}
         />
       )}
-
       {!staticMapData && mapState.data && (
         <Map
           channel={`vehicles:${route.id}:${state.directionId}`}

assets/ts/schedule/components/ScheduleFinder.tsx

@@ -1,4 +1,6 @@
 import React, { ReactElement } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Dispatch } from "redux";
 import { Route, DirectionId } from "../../__v3api";
 import {
   SimpleStopMap,
@@ -8,10 +10,8 @@ import {
   ScheduleNote
 } from "./__schedule";
 import ScheduleFinderForm from "./schedule-finder/ScheduleFinderForm";
-import ScheduleFinderModal, {
-  Mode as ModalMode
-} from "./schedule-finder/ScheduleFinderModal";
-import { getCurrentState, storeHandler } from "../store/ScheduleStore";
+import ScheduleFinderModal from "./schedule-finder/ScheduleFinderModal";
+import { StoreProps } from "../store/ScheduleStore";
 import { routeToModeName } from "../../helpers/css";
 import useDirectionChangeEvent from "../../hooks/useDirectionChangeEvent";
 
@@ -23,12 +23,9 @@ interface Props {
   stops: SimpleStopMap;
   routePatternsByDirection: RoutePatternsByDirection;
   today: string;
-  changeDirection: (direction: DirectionId) => void;
-  selectedOrigin: SelectedOrigin;
-  changeOrigin: (origin: SelectedOrigin) => void;
-  closeModal: () => void;
-  modalMode: ModalMode;
-  modalOpen: boolean;
+  changeDirection: (direction: DirectionId, dispatch: Dispatch) => void;
+  changeOrigin: (origin: SelectedOrigin, dispatch: Dispatch) => void;
+  closeModal: (dispatch: Dispatch) => void;
   scheduleNote: ScheduleNote | null;
 }
 
@@ -40,20 +37,20 @@ const ScheduleFinder = ({
   stops,
   routePatternsByDirection,
   today,
-  modalMode,
-  selectedOrigin,
   changeDirection,
   changeOrigin,
-  modalOpen,
   closeModal,
   scheduleNote
 }: Props): ReactElement<HTMLElement> => {
+  const dispatch = useDispatch();
+  const { modalOpen, selectedOrigin } = useSelector(
+    (state: StoreProps) => state
+  );
+
   const currentDirection = useDirectionChangeEvent(directionId);
   const openOriginModal = (): void => {
-    const currentState = getCurrentState();
-    const { modalOpen: modalIsOpen } = currentState;
-    if (!modalIsOpen) {
-      storeHandler({
+    if (!modalOpen) {
+      dispatch({
         type: "OPEN_MODAL",
         newStoreValues: {
           modalMode: "origin"
@@ -63,10 +60,8 @@ const ScheduleFinder = ({
   };
 
   const openScheduleModal = (): void => {
-    const currentState = getCurrentState();
-    const { modalOpen: modalIsOpen } = currentState;
-    if (selectedOrigin !== undefined && !modalIsOpen) {
-      storeHandler({
+    if (selectedOrigin !== undefined && !modalOpen) {
+      dispatch({
         type: "OPEN_MODAL",
         newStoreValues: {
           modalMode: "schedule"
@@ -76,7 +71,7 @@ const ScheduleFinder = ({
   };
 
   const handleOriginSelectClick = (): void => {
-    storeHandler({
+    dispatch({
       type: "OPEN_MODAL",
       newStoreValues: {
         modalMode: "origin"
@@ -106,9 +101,7 @@ const ScheduleFinder = ({
         <ScheduleFinderModal
           closeModal={closeModal}
           directionChanged={changeDirection}
-          initialMode={modalMode}
           initialDirection={currentDirection}
-          initialOrigin={selectedOrigin}
           handleOriginSelectClick={handleOriginSelectClick}
           originChanged={changeOrigin}
           route={route}