xmlui 0.10.12 → 0.10.14

package/dist/scripts/src/components/Tabs/Tabs.spec.js

@@ -0,0 +1,875 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../testing/fixtures");
+// =============================================================================
+// SMOKE TESTS
+// =============================================================================
+fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
+    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <TabItem label="Tab 1">Content 1</TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>
+      </Tabs>
+    `);
+        // Check that tabs component is rendered
+        yield (0, fixtures_1.expect)(page.getByRole('tablist')).toBeAttached();
+    }));
+    (0, fixtures_1.test)("renders tab labels correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <TabItem label="First Tab">Content 1</TabItem>
+        <TabItem label="Second Tab">Content 2</TabItem>
+        <TabItem label="Third Tab">Content 3</TabItem>
+      </Tabs>
+    `);
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "First Tab" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Second Tab" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Third Tab" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("shows first tab content by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <TabItem label="Tab 1">First content</TabItem>
+        <TabItem label="Tab 2">Second content</TabItem>
+      </Tabs>
+    `);
+        yield (0, fixtures_1.expect)(page.getByText("First content")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Second content")).not.toBeVisible();
+    }));
+});
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("basic functionality", () => {
+    (0, fixtures_1.test)("switches tabs when clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <TabItem label="Tab 1">First content</TabItem>
+        <TabItem label="Tab 2">Second content</TabItem>
+        <TabItem label="Tab 3">Third content</TabItem>
+      </Tabs>
+    `);
+        // Wait for tabs to be fully rendered
+        yield (0, fixtures_1.expect)(page.getByRole('tablist')).toBeAttached();
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 1" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 3" })).toBeVisible();
+        // Initially first tab is active
+        yield (0, fixtures_1.expect)(page.getByText("First content")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Second content")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Third content")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "true");
+        // Click second tab and wait for transition
+        yield page.getByRole("tab", { name: "Tab 2" }).click();
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "true");
+        yield (0, fixtures_1.expect)(page.getByText("First content")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Second content")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Third content")).not.toBeVisible();
+        // Click third tab and wait for transition
+        yield page.getByRole("tab", { name: "Tab 3" }).click();
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 3" })).toHaveAttribute("aria-selected", "true");
+        yield (0, fixtures_1.expect)(page.getByText("First content")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Second content")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Third content")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("activeTab prop sets initial active tab", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs activeTab="{1}">
+        <TabItem label="Tab 1">First content</TabItem>
+        <TabItem label="Tab 2">Second content</TabItem>
+        <TabItem label="Tab 3">Third content</TabItem>
+      </Tabs>
+    `);
+        yield (0, fixtures_1.expect)(page.getByText("First content")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Second content")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Third content")).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("orientation prop changes tab layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs orientation="vertical" testId="vertical-tabs">
+        <TabItem label="Tab 1">Content 1</TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>
+      </Tabs>
+    `);
+        // Check that tabs component has vertical orientation
+        const tabsRoot = page.getByTestId("vertical-tabs");
+        yield (0, fixtures_1.expect)(tabsRoot).toHaveAttribute("data-orientation", "vertical");
+    }));
+});
+// =============================================================================
+// HEADER TEMPLATE TESTS
+// =============================================================================
+fixtures_1.test.describe("headerTemplate functionality", () => {
+    (0, fixtures_1.test)("renders custom headerTemplate instead of label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <TabItem label="Simple Label">
+          <property name="headerTemplate">
+            <VStack gap="$space-1">
+              <Text>Custom</Text>
+              <Text>Header</Text>
+            </VStack>
+          </property>
+          Content 1
+        </TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>
+      </Tabs>
+    `);
+        // Custom header content should be visible
+        yield (0, fixtures_1.expect)(page.getByText("Custom")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Header")).toBeVisible();
+        // Simple label should be visible for second tab
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("headerTemplate takes priority over global headerTemplate", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <property name="headerTemplate">
+          <Text>Global: {$header.label}</Text>
+        </property>
+        <TabItem label="Tab 1">
+          <property name="headerTemplate">
+            <Text>Custom Content</Text>
+          </property>
+          Content 1
+        </TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>
+      </Tabs>
+    `);
+        // First tab should use individual headerTemplate
+        yield (0, fixtures_1.expect)(page.getByText("Custom Content")).toBeVisible();
+        // Second tab should use global headerTemplate
+        yield (0, fixtures_1.expect)(page.getByText("Global: Tab 2")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("complex headerTemplate with icons and badges", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <TabItem label="Tab 1">
+          <property name="headerTemplate">
+            <HStack gap="$space-2" alignItems="center">
+              <Text>Custom: {$header.label}</Text>
+              <Badge>{$header.isActive ? 'Active' : ''}</Badge>
+            </HStack>
+          </property>
+          Content 1
+        </TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>
+      </Tabs>
+    `);
+        yield (0, fixtures_1.expect)(page.getByText("Custom: Tab 1")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Active")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("headerTemplate receives correct context props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <TabItem label="First Tab">
+          <property name="headerTemplate">
+            <VStack gap="$space-1">
+              <Text>Index: {$header.index}</Text>
+              <Text>Label: {$header.label}</Text>
+              <Text>Active: {$header.isActive ? 'Yes' : 'No'}</Text>
+            </VStack>
+          </property>
+          Content 1
+        </TabItem>
+        <TabItem label="Second Tab">Content 2</TabItem>
+      </Tabs>
+    `);
+        yield (0, fixtures_1.expect)(page.getByText("Index: 0")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Label: First Tab")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Active: Yes")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("headerTemplate receives external id when provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <TabItem label="First Tab" id="custom-tab-1">
+          <property name="headerTemplate">
+            <VStack gap="$space-1">
+              <Text>ID: {$header.id}</Text>
+              <Text>Label: {$header.label}</Text>
+              <Text>Has ID: {$header.id ? 'Yes' : 'No'}</Text>
+            </VStack>
+          </property>
+          Content 1
+        </TabItem>
+        <TabItem label="Second Tab">
+          <property name="headerTemplate">
+            <VStack gap="$space-1">
+              <Text>Label: {$header.label}</Text>
+              <Text>Has ID: {$header.id ? 'Yes' : 'No'}</Text>
+            </VStack>
+          </property>
+          Content 2
+        </TabItem>
+      </Tabs>
+    `);
+        // First tab should show the external id
+        yield (0, fixtures_1.expect)(page.getByText("ID: custom-tab-1")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Label: First Tab")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Has ID: Yes")).toBeVisible();
+        // Click second tab
+        yield page.getByRole("tab", { name: "Second Tab" }).click();
+        // Second tab should not have id in context
+        yield (0, fixtures_1.expect)(page.getByText("Label: Second Tab")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Has ID: No")).toBeVisible();
+    }));
+});
+// =============================================================================
+// GLOBAL HEADER TEMPLATE TESTS
+// =============================================================================
+fixtures_1.test.describe("global headerTemplate functionality", () => {
+    (0, fixtures_1.test)("global headerTemplate customizes all tab headers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <property name="headerTemplate">
+          <Text>Custom: {$header.label}</Text>
+        </property>
+        <TabItem label="Tab 1">Content 1</TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>  
+        <TabItem label="Tab 3">Content 3</TabItem>
+      </Tabs>
+    `);
+        yield (0, fixtures_1.expect)(page.getByText("Custom: Tab 1")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Custom: Tab 2")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Custom: Tab 3")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("global headerTemplate receives isActive state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <property name="headerTemplate">
+          <Text>{$header.isActive ? 'Active: ' : ''}{$header.label}</Text>
+        </property>
+        <TabItem label="Tab 1">Content 1</TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>
+      </Tabs>
+    `);
+        // First tab should be active initially
+        yield (0, fixtures_1.expect)(page.getByText("Active: Tab 1")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Tab 2")).toBeVisible();
+        // Click second tab
+        yield page.getByText("Tab 2").click();
+        yield (0, fixtures_1.expect)(page.getByText("Tab 1")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Active: Tab 2")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("global headerTemplate with complex content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <property name="headerTemplate">
+          <HStack>
+            <Text>{$header.label} {$header.isActive ? 'active' : ''}</Text>
+          </HStack>
+        </property>
+        <TabItem label="Home">Home content</TabItem>
+        <TabItem label="Settings">Settings content</TabItem>
+      </Tabs>
+    `);
+        yield (0, fixtures_1.expect)(page.getByText("Home active")).toBeVisible();
+        yield page.getByText("Settings").click();
+        yield (0, fixtures_1.expect)(page.getByText("Settings active")).toBeVisible();
+    }));
+});
+// =============================================================================
+// FILLER ELEMENT TESTS
+// =============================================================================
+fixtures_1.test.describe("filler element", () => {
+    (0, fixtures_1.test)("filler is hidden when distributeEvenly is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs distributeEvenly>
+        <TabItem label="Tab 1">Content 1</TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>
+      </Tabs>
+    `);
+        const filler = page.locator('.filler');
+        yield (0, fixtures_1.expect)(filler).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("filler is hidden when headerRenderer is used", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs headerRenderer="{(item) => item.label}">
+        <TabItem label="Tab 1">Content 1</TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>
+      </Tabs>
+    `);
+        const filler = page.locator('.filler');
+        yield (0, fixtures_1.expect)(filler).not.toBeVisible();
+    }));
+});
+// =============================================================================
+// EDGE CASES AND ERROR HANDLING
+// =============================================================================
+fixtures_1.test.describe("edge cases", () => {
+    (0, fixtures_1.test)("handles empty tabs", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Tabs></Tabs>`);
+        // Check that empty tabs component is rendered
+        yield (0, fixtures_1.expect)(page.getByRole('tablist')).toBeAttached();
+    }));
+    (0, fixtures_1.test)("handles single tab", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <TabItem label="Only Tab">Only content</TabItem>
+      </Tabs>
+    `);
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Only Tab" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Only content")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles tabs with empty content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <TabItem label="Empty Tab"></TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>
+      </Tabs>
+    `);
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Empty Tab" })).toBeVisible();
+        yield page.getByRole("tab", { name: "Tab 2" }).click();
+        yield (0, fixtures_1.expect)(page.getByText("Content 2")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles very long tab labels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const longLabel = "This is a very long tab label that might cause layout issues";
+        yield initTestBed(`
+      <Tabs>
+        <TabItem label="${longLabel}">Content 1</TabItem>
+        <TabItem label="Short">Content 2</TabItem>
+      </Tabs>
+    `);
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: longLabel })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Short" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles activeTab out of bounds", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs activeTab="{5}">
+        <TabItem label="Tab 1">Content 1</TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>
+      </Tabs>
+    `);
+        // Should default to first tab when activeTab is out of bounds
+        yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
+    }));
+});
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+fixtures_1.test.describe("accessibility", () => {
+    (0, fixtures_1.test)("tabs have correct ARIA roles", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <TabItem label="Tab 1">Content 1</TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>
+      </Tabs>
+    `);
+        yield (0, fixtures_1.expect)(page.getByRole("tablist")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 1" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("tabpanel")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("active tab has correct aria-selected", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <TabItem label="Tab 1">Content 1</TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>
+      </Tabs>
+    `);
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "true");
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "false");
+        yield page.getByRole("tab", { name: "Tab 2" }).click();
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "false");
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "true");
+    }));
+    (0, fixtures_1.test)("keyboard navigation works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <TabItem label="Tab 1">Content 1</TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>
+        <TabItem label="Tab 3">Content 3</TabItem>
+      </Tabs>
+    `);
+        // Focus first tab
+        yield page.getByRole("tab", { name: "Tab 1" }).focus();
+        // Arrow right to second tab
+        yield page.keyboard.press("ArrowRight");
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toBeFocused();
+        // Arrow right to third tab
+        yield page.keyboard.press("ArrowRight");
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 3" })).toBeFocused();
+        // Arrow left back to second tab
+        yield page.keyboard.press("ArrowLeft");
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toBeFocused();
+    }));
+    // =============================================================================
+    fixtures_1.test.describe("API functionality verification", () => {
+        (0, fixtures_1.test)("next() method cycles through all tabs correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+      <Fragment>
+        <Tabs id="tabs">
+          <TabItem label="Account">
+            <Text>Account Content</Text>
+          </TabItem>
+          <TabItem label="Stream">
+            <Text>Stream Content</Text>
+          </TabItem>
+          <TabItem label="Support">
+            <Text>Support Content</Text>
+          </TabItem>
+        </Tabs>
+        <Button onClick="tabs.next()" testId="next-btn">
+          Next Tab
+        </Button>
+      </Fragment>
+    `);
+            // Initially Account tab should be active (first tab)
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
+            // Call next() - should move to Stream tab
+            yield page.getByTestId("next-btn").click();
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toHaveAttribute("aria-selected", "true");
+            // Call next() again - should move to Support tab
+            yield page.getByTestId("next-btn").click();
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toHaveAttribute("aria-selected", "true");
+            // Call next() from last tab - should cycle back to Account tab
+            yield page.getByTestId("next-btn").click();
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
+        }));
+        (0, fixtures_1.test)("prev() method cycles through all tabs correctly in reverse", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+      <Fragment>
+        <Tabs id="tabs">
+          <TabItem label="Account">
+            <Text>Account Content</Text>
+          </TabItem>
+          <TabItem label="Stream">
+            <Text>Stream Content</Text>
+          </TabItem>
+          <TabItem label="Support">
+            <Text>Support Content</Text>
+          </TabItem>
+        </Tabs>
+        <Button onClick="tabs.prev()" testId="prev-btn">
+          Previous Tab
+        </Button>
+      </Fragment>
+    `);
+            // Initially Account tab should be active (first tab)
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
+            // Call prev() from first tab - should cycle to Support tab (last tab)
+            yield page.getByTestId("prev-btn").click();
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toHaveAttribute("aria-selected", "true");
+            // Call prev() again - should move to Stream tab
+            yield page.getByTestId("prev-btn").click();
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toHaveAttribute("aria-selected", "true");
+            // Call prev() again - should move to Account tab
+            yield page.getByTestId("prev-btn").click();
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
+        }));
+        (0, fixtures_1.test)("next() and prev() methods work together for full navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+      <Fragment>
+        <Tabs id="tabs">
+          <TabItem label="Account">
+            <Text>Account Content</Text>
+          </TabItem>
+          <TabItem label="Stream">
+            <Text>Stream Content</Text>
+          </TabItem>
+          <TabItem label="Support">
+            <Text>Support Content</Text>
+          </TabItem>
+        </Tabs>
+        <Button onClick="tabs.next()" testId="next-btn">
+          Next Tab
+        </Button>
+        <Button onClick="tabs.prev()" testId="prev-btn">
+          Previous Tab
+        </Button>
+      </Fragment>
+    `);
+            // Start at Account tab
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
+            // Go forward twice: Account -> Stream -> Support
+            yield page.getByTestId("next-btn").click();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toHaveAttribute("aria-selected", "true");
+            yield page.getByTestId("next-btn").click();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toHaveAttribute("aria-selected", "true");
+            // Go back once: Support -> Stream
+            yield page.getByTestId("prev-btn").click();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toHaveAttribute("aria-selected", "true");
+            // Go forward to cycle: Stream -> Support -> Account
+            yield page.getByTestId("next-btn").click();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toHaveAttribute("aria-selected", "true");
+            yield page.getByTestId("next-btn").click();
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
+        }));
+        (0, fixtures_1.test)("tabs can be navigated programmatically (simulating next() behavior)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+      <Tabs>
+        <TabItem label="Tab 1">Content 1</TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>
+        <TabItem label="Tab 3">Content 3</TabItem>
+      </Tabs>
+    `);
+            // Initially first tab is active
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
+            // Simulate next() - move to second tab
+            yield page.getByRole("tab", { name: "Tab 2" }).click();
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
+            // Simulate next() - move to third tab
+            yield page.getByRole("tab", { name: "Tab 3" }).click();
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 3")).toBeVisible();
+            // Simulate next() - should cycle back to first tab
+            yield page.getByRole("tab", { name: "Tab 1" }).click();
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
+        }));
+        (0, fixtures_1.test)("tabs can be navigated backwards programmatically (simulating prev() behavior)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+      <Tabs>
+        <TabItem label="Tab 1">Content 1</TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>
+        <TabItem label="Tab 3">Content 3</TabItem>
+      </Tabs>
+    `);
+            // Initially first tab is active
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
+            // Simulate prev() from first tab - should cycle to last tab
+            yield page.getByRole("tab", { name: "Tab 3" }).click();
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 3")).toBeVisible();
+            // Simulate prev() - move to second tab
+            yield page.getByRole("tab", { name: "Tab 2" }).click();
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
+            // Simulate prev() - move to first tab
+            yield page.getByRole("tab", { name: "Tab 1" }).click();
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
+        }));
+        (0, fixtures_1.test)("activeTab prop sets initial tab correctly (simulating setActiveTabIndex())", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+      <Tabs activeTab="{2}">
+        <TabItem label="Tab 1">Content 1</TabItem>
+        <TabItem label="Tab 2">Content 2</TabItem>
+        <TabItem label="Tab 3">Content 3</TabItem>
+      </Tabs>
+    `);
+            // Third tab should be active initially (index 2)
+            yield (0, fixtures_1.expect)(page.getByText("Content 3")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
+        }));
+        (0, fixtures_1.test)("ArrowRight key cycles through all tabs correctly (keyboard navigation)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs>
+          <TabItem label="Account">
+            <Text>Account Content</Text>
+          </TabItem>
+          <TabItem label="Stream">
+            <Text>Stream Content</Text>
+          </TabItem>
+          <TabItem label="Support">
+            <Text>Support Content</Text>
+          </TabItem>
+        </Tabs>
+      `);
+            // Initially Account tab should be active and focused
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
+            // Focus the first tab
+            yield page.getByRole("tab", { name: "Account" }).focus();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toBeFocused();
+            // Press ArrowRight - should move to Stream tab
+            yield page.keyboard.press("ArrowRight");
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toHaveAttribute("aria-selected", "true");
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toBeFocused();
+            // Press ArrowRight again - should move to Support tab
+            yield page.keyboard.press("ArrowRight");
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toHaveAttribute("aria-selected", "true");
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toBeFocused();
+            // Press ArrowRight from last tab - should cycle back to Account tab
+            yield page.keyboard.press("ArrowRight");
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toBeFocused();
+        }));
+        (0, fixtures_1.test)("ArrowLeft key cycles through all tabs correctly in reverse (keyboard navigation)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs>
+          <TabItem label="Account">
+            <Text>Account Content</Text>
+          </TabItem>
+          <TabItem label="Stream">
+            <Text>Stream Content</Text>
+          </TabItem>
+          <TabItem label="Support">
+            <Text>Support Content</Text>
+          </TabItem>
+        </Tabs>
+      `);
+            // Initially Account tab should be active
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
+            // Focus the first tab
+            yield page.getByRole("tab", { name: "Account" }).focus();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toBeFocused();
+            // Press ArrowLeft from first tab - should cycle to Support tab (last tab)
+            yield page.keyboard.press("ArrowLeft");
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toHaveAttribute("aria-selected", "true");
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toBeFocused();
+            // Press ArrowLeft again - should move to Stream tab
+            yield page.keyboard.press("ArrowLeft");
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toHaveAttribute("aria-selected", "true");
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toBeFocused();
+            // Press ArrowLeft again - should move to Account tab
+            yield page.keyboard.press("ArrowLeft");
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toBeFocused();
+        }));
+        (0, fixtures_1.test)("ArrowRight and ArrowLeft keys work together for full keyboard navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Tabs>
+          <TabItem label="Account">
+            <Text>Account Content</Text>
+          </TabItem>
+          <TabItem label="Stream">
+            <Text>Stream Content</Text>
+          </TabItem>
+          <TabItem label="Support">
+            <Text>Support Content</Text>
+          </TabItem>
+        </Tabs>
+      `);
+            // Start at Account tab and focus it
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
+            yield page.getByRole("tab", { name: "Account" }).focus();
+            // Go forward twice: Account -> Stream -> Support
+            yield page.keyboard.press("ArrowRight");
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toHaveAttribute("aria-selected", "true");
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toBeFocused();
+            yield page.keyboard.press("ArrowRight");
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toHaveAttribute("aria-selected", "true");
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toBeFocused();
+            // Go back once: Support -> Stream
+            yield page.keyboard.press("ArrowLeft");
+            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toHaveAttribute("aria-selected", "true");
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toBeFocused();
+            // Go forward to cycle: Stream -> Support -> Account
+            yield page.keyboard.press("ArrowRight");
+            yield (0, fixtures_1.expect)(page.getByText("Support Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toHaveAttribute("aria-selected", "true");
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toBeFocused();
+            yield page.keyboard.press("ArrowRight");
+            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
+            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toBeFocused();
+        }));
+        (0, fixtures_1.test)("API methods work with headerTemplate (visual verification)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+      <Fragment>
+        <Tabs id="tabs">
+          <property name="headerTemplate">
+            <Text>{$header.isActive ? 'Active: ' : ''}{$header.label}</Text>
+          </property>
+          <TabItem label="Tab 1">Content 1</TabItem>
+          <TabItem label="Tab 2">Content 2</TabItem>
+          <TabItem label="Tab 3">Content 3</TabItem>
+        </Tabs>
+        <Button onClick="tabs.prev()">Prev</Button>
+        <Button onClick="tabs.next()">Next</Button>
+      </Fragment>
+    `);
+            // Initially first tab is active
+            yield (0, fixtures_1.expect)(page.getByText("Active: Tab 1")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Tab 2")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Tab 3")).toBeVisible();
+            // Simulate next() behavior by clicking second tab
+            yield page.getByRole("button", { name: "Next" }).click();
+            yield (0, fixtures_1.expect)(page.getByText("Active: Tab 2")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Tab 1")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Tab 3")).toBeVisible();
+            // Simulate prev() behavior by clicking first tab
+            yield page.getByRole("button", { name: "Prev" }).click();
+            yield (0, fixtures_1.expect)(page.getByText("Active: Tab 1")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Tab 2")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Tab 3")).toBeVisible();
+        }));
+    });
+});
+// =============================================================================
+// DYNAMIC CONTENT TESTS
+// =============================================================================
+fixtures_1.test.describe("dynamic content", () => {
+    (0, fixtures_1.test)("works with Items component for dynamic tabs", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <Items data="{['First', 'Second', 'Third']}">
+          <TabItem label="{$item}">Content for {$item}</TabItem>
+        </Items>
+      </Tabs>
+    `);
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "First" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Second" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Third" })).toBeVisible();
+        yield page.getByRole("tab", { name: "Second" }).click();
+        yield (0, fixtures_1.expect)(page.getByText("Content for Second")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("headerTemplate works with dynamic content from Items", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Tabs>
+        <property name="headerTemplate">
+          <Text color="red">Account {$header.label}</Text>
+        </property>
+        <Items data="{[1, 2, 3, 4, 5]}">
+          <TabItem label="Account {$item}">
+            <property name="headerTemplate">
+              <Text when="true" color="blue">{$header.label} | {$item}</Text>
+            </property>
+            Content for account {$item}
+          </TabItem>
+        </Items>
+      </Tabs>
+    `);
+        // Check that individual headerTemplate takes priority and has access to both $header and $item
+        yield (0, fixtures_1.expect)(page.getByText("Account 1 | 1")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Account 2 | 2")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Account 3 | 3")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Account 4 | 4")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Account 5 | 5")).toBeVisible();
+        // Test clicking on different tabs
+        yield page.getByText("Account 3 | 3").click();
+        yield (0, fixtures_1.expect)(page.getByText("Content for account 3")).toBeVisible();
+    }));
+});
+fixtures_1.test.describe("onDidChange callback functionality", () => {
+    (0, fixtures_1.test)("onDidChange callback is called when tab changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Fragment var.tabChangeInfo="No change yet">
+      <Tabs onDidChange="(index, id, label) => {
+        tabChangeInfo = 'Tab: ' + index + ' - ' + label;
+      }">
+        <TabItem label="First Tab">
+          <Text>First tab content</Text>
+        </TabItem>
+        <TabItem label="Second Tab">
+          <Text>Second tab content</Text>
+        </TabItem>
+        <TabItem label="Third Tab">
+          <Text>Third tab content</Text>
+        </TabItem>
+      </Tabs>
+      <Text>{tabChangeInfo}</Text>
+      </Fragment>
+    `);
+        // Initially should show no change
+        yield (0, fixtures_1.expect)(page.getByText("No change yet")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("First tab content")).toBeVisible();
+        // Click on second tab
+        yield page.getByRole("tab", { name: "Second Tab" }).click();
+        yield (0, fixtures_1.expect)(page.getByText("Second tab content")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Tab: 1 - Second Tab")).toBeVisible();
+        // Click on third tab
+        yield page.getByRole("tab", { name: "Third Tab" }).click();
+        yield (0, fixtures_1.expect)(page.getByText("Third tab content")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Tab: 2 - Third Tab")).toBeVisible();
+        // Click back to first tab
+        yield page.getByRole("tab", { name: "First Tab" }).click();
+        yield (0, fixtures_1.expect)(page.getByText("First tab content")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Tab: 0 - First Tab")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("onDidChange callback is not called when same tab is clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Fragment var.changeCount="{0}">
+      <Tabs onDidChange="(index, id, label) => {
+        changeCount = changeCount + 1;
+      }">
+        <TabItem label="Tab One">
+          <Text>Content one</Text>
+        </TabItem>
+        <TabItem label="Tab Two">
+          <Text>Content two</Text>
+        </TabItem>
+      </Tabs>
+      <Text>Changes: {changeCount}</Text>
+      </Fragment>
+    `);
+        // Initially should show 0 changes
+        yield (0, fixtures_1.expect)(page.getByText("Changes: 0")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Content one")).toBeVisible();
+        // Click on second tab - should trigger onDidChange
+        yield page.getByRole("tab", { name: "Tab Two" }).click();
+        yield (0, fixtures_1.expect)(page.getByText("Content two")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Changes: 1")).toBeVisible();
+        // Click on second tab again - should NOT trigger onDidChange
+        yield page.getByRole("tab", { name: "Tab Two" }).click();
+        yield (0, fixtures_1.expect)(page.getByText("Changes: 1")).toBeVisible(); // Should still be 1
+    }));
+});