💚 [#662] Reduce test flakiness

open-formulieren · Mar 19, 2024 · 5105154 · 5105154
1 parent 758b1a9
commit 5105154
Showing 1 changed file with 58 additions and 15 deletions.
diff --git a/src/components/forms/FloatingWidget.stories.js b/src/components/forms/FloatingWidget.stories.js
@@ -1,8 +1,12 @@
 import {expect} from '@storybook/test';
 import {userEvent, waitFor, within} from '@storybook/test';
 
+import {sleep} from 'utils';
+
 import {FloatingWidget, useFloatingWidget} from './FloatingWidget';
 
+const waitForPosition = () => act(async () => {});
+
 export default {
   title: 'Private API / FloatingWidget',
   component: FloatingWidget,
@@ -134,11 +138,13 @@ export const TabNavigateToNestedInput = {
     const reference = canvas.getByTestId('reference');
     await userEvent.click(reference);
     await expect(canvas.getByRole('dialog')).toBeVisible();
-    const widgetInput = canvas.getByTestId('widget-input');
-    await expect(widgetInput).not.toHaveFocus();
+    const widgetInput = await canvas.findByTestId('widget-input');
+    expect(widgetInput).toBeVisible();
+    expect(widgetInput).not.toHaveFocus();
     await userEvent.tab();
     await expect(canvas.getByRole('dialog')).toBeVisible();
-    await expect(widgetInput).toHaveFocus();
+    expect(await canvas.findByTestId('widget-input')).toBeVisible();
+    await waitForFocus(canvas.getByTestId('widget-input'));
   },
 };
 
@@ -161,19 +167,56 @@ export const SubmitWidgetClosesWidget = {
 export const FocusOtherInputClosesWidget = {
   name: 'Focus other input closes widget',
   render: () => <FloatingWidgetExample />,
-  play: async ({canvasElement}) => {
+  play: async ({canvasElement, step}) => {
     const canvas = within(canvasElement);
-    const reference = canvas.getByTestId('reference');
-    await userEvent.click(reference);
-    await expect(canvas.getByRole('dialog')).toBeVisible();
-    await userEvent.tab();
-    await expect(canvas.getByTestId('widget-input')).toHaveFocus();
-    await userEvent.tab();
-    await expect(canvas.getByRole('button')).toHaveFocus();
-    await userEvent.tab();
-    await expect(canvas.getByTestId('other-input')).toHaveFocus();
-    await waitFor(() => {
-      expect(canvas.queryByRole('dialog')).not.toBeInTheDocument();
+
+    await step('open widget', async () => {
+      const reference = canvas.getByTestId('reference');
+      await userEvent.click(reference);
+      await expect(canvas.getByRole('dialog')).toBeVisible();
+      expect(reference).toHaveFocus(); // because it was clicked
+    });
+
+    await step('focus widget input', async () => {
+      const widgetInput = await canvas.findByTestId('widget-input');
+      expect(widgetInput).toBeVisible();
+      console.group('widget input / before');
+      console.log(document.activeElement);
+      console.groupEnd();
+      await userEvent.tab();
+      console.group('widget input / after tab');
+      console.log(document.activeElement);
+      console.groupEnd();
+      await sleep(100);
+      console.group('widget input / after sleep');
+      console.log(document.activeElement);
+      console.groupEnd();
+      await waitForFocus(canvas.getByTestId('widget-input'));
+    });
+
+    await step('focus button', async () => {
+      const button = await canvas.findByRole('button');
+      expect(button).toBeVisible();
+      console.group('button / before');
+      console.log(document.activeElement);
+      console.groupEnd();
+      await userEvent.tab();
+      console.group('button / after tab');
+      console.log(document.activeElement);
+      console.groupEnd();
+      await sleep(100);
+      console.group('button / after sleep');
+      console.log(document.activeElement);
+      console.groupEnd();
+      await waitForFocus(canvas.getByRole('button'));
+    });
+
+    await step('Focus input outside widget', async () => {
+      await userEvent.tab();
+      await waitFor(() => {
+        expect(canvas.queryByRole('dialog')).not.toBeInTheDocument();
+      });
+      await waitForFocus(canvas.getByTestId('other-input'));
     });
   },
 };