testing: fixes missing router error in storybook

JaneliaSciComp · Jan 19, 2024 · 95ba182 · 95ba182
1 parent 17e2758
commit 95ba182
Show file tree

Hide file tree

Showing 14 changed files with 1,568 additions and 1,615 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "antd": "^5.6.4",
-    "aws-amplify": "^5.3.3",
+    "aws-amplify": "^5.3.15",
     "date-fns": "^2.30.0",
     "deep-equal": "^2.2.2",
     "eslint-config-airbnb": "^19.0.4",
@@ -31,6 +31,7 @@
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.7",
     "react-resizable": "^3.0.5",
+    "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.1",

diff --git a/src/components/AlignmentMeta.stories.jsx b/src/components/AlignmentMeta.stories.jsx
@@ -1,12 +1,19 @@
 import React from "react";
+import { MemoryRouter } from "react-router";
 import AlignmentMeta from "./AlignmentMeta";
 
 export default {
-  title: 'AlignmentMeta',
+  title: "AlignmentMeta",
   component: AlignmentMeta,
 };
 
-function Template(args) { return  <AlignmentMeta {...args} />; }
+function Template(args) {
+  return (
+    <MemoryRouter>
+      <AlignmentMeta {...args} />
+    </MemoryRouter>
+  );
+}
 
 export const ModifiedParameters = Template.bind({});
 
@@ -17,8 +24,8 @@ ModifiedParameters.args = {
     referenceChannel: 1,
     voxelX: 5,
     voxelY: 5,
-    voxelZ: 2
-  }
+    voxelZ: 2,
+  },
 };
 
 export const AllDefaults = Template.bind({});
@@ -30,6 +37,6 @@ AllDefaults.args = {
     referenceChannel: null,
     voxelX: null,
     voxelY: null,
-    voxelZ: null
-  }
+    voxelZ: null,
+  },
 };
diff --git a/src/components/ColorDepthSearchParameters.stories.jsx b/src/components/ColorDepthSearchParameters.stories.jsx
@@ -1,21 +1,28 @@
 import React from "react";
+import { MemoryRouter } from "react-router";
 import ColorDepthSearchParameters from "./ColorDepthSearchParameters";
 
 export default {
-  title: 'ColorDepthSearchParameters',
+  title: "ColorDepthSearchParameters",
   component: ColorDepthSearchParameters,
 };
 
-function Template(args) { return <ColorDepthSearchParameters {...args} />; }
+function Template(args) {
+  return (
+    <MemoryRouter>
+      <ColorDepthSearchParameters {...args} />
+    </MemoryRouter>
+  );
+}
 
 export const FirstStory = Template.bind({});
 
 FirstStory.args = {
   match: {
     params: {
-      id: 12345
-    }
+      id: 12345,
+    },
   },
   history: {},
-  location: {}
+  location: {},
 };
diff --git a/src/components/CustomSearch/SearchSteps.stories.jsx b/src/components/CustomSearch/SearchSteps.stories.jsx
@@ -1,12 +1,19 @@
 import React from "react";
+import { MemoryRouter } from "react-router";
 import SearchSteps from "./SearchSteps";
 
 export default {
   title: "SearchSteps",
   component: SearchSteps,
 };
 
-function Template (args) { return <SearchSteps {...args} />; }
+function Template(args) {
+  return (
+    <MemoryRouter>
+      <SearchSteps {...args} />
+    </MemoryRouter>
+  );
+}
 
 export const StepZero = Template.bind({});
 StepZero.args = {

diff --git a/src/components/ExportMenu.stories.jsx b/src/components/ExportMenu.stories.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { MemoryRouter } from "react-router";
 import ExportMenu from "./ExportMenu";
 import { MatchesProvider } from "../containers/MatchesContext";
 
@@ -7,11 +8,13 @@ export default {
   component: ExportMenu,
 };
 
-function Template (args) {
+function Template(args) {
   return (
-    <MatchesProvider>
-      <ExportMenu {...args} />
-    </MatchesProvider>
+    <MemoryRouter>
+      <MatchesProvider>
+        <ExportMenu {...args} />
+      </MatchesProvider>
+    </MemoryRouter>
   );
 }
 
@@ -32,8 +35,7 @@ const result = {
         "JRC2018_Unisex_20x_HR/FlyEM_Hemibrain_v1.2.1/2338031784-JRC2018_Unisex_20x_HR-CDM.jpg",
       AlignedBodySWC:
         "JRC2018_Unisex_20x_HR/FlyEM_Hemibrain_v1.2.1/SWC/2338031784.swc",
-      CDM:
-        "JRC2018_Unisex_20x_HR/FlyEM_Hemibrain_v1.2.1/2338031784-JRC2018_Unisex_20x_HR-CDM.png",
+      CDM: "JRC2018_Unisex_20x_HR/FlyEM_Hemibrain_v1.2.1/2338031784-JRC2018_Unisex_20x_HR-CDM.png",
       PPPMResults: "2941779886043300386.json",
       CDSResults: "2945073144027205643.json",
       AlignedBodyOBJ:

diff --git a/src/components/FilterMenu.stories.jsx b/src/components/FilterMenu.stories.jsx
@@ -1,21 +1,28 @@
 import React from "react";
+import { MemoryRouter } from "react-router";
 import FilterMenu from "./FilterMenu";
 
 export default {
   title: "FilterMenu",
-  component: FilterMenu
+  component: FilterMenu,
 };
 
-function Template(args) { return <FilterMenu {...args} />; }
+function Template(args) {
+  return (
+    <MemoryRouter>
+      <FilterMenu {...args} />
+    </MemoryRouter>
+  );
+}
 
 export const LMMatches = Template.bind({});
 
 LMMatches.args = {
   matchesType: "lm",
   countsByLibrary: {
     "FlyLight Gen1 MCFO": 595,
-    "FlyLight Split-GAL4 Drivers": 116
-  }
+    "FlyLight Split-GAL4 Drivers": 116,
+  },
 };
 
 export const EMMatches = Template.bind({});
@@ -24,8 +31,8 @@ EMMatches.args = {
   matchesType: "em",
   countsByLibrary: {
     "FlyEM VNC v0.6": 595,
-    "FlyEM Hemibrain v0.5": 116
-  }
+    "FlyEM Hemibrain v0.5": 116,
+  },
 };
 
 export const WithGenderFilter = Template.bind({});
@@ -35,6 +42,6 @@ WithGenderFilter.args = {
   useGenderFilter: true,
   countsByLibrary: {
     "FlyEM VNC v0.6": 595,
-    "FlyEM Hemibrain v0.5": 116
-  }
+    "FlyEM Hemibrain v0.5": 116,
+  },
 };
diff --git a/src/components/MaskChannelSelection.stories.jsx b/src/components/MaskChannelSelection.stories.jsx
@@ -1,12 +1,19 @@
 import React from "react";
+import { MemoryRouter } from "react-router";
 import MaskChannelSelection from "./MaskChannelSelection";
 
 export default {
-  title: 'MaskChannelSelection',
+  title: "MaskChannelSelection",
   component: MaskChannelSelection,
 };
 
-function Template (args) { return <MaskChannelSelection {...args} />; }
+function Template(args) {
+  return (
+    <MemoryRouter>
+      <MaskChannelSelection {...args} />
+    </MemoryRouter>
+  );
+}
 
 export const FirstStory = Template.bind({});
 

diff --git a/src/components/MaskDrawing.stories.jsx b/src/components/MaskDrawing.stories.jsx
@@ -1,31 +1,37 @@
 import React from "react";
+import { MemoryRouter } from "react-router";
 import MaskDrawing from "./MaskDrawing";
 
 export default {
-  title: 'MaskDrawing',
+  title: "MaskDrawing",
   component: MaskDrawing,
 };
 
-function Template(args){ return <MaskDrawing {...args} />; }
+function Template(args) {
+  return (
+    <MemoryRouter>
+      <MaskDrawing {...args} />
+    </MemoryRouter>
+  );
+}
 
 export const ImageSelected = Template.bind({});
 
 ImageSelected.args = {
-  onMaskChange: () => console.log('changed'),
-  imgSrc: '/landing_background.png',
-  signImage: false
+  onMaskChange: () => console.log("changed"),
+  imgSrc: "/landing_background.png",
+  signImage: false,
 };
 
 export const NoImageSelected = Template.bind({});
 
 NoImageSelected.args = {
-  onMaskChange: () => console.log('changed'),
+  onMaskChange: () => console.log("changed"),
 };
 
 export const ImageSigned = Template.bind({});
 
 ImageSigned.args = {
-  onMaskChange: () => console.log('changed'),
-  imgSrc: '/landing_background.png',
+  onMaskChange: () => console.log("changed"),
+  imgSrc: "/landing_background.png",
 };
-
diff --git a/src/components/MaskSelection.stories.jsx b/src/components/MaskSelection.stories.jsx
@@ -1,21 +1,28 @@
 import React from "react";
+import { MemoryRouter } from "react-router";
 import MaskSelection from "./MaskSelection";
 
 export default {
-  title: 'MaskSelection',
+  title: "MaskSelection",
   component: MaskSelection,
 };
 
-function Template(args){ return  <MaskSelection {...args} />; }
+function Template(args) {
+  return (
+    <MemoryRouter>
+      <MaskSelection {...args} />
+    </MemoryRouter>
+  );
+}
 
 export const FirstStory = Template.bind({});
 
 FirstStory.args = {
   match: {
     params: {
-      id: 12345
-    }
+      id: 12345,
+    },
   },
   history: {},
-  location: {}
+  location: {},
 };
diff --git a/src/components/MatchModal.stories.jsx b/src/components/MatchModal.stories.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { MemoryRouter } from "react-router";
 import MatchModal from "./MatchModal";
 import { MatchesProvider } from "../containers/MatchesContext";
 import { AppContext } from "../containers/AppContext";
@@ -8,31 +9,33 @@ export default {
   component: MatchModal,
 };
 
-function Template (args) {
+function Template(args) {
   return (
-    <AppContext.Provider
-      // eslint-disable-next-line react/jsx-no-constructed-context-values
-      value={{
-        appState: {
-          compactMeta: false,
-          comparisonCount: {
-            pppm: 2,
-            cdm: 2,
+    <MemoryRouter>
+      <AppContext.Provider
+        // eslint-disable-next-line react/jsx-no-constructed-context-values
+        value={{
+          appState: {
+            compactMeta: false,
+            comparisonCount: {
+              pppm: 2,
+              cdm: 2,
+            },
+            imageChoices: {
+              pppm: {},
+              cdm: {},
+            },
+            dataConfig: {
+              loaded: true,
+            },
           },
-          imageChoices: {
-            pppm: {},
-            cdm: {}
-          },
-          dataConfig: {
-            loaded: true,
-          },
-        },
-      }}
-    >
-      <MatchesProvider>
-        <MatchModal {...args} />
-      </MatchesProvider>
-    </AppContext.Provider>
+        }}
+      >
+        <MatchesProvider>
+          <MatchModal {...args} />
+        </MatchesProvider>
+      </AppContext.Provider>
+    </MemoryRouter>
   );
 }
 
@@ -56,8 +59,7 @@ FirstStory.args = {
     files: {
       CDMThumbnail:
         "https://s3.amazonaws.com/janelia-flylight-color-depth-thumbnails-devpre/JRC2018_VNC_Unisex_40x_DS/FlyEM_VNC_v0.6/12288-JRC2018_VNC_Unisex_40x_DS-CDM.jpg",
-      CDM:
-        "https://s3.amazonaws.com/janelia-flylight-color-depth-devpre/JRC2018_VNC_Unisex_40x_DS/FlyEM_VNC_v0.6/12288-JRC2018_VNC_Unisex_40x_DS-CDM.png",
+      CDM: "https://s3.amazonaws.com/janelia-flylight-color-depth-devpre/JRC2018_VNC_Unisex_40x_DS/FlyEM_VNC_v0.6/12288-JRC2018_VNC_Unisex_40x_DS-CDM.png",
       CDSResults: "2988247185125302403.json",
       store: "fl:pre_release:vnc",
     },
@@ -84,8 +86,7 @@ FirstStory.args = {
         files: {
           CDMThumbnail:
             "https://s3.amazonaws.com/janelia-flylight-color-depth-thumbnails-devpre/JRC2018_VNC_Unisex_40x_DS/FlyLight_Gen1_MCFO/VT063303-20170929_61_G2-GAL4-f-40x-vnc-JRC2018_VNC_Unisex_40x_DS-CDM_3.jpg",
-          CDM:
-            "https://s3.amazonaws.com/janelia-flylight-color-depth-devpre/JRC2018_VNC_Unisex_40x_DS/FlyLight_Gen1_MCFO/VT063303-20170929_61_G2-GAL4-f-40x-vnc-JRC2018_VNC_Unisex_40x_DS-CDM_3.png",
+          CDM: "https://s3.amazonaws.com/janelia-flylight-color-depth-devpre/JRC2018_VNC_Unisex_40x_DS/FlyLight_Gen1_MCFO/VT063303-20170929_61_G2-GAL4-f-40x-vnc-JRC2018_VNC_Unisex_40x_DS-CDM_3.png",
           CDSResults: "2711773553484627979.json",
           Gal4Expression:
             "undefinedGen1/CDM/VT063303/VT063303-sample_002901-f-20x-ventral_nerve_cord-JRC2018_VNC_Unisex_40x_DS-CDM_1.png",