💚 [#662] Reduce test flakiness

open-formulieren · Mar 19, 2024 · a554be6 · a554be6
1 parent 758b1a9
commit a554be6
Showing 1 changed file with 34 additions and 15 deletions.
diff --git a/src/components/forms/FloatingWidget.stories.js b/src/components/forms/FloatingWidget.stories.js
@@ -134,11 +134,14 @@ 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();
+    await waitFor(() => {
+      expect(widgetInput).toHaveFocus();
+    });
   },
 };
 
@@ -161,19 +164,35 @@ 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();
+    });
+
+    await step('focus widget input', async () => {
+      const widgetInput = await canvas.findByTestId('widget-input');
+      expect(widgetInput).toBeVisible();
+      await userEvent.tab();
+      expect(widgetInput).toHaveFocus();
+    });
+
+    await step('focus button', async () => {
+      const button = await canvas.findByRole('button');
+      expect(button).toBeVisible();
+      await userEvent.tab();
+      expect(button).toHaveFocus();
+    });
+
+    await step('Focus input outside widget', async () => {
+      await userEvent.tab();
+      await waitFor(() => {
+        expect(canvas.queryByRole('dialog')).not.toBeInTheDocument();
+      });
+      await expect(canvas.getByTestId('other-input')).toHaveFocus();
     });
   },
 };