diff --git a/tests/ContentSwitcher.test.svelte b/tests/ContentSwitcher.test.svelte
deleted file mode 100644
index 4d3bb3e8..00000000
--- a/tests/ContentSwitcher.test.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/tests/ContentSwitcher/ContentSwitcher.custom.test.svelte b/tests/ContentSwitcher/ContentSwitcher.custom.test.svelte
new file mode 100644
index 00000000..2c756297
--- /dev/null
+++ b/tests/ContentSwitcher/ContentSwitcher.custom.test.svelte
@@ -0,0 +1,10 @@
+
+
+
+
+ Custom Content
+
+
+
diff --git a/tests/ContentSwitcher/ContentSwitcher.disabled.test.svelte b/tests/ContentSwitcher/ContentSwitcher.disabled.test.svelte
new file mode 100644
index 00000000..c2a0799d
--- /dev/null
+++ b/tests/ContentSwitcher/ContentSwitcher.disabled.test.svelte
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
diff --git a/tests/ContentSwitcher/ContentSwitcher.selectedIndex.test.svelte b/tests/ContentSwitcher/ContentSwitcher.selectedIndex.test.svelte
new file mode 100644
index 00000000..7f4c49f0
--- /dev/null
+++ b/tests/ContentSwitcher/ContentSwitcher.selectedIndex.test.svelte
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
diff --git a/tests/ContentSwitcher/ContentSwitcher.size.test.svelte b/tests/ContentSwitcher/ContentSwitcher.size.test.svelte
new file mode 100644
index 00000000..afa046ca
--- /dev/null
+++ b/tests/ContentSwitcher/ContentSwitcher.size.test.svelte
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/ContentSwitcher/ContentSwitcher.test.svelte b/tests/ContentSwitcher/ContentSwitcher.test.svelte
new file mode 100644
index 00000000..a1b7654e
--- /dev/null
+++ b/tests/ContentSwitcher/ContentSwitcher.test.svelte
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
diff --git a/tests/ContentSwitcher/ContentSwitcher.test.ts b/tests/ContentSwitcher/ContentSwitcher.test.ts
new file mode 100644
index 00000000..11d20360
--- /dev/null
+++ b/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");
+ });
+});