Interactions: Fix various inconsistencies

addons/interactions/package.json

@@ -55,8 +55,8 @@
     "ts-dedent": "^2.2.0"
   },
   "devDependencies": {
-    "@storybook/jest": "^0.0.2",
-    "@storybook/testing-library": "^0.0.3",
+    "@storybook/jest": "^0.0.5",
+    "@storybook/testing-library": "^0.0.7",
     "formik": "^2.2.9"
   },
   "peerDependencies": {

addons/interactions/src/Panel.stories.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
 import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 
 import { getCall } from './mocks';
 import { AddonPanelPure } from './Panel';
+import SubnavStories from './components/Subnav/Subnav.stories';
 
 const StyledWrapper = styled.div(({ theme }) => ({
   backgroundColor: theme.background.content,
@@ -33,16 +35,14 @@ export default {
   },
   args: {
     calls: new Map(),
-    endRef: null,
+    controls: SubnavStories.args.controls,
+    controlStates: SubnavStories.args.controlStates,
+    interactions: [getCall(CallStates.DONE)],
     fileName: 'addon-interactions.stories.tsx',
     hasException: false,
-    hasNext: false,
-    hasPrevious: true,
-    interactions: [getCall(CallStates.DONE)],
-    isDisabled: false,
     isPlaying: false,
-    showTabIcon: false,
-    isDebuggingEnabled: true,
+    onScrollToEnd: action('onScrollToEnd'),
+    endRef: null,
     // prop for the AddonPanel used as wrapper of Panel
     active: true,
   },
@@ -60,6 +60,14 @@ export const Paused: Story = {
   args: {
     isPlaying: true,
     interactions: [getCall(CallStates.WAITING)],
+    controlStates: {
+      debugger: true,
+      start: false,
+      back: false,
+      goto: true,
+      next: true,
+      end: true,
+    },
   },
 };
 
@@ -78,7 +86,7 @@ export const Failed: Story = {
 };
 
 export const WithDebuggingDisabled: Story = {
-  args: { isDebuggingEnabled: false },
+  args: { controlStates: { ...SubnavStories.args.controlStates, debugger: false } },
 };
 
 export const NoInteractions: Story = {

addons/interactions/src/Panel.tsx

@@ -1,44 +1,49 @@
 import global from 'global';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import { useChannel, useParameter, useStorybookState } from '@storybook/api';
+import { useChannel, useParameter, StoryId } from '@storybook/api';
 import { STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
 import { AddonPanel, Link, Placeholder } from '@storybook/components';
-import { EVENTS, Call, CallStates, LogItem } from '@storybook/instrumenter';
+import { EVENTS, Call, CallStates, ControlStates, LogItem } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 
 import { StatusIcon } from './components/StatusIcon/StatusIcon';
 import { Subnav } from './components/Subnav/Subnav';
 import { Interaction } from './components/Interaction/Interaction';
 
-const { FEATURES } = global;
+export interface Controls {
+  start: (args: any) => void;
+  back: (args: any) => void;
+  goto: (args: any) => void;
+  next: (args: any) => void;
+  end: (args: any) => void;
+}
 
 interface AddonPanelProps {
   active: boolean;
 }
 
 interface InteractionsPanelProps {
   active: boolean;
-  interactions: (Call & { state?: CallStates })[];
-  isDisabled?: boolean;
-  hasPrevious?: boolean;
-  hasNext?: boolean;
+  controls: Controls;
+  controlStates: ControlStates;
+  interactions: (Call & { status?: CallStates })[];
   fileName?: string;
   hasException?: boolean;
   isPlaying?: boolean;
   calls: Map<string, any>;
   endRef?: React.Ref<HTMLDivElement>;
-  isDebuggingEnabled?: boolean;
-  onStart?: () => void;
-  onPrevious?: () => void;
-  onNext?: () => void;
-  onEnd?: () => void;
   onScrollToEnd?: () => void;
-  onInteractionClick?: (callId: string) => void;
 }
 
-const pendingStates = [CallStates.ACTIVE, CallStates.WAITING];
-const completedStates = [CallStates.DONE, CallStates.ERROR];
+const INITIAL_CONTROL_STATES = {
+  debugger: false,
+  start: false,
+  back: false,
+  goto: false,
+  next: false,
+  end: false,
+};
 
 const TabIcon = styled(StatusIcon)({
   marginLeft: 5,
@@ -51,39 +56,27 @@ const TabStatus = ({ children }: { children: React.ReactChild }) => {
 
 export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
   ({
+    calls,
+    controls,
+    controlStates,
     interactions,
-    isDisabled,
-    hasPrevious,
-    hasNext,
     fileName,
     hasException,
     isPlaying,
-    onStart,
-    onPrevious,
-    onNext,
-    onEnd,
     onScrollToEnd,
-    calls,
-    onInteractionClick,
     endRef,
-    isDebuggingEnabled,
     ...panelProps
   }) => (
     <AddonPanel {...panelProps}>
-      {isDebuggingEnabled && interactions.length > 0 && (
+      {controlStates.debugger && interactions.length > 0 && (
         <Subnav
-          isDisabled={isDisabled}
-          hasPrevious={hasPrevious}
-          hasNext={hasNext}
-          storyFileName={fileName}
+          controls={controls}
+          controlStates={controlStates}
           status={
             // eslint-disable-next-line no-nested-ternary
             isPlaying ? CallStates.ACTIVE : hasException ? CallStates.ERROR : CallStates.DONE
           }
-          onStart={onStart}
-          onPrevious={onPrevious}
-          onNext={onNext}
-          onEnd={onEnd}
+          storyFileName={fileName}
           onScrollToEnd={onScrollToEnd}
         />
       )}
@@ -92,9 +85,8 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
           key={call.id}
           call={call}
           callsById={calls}
-          isDebuggingEnabled={isDebuggingEnabled}
-          isDisabled={isDisabled}
-          onClick={() => onInteractionClick(call.id)}
+          controls={controls}
+          controlStates={controlStates}
         />
       ))}
       <div ref={endRef} />
@@ -115,15 +107,17 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
 );
 
 export const Panel: React.FC<AddonPanelProps> = (props) => {
-  const [isLocked, setLock] = React.useState(false);
-  const [isPlaying, setPlaying] = React.useState(true);
+  const [storyId, setStoryId] = React.useState<StoryId>();
+  const [controlStates, setControlStates] = React.useState<ControlStates>(INITIAL_CONTROL_STATES);
+  const [isPlaying, setPlaying] = React.useState(false);
   const [scrollTarget, setScrollTarget] = React.useState<HTMLElement>();
 
-  const calls = React.useRef<Map<Call['id'], Omit<Call, 'state'>>>(new Map());
-  const setCall = ({ state, ...call }: Call) => calls.current.set(call.id, call);
+  // Calls are tracked in a ref so we don't needlessly rerender.
+  const calls = React.useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map());
+  const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
 
   const [log, setLog] = React.useState<LogItem[]>([]);
-  const interactions = log.map(({ callId, state }) => ({ ...calls.current.get(callId), state }));
+  const interactions = log.map(({ callId, status }) => ({ ...calls.current.get(callId), status }));
 
   const endRef = React.useRef();
   React.useEffect(() => {
@@ -135,41 +129,38 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
     return () => observer.disconnect();
   }, []);
 
-  const emit = useChannel({
-    [EVENTS.CALL]: setCall,
-    [EVENTS.SYNC]: setLog,
-    [EVENTS.LOCK]: setLock,
-    [STORY_RENDER_PHASE_CHANGED]: ({ newPhase }) => {
-      setLock(false);
-      setPlaying(newPhase === 'playing');
+  const emit = useChannel(
+    {
+      [EVENTS.CALL]: setCall,
+      [EVENTS.SYNC]: (payload) => {
+        setControlStates(payload.controlStates);
+        setLog(payload.logItems);
+      },
+      [STORY_RENDER_PHASE_CHANGED]: (event) => {
+        setStoryId(event.storyId);
+        setPlaying(event.newPhase === 'playing');
+      },
     },
-  });
+    []
+  );
+
+  const controls = React.useMemo(
+    () => ({
+      start: () => emit(EVENTS.START, { storyId }),
+      back: () => emit(EVENTS.BACK, { storyId }),
+      goto: (callId: string) => emit(EVENTS.GOTO, { storyId, callId }),
+      next: () => emit(EVENTS.NEXT, { storyId }),
+      end: () => emit(EVENTS.END, { storyId }),
+    }),
+    [storyId]
+  );
 
-  const { storyId } = useStorybookState();
   const storyFilePath = useParameter('fileName', '');
   const [fileName] = storyFilePath.toString().split('/').slice(-1);
   const scrollToTarget = () => scrollTarget?.scrollIntoView({ behavior: 'smooth', block: 'end' });
 
-  const isDebuggingEnabled = FEATURES.interactionsDebugger === true;
-
   const showStatus = log.length > 0 && !isPlaying;
-  const isDebugging = log.some((item) => pendingStates.includes(item.state));
-  const hasPrevious = log.some((item) => completedStates.includes(item.state));
-  const hasNext = log.some((item) => item.state === CallStates.WAITING);
-  const hasActive = log.some((item) => item.state === CallStates.ACTIVE);
-  const hasException = log.some((item) => item.state === CallStates.ERROR);
-  const isDisabled = isDebuggingEnabled
-    ? hasActive || isLocked || (isPlaying && !isDebugging)
-    : true;
-
-  const onStart = React.useCallback(() => emit(EVENTS.START, { storyId }), [storyId]);
-  const onPrevious = React.useCallback(() => emit(EVENTS.BACK, { storyId }), [storyId]);
-  const onNext = React.useCallback(() => emit(EVENTS.NEXT, { storyId }), [storyId]);
-  const onEnd = React.useCallback(() => emit(EVENTS.END, { storyId }), [storyId]);
-  const onInteractionClick = React.useCallback(
-    (callId: string) => emit(EVENTS.GOTO, { storyId, callId }),
-    [storyId]
-  );
+  const hasException = log.some((item) => item.status === CallStates.ERROR);
 
   return (
     <React.Fragment key="interactions">
@@ -178,21 +169,14 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
           (hasException ? <TabIcon status={CallStates.ERROR} /> : ` (${interactions.length})`)}
       </TabStatus>
       <AddonPanelPure
+        calls={calls.current}
+        controls={controls}
+        controlStates={controlStates}
         interactions={interactions}
-        isDisabled={isDisabled}
-        hasPrevious={hasPrevious}
-        hasNext={hasNext}
         fileName={fileName}
         hasException={hasException}
         isPlaying={isPlaying}
-        calls={calls.current}
         endRef={endRef}
-        isDebuggingEnabled={isDebuggingEnabled}
-        onStart={onStart}
-        onPrevious={onPrevious}
-        onNext={onNext}
-        onEnd={onEnd}
-        onInteractionClick={onInteractionClick}
         onScrollToEnd={scrollTarget && scrollToTarget}
         {...props}
       />

addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx

@@ -37,6 +37,19 @@ Demo.play = async ({ args, canvasElement }) => {
   await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
 };
 
+export const FindBy: CSF2Story = (args) => {
+  const [isLoading, setIsLoading] = React.useState(true);
+  React.useEffect(() => {
+    setTimeout(() => setIsLoading(false), 500);
+  }, []);
+  return isLoading ? <div>Loading...</div> : <button type="button">Loaded!</button>;
+};
+FindBy.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await canvas.findByRole('button');
+  await expect(true).toBe(true);
+};
+
 export const WaitFor: CSF2Story = (args) => (
   <button type="button" onClick={() => setTimeout(() => args.onSubmit('clicked'), 100)}>
     Click
@@ -46,6 +59,7 @@ WaitFor.play = async ({ args, canvasElement }) => {
   await userEvent.click(await within(canvasElement).findByText('Click'));
   await waitFor(async () => {
     await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
+    await expect(true).toBe(true);
   });
 };
 
@@ -54,7 +68,6 @@ export const WaitForElementToBeRemoved: CSF2Story = () => {
   React.useEffect(() => {
     setTimeout(() => setIsLoading(false), 1500);
   }, []);
-
   return isLoading ? <div>Loading...</div> : <button type="button">Loaded!</button>;
 };
 WaitForElementToBeRemoved.play = async ({ canvasElement }) => {

addons/interactions/src/components/Interaction/Interaction.stories.tsx

@@ -5,6 +5,7 @@ import { userEvent, within } from '@storybook/testing-library';
 import { getCall } from '../../mocks';
 
 import { Interaction } from './Interaction';
+import SubnavStories from '../Subnav/Subnav.stories';
 
 type Story = ComponentStoryObj<typeof Interaction>;
 
@@ -13,8 +14,8 @@ export default {
   component: Interaction,
   args: {
     callsById: new Map(),
-    isDisabled: false,
-    isDebuggingEnabled: true,
+    controls: SubnavStories.args.controls,
+    controlStates: SubnavStories.args.controlStates,
   },
 } as ComponentMeta<typeof Interaction>;
 
@@ -43,7 +44,7 @@ export const Done: Story = {
 };
 
 export const Disabled: Story = {
-  args: { ...Done.args, isDisabled: true },
+  args: { ...Done.args, controlStates: { ...SubnavStories.args.controlStates, goto: false } },
 };
 
 export const Hovered: Story = {