add custom suspense with test mode fallback

co-author: miles-grant-ibigroup
ibi-group · Jun 5, 2024 · f711776 · f711776
1 parent ceacd3e
commit f711776
Show file tree

Hide file tree

Showing 40 changed files with 21,268 additions and 20,491 deletions.
diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
@@ -25,7 +25,6 @@ const config: TestRunnerConfig = {
   },
   async postVisit(page, context) {
     // the #storybook-root element wraps the story. In Storybook 6.x, the selector is #root
-    await new Promise((resolve) => setTimeout(resolve, 3000));
     if (!ONLY_RUN || ONLY_RUN === "SNAPSHOTS") {
       await runSnapshots(page);
     }

diff --git a/packages/base-map/src/__snapshots__/index.story.tsx.snap b/packages/base-map/src/__snapshots__/index.story.tsx.snap
diff --git a/packages/building-blocks/src/stories/__snapshots__/index.story.tsx.snap b/packages/building-blocks/src/stories/__snapshots__/index.story.tsx.snap
@@ -1,79 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Building-Blocks/Colors Blue smoke-test 1`] = `
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 kffPrV">
   <p>
     50
   </p>
   <p>
     #E5ECF3
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 fjZNXJ">
   <p>
     100
   </p>
   <p>
     #CCDAE7
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 BUDbo">
   <p>
     200
   </p>
   <p>
     #B2C7DB
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 gdTlRw">
   <p>
     300
   </p>
   <p>
     #99B5CF
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 eVcqvA">
   <p>
     400
   </p>
   <p>
     #7FA2C2
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 bVrRBf">
   <p>
     500
   </p>
   <p>
     #6690B7
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 jOBnRa">
   <p>
     600
   </p>
   <p>
     #4D7EAB
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 qhRUD">
   <p>
     700
   </p>
   <p>
     #336B9E
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 nTorg">
   <p>
     800
   </p>
   <p>
     #1A5992
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 ePvtWX">
   <p>
     900
   </p>
@@ -84,79 +84,79 @@ exports[`Building-Blocks/Colors Blue smoke-test 1`] = `
 `;
 
 exports[`Building-Blocks/Colors Grey smoke-test 1`] = `
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 ihgIyw">
   <p>
     50
   </p>
   <p>
     #ECECEC
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 ebEIFH">
   <p>
     100
   </p>
   <p>
     #D9D9D9
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 fHGSWM">
   <p>
     200
   </p>
   <p>
     #C5C5C5
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 dLWDtv">
   <p>
     300
   </p>
   <p>
     #B3B3B3
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 fvcImc">
   <p>
     400
   </p>
   <p>
     #9F9F9F
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 iEhEko">
   <p>
     500
   </p>
   <p>
     #8C8C8C
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 kcxUth">
   <p>
     600
   </p>
   <p>
     #797979
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 ojcdX">
   <p>
     700
   </p>
   <p>
     #666666
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 dAGsaR">
   <p>
     800
   </p>
   <p>
     #535353
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 imhyEr">
   <p>
     900
   </p>
@@ -167,79 +167,79 @@ exports[`Building-Blocks/Colors Grey smoke-test 1`] = `
 `;
 
 exports[`Building-Blocks/Colors Red smoke-test 1`] = `
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 jkujVK">
   <p>
     50
   </p>
   <p>
     #F7E7E6
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 gCnVUi">
   <p>
     100
   </p>
   <p>
     #EFCFCE
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 bMKcsy">
   <p>
     200
   </p>
   <p>
     #E7B6B4
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 hDZgTW">
   <p>
     300
   </p>
   <p>
     #DF9E9C
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 dhsBWR">
   <p>
     400
   </p>
   <p>
     #D78683
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 RfVvB">
   <p>
     500
   </p>
   <p>
     #CF6E6B
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 HARpb">
   <p>
     600
   </p>
   <p>
     #C75652
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 bdGDlH">
   <p>
     700
   </p>
   <p>
     #BF3E3A
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 crSKIw">
   <p>
     800
   </p>
   <p>
     #B72620
   </p>
 </div>
-<div class="CLASS_NAME_FILLER">
+<div class="ColorPalette__ColorBlock-sc-fil65c-0 fYLZnJ">
   <p>
     900
   </p>

diff --git a/packages/core-utils/src/__snapshots__/core-utils.story.tsx.snap b/packages/core-utils/src/__snapshots__/core-utils.story.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`core-utils RouteColorTester smoke-test 1`] = `
-<div class="CLASS_NAME_FILLER">
-  <div class="CLASS_NAME_FILLER">
+<div class="core-utilsstory__ColorBlockWrapper-sc-1u8rrx8-1 dQZJDC">
+  <div class="core-utilsstory__ColorBlock-sc-1u8rrx8-0 gZGDOC">
     Provided color pair
   </div>
-  <div class="CLASS_NAME_FILLER">
+  <div class="core-utilsstory__ColorBlock-sc-1u8rrx8-0 gZGDOC">
     Corrected color pair
   </div>
 </div>

diff --git a/packages/core-utils/src/index.ts b/packages/core-utils/src/index.ts
@@ -8,6 +8,7 @@ import * as storage from "./storage";
 import * as time from "./time";
 import * as ui from "./ui";
 import * as queryGen from "./query-gen";
+import SafeSuspense from "./suspense";
 
 const core = {
   itinerary,
@@ -22,4 +23,5 @@ const core = {
   ui
 };
 
+export { SafeSuspense };
 export default core;
diff --git a/packages/core-utils/src/suspense.tsx b/packages/core-utils/src/suspense.tsx
@@ -0,0 +1,19 @@
+import React, { ReactElement, ReactNode, Suspense } from "react";
+
+type Props = {
+  children: ReactNode;
+  fallback: ReactNode;
+};
+
+const SafeSuspense = ({ children, fallback }: Props): ReactElement => {
+  const IS_TEST_RUNNER = window.navigator.userAgent.match(
+    /StorybookTestRunner/
+  );
+  return IS_TEST_RUNNER ? (
+    <>{fallback}</>
+  ) : (
+    <Suspense fallback={fallback}>{children}</Suspense>
+  );
+};
+
+export default SafeSuspense;