test(overflow-menu): add unit tests

tests/App.test.svelte

@@ -10,6 +10,7 @@
   import RecursiveList from "./RecursiveList/RecursiveList.test.svelte";
   import RecursiveListHierarchy from "./RecursiveList/RecursiveList.hierarchy.test.svelte";
   import Tag from "./Tag/Tag.test.svelte";
+  import OverflowMenu from "./OverflowMenu/OverflowMenu.test.svelte";
   import { onMount } from "svelte";
 
   const routes = [
@@ -63,6 +64,11 @@
       name: "Tag",
       component: Tag,
     },
+    {
+      path: "/overflow-menu",
+      name: "OverflowMenu",
+      component: OverflowMenu,
+    },
   ] as const;
 
   let currentPath = window.location.pathname;

tests/OverflowMenu.test.svelte

@@ -1,81 +0,0 @@
-<script lang="ts">
-  import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
-  import Add from "carbon-icons-svelte/lib/Add.svelte";
-</script>
-
-<OverflowMenu
-  on:close={(e) => {
-    console.log(e.detail); // { index: number; text: string; }
-  }}
->
-  <OverflowMenuItem text="Manage credentials" />
-  <OverflowMenuItem
-    href="https://cloud.ibm.com/docs/api-gateway/"
-    text="API documentation"
-  />
-  <OverflowMenuItem danger text="Delete service" />
-</OverflowMenu>
-
-<OverflowMenu open flipped>
-  <OverflowMenuItem text="Manage credentials" />
-  <OverflowMenuItem
-    href="https://cloud.ibm.com/docs/api-gateway/"
-    text="API documentation"
-  />
-  <OverflowMenuItem danger text="Delete service" />
-</OverflowMenu>
-
-<OverflowMenu flipped direction="top">
-  <OverflowMenuItem text="Manage credentials" />
-  <OverflowMenuItem
-    href="https://cloud.ibm.com/docs/api-gateway/"
-    text="API documentation"
-  />
-  <OverflowMenuItem danger text="Delete service" />
-</OverflowMenu>
-
-<OverflowMenu size="xl">
-  <OverflowMenuItem text="Manage credentials" />
-  <OverflowMenuItem
-    href="https://cloud.ibm.com/docs/api-gateway/"
-    text="API documentation"
-  />
-  <OverflowMenuItem danger text="Delete service" />
-</OverflowMenu>
-
-<OverflowMenu size="sm">
-  <OverflowMenuItem text="Manage credentials" />
-  <OverflowMenuItem
-    href="https://cloud.ibm.com/docs/api-gateway/"
-    text="API documentation"
-  />
-  <OverflowMenuItem danger text="Delete service" />
-</OverflowMenu>
-
-<OverflowMenu>
-  <OverflowMenuItem text="Manage credentials" />
-  <OverflowMenuItem
-    href="https://cloud.ibm.com/docs/api-gateway/"
-    text="API documentation"
-  />
-  <OverflowMenuItem primaryFocus danger text="Delete service" />
-</OverflowMenu>
-
-<OverflowMenu icon={Add}>
-  <OverflowMenuItem text="Manage credentials" />
-  <OverflowMenuItem
-    href="https://cloud.ibm.com/docs/api-gateway/"
-    text="API documentation"
-  />
-  <OverflowMenuItem danger text="Delete service" />
-</OverflowMenu>
-
-<OverflowMenu style="width: auto;">
-  <div slot="menu" style="padding: 1rem; color: red;">Custom trigger</div>
-  <OverflowMenuItem text="Manage credentials" />
-  <OverflowMenuItem
-    href="https://cloud.ibm.com/docs/api-gateway/"
-    text="API documentation"
-  />
-  <OverflowMenuItem danger text="Delete service" />
-</OverflowMenu>

tests/OverflowMenu/OverflowMenu.test.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
+</script>
+
+<OverflowMenu
+  on:close={(e) => {
+    console.log("close", e.detail); // { index: number; text: string; }
+  }}
+>
+  <OverflowMenuItem
+    text="Manage credentials"
+    on:click={() => {
+      console.log("click", "Manage credentials");
+    }}
+  />
+  <OverflowMenuItem
+    href="https://cloud.ibm.com/docs/api-gateway/"
+    text="API documentation"
+    on:click={() => {
+      console.log("click", "API documentation");
+    }}
+  />
+  <OverflowMenuItem
+    danger
+    text="Delete service"
+    on:click={() => {
+      console.log("click", "Delete service");
+    }}
+  />
+</OverflowMenu>

tests/OverflowMenu/OverflowMenu.test.ts

@@ -0,0 +1,84 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import OverflowMenu from "./OverflowMenu.test.svelte";
+
+describe("OverflowMenu", () => {
+  it("renders and functions correctly", async () => {
+    render(OverflowMenu);
+
+    const menuButton = screen.getByRole("button");
+    expect(menuButton).toHaveAttribute("aria-haspopup", "true");
+    expect(menuButton).toHaveAttribute("aria-expanded", "false");
+
+    await user.click(menuButton);
+    expect(menuButton).toHaveAttribute("aria-expanded", "true");
+
+    const menuItems = screen.getAllByRole("menuitem");
+    expect(menuItems).toHaveLength(3);
+    expect(menuItems[0]).toHaveFocus();
+
+    expect(menuItems[0]).toHaveTextContent("Manage credentials");
+    expect(menuItems[1]).toHaveTextContent("API documentation");
+    expect(menuItems[2]).toHaveTextContent("Delete service");
+
+    expect(menuItems[1]).toHaveAttribute(
+      "href",
+      "https://cloud.ibm.com/docs/api-gateway/",
+    );
+
+    expect(menuItems[2].parentElement).toHaveClass(
+      "bx--overflow-menu-options__option--danger",
+    );
+
+    const spy = vi.spyOn(console, "log");
+    await user.click(menuItems[0]);
+    expect(spy).toHaveBeenCalledWith("click", "Manage credentials");
+
+    expect(menuButton).toHaveAttribute("aria-expanded", "false");
+    expect(spy).toHaveBeenCalledWith("close", {
+      index: 0,
+      text: "Manage credentials",
+    });
+  });
+
+  it("handles keyboard navigation", async () => {
+    render(OverflowMenu);
+
+    const spy = vi.spyOn(console, "log");
+
+    const menuButton = screen.getByRole("button");
+    await user.click(menuButton);
+    expect(menuButton).toHaveAttribute("aria-expanded", "true");
+
+    let menuItems = screen.getAllByRole("menuitem");
+    expect(menuItems[0]).toHaveFocus();
+
+    await user.keyboard("{ArrowDown}");
+    expect(menuItems[1]).toHaveFocus();
+
+    await user.keyboard("{Enter}");
+    expect(spy).toHaveBeenCalledWith("click", "API documentation");
+
+    await user.click(menuButton);
+    menuItems = screen.getAllByRole("menuitem");
+    expect(menuItems[0]).toHaveFocus();
+
+    await user.keyboard("{ArrowUp}");
+    expect(menuItems[2]).toHaveFocus();
+
+    await user.keyboard("{Escape}");
+    expect(menuButton).toHaveAttribute("aria-expanded", "false");
+    expect(spy).toHaveBeenCalledWith("close", null);
+  });
+
+  it("closes when clicking outside", async () => {
+    render(OverflowMenu);
+
+    const menuButton = screen.getByRole("button");
+    await user.click(menuButton);
+    expect(menuButton).toHaveAttribute("aria-expanded", "true");
+
+    await user.click(document.body);
+    expect(menuButton).toHaveAttribute("aria-expanded", "false");
+  });
+});