WIP test(ui-shell): add unit tests

tests/UIShell/PersistedHamburgerMenu.test.svelte

@@ -0,0 +1,67 @@
+<svelte:options accessors />
+
+<script lang="ts">
+  import {
+    Header,
+    HeaderNav,
+    HeaderNavItem,
+    HeaderNavMenu,
+    SideNav,
+    SideNavItems,
+    SideNavMenu,
+    SideNavMenuItem,
+    SideNavLink,
+    SkipToContent,
+    Content,
+    Grid,
+    Row,
+    Column,
+  } from "carbon-components-svelte";
+
+  export let isSideNavOpen = false;
+</script>
+
+<Header
+  persistentHamburgerMenu={true}
+  company="IBM"
+  platformName="Carbon Svelte"
+  bind:isSideNavOpen
+>
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+
+  <HeaderNav>
+    <HeaderNavItem href="/" text="Link 1" />
+    <HeaderNavItem href="/" text="Link 2" />
+    <HeaderNavItem href="/" text="Link 3" />
+    <HeaderNavMenu text="Menu">
+      <HeaderNavItem href="/" text="Link 1" />
+      <HeaderNavItem href="/" text="Link 2" />
+      <HeaderNavItem href="/" text="Link 3" />
+    </HeaderNavMenu>
+  </HeaderNav>
+</Header>
+
+<SideNav bind:isOpen={isSideNavOpen}>
+  <SideNavItems>
+    <SideNavLink text="Link 1" />
+    <SideNavLink text="Link 2" />
+    <SideNavLink text="Link 3" />
+    <SideNavMenu text="Menu">
+      <SideNavMenuItem href="/" text="Link 1" />
+      <SideNavMenuItem href="/" text="Link 2" />
+      <SideNavMenuItem href="/" text="Link 3" />
+    </SideNavMenu>
+  </SideNavItems>
+</SideNav>
+
+<Content>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>Welcome</h1>
+      </Column>
+    </Row>
+  </Grid>
+</Content>

tests/UIShell/PersistedHamburgerMenu.test.ts

@@ -0,0 +1,96 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import PersistedHamburgerMenuTest from "./PersistedHamburgerMenu.test.svelte";
+
+describe("PersistedHamburgerMenu Example", () => {
+  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
+  });
+});