Addon-interactions: Fix duplicated elements in the panel

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

@@ -155,6 +155,7 @@ export const Interaction = ({
     <RowContainer call={call} pausedAt={pausedAt}>
       <RowHeader isInteractive={isInteractive}>
         <RowLabel
+          aria-label="Interaction step"
           call={call}
           onClick={() => controls.goto(call.id)}
           disabled={isInteractive}

code/addons/interactions/src/components/InteractionsPanel.tsx

@@ -113,7 +113,7 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
                 setIsRerunAnimating={setIsRerunAnimating}
               />
             )}
-          <div>
+          <div aria-label="Interactions list">
             {interactions.map((call) => (
               <Interaction
                 key={call.id}

code/addons/interactions/src/components/StatusBadge.tsx

@@ -35,5 +35,9 @@ export const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
     [CallStates.ACTIVE]: 'Runs',
     [CallStates.WAITING]: 'Runs',
   }[status];
-  return <StyledBadge status={status}>{badgeText}</StyledBadge>;
+  return (
+    <StyledBadge aria-label="Status of the test run" status={status}>
+      {badgeText}
+    </StyledBadge>
+  );
 };

code/addons/interactions/template/stories/basics.stories.ts

@@ -28,6 +28,16 @@ export const Step = {
   },
 };
 
+export const TypeAndClear = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // TODO: seems like userEvent.type + userEvent.clear + userEvent.type is not working for Svelte and Vue2/3. We should probably investigate, might be a bug in userEvent or in our implementation.
+    await fireEvent.input(canvas.getByTestId('value'), { target: { value: 'initial value' } });
+    await fireEvent.input(canvas.getByTestId('value'), { target: { value: '' } });
+    await fireEvent.input(canvas.getByTestId('value'), { target: { value: 'final value' } });
+  },
+};
+
 export const Callback = {
   play: async ({ args, canvasElement, step }) => {
     const canvas = within(canvasElement);

code/e2e-tests/addon-interactions.spec.ts

@@ -34,10 +34,75 @@ test.describe('addon-interactions', () => {
     await expect(interactionsTab).toBeVisible();
 
     const panel = sbPage.panelContent();
+    await expect(panel).toContainText(/Pass/);
     await expect(panel).toContainText(/userEvent.click/);
     await expect(panel).toBeVisible();
 
     const done = await panel.locator('[data-testid=icon-done]');
     await expect(done).toBeVisible();
   });
+
+  test('should step through interactions', async ({ page }) => {
+    // templateName is e.g. 'Vue-CLI (Default JS)'
+    test.skip(
+      // eslint-disable-next-line jest/valid-title
+      /^(lit)/i.test(`${templateName}`),
+      `Skipping ${templateName}, which does not support addon-interactions`
+    );
+
+    const sbPage = new SbPage(page);
+
+    await sbPage.navigateToStory('addons/interactions/basics', 'type-and-clear');
+    await sbPage.viewAddonPanel('Interactions');
+
+    // Test initial state - Interactions have run, count is correct and values are as expected
+    const formInput = await sbPage.previewRoot().locator('#interaction-test-form input');
+    await expect(formInput).toHaveValue('final value');
+
+    const interactionsTab = await page.locator('#tabbutton-interactions');
+    await expect(interactionsTab).toContainText(/(3)/);
+    await expect(interactionsTab).toBeVisible();
+
+    const panel = sbPage.panelContent();
+    const runStatusBadge = await panel.locator('[aria-label="Status of the test run"]');
+    await expect(runStatusBadge).toContainText(/Pass/);
+    await expect(panel).toContainText(/value: "initial value"/);
+    await expect(panel).toContainText(/value: ""/);
+    await expect(panel).toContainText(/value: "final value"/);
+    await expect(panel).toBeVisible();
+
+    // Test interactions debugger - Stepping through works, count is correct and values are as expected
+    const interactionsRow = await panel.locator('[aria-label="Interaction step"]');
+
+    await interactionsRow.first().isVisible();
+
+    await expect(await interactionsRow.count()).toEqual(3);
+    const firstInteraction = interactionsRow.first();
+    await firstInteraction.click();
+
+    await expect(runStatusBadge).toContainText(/Runs/);
+    await expect(formInput).toHaveValue('initial value');
+
+    const goForwardBtn = await panel.locator('[aria-label="Go forward"]');
+    await goForwardBtn.click();
+    await expect(formInput).toHaveValue('');
+    await goForwardBtn.click();
+    await expect(formInput).toHaveValue('final value');
+
+    await expect(runStatusBadge).toContainText(/Pass/);
+
+    // Test rerun state (from addon panel) - Interactions have rerun, count is correct and values are as expected
+    const rerunInteractionButton = await panel.locator('[aria-label="Rerun"]');
+    await rerunInteractionButton.click();
+    await interactionsRow.first().isVisible();
+    await expect(await interactionsRow.count()).toEqual(3);
+    await expect(interactionsTab).toContainText(/(3)/);
+
+    // Test remount state (from toolbar) - Interactions have rerun, count is correct and values are as expected
+    const remountComponentButton = await page.locator('[title="Remount component"]');
+    await remountComponentButton.click();
+    await interactionsRow.first().isVisible();
+    await expect(await interactionsRow.count()).toEqual(3);
+    await expect(interactionsTab).toContainText(/(3)/);
+  });
 });

code/lib/instrumenter/src/instrumenter.test.ts

@@ -34,7 +34,7 @@ global.window.location = { reload: jest.fn() };
 global.window.HTMLElement = HTMLElement;
 
 const storyId = 'kind--story';
-global.window.__STORYBOOK_PREVIEW__ = { urlStore: { selection: { storyId } } };
+global.window.__STORYBOOK_PREVIEW__ = { selectionStore: { selection: { storyId } } };
 
 const setRenderPhase = (newPhase: string) =>
   addons.getChannel().emit(STORY_RENDER_PHASE_CHANGED, { newPhase, storyId });

code/lib/instrumenter/src/instrumenter.ts

@@ -333,7 +333,8 @@ export class Instrumenter {
   // returns the original result.
   track(method: string, fn: Function, args: any[], options: Options) {
     const storyId: StoryId =
-      args?.[0]?.__storyId__ || global.window.__STORYBOOK_PREVIEW__?.urlStore?.selection?.storyId;
+      args?.[0]?.__storyId__ ||
+      global.window.__STORYBOOK_PREVIEW__.selectionStore.selection.storyId;
     const { cursor, ancestors } = this.getState(storyId);
     this.setState(storyId, { cursor: cursor + 1 });
     const id = `${ancestors.slice(-1)[0] || storyId} [${cursor}] ${method}`;

scripts/tasks/sandbox-parts.ts

@@ -69,6 +69,10 @@ export const create: Task['run'] = async (
   }
 
   const mainConfig = await readMainConfig({ cwd });
+  // Enable or disable Storybook features
+  mainConfig.setFieldValue(['features'], {
+    interactionsDebugger: true,
+  });
 
   if (template.expected.builder === '@storybook/builder-vite') setSandboxViteFinal(mainConfig);
   await writeConfig(mainConfig);