@storybook/addon-interactions 7.0.0-alpha.2 → 7.0.0-alpha.20

package/README.md

@@ -41,22 +41,25 @@ Interactions relies on "instrumented" versions of Jest and Testing Library, that
 `@storybook/testing-library` instead of their original package. You can then use these libraries in your `play` function.
 
 ```js
+import { Button } from './Button';
 import { expect } from '@storybook/jest';
 import { within, userEvent } from '@storybook/testing-library';
 
 export default {
   title: 'Button',
+  component: Button,
   argTypes: {
     onClick: { action: true },
   },
 };
 
-export const Demo = {
-  play: async ({ args, canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
-    await expect(args.onClick).toHaveBeenCalled();
-  },
+const Template = (args) => <Button {...args} />;
+
+export const Demo = Template.bind({});
+Demo.play = async ({ args, canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getByRole('button'));
+  await expect(args.onClick).toHaveBeenCalled();
 };
 ```
 

package/dist/cjs/Panel.js

@@ -3,32 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Panel = exports.AddonPanelPure = void 0;
+exports.getInteractions = exports.Panel = void 0;
 
 var _global = _interopRequireDefault(require("global"));
 
 var React = _interopRequireWildcard(require("react"));
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _api = require("@storybook/api");
 
 var _coreEvents = require("@storybook/core-events");
 
-var _components = require("@storybook/components");
-
 var _instrumenter = require("@storybook/instrumenter");
 
-var _theming = require("@storybook/theming");
-
-var _StatusIcon = require("./components/StatusIcon/StatusIcon");
-
-var _Subnav = require("./components/Subnav/Subnav");
+var _InteractionsPanel = require("./components/InteractionsPanel");
 
-var _Interaction = require("./components/Interaction/Interaction");
+var _TabStatus = require("./components/TabStatus");
 
-const _excluded = ["calls", "controls", "controlStates", "interactions", "fileName", "hasException", "isPlaying", "onScrollToEnd", "endRef", "isRerunAnimating", "setIsRerunAnimating"],
-      _excluded2 = ["status"];
+const _excluded = ["status"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -48,81 +39,69 @@ const INITIAL_CONTROL_STATES = {
   next: false,
   end: false
 };
-const TabIcon = (0, _theming.styled)(_StatusIcon.StatusIcon)({
-  marginLeft: 5
-});
 
-const TabStatus = ({
-  children
+const getInteractions = ({
+  log,
+  calls,
+  collapsed,
+  setCollapsed
 }) => {
-  const container = _global.default.document.getElementById('tabbutton-interactions');
-
-  return container && /*#__PURE__*/_reactDom.default.createPortal(children, container);
+  const callsById = new Map();
+  const childCallMap = new Map();
+  return log.filter(({
+    callId,
+    parentId
+  }) => {
+    if (!parentId) return true;
+    childCallMap.set(parentId, (childCallMap.get(parentId) || []).concat(callId));
+    return !collapsed.has(parentId);
+  }).map(({
+    callId,
+    status
+  }) => Object.assign({}, calls.get(callId), {
+    status
+  })).map(call => {
+    var _callsById$get;
+
+    const status = call.status === _instrumenter.CallStates.ERROR && ((_callsById$get = callsById.get(call.parentId)) === null || _callsById$get === void 0 ? void 0 : _callsById$get.status) === _instrumenter.CallStates.ACTIVE ? _instrumenter.CallStates.ACTIVE : call.status;
+    callsById.set(call.id, Object.assign({}, call, {
+      status
+    }));
+    return Object.assign({}, call, {
+      status,
+      childCallIds: childCallMap.get(call.id),
+      isCollapsed: collapsed.has(call.id),
+      toggleCollapsed: () => setCollapsed(ids => {
+        if (ids.has(call.id)) ids.delete(call.id);else ids.add(call.id);
+        return new Set(ids);
+      })
+    });
+  });
 };
 
-const AddonPanelPure = /*#__PURE__*/React.memo(_ref => {
-  let {
-    calls,
-    controls,
-    controlStates,
-    interactions,
-    fileName,
-    hasException,
-    isPlaying,
-    onScrollToEnd,
-    endRef,
-    isRerunAnimating,
-    setIsRerunAnimating
-  } = _ref,
-      panelProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(_components.AddonPanel, panelProps, controlStates.debugger && interactions.length > 0 && /*#__PURE__*/React.createElement(_Subnav.Subnav, {
-    controls: controls,
-    controlStates: controlStates,
-    status: // eslint-disable-next-line no-nested-ternary
-    isPlaying ? _instrumenter.CallStates.ACTIVE : hasException ? _instrumenter.CallStates.ERROR : _instrumenter.CallStates.DONE,
-    storyFileName: fileName,
-    onScrollToEnd: onScrollToEnd,
-    isRerunAnimating: isRerunAnimating,
-    setIsRerunAnimating: setIsRerunAnimating
-  }), interactions.map(call => /*#__PURE__*/React.createElement(_Interaction.Interaction, {
-    key: call.id,
-    call: call,
-    callsById: calls,
-    controls: controls,
-    controlStates: controlStates
-  })), /*#__PURE__*/React.createElement("div", {
-    ref: endRef
-  }), !isPlaying && interactions.length === 0 && /*#__PURE__*/React.createElement(_components.Placeholder, null, "No interactions found", /*#__PURE__*/React.createElement(_components.Link, {
-    href: "https://github.com/storybookjs/storybook/blob/next/addons/interactions/README.md",
-    target: "_blank",
-    withArrow: true
-  }, "Learn how to add interactions to your story")));
-});
-exports.AddonPanelPure = AddonPanelPure;
+exports.getInteractions = getInteractions;
 
 const Panel = props => {
   const [storyId, setStoryId] = React.useState();
   const [controlStates, setControlStates] = React.useState(INITIAL_CONTROL_STATES);
+  const [pausedAt, setPausedAt] = React.useState();
+  const [isErrored, setErrored] = React.useState(false);
   const [isPlaying, setPlaying] = React.useState(false);
   const [isRerunAnimating, setIsRerunAnimating] = React.useState(false);
-  const [scrollTarget, setScrollTarget] = React.useState(); // Calls are tracked in a ref so we don't needlessly rerender.
+  const [scrollTarget, setScrollTarget] = React.useState();
+  const [collapsed, setCollapsed] = React.useState(new Set());
+  const [caughtException, setCaughtException] = React.useState();
+  const [interactions, setInteractions] = React.useState([]);
+  const [interactionsCount, setInteractionsCount] = React.useState(); // Calls are tracked in a ref so we don't needlessly rerender.
 
   const calls = React.useRef(new Map());
 
-  const setCall = _ref2 => {
-    let call = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const setCall = _ref => {
+    let call = _objectWithoutPropertiesLoose(_ref, _excluded);
 
     return calls.current.set(call.id, call);
   };
 
-  const [log, setLog] = React.useState([]);
-  const interactions = log.map(({
-    callId,
-    status
-  }) => Object.assign({}, calls.current.get(callId), {
-    status
-  }));
   const endRef = React.useRef();
   React.useEffect(() => {
     let observer;
@@ -144,13 +123,36 @@ const Panel = props => {
     [_instrumenter.EVENTS.CALL]: setCall,
     [_instrumenter.EVENTS.SYNC]: payload => {
       setControlStates(payload.controlStates);
-      setLog(payload.logItems);
+      setPausedAt(payload.pausedAt);
+      setInteractions(getInteractions({
+        log: payload.logItems,
+        calls: calls.current,
+        collapsed,
+        setCollapsed
+      }));
     },
     [_coreEvents.STORY_RENDER_PHASE_CHANGED]: event => {
       setStoryId(event.storyId);
       setPlaying(event.newPhase === 'playing');
+      setPausedAt(undefined);
+
+      if (event.newPhase === 'rendering') {
+        setErrored(false);
+        setCaughtException(undefined);
+      }
+    },
+    [_coreEvents.STORY_THREW_EXCEPTION]: () => {
+      setErrored(true);
+    },
+    [_coreEvents.PLAY_FUNCTION_THREW_EXCEPTION]: e => {
+      console.log('PLAY_FUNCTION_THREW_EXCEPTION');
+      if ((e === null || e === void 0 ? void 0 : e.message) !== _coreEvents.IGNORED_EXCEPTION.message) setCaughtException(e);else setCaughtException(undefined);
     }
-  }, []);
+  }, [collapsed]);
+  React.useEffect(() => {
+    if (isPlaying || isRerunAnimating) return;
+    setInteractionsCount(interactions.length);
+  }, [interactions, isPlaying, isRerunAnimating]);
   const controls = React.useMemo(() => ({
     start: () => emit(_instrumenter.EVENTS.START, {
       storyId
@@ -183,20 +185,29 @@ const Panel = props => {
     block: 'end'
   });
 
-  const showStatus = log.length > 0 && !isPlaying;
-  const hasException = log.some(item => item.status === _instrumenter.CallStates.ERROR);
+  const showStatus = interactionsCount > 0 || !!caughtException || isRerunAnimating;
+  const hasException = !!caughtException || interactions.some(v => v.status === _instrumenter.CallStates.ERROR);
+
+  if (isErrored) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: "interactions"
+    });
+  }
+
   return /*#__PURE__*/React.createElement(React.Fragment, {
     key: "interactions"
-  }, /*#__PURE__*/React.createElement(TabStatus, null, showStatus && (hasException ? /*#__PURE__*/React.createElement(TabIcon, {
+  }, /*#__PURE__*/React.createElement(_TabStatus.TabStatus, null, showStatus && (hasException ? /*#__PURE__*/React.createElement(_TabStatus.TabIcon, {
     status: _instrumenter.CallStates.ERROR
-  }) : ` (${interactions.length})`)), /*#__PURE__*/React.createElement(AddonPanelPure, _extends({
+  }) : ` (${interactionsCount})`)), /*#__PURE__*/React.createElement(_InteractionsPanel.InteractionsPanel, _extends({
     calls: calls.current,
     controls: controls,
     controlStates: controlStates,
     interactions: interactions,
     fileName: fileName,
     hasException: hasException,
+    caughtException: caughtException,
     isPlaying: isPlaying,
+    pausedAt: pausedAt,
     endRef: endRef,
     onScrollToEnd: scrollTarget && scrollToTarget,
     isRerunAnimating: isRerunAnimating,

package/dist/cjs/components/AccountForm/addon-interactions.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithLoaders = exports.WaitForElementToBeRemoved = exports.WaitFor = exports.VerificationSuccess = exports.VerificationPasswordMismatch = exports.VerificationPassword = exports.Verification = exports.StandardPasswordFailed = exports.StandardFailHover = exports.StandardEmailSuccess = exports.StandardEmailFilled = exports.StandardEmailFailed = exports.Standard = exports.FindBy = exports.Demo = void 0;
+exports.default = exports.WithLoaders = exports.WaitForElementToBeRemoved = exports.WaitFor = exports.VerificationSuccess = exports.VerificationPasswordMismatch = exports.VerificationPassword = exports.Verification = exports.StandardPasswordFailed = exports.StandardFailHover = exports.StandardEmailSuccess = exports.StandardEmailFilled = exports.StandardEmailFailed = exports.Standard = exports.FindBy = exports.Exception = exports.Demo = void 0;
 
 var _jest = require("@storybook/jest");
 
@@ -46,6 +46,26 @@ Demo.play = async ({
 }) => {
   await _testingLibrary.userEvent.click((0, _testingLibrary.within)(canvasElement).getByRole('button'));
   await (0, _jest.expect)(args.onSubmit).toHaveBeenCalledWith(_jest.expect.stringMatching(/([A-Z])\w+/gi));
+  await (0, _jest.expect)([{
+    name: 'John',
+    age: 42
+  }]).toEqual(_jest.expect.arrayContaining([_jest.expect.objectContaining({
+    name: 'John'
+  }), _jest.expect.objectContaining({
+    age: 42
+  })]));
+};
+
+const Exception = Demo.bind({});
+exports.Exception = Exception;
+
+Exception.play = () => Demo.play(undefined); // deepscan-disable-line
+
+
+Exception.parameters = {
+  chromatic: {
+    disableSnapshot: true
+  }
 };
 
 const FindBy = args => {
@@ -110,7 +130,7 @@ WaitForElementToBeRemoved.play = async ({
     timeout: 2000
   });
   const button = await canvas.findByText('Loaded!');
-  await (0, _jest.expect)(button).not.toBeNull();
+  await (0, _jest.expect)(button).toBeInTheDocument();
 };
 
 const WithLoaders = (args, {
@@ -179,7 +199,7 @@ const StandardEmailFailed = Object.assign({}, Standard, {
       name: /create account/i
     }));
     await canvas.findByText('Please enter a correctly formatted email address');
-    (0, _jest.expect)(args.onSubmit).not.toHaveBeenCalled();
+    await (0, _jest.expect)(args.onSubmit).not.toHaveBeenCalled();
   }
 });
 exports.StandardEmailFailed = StandardEmailFailed;

package/dist/cjs/components/{Interaction/Interaction.js → Interaction.js}

@@ -3,21 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Interaction = void 0;
+exports.StyledIconButton = exports.Interaction = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
+var _components = require("@storybook/components");
+
 var _instrumenter = require("@storybook/instrumenter");
 
 var _theming = require("@storybook/theming");
 
 var _polished = require("polished");
 
-var _MatcherResult = require("../MatcherResult");
+var _MatcherResult = require("./MatcherResult");
 
-var _MethodCall = require("../MethodCall");
+var _MethodCall = require("./MethodCall");
 
-var _StatusIcon = require("../StatusIcon/StatusIcon");
+var _StatusIcon = require("./StatusIcon");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -31,11 +33,12 @@ const MethodCallWrapper = _theming.styled.div(() => ({
 }));
 
 const RowContainer = (0, _theming.styled)('div', {
-  shouldForwardProp: prop => !['call'].includes(prop)
+  shouldForwardProp: prop => !['call', 'pausedAt'].includes(prop.toString())
 })(({
   theme,
   call
 }) => Object.assign({
+  position: 'relative',
   display: 'flex',
   flexDirection: 'column',
   borderBottom: `1px solid ${theme.appBorderColor}`,
@@ -43,14 +46,50 @@ const RowContainer = (0, _theming.styled)('div', {
   fontSize: 13
 }, call.status === _instrumenter.CallStates.ERROR && {
   backgroundColor: theme.base === 'dark' ? (0, _polished.transparentize)(0.93, theme.color.negative) : theme.background.warning
+}, {
+  paddingLeft: call.parentId ? 20 : 0
+}), ({
+  theme,
+  call,
+  pausedAt
+}) => pausedAt === call.id && {
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    top: -5,
+    zIndex: 1,
+    borderTop: '4.5px solid transparent',
+    borderLeft: `7px solid ${theme.color.warning}`,
+    borderBottom: '4.5px solid transparent'
+  },
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    top: -1,
+    zIndex: 1,
+    width: '100%',
+    borderTop: `1.5px solid ${theme.color.warning}`
+  }
+});
+
+const RowHeader = _theming.styled.div(({
+  theme,
+  disabled
+}) => ({
+  display: 'flex',
+  '&:hover': disabled ? {} : {
+    background: theme.background.hoverable
+  }
 }));
+
 const RowLabel = (0, _theming.styled)('button', {
-  shouldForwardProp: prop => !['call'].includes(prop)
+  shouldForwardProp: prop => !['call'].includes(prop.toString())
 })(({
   theme,
   disabled,
   call
 }) => ({
+  flex: 1,
   display: 'grid',
   background: 'none',
   border: 0,
@@ -61,9 +100,6 @@ const RowLabel = (0, _theming.styled)('button', {
   padding: '8px 15px',
   textAlign: 'start',
   cursor: disabled || call.status === _instrumenter.CallStates.ERROR ? 'default' : 'pointer',
-  '&:hover': disabled ? {} : {
-    background: theme.background.hoverable
-  },
   '&:focus-visible': {
     outline: 0,
     boxShadow: `inset 3px 0 0 0 ${call.status === _instrumenter.CallStates.ERROR ? theme.color.warning : theme.color.secondary}`,
@@ -73,25 +109,69 @@ const RowLabel = (0, _theming.styled)('button', {
     opacity: call.status === _instrumenter.CallStates.WAITING ? 0.5 : 1
   }
 }));
-const RowMessage = (0, _theming.styled)('pre')({
-  margin: 0,
-  padding: '8px 10px 8px 30px',
-  fontSize: _theming.typography.size.s1
+
+const RowActions = _theming.styled.div({
+  padding: 6
 });
 
+const StyledIconButton = (0, _theming.styled)(_components.IconButton)(({
+  theme
+}) => ({
+  color: theme.color.mediumdark,
+  margin: '0 3px'
+}));
+exports.StyledIconButton = StyledIconButton;
+const Note = (0, _theming.styled)(_components.TooltipNote)(({
+  theme
+}) => ({
+  fontFamily: theme.typography.fonts.base
+}));
+const RowMessage = (0, _theming.styled)('div')(({
+  theme
+}) => ({
+  padding: '8px 10px 8px 36px',
+  fontSize: _theming.typography.size.s1,
+  color: theme.color.defaultText,
+  pre: {
+    margin: 0,
+    padding: 0
+  }
+}));
+
+const Exception = ({
+  exception
+}) => {
+  if (exception.message.startsWith('expect(')) {
+    return /*#__PURE__*/React.createElement(_MatcherResult.MatcherResult, exception);
+  }
+
+  const paragraphs = exception.message.split('\n\n');
+  const more = paragraphs.length > 1;
+  return /*#__PURE__*/React.createElement(RowMessage, null, /*#__PURE__*/React.createElement("pre", null, paragraphs[0]), more && /*#__PURE__*/React.createElement("p", null, "See the full stack trace in the browser console."));
+};
+
 const Interaction = ({
   call,
   callsById,
   controls,
-  controlStates
+  controlStates,
+  childCallIds,
+  isCollapsed,
+  toggleCollapsed,
+  pausedAt
 }) => {
+  var _call$exception;
+
   const [isHovered, setIsHovered] = React.useState(false);
   return /*#__PURE__*/React.createElement(RowContainer, {
-    call: call
+    call: call,
+    pausedAt: pausedAt
+  }, /*#__PURE__*/React.createElement(RowHeader, {
+    disabled: !controlStates.goto || !call.interceptable || !!call.parentId
   }, /*#__PURE__*/React.createElement(RowLabel, {
     call: call,
     onClick: () => controls.goto(call.id),
-    disabled: !controlStates.goto,
+    disabled: !controlStates.goto || !call.interceptable || !!call.parentId,
     onMouseEnter: () => controlStates.goto && setIsHovered(true),
     onMouseLeave: () => controlStates.goto && setIsHovered(false)
   }, /*#__PURE__*/React.createElement(_StatusIcon.StatusIcon, {
@@ -104,7 +184,19 @@ const Interaction = ({
   }, /*#__PURE__*/React.createElement(_MethodCall.MethodCall, {
     call: call,
     callsById: callsById
-  }))), call.status === _instrumenter.CallStates.ERROR && call.exception && (call.exception.message.startsWith('expect(') ? /*#__PURE__*/React.createElement(_MatcherResult.MatcherResult, call.exception) : /*#__PURE__*/React.createElement(RowMessage, null, call.exception.message)));
+  }))), /*#__PURE__*/React.createElement(RowActions, null, (childCallIds === null || childCallIds === void 0 ? void 0 : childCallIds.length) > 0 && /*#__PURE__*/React.createElement(_components.WithTooltip, {
+    hasChrome: false,
+    tooltip: /*#__PURE__*/React.createElement(Note, {
+      note: `${isCollapsed ? 'Show' : 'Hide'} interactions (${childCallIds.length})`
+    })
+  }, /*#__PURE__*/React.createElement(StyledIconButton, {
+    containsIcon: true,
+    onClick: toggleCollapsed
+  }, /*#__PURE__*/React.createElement(_components.Icons, {
+    icon: "listunordered"
+  }))))), call.status === _instrumenter.CallStates.ERROR && ((_call$exception = call.exception) === null || _call$exception === void 0 ? void 0 : _call$exception.callId) === call.id && /*#__PURE__*/React.createElement(Exception, {
+    exception: call.exception
+  }));
 };
 
 exports.Interaction = Interaction;

package/dist/cjs/components/{Interaction/Interaction.stories.js → Interaction.stories.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Waiting = exports.Hovered = exports.Failed = exports.Done = exports.Disabled = exports.Active = void 0;
+exports.default = exports.WithParent = exports.Waiting = exports.Hovered = exports.Failed = exports.Done = exports.Disabled = exports.Active = void 0;
 
 var _jest = require("@storybook/jest");
 
@@ -11,11 +11,11 @@ var _instrumenter = require("@storybook/instrumenter");
 
 var _testingLibrary = require("@storybook/testing-library");
 
-var _mocks = require("../../mocks");
+var _mocks = require("../mocks");
 
 var _Interaction = require("./Interaction");
 
-var _Subnav = _interopRequireDefault(require("../Subnav/Subnav.stories"));
+var _Subnav = _interopRequireDefault(require("./Subnav.stories"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -23,7 +23,7 @@ var _default = {
   title: 'Addons/Interactions/Interaction',
   component: _Interaction.Interaction,
   args: {
-    callsById: new Map(),
+    callsById: new Map((0, _mocks.getCalls)(_instrumenter.CallStates.DONE).map(call => [call.id, call])),
     controls: _Subnav.default.args.controls,
     controlStates: _Subnav.default.args.controlStates
   }
@@ -31,28 +31,36 @@ var _default = {
 exports.default = _default;
 const Active = {
   args: {
-    call: (0, _mocks.getCall)(_instrumenter.CallStates.ACTIVE)
+    call: (0, _mocks.getCalls)(_instrumenter.CallStates.ACTIVE).slice(-1)[0]
   }
 };
 exports.Active = Active;
 const Waiting = {
   args: {
-    call: (0, _mocks.getCall)(_instrumenter.CallStates.WAITING)
+    call: (0, _mocks.getCalls)(_instrumenter.CallStates.WAITING).slice(-1)[0]
   }
 };
 exports.Waiting = Waiting;
 const Failed = {
   args: {
-    call: (0, _mocks.getCall)(_instrumenter.CallStates.ERROR)
+    call: (0, _mocks.getCalls)(_instrumenter.CallStates.ERROR).slice(-1)[0]
   }
 };
 exports.Failed = Failed;
 const Done = {
   args: {
-    call: (0, _mocks.getCall)(_instrumenter.CallStates.DONE)
+    call: (0, _mocks.getCalls)(_instrumenter.CallStates.DONE).slice(-1)[0]
   }
 };
 exports.Done = Done;
+const WithParent = {
+  args: {
+    call: Object.assign({}, (0, _mocks.getCalls)(_instrumenter.CallStates.DONE).slice(-1)[0], {
+      parentId: 'parent-id'
+    })
+  }
+};
+exports.WithParent = WithParent;
 const Disabled = {
   args: Object.assign({}, Done.args, {
     controlStates: Object.assign({}, _Subnav.default.args.controlStates, {
@@ -71,7 +79,7 @@ const Hovered = Object.assign({}, Done, {
   }) => {
     const canvas = (0, _testingLibrary.within)(canvasElement);
     await _testingLibrary.userEvent.hover(canvas.getByRole('button'));
-    await (0, _jest.expect)(canvas.getByTestId('icon-active')).not.toBeNull();
+    await (0, _jest.expect)(canvas.getByTestId('icon-active')).toBeInTheDocument();
   }
 });
 exports.Hovered = Hovered;