mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

test(overflow-menu): add unit tests

Browse source
This commit is contained in:
Eric Liu 2025-01-29 19:28:16 -08:00
commit 9ab6b9bb03
4 changed files with 120 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

6
tests/App.test.svelte
View file

@ -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;

81
tests/OverflowMenu.test.svelte
View file

@ -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>

30
tests/OverflowMenu/OverflowMenu.test.svelte Normal file
View file

@ -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>

84
tests/OverflowMenu/OverflowMenu.test.ts Normal file
View file

@ -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");
});
});