test(content-switcher): add unit tests

tests/ContentSwitcher.test.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import { ContentSwitcher, Switch } from "carbon-components-svelte";
-  import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
-</script>
-
-<ContentSwitcher size="xl" selectedIndex={1}>
-  <Switch disabled text="Latest news" />
-  <Switch text="Trending" />
-  <Switch>
-    <div style="display: flex; align-items: center;">
-      <Analytics style="margin-right: 0.5rem;" />
-      Trending
-    </div>
-  </Switch>
-</ContentSwitcher>

tests/ContentSwitcher/ContentSwitcher.custom.test.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { ContentSwitcher, Switch } from "carbon-components-svelte";
+</script>
+
+<ContentSwitcher>
+  <Switch>
+    <div data-testid="custom-content">Custom Content</div>
+  </Switch>
+  <Switch text="Regular Text" />
+</ContentSwitcher>

tests/ContentSwitcher/ContentSwitcher.disabled.test.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { ContentSwitcher, Switch } from "carbon-components-svelte";
+</script>
+
+<ContentSwitcher>
+  <Switch text="Enabled" />
+  <Switch text="Disabled" disabled />
+  <Switch text="Also Enabled" />
+</ContentSwitcher>

tests/ContentSwitcher/ContentSwitcher.selectedIndex.test.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { ContentSwitcher, Switch } from "carbon-components-svelte";
+
+  export let selectedIndex = 1;
+</script>
+
+<ContentSwitcher {selectedIndex}>
+  <Switch text="First" />
+  <Switch text="Second" />
+  <Switch text="Third" />
+</ContentSwitcher>

tests/ContentSwitcher/ContentSwitcher.size.test.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ContentSwitcher, Switch } from "carbon-components-svelte";
+</script>
+
+<ContentSwitcher size="sm">
+  <Switch text="Small 1" />
+  <Switch text="Small 2" />
+</ContentSwitcher>
+
+<ContentSwitcher size="xl">
+  <Switch text="XL 1" />
+  <Switch text="XL 2" />
+</ContentSwitcher>

tests/ContentSwitcher/ContentSwitcher.test.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { ContentSwitcher, Switch } from "carbon-components-svelte";
+</script>
+
+<ContentSwitcher>
+  <Switch text="Option 1" />
+  <Switch text="Option 2" />
+  <Switch text="Option 3" />
+</ContentSwitcher>

tests/ContentSwitcher/ContentSwitcher.test.ts

@@ -0,0 +1,167 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import ContentSwitcher from "./ContentSwitcher.test.svelte";
+import ContentSwitcherSize from "./ContentSwitcher.size.test.svelte";
+import ContentSwitcherSelectedIndex from "./ContentSwitcher.selectedIndex.test.svelte";
+import ContentSwitcherDisabled from "./ContentSwitcher.disabled.test.svelte";
+import ContentSwitcherCustom from "./ContentSwitcher.custom.test.svelte";
+
+describe("ContentSwitcher", () => {
+  it("renders with default props", () => {
+    render(ContentSwitcher);
+
+    const tablist = screen.getByRole("tablist");
+    expect(tablist).toHaveClass("bx--content-switcher");
+    expect(tablist).not.toHaveClass("bx--content-switcher--sm");
+    expect(tablist).not.toHaveClass("bx--content-switcher--xl");
+
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs).toHaveLength(3);
+
+    expect(tabs[0]).toHaveTextContent("Option 1");
+    expect(tabs[1]).toHaveTextContent("Option 2");
+    expect(tabs[2]).toHaveTextContent("Option 3");
+
+    expect(tabs[0]).toHaveClass("bx--content-switcher--selected");
+    expect(tabs[0]).toHaveAttribute("aria-selected", "true");
+    expect(tabs[0]).toHaveAttribute("tabindex", "0");
+
+    expect(tabs[1]).not.toHaveClass("bx--content-switcher--selected");
+    expect(tabs[1]).toHaveAttribute("aria-selected", "false");
+    expect(tabs[1]).toHaveAttribute("tabindex", "-1");
+
+    expect(tabs[2]).not.toHaveClass("bx--content-switcher--selected");
+    expect(tabs[2]).toHaveAttribute("aria-selected", "false");
+    expect(tabs[2]).toHaveAttribute("tabindex", "-1");
+  });
+
+  it("renders with different sizes", () => {
+    render(ContentSwitcherSize);
+
+    const tablists = screen.getAllByRole("tablist");
+    expect(tablists).toHaveLength(2);
+
+    expect(tablists[0]).toHaveClass("bx--content-switcher--sm");
+    expect(tablists[0]).not.toHaveClass("bx--content-switcher--xl");
+
+    expect(tablists[1]).toHaveClass("bx--content-switcher--xl");
+    expect(tablists[1]).not.toHaveClass("bx--content-switcher--sm");
+
+    const smallTabs = tablists[0].querySelectorAll('[role="tab"]');
+    expect(smallTabs).toHaveLength(2);
+    expect(smallTabs[0]).toHaveTextContent("Small 1");
+    expect(smallTabs[1]).toHaveTextContent("Small 2");
+
+    const xlTabs = tablists[1].querySelectorAll('[role="tab"]');
+    expect(xlTabs).toHaveLength(2);
+    expect(xlTabs[0]).toHaveTextContent("XL 1");
+    expect(xlTabs[1]).toHaveTextContent("XL 2");
+  });
+
+  it("renders with selectedIndex prop", () => {
+    render(ContentSwitcherSelectedIndex);
+
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs).toHaveLength(3);
+
+    expect(tabs[0]).not.toHaveClass("bx--content-switcher--selected");
+    expect(tabs[0]).toHaveAttribute("aria-selected", "false");
+    expect(tabs[0]).toHaveAttribute("tabindex", "-1");
+
+    expect(tabs[1]).toHaveClass("bx--content-switcher--selected");
+    expect(tabs[1]).toHaveAttribute("aria-selected", "true");
+    expect(tabs[1]).toHaveAttribute("tabindex", "0");
+
+    expect(tabs[2]).not.toHaveClass("bx--content-switcher--selected");
+    expect(tabs[2]).toHaveAttribute("aria-selected", "false");
+    expect(tabs[2]).toHaveAttribute("tabindex", "-1");
+  });
+
+  it("updates when selectedIndex changes", async () => {
+    const { rerender } = render(ContentSwitcherSelectedIndex);
+
+    let tabs = screen.getAllByRole("tab");
+    expect(tabs[1]).toHaveClass("bx--content-switcher--selected");
+
+    await rerender({ selectedIndex: 2 });
+
+    tabs = screen.getAllByRole("tab");
+    expect(tabs[1]).not.toHaveClass("bx--content-switcher--selected");
+    expect(tabs[2]).toHaveClass("bx--content-switcher--selected");
+    expect(tabs[2]).toHaveAttribute("aria-selected", "true");
+    expect(tabs[2]).toHaveAttribute("tabindex", "0");
+  });
+
+  it("handles click events", async () => {
+    render(ContentSwitcher);
+
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveClass("bx--content-switcher--selected");
+
+    await user.click(tabs[1]);
+    expect(tabs[0]).not.toHaveClass("bx--content-switcher--selected");
+    expect(tabs[1]).toHaveClass("bx--content-switcher--selected");
+
+    await user.click(tabs[2]);
+    expect(tabs[1]).not.toHaveClass("bx--content-switcher--selected");
+    expect(tabs[2]).toHaveClass("bx--content-switcher--selected");
+  });
+
+  it("handles keyboard navigation", async () => {
+    render(ContentSwitcher);
+
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveClass("bx--content-switcher--selected");
+
+    await user.tab();
+    expect(document.activeElement).toBe(tabs[0]);
+
+    await user.keyboard("{ArrowRight}");
+    expect(tabs[0]).not.toHaveClass("bx--content-switcher--selected");
+    expect(tabs[1]).toHaveClass("bx--content-switcher--selected");
+    expect(document.activeElement).toBe(tabs[1]);
+
+    await user.keyboard("{ArrowRight}");
+    expect(tabs[1]).not.toHaveClass("bx--content-switcher--selected");
+    expect(tabs[2]).toHaveClass("bx--content-switcher--selected");
+    expect(document.activeElement).toBe(tabs[2]);
+
+    await user.keyboard("{ArrowRight}");
+    expect(tabs[2]).not.toHaveClass("bx--content-switcher--selected");
+    expect(tabs[0]).toHaveClass("bx--content-switcher--selected");
+    expect(document.activeElement).toBe(tabs[0]);
+
+    await user.keyboard("{ArrowLeft}");
+    expect(tabs[0]).not.toHaveClass("bx--content-switcher--selected");
+    expect(tabs[2]).toHaveClass("bx--content-switcher--selected");
+    expect(document.activeElement).toBe(tabs[2]);
+  });
+
+  it("respects disabled state", async () => {
+    render(ContentSwitcherDisabled);
+
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs).toHaveLength(3);
+    expect(tabs[1]).toHaveAttribute("disabled");
+
+    await user.click(tabs[1]);
+    expect(tabs[0]).toHaveClass("bx--content-switcher--selected");
+    expect(tabs[1]).not.toHaveClass("bx--content-switcher--selected");
+
+    await user.click(tabs[2]);
+    expect(tabs[0]).not.toHaveClass("bx--content-switcher--selected");
+    expect(tabs[2]).toHaveClass("bx--content-switcher--selected");
+  });
+
+  it("renders custom content", () => {
+    render(ContentSwitcherCustom);
+
+    const customContent = screen.getByTestId("custom-content");
+    expect(customContent).toBeInTheDocument();
+    expect(customContent).toHaveTextContent("Custom Content");
+
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs).toHaveLength(2);
+    expect(tabs[1]).toHaveTextContent("Regular Text");
+  });
+});