diff --git a/tests/HeaderNav.test.svelte b/tests/HeaderNav.test.svelte deleted file mode 100644 index 3b8c5776..00000000 --- a/tests/HeaderNav.test.svelte +++ /dev/null @@ -1,60 +0,0 @@ - - -
-
- -
- - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - -

Welcome

- - - - diff --git a/tests/HeaderSearch.svelte b/tests/HeaderSearch.svelte deleted file mode 100644 index d0fe5e34..00000000 --- a/tests/HeaderSearch.svelte +++ /dev/null @@ -1,119 +0,0 @@ - - -
-
- -
- - { - console.log("on:clear"); - }} - on:select={(e) => { - console.log("on:select", e.detail); - }} - on:paste - let:result - let:index - > -
{result.text}{index}
- - - - Switcher subject 1 - Switcher item 1 - Switcher subject 2 - Switcher item 1 - Switcher item 2 - Switcher item 3 - Switcher item 4 - Switcher item 5 - - - -
- - - - - - - - - - - - - - - - - - -

Welcome

- - - - diff --git a/tests/HeaderSwitcher.test.svelte b/tests/HeaderSwitcher.test.svelte deleted file mode 100644 index d18e4fff..00000000 --- a/tests/HeaderSwitcher.test.svelte +++ /dev/null @@ -1,66 +0,0 @@ - - -
-
- -
- - - - Switcher subject 1 - Switcher item 1 - Switcher subject 2 - Switcher item 1 - Switcher item 2 - Switcher item 3 - Switcher item 4 - Switcher item 5 - - - -
- - - - - - - - - - - - - - - - - - -

Welcome

- - - - diff --git a/tests/HeaderUtilities.test.svelte b/tests/HeaderUtilities.test.svelte deleted file mode 100644 index d5dca180..00000000 --- a/tests/HeaderUtilities.test.svelte +++ /dev/null @@ -1,77 +0,0 @@ - - -
-
- -
- - - - - Switcher subject 1 - Switcher item 1 - Switcher subject 2 - Switcher item 1 - Switcher item 2 - Switcher item 3 - Switcher item 4 - Switcher item 5 - - - -
- - - - - - - - - - - - - - - - - - -

Welcome

- - - - diff --git a/tests/PersistedHamburgerMenu.test.svelte b/tests/UIShell/PersistedHamburgerMenu.test.svelte similarity index 95% rename from tests/PersistedHamburgerMenu.test.svelte rename to tests/UIShell/PersistedHamburgerMenu.test.svelte index 5992d0f8..59a1c840 100644 --- a/tests/PersistedHamburgerMenu.test.svelte +++ b/tests/UIShell/PersistedHamburgerMenu.test.svelte @@ -1,3 +1,5 @@ + +
{ + it("renders the complete header structure with persistent hamburger menu", () => { + render(PersistedHamburgerMenuTest); + + // Verify header and company/platform name + const header = screen.getByRole("banner"); + expect(header).toBeInTheDocument(); + expect(screen.getByText("IBM")).toBeInTheDocument(); + expect(screen.getByText("Carbon Svelte")).toBeInTheDocument(); + + // Verify navigation items + expect(screen.getAllByRole("link", { name: "Link 1" })).toHaveLength(2); + expect(screen.getAllByRole("link", { name: "Link 2" })).toHaveLength(2); + expect(screen.getAllByRole("link", { name: "Link 3" })).toHaveLength(2); + + // Verify menu + const menu = screen.getByRole("menuitem", { name: "Menu" }); + expect(menu).toBeInTheDocument(); + expect(menu).toHaveAttribute("aria-haspopup", "menu"); + expect(menu).toHaveAttribute("aria-expanded", "false"); + + // Verify skip to content + expect( + screen.getByRole("link", { name: "Skip to main content" }), + ).toBeInTheDocument(); + + // Verify content + expect(screen.getByRole("main")).toBeInTheDocument(); + expect( + screen.getByRole("heading", { name: "Welcome" }), + ).toBeInTheDocument(); + }); + + it("renders side navigation with persistent hamburger menu", () => { + render(PersistedHamburgerMenuTest); + + // Verify side nav is present + const sideNav = screen.getByRole("complementary"); + expect(sideNav).toBeInTheDocument(); + + // Verify side nav links + const sideNavItems = sideNav.querySelectorAll(".bx--side-nav__item"); + expect(sideNavItems).toHaveLength(4); // 3 links + 1 menu + + // Verify side nav menu + const sideNavMenu = sideNav.querySelector(".bx--side-nav__submenu"); + expect(sideNavMenu).toBeInTheDocument(); + expect(sideNavMenu).toHaveAttribute("aria-expanded", "false"); + }); + + it("handles side navigation state with persistent hamburger menu", async () => { + const { component } = render(PersistedHamburgerMenuTest); + + // Initial state + expect(component.isSideNavOpen).toBe(false); + + // Simulate opening side nav + component.isSideNavOpen = true; + await new Promise((resolve) => setTimeout(resolve, 0)); + + // Verify header has expanded class + const header = screen.getByRole("banner"); + expect(header).toHaveClass("bx--header--expanded"); + + // Verify side nav is expanded + const sideNav = screen.getByRole("complementary"); + expect(sideNav).toHaveClass("bx--side-nav--expanded"); + }); + + it("handles navigation menu interaction in side nav", async () => { + render(PersistedHamburgerMenuTest); + + // Open side nav first + const { component } = render(PersistedHamburgerMenuTest); + component.isSideNavOpen = true; + await new Promise((resolve) => setTimeout(resolve, 0)); + + const menu = screen + .getByRole("complementary") + .querySelector(".bx--side-nav__submenu"); + await user.click(menu!); + + // Verify menu is expanded + expect(menu).toHaveAttribute("aria-expanded", "true"); + + // Verify menu items are visible + const menuItems = screen + .getByRole("complementary") + .querySelectorAll(".bx--side-nav__item"); + expect(menuItems).toHaveLength(7); // 3 main items + menu + 3 submenu items + }); +});