From 9020b4d0a65e1d8e023c2f877e1d95301f95dedf Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Thu, 30 May 2024 14:42:10 +0200
Subject: [PATCH] :green_heart: - fix: Attempt fixing build

---
 src/components/dropdown/dropdown.stories.tsx | 113 +++++++++----------
 1 file changed, 56 insertions(+), 57 deletions(-)

diff --git a/src/components/dropdown/dropdown.stories.tsx b/src/components/dropdown/dropdown.stories.tsx
index dcd46c3c..28cfb444 100644
--- a/src/components/dropdown/dropdown.stories.tsx
+++ b/src/components/dropdown/dropdown.stories.tsx
@@ -33,25 +33,15 @@ const meta: Meta<typeof Dropdown> = {
     await waitFor(() => expect(canvas.queryByRole("dialog")).toBeNull());
     await userEvent.click(button, { delay: 10 });
 
-    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");
-        }
-      },
-      {
-        interval: 100,
-        timeout: 2000,
-      },
-    );
+    for (let counter = 0; counter < 3; counter++) {
+      await userEvent.tab({ delay: 10 });
+    }
+
+    const dialog = await canvas.getByRole("dialog");
+    const buttons = await within(dialog).findAllByRole("button");
+    const lastButton = buttons[buttons.length - 1];
+
+    await expect(document.activeElement).toEqual(lastButton);
 
     if (parameters.lastButtonText) {
       await expect(document.activeElement?.textContent).toBe(
@@ -126,25 +116,16 @@ export const ActivateOnHover: Story = {
     await waitFor(() => expect(canvas.queryByRole("dialog")).toBeNull());
     await userEvent.hover(button, { delay: 10 });
 
-    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");
-        }
-      },
-      {
-        interval: 100,
-        timeout: 2000,
-      },
-    );
+    for (let counter = 0; counter < 3; counter++) {
+      await userEvent.tab({ delay: 10 });
+    }
+
+    const dialog = await canvas.getByRole("dialog");
+    const buttons = await within(dialog).findAllByRole("button");
+    const lastButton = buttons[buttons.length - 1];
+
+    await expect(document.activeElement).toEqual(lastButton);
+
     if (parameters.lastButtonText) {
       await expect(document.activeElement?.textContent).toBe(
         parameters.lastButtonText,
@@ -168,25 +149,15 @@ export const ActivateOnFocus: Story = {
     await userEvent.tab({ shift: true, delay: 10 });
     await userEvent.tab({ delay: 10 });
 
-    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");
-        }
-      },
-      {
-        interval: 100,
-        timeout: 2000,
-      },
-    );
+    for (let counter = 0; counter < 3; counter++) {
+      await userEvent.tab({ delay: 10 });
+    }
+
+    const dialog = await canvas.getByRole("dialog");
+    const buttons = await within(dialog).findAllByRole("button");
+    const lastButton = buttons[buttons.length - 1];
+
+    await expect(document.activeElement).toEqual(lastButton);
 
     if (parameters.lastButtonText) {
       await expect(document.activeElement?.textContent).toBe(
@@ -341,6 +312,34 @@ export const NestedDropdown: Story = {
       </>
     ),
   },
+  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(await canvas.findByRole("dialog")).toBeVisible();
+    await userEvent.keyboard("{Escape}");
+    await waitFor(() => expect(canvas.queryByRole("dialog")).toBeNull());
+    await userEvent.click(button, { delay: 10 });
+
+    for (let counter = 0; counter < 3; counter++) {
+      await userEvent.tab({ delay: 10 });
+    }
+
+    const dialogs = await canvas.getAllByRole("dialog");
+    const dialog = dialogs[dialogs.length - 1];
+    const buttons = await within(dialog).findAllByRole("button");
+    const lastButton = buttons[buttons.length - 1];
+
+    await expect(document.activeElement).toEqual(lastButton);
+
+    if (parameters.lastButtonText) {
+      await expect(document.activeElement?.textContent).toBe(
+        parameters.lastButtonText,
+      );
+    }
+  },
 };
 
 export const DropdownWithItemsProp: Story = {