waitFor in hover story

Author: marcialfps

lib/src/header/Header.stories.tsx

@@ -3,7 +3,6 @@ import DxcHeader from "./Header";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { userEvent, waitFor, within } from "@storybook/testing-library";
-import DxcButton from '../button/Button';
 
 export default {
   title: "Header",
@@ -114,14 +113,10 @@ const RespHeaderFocus = () => (
   </ExampleContainer>
 );
 
-export const ResponsiveHeaderHover = () => (
+const RespHeaderHover = () => (
   <ExampleContainer pseudoState="pseudo-hover">
     <Title title="Responsive hover" theme="light" level={4} />
-    <DxcHeader
-      content={<DxcButton label="Test" />}
-      responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>}
-      underlined
-    />
+    <DxcHeader responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>} underlined />
   </ExampleContainer>
 );
 
@@ -152,12 +147,17 @@ ResponsiveHeaderFocus.play = async ({ canvasElement }) => {
   await userEvent.tab();
 };
 
-// ResponsiveHeaderHover.parameters = {
-//   viewport: {
-//     defaultViewport: "iphonex",
-//   },
-//   chromatic: { viewports: [375] },
-// };
+export const ResponsiveHeaderHover = RespHeaderHover.bind({});
+ResponsiveHeaderHover.parameters = {
+  viewport: {
+    defaultViewport: "iphonex",
+  },
+  chromatic: { viewports: [720] },
+};
+ResponsiveHeaderHover.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await waitFor(() => canvas.findByText("Menu"));
+};
 
 export const ResponsiveHeaderMenu = RespHeaderMenu.bind({});
 ResponsiveHeaderMenu.parameters = {