Add VRT story highlighting the bug/issue

elastic · Oct 31, 2024 · 76ba1b0 · 76ba1b0
1 parent 54bf470
commit 76ba1b0
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 1 deletion.
diff --git a/...me_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png b/...me_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png
diff --git a/...ome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png b/...ome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png
diff --git a/packages/eui/.storybook/test.ts b/packages/eui/.storybook/test.ts
@@ -40,6 +40,12 @@ const customWithin = (canvasElement: HTMLElement) => {
       await waitFor(() =>
         expect(canvasElement.querySelector('[data-popover-open]')).toBeVisible()
       ),
+    waitForEuiPopoverHidden: async () =>
+      await waitFor(() =>
+        expect(
+          canvasElement.querySelector('[data-popover-panel]')
+        ).not.toBeInTheDocument()
+      ),
   };
 };
 

diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import moment from 'moment';
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect } from '@storybook/test';
+import { expect, waitFor, fireEvent } from '@storybook/test';
 import { within } from '../../../../.storybook/test';
 import { LOKI_SELECTORS } from '../../../../.storybook/loki';
 import { enableFunctionToggleControls } from '../../../../.storybook/utils';
@@ -123,3 +123,49 @@ function CustomPanel({ applyTime }: { applyTime?: ApplyTime }) {
     <EuiLink onClick={applyMyCustomTime}>Entire dataset timerange</EuiLink>
   );
 }
+
+/**
+ * VRT only
+ */
+export const OverflowingChildren: Story = {
+  tags: ['vrt-only'],
+  args: {
+    start: 'Dec 31, 1999',
+    end: 'Jan 1, 2000',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    step('Switch to longer absolute text', async () => {
+      await waitFor(async () => {
+        const startButton = canvas.getByTestSubject(
+          'superDatePickerstartDatePopoverButton'
+        );
+        const endButton = canvas.getByTestSubject(
+          'superDatePickerendDatePopoverButton'
+        );
+        const getAbsoluteTab = () =>
+          canvas.getByTestSubject('superDatePickerAbsoluteTab');
+
+        await fireEvent.click(startButton);
+        await canvas.waitForEuiPopoverVisible();
+        await fireEvent.click(getAbsoluteTab());
+        await fireEvent.click(startButton);
+        await canvas.waitForEuiPopoverHidden();
+
+        await fireEvent.click(endButton);
+        await canvas.waitForEuiPopoverVisible();
+        await fireEvent.click(getAbsoluteTab());
+        await fireEvent.click(endButton);
+        await canvas.waitForEuiPopoverHidden();
+      });
+    });
+  },
+};