Clean up integration of interactors and storybook inspector

Author: wKich

packages/material-ui/.storybook/main.js

@@ -1,7 +1,7 @@
 module.exports = {
   stories: ["../stories/**/*.stories.@(md|ts)x"],
-  addons: ["@storybook/addon-postcss", "@storybook/addon-essentials"],
-  features: { previewCsfV3: true },
+  addons: ["@storybook/addon-postcss", "@storybook/addon-essentials", '@storybook/addon-interactions'],
+  features: { previewCsfV3: true, interactionsDebugger: true },
   core: { builder: "webpack5" },
   typescript: { reactDocgen: false },
 };

packages/material-ui/.storybook/preview.tsx

@@ -1,40 +1,40 @@
+import Events from "@storybook/core-events";
+import { addons } from "@storybook/addons";
 import { instrument } from "@storybook/instrumenter";
-import { addInteractionWrapper, globals, setInteractorScope } from "@interactors/globals";
+import { addInteractionWrapper } from "@interactors/globals";
 
 // NOTE: Dummy call to initialize instrumenter. See: https://github.com/storybookjs/storybook/blob/next/lib/instrumenter/src/instrumenter.ts#L512
 instrument({});
 
 let isRoot = true;
 
-addInteractionWrapper((interaction, next) => {
+addInteractionWrapper((perform, interaction) => {
   if (!isRoot) {
-    return next;
+    return perform;
   }
   return async () => {
+    const channel = addons.getChannel();
     const cancel = (event) => {
       if (!event.newPhase || event.newPhase == "aborted" || event.newPhase == "errored") {
-        __STORYBOOK_ADDONS_CHANNEL__.off("forceRemount", cancel);
-        __STORYBOOK_ADDONS_CHANNEL__.off("storyRenderPhaseChanged", cancel);
-        interaction.catchHalt();
+        channel.off(Events.FORCE_REMOUNT, cancel);
+        channel.off(Events.STORY_RENDER_PHASE_CHANGED, cancel);
         interaction.halt();
         isRoot = true;
       }
     };
-    __STORYBOOK_ADDONS_CHANNEL__.on("forceRemount", cancel);
-    __STORYBOOK_ADDONS_CHANNEL__.on("storyRenderPhaseChanged", cancel);
+    channel.on(Events.FORCE_REMOUNT, cancel);
+    channel.on(Events.STORY_RENDER_PHASE_CHANGED, cancel);
     try {
       return await global.window.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__.track(
-        interaction.options.code(),
-        next,
+        interaction.code(),
+        perform,
         [],
-        {
-          intercept: () => !(isRoot = false),
-        }
+        { intercept: () => !(isRoot = false) }
       );
     } finally {
       isRoot = true;
-      __STORYBOOK_ADDONS_CHANNEL__.off("forceRemount", cancel);
-      __STORYBOOK_ADDONS_CHANNEL__.off("storyRenderPhaseChanged", cancel);
+      channel.off(Events.FORCE_REMOUNT, cancel);
+      channel.off(Events.STORY_RENDER_PHASE_CHANGED, cancel);
     }
   };
 });

packages/material-ui/src/body.ts

@@ -3,7 +3,7 @@ import { HTML } from "@interactors/html";
 export const Body = HTML.extend<HTMLBodyElement>("Body")
   .selector("body")
   .actions({
-    click: ({ perform }) =>
+    click: async ({ perform }) =>
       perform((element) => {
         if (document.activeElement && "blur" in document.activeElement) {
           (document.activeElement as HTMLElement).blur();

packages/material-ui/src/bottom-navigation.ts

@@ -7,7 +7,7 @@ const BottomNavigationAction = createInteractor<HTMLButtonElement>("MUIBottomNav
     let label = element.querySelector('[class*="MuiBottomNavigationAction-label"]');
     return isHTMLElement(label) ? innerText(label) : "";
   })
-  .actions({ click: ({ perform }) => perform((element) => click(element)) });
+  .actions({ click: async ({ perform }) => perform((element) => click(element)) });
 
 const BottomNavigationInteractor = createInteractor<HTMLElement>("MUIBottomNavigation")
   .selector('[class*="MuiBottomNavigation-root"]')
@@ -18,7 +18,7 @@ const BottomNavigationInteractor = createInteractor<HTMLElement>("MUIBottomNavig
     },
   })
   .actions({
-    navigate: (interactor, value: string) => interactor.find(BottomNavigationAction(value)).click(),
+    navigate: async (interactor, value: string) => interactor.find(BottomNavigationAction(value)).click(),
   });
 
 /**

packages/material-ui/src/date-field.ts

@@ -8,7 +8,7 @@ const DateFieldInteractor = TextField.extend<HTMLInputElement>("DateField")
     timestamp: (element) => element.valueAsNumber,
   })
   .actions({
-    fillIn: ({ perform }, value: string | Date) =>
+    fillIn: async ({ perform }, value: string | Date) =>
       perform((element) => {
         setValue(element, typeof value == "string" ? value : value.toISOString().replace(/T.*$/, ""));
         dispatchChange(element);

packages/material-ui/src/datetime-field.ts

@@ -5,7 +5,7 @@ const DateTimeFieldInteractor = TextField.extend<HTMLInputElement>("DateTimeFiel
   .selector('input[type="datetime-local"]')
   .filters({ timestamp: (element) => element.valueAsNumber })
   .actions({
-    fillIn: ({ perform }, value: string | Date) =>
+    fillIn: async ({ perform }, value: string | Date) =>
       perform((element) => {
         setValue(element, typeof value == "string" ? value : value.toISOString().replace(/Z$/, ""));
         dispatchChange(element);

packages/material-ui/src/dialog.ts

@@ -11,7 +11,7 @@ const DialogInteractor = HTML.extend("MUIDialog")
     return isHTMLElement(titleElement) ? innerText(titleElement) : "";
   })
   .actions({
-    close: ({ perform }) =>
+    close: async ({ perform }) =>
       perform((element) => {
         let backdrop = element.querySelector('[class*="MuiBackdrop-root"]');
         if (isHTMLElement(backdrop)) click(backdrop);