Merge pull request #22 from maykinmedia/issue/flaky-tests

✅ - test: attempt to make Storybook tests less flaky
maykinmedia · Feb 6, 2024 · 9fbdd5e · 9fbdd5e
2 parents 1236ea1 + 8e6d67f
commit 9fbdd5e
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 40 deletions.
diff --git a/src/components/dropdown/dropdown.stories.tsx b/src/components/dropdown/dropdown.stories.tsx
@@ -20,27 +20,38 @@ const meta = {
   ],
   parameters: {
     layout: "fullscreen",
+    lastButtonText: "Uitloggen",
   },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, parameters }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByText("Click me!");
 
     // Click opens, escape closes.
     await userEvent.click(button, { delay: 10 });
-    await expect(canvas.getByRole("dialog")).toBeVisible();
+    await expect(await canvas.findByRole("dialog")).toBeVisible();
     userEvent.keyboard("{Escape}");
     await waitFor(() => expect(canvas.queryByRole("dialog")).toBeNull());
     await userEvent.click(button, { delay: 10 });
-    await expect(canvas.getByRole("dialog")).toBeVisible();
 
-    // Tab focuses items.
-    await userEvent.tab({ delay: 10 });
-    await userEvent.tab({ delay: 10 });
-    await userEvent.tab({ delay: 10 });
-
-    expect(canvas.getAllByRole("dialog").findLast((v) => v)).toContainElement(
-      document.activeElement as HTMLElement,
-    );
+    await waitFor(async () => {
+      const _list = document.activeElement?.closest(
+        '[role="dialog"]',
+      ) as HTMLElement;
+      const buttons = await within(_list).findAllByRole("button");
+      const lastButton = buttons[buttons.length - 1];
+      const lastButtonActive = document.activeElement === lastButton;
+
+      if (!lastButtonActive) {
+        await userEvent.tab({ delay: 10 });
+        throw new Error("Last button not selected");
+      }
+    });
+
+    if (parameters.lastButtonText) {
+      await expect(document.activeElement?.textContent).toBe(
+        parameters.lastButtonText,
+      );
+    }
   },
 } satisfies Meta<typeof Dropdown>;
 
@@ -105,51 +116,73 @@ export const ActivateOnHover: Story = {
     ),
     children: DEFAULT_CHILDREN,
   },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, parameters }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByText("Hover me!");
 
     // Click opens, escape closes.
     await userEvent.hover(button, { delay: 10 });
-    await expect(canvas.getByRole("dialog")).toBeVisible();
-    userEvent.keyboard("{Escape}");
+    await waitFor(() => canvas.findByRole("dialog"), { timeout: 300 });
+    await userEvent.keyboard("{Escape}");
     await waitFor(() => expect(canvas.queryByRole("dialog")).toBeNull());
     await userEvent.hover(button, { delay: 10 });
-    await expect(canvas.getByRole("dialog")).toBeVisible();
-
-    // Tab focuses items.
-    await userEvent.tab({ delay: 10 });
-    await userEvent.tab({ delay: 10 });
-    await userEvent.tab({ delay: 10 });
 
-    expect(canvas.getByRole("dialog")).toContainElement(
-      document.activeElement as HTMLElement,
-    );
+    await waitFor(async () => {
+      const _list = document.activeElement?.closest(
+        '[role="dialog"]',
+      ) as HTMLElement;
+      const buttons = await within(_list).findAllByRole("button");
+      const lastButton = buttons[buttons.length - 1];
+      const lastButtonActive = document.activeElement === lastButton;
+
+      if (!lastButtonActive) {
+        await userEvent.tab({ delay: 10 });
+        throw new Error("Last button not selected");
+      }
+    });
+
+    if (parameters.lastButtonText) {
+      await expect(document.activeElement?.textContent).toBe(
+        parameters.lastButtonText,
+      );
+    }
   },
 };
 
 export const ActivateOnFocus: Story = {
   ...ActivateOnHover,
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, parameters }) => {
     const canvas = within(canvasElement);
+    const button = await canvas.getByText("Hover me!");
 
     // Click opens, escape closes.
     await userEvent.tab({ delay: 10 });
-    await expect(canvas.getByRole("dialog")).toBeVisible();
-    userEvent.keyboard("{Escape}");
+    button.focus();
+    await waitFor(() => canvas.findByRole("dialog"), { timeout: 300 });
+    await userEvent.keyboard("{Escape}");
     await waitFor(() => expect(canvas.queryByRole("dialog")).toBeNull());
     await userEvent.tab({ shift: true, delay: 10 });
     await userEvent.tab({ delay: 10 });
-    await expect(canvas.getByRole("dialog")).toBeVisible();
-
-    // Tab focuses items.
-    await userEvent.tab({ delay: 10 });
-    await userEvent.tab({ delay: 10 });
-    await userEvent.tab({ delay: 10 });
 
-    expect(canvas.getByRole("dialog")).toContainElement(
-      document.activeElement as HTMLElement,
-    );
+    await waitFor(async () => {
+      const _list = document.activeElement?.closest(
+        '[role="dialog"]',
+      ) as HTMLElement;
+      const buttons = await within(_list).findAllByRole("button");
+      const lastButton = buttons[buttons.length - 1];
+      const lastButtonActive = document.activeElement === lastButton;
+
+      if (!lastButtonActive) {
+        await userEvent.tab({ delay: 10 });
+        throw new Error("Last button not selected");
+      }
+    });
+
+    if (parameters.lastButtonText) {
+      await expect(document.activeElement?.textContent).toBe(
+        parameters.lastButtonText,
+      );
+    }
   },
 };
 
@@ -314,15 +347,17 @@ export const DropdownWithItemsProp: Story = {
         variant: "transparent",
         children: (
           <>
-            <Outline.PencilIcon /> Zaaktypen
+            <Outline.PencilIcon />
+            Zaaktypen
           </>
         ),
       },
       {
         variant: "transparent",
         children: (
           <>
-            <Outline.ClipboardDocumentIcon /> Documenttypen
+            <Outline.ClipboardDocumentIcon />
+            Documenttypen
           </>
         ),
       },
@@ -340,7 +375,8 @@ export const DropdownWithItemsProp: Story = {
         variant: "transparent",
         children: (
           <>
-            <Outline.ArrowRightStartOnRectangleIcon /> Uitloggen
+            <Outline.ArrowRightStartOnRectangleIcon />
+            Uitloggen
           </>
         ),
       },

diff --git a/src/components/paginator/paginator.stories.tsx b/src/components/paginator/paginator.stories.tsx
@@ -98,7 +98,7 @@ export const PaginatorComponentWithSpinner: Story = {
         await expect(pageInput).toHaveValue(1);
 
         // ...spinner to become visible.
-        await expect(canvas.getByLabelText("Loading")).toBeVisible();
+        await expect(await canvas.findByLabelText("Loading")).toBeVisible();
       },
       {
         timeout: 400,
@@ -110,7 +110,7 @@ export const PaginatorComponentWithSpinner: Story = {
       async () =>
         //...spinner to become invisible again.
         await expect(canvas.queryByLabelText("Loading")).toBeFalsy(),
-      { timeout: 1000 },
+      { timeout: 2000 },
     );
 
     // Type to "2" in pageInput.