Add restart/reload action

addons/interactions/src/Panel.tsx

@@ -64,21 +64,26 @@ const Call = ({ call }: { call: Call }) => {
 };
 
 export const Panel: React.FC<PanelProps> = (props) => {
-  const [calls, setCalls] = React.useState([] as Call[]);
+  const calls = React.useRef([]);
+  const [log, setLog] = React.useState([] as Call[]);
 
   const emit = useChannel({
     [EVENTS.CALL]: (call) => {
-      setCalls((calls) => calls.concat(call));
+      calls.current.push(call);
     },
-    storyChanged: () => {
-      setCalls([]);
+    storyRendered: () => {
+      setLog(calls.current);
+      calls.current = []
     },
   });
 
-  const log = fold(calls);
+  const reload = () => {
+    emit(EVENTS.RELOAD);
+  }
+
   const next = () => {
     emit(EVENTS.NEXT);
-    setCalls((calls) => {
+    setLog((calls) => {
       const index = calls.findIndex((call) => call.skipped);
       return [
         ...calls.slice(0, index),
@@ -91,14 +96,17 @@ export const Panel: React.FC<PanelProps> = (props) => {
   return (
     <AddonPanel {...props}>
       <div style={{ padding: 5 }}>
-        {log.map((call) => (
+        {fold(log).map((call) => (
           <div key={call.id} style={{ padding: 3 }}>
             <Call call={call} />
           </div>
         ))}
         <div style={{ padding: 3 }}>
+          <Button outline containsIcon title="Reload" onClick={reload}>
+            <Icons icon="undo" />
+          </Button>
           <Button outline containsIcon title="Next" onClick={next} disabled={!log.some((call) => call.skipped)}>
-            <Icons icon="proceed" />
+            <Icons icon="arrowrightalt" />
           </Button>
         </div>
       </div>

addons/interactions/src/constants.ts

@@ -7,4 +7,5 @@ export const LOG_STATE_ID = `${ADDON_ID}/state/log`;
 export const EVENTS = {
   CALL: `${ADDON_ID}/call`,
   NEXT: `${ADDON_ID}/next`,
+  RELOAD: `${ADDON_ID}/reload`,
 };

addons/interactions/src/instrument.js

@@ -6,21 +6,6 @@ const callsByResult = new Map();
 const resultsByCallId = new Map();
 const channel = addons.getChannel();
 
-const emitCall = ({
-  id,
-  path,
-  method,
-  args: originalArgs,
-  result,
-  skipped,
-}) => {
-  const key = path.concat(method).join(".");
-  const args = originalArgs.map((arg) => callsByResult.get(arg) || arg);
-  callsByResult.set(result, { __callId__: id });
-  resultsByCallId.set(id, result);
-  channel.emit(EVENTS.CALL, { id, key, args, skipped });
-};
-
 channel.on(EVENTS.NEXT, () => {
   const [id, fn, args] = interceptions.shift();
   const result = fn(...args.map((arg) => resultsByCallId.get(arg?.__callId__) || arg));
@@ -28,6 +13,14 @@ channel.on(EVENTS.NEXT, () => {
   resultsByCallId.set(id, result);
 });
 
+channel.on(EVENTS.RELOAD, () => {
+  window.sessionStorage.setItem('paused', true);
+  window.location.reload()
+});
+
+channel.on('storyChanged', () => window.sessionStorage.removeItem('paused'))
+channel.on('storyRendered', () => window.sessionStorage.removeItem('paused'))
+
 // Monkey patch an object method to record calls.
 // Returns a function that invokes the original function, records the
 // invocation ("call") and returns the original result.
@@ -39,13 +32,13 @@ export function patch(obj, method, path = []) {
   const patched = (...originalArgs) => {
     const id = Math.random().toString(16).slice(2);
     const args = originalArgs.map((arg) => callsByResult.get(arg) || arg);
-    if (window.paused) interceptions.push([id, fn, args]);
-    
-    // TODO return recorded result when paused
-    const result = window.paused ? undefined : fn(...originalArgs);
+    const paused = !!window.sessionStorage.getItem('paused');
+    if (paused) interceptions.push([id, fn, args]);
+
+    const result = paused ? [] : fn(...originalArgs);
     callsByResult.set(result, { __callId__: id });
     resultsByCallId.set(id, result);
-    channel.emit(EVENTS.CALL, { id, key, args, skipped: window.paused });
+    channel.emit(EVENTS.CALL, { id, key, args, skipped: paused });
     return result;
   };
   patched._original = fn;

addons/interactions/stories/AccountForm.stories.tsx

@@ -20,7 +20,6 @@ export const StandardEmailFilled = {
 export const StandardEmailFailed = {
   ...Standard,
   play: () => {
-    window.paused = true
     userEvent.type(screen.getByTestId("email"), "michael@chromatic.com.com@com")
     userEvent.type(screen.getByTestId("password1"), "testpasswordthatwontfail")
     userEvent.click(screen.getByTestId("submit"))