Interactions: Show exceptions by non-instrumented code in panel

addons/interactions/src/Panel.test.ts

@@ -0,0 +1,265 @@
+import { Call, CallStates, LogItem } from '@storybook/instrumenter';
+import { getInteractions } from './Panel';
+
+describe('Panel', () => {
+  describe('getInteractions', () => {
+    const log: LogItem[] = [
+      {
+        callId: 'story--id [4] findByText',
+        status: CallStates.DONE,
+      },
+      {
+        callId: 'story--id [5] click',
+        status: CallStates.DONE,
+      },
+      {
+        callId: 'story--id [6] waitFor',
+        status: CallStates.DONE,
+      },
+      {
+        callId: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
+        parentId: 'story--id [6] waitFor',
+        status: CallStates.DONE,
+      },
+    ];
+    const calls = new Map<Call['id'], Call>(
+      [
+        {
+          id: 'story--id [0] action',
+          storyId: 'story--id',
+          cursor: 0,
+          path: [],
+          method: 'action',
+          args: [{ __function__: { name: 'onSubmit' } }],
+          interceptable: false,
+          retain: true,
+        },
+        {
+          id: 'story--id [1] action',
+          storyId: 'story--id',
+          cursor: 1,
+          path: [],
+          method: 'action',
+          args: [{ __function__: { name: 'onTransactionStart' } }],
+          interceptable: false,
+          retain: true,
+        },
+        {
+          id: 'story--id [2] action',
+          storyId: 'story--id',
+          cursor: 2,
+          path: [],
+          method: 'action',
+          args: [{ __function__: { name: 'onTransactionEnd' } }],
+          interceptable: false,
+          retain: true,
+        },
+        {
+          id: 'story--id [3] within',
+          storyId: 'story--id',
+          cursor: 3,
+          path: [],
+          method: 'within',
+          args: [{ __element__: { localName: 'div', id: 'root', innerText: 'Click' } }],
+          interceptable: false,
+          retain: false,
+        },
+        {
+          id: 'story--id [4] findByText',
+          storyId: 'story--id',
+          cursor: 4,
+          path: [{ __callId__: 'story--id [3] within' }],
+          method: 'findByText',
+          args: ['Click'],
+          interceptable: true,
+          retain: false,
+        },
+        {
+          id: 'story--id [5] click',
+          storyId: 'story--id',
+          cursor: 5,
+          path: ['userEvent'],
+          method: 'click',
+          args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
+          interceptable: true,
+          retain: false,
+        },
+        {
+          id: 'story--id [6] waitFor [0] expect',
+          parentId: 'story--id [6] waitFor',
+          storyId: 'story--id',
+          cursor: 0,
+          path: [],
+          method: 'expect',
+          args: [{ __callId__: 'story--id [0] action', retain: true }],
+          interceptable: true,
+          retain: false,
+        },
+        {
+          id: 'story--id [6] waitFor [1] stringMatching',
+          parentId: 'story--id [6] waitFor',
+          storyId: 'story--id',
+          cursor: 1,
+          path: ['expect'],
+          method: 'stringMatching',
+          args: [{ __regexp__: { flags: 'gi', source: '([A-Z])\\w+' } }],
+          interceptable: false,
+          retain: false,
+        },
+        {
+          id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
+          parentId: 'story--id [6] waitFor',
+          storyId: 'story--id',
+          cursor: 2,
+          path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
+          method: 'toHaveBeenCalledWith',
+          args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
+          interceptable: true,
+          retain: false,
+        },
+        {
+          id: 'story--id [6] waitFor',
+          storyId: 'story--id',
+          cursor: 6,
+          path: [],
+          method: 'waitFor',
+          args: [{ __function__: { name: '' } }],
+          interceptable: true,
+          retain: false,
+        },
+      ].map((v) => [v.id, v])
+    );
+    const collapsed = new Set<Call['id']>();
+    const setCollapsed = () => {};
+
+    it('returns list of interactions', () => {
+      expect(getInteractions({ log, calls, collapsed, setCollapsed })).toEqual([
+        {
+          ...calls.get('story--id [4] findByText'),
+          status: CallStates.DONE,
+          childCallIds: undefined,
+          isCollapsed: false,
+          toggleCollapsed: expect.any(Function),
+        },
+        {
+          ...calls.get('story--id [5] click'),
+          status: CallStates.DONE,
+          childCallIds: undefined,
+          isCollapsed: false,
+          toggleCollapsed: expect.any(Function),
+        },
+        {
+          ...calls.get('story--id [6] waitFor'),
+          status: CallStates.DONE,
+          childCallIds: ['story--id [6] waitFor [2] toHaveBeenCalledWith'],
+          isCollapsed: false,
+          toggleCollapsed: expect.any(Function),
+        },
+        {
+          ...calls.get('story--id [6] waitFor [2] toHaveBeenCalledWith'),
+          status: CallStates.DONE,
+          childCallIds: undefined,
+          isCollapsed: false,
+          toggleCollapsed: expect.any(Function),
+        },
+      ]);
+    });
+
+    it('omits calls for which the parent is collapsed', () => {
+      const withCollapsed = new Set<Call['id']>(['story--id [6] waitFor']);
+
+      expect(getInteractions({ log, calls, collapsed: withCollapsed, setCollapsed })).toEqual([
+        expect.objectContaining({
+          ...calls.get('story--id [4] findByText'),
+          childCallIds: undefined,
+          isCollapsed: false,
+        }),
+        expect.objectContaining({
+          ...calls.get('story--id [5] click'),
+          childCallIds: undefined,
+          isCollapsed: false,
+        }),
+        expect.objectContaining({
+          ...calls.get('story--id [6] waitFor'),
+          childCallIds: ['story--id [6] waitFor [2] toHaveBeenCalledWith'],
+          isCollapsed: true,
+        }),
+      ]);
+    });
+
+    it('uses status from log', () => {
+      const withError = log.slice(0, 3).concat({ ...log[3], status: CallStates.ERROR });
+
+      expect(getInteractions({ log: withError, calls, collapsed, setCollapsed })).toEqual([
+        expect.objectContaining({
+          id: 'story--id [4] findByText',
+          status: CallStates.DONE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [5] click',
+          status: CallStates.DONE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [6] waitFor',
+          status: CallStates.DONE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
+          status: CallStates.ERROR,
+        }),
+      ]);
+    });
+
+    it('keeps status active for errored child calls while parent is active', () => {
+      const withActiveError = log.slice(0, 2).concat([
+        { ...log[2], status: CallStates.ACTIVE },
+        { ...log[3], status: CallStates.ERROR },
+      ]);
+
+      expect(getInteractions({ log: withActiveError, calls, collapsed, setCollapsed })).toEqual([
+        expect.objectContaining({
+          id: 'story--id [4] findByText',
+          status: CallStates.DONE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [5] click',
+          status: CallStates.DONE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [6] waitFor',
+          status: CallStates.ACTIVE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
+          status: CallStates.ACTIVE, // not ERROR
+        }),
+      ]);
+    });
+
+    it('does not override child status other than error for active parent', () => {
+      const withActiveWaiting = log.slice(0, 2).concat([
+        { ...log[2], status: CallStates.ACTIVE },
+        { ...log[3], status: CallStates.WAITING },
+      ]);
+
+      expect(getInteractions({ log: withActiveWaiting, calls, collapsed, setCollapsed })).toEqual([
+        expect.objectContaining({
+          id: 'story--id [4] findByText',
+          status: CallStates.DONE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [5] click',
+          status: CallStates.DONE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [6] waitFor',
+          status: CallStates.ACTIVE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
+          status: CallStates.WAITING,
+        }),
+      ]);
+    });
+  });
+});