xmlui 0.10.13 → 0.10.14

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

@@ -0,0 +1,435 @@
+"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");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+(0, fixtures_1.test)("component renders with basic props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="Test Summary">Content here</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.getSummaryContent()).toContainText("Test Summary");
+    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible(); // Initially collapsed
+}));
+(0, fixtures_1.test)("component displays summary content correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="My Summary">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    yield (0, fixtures_1.expect)(driver.getSummaryContent()).toContainText("My Summary");
+    yield (0, fixtures_1.expect)(driver.getSummary()).toBeVisible();
+}));
+(0, fixtures_1.test)("component handles initiallyExpanded prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="Test" initiallyExpanded="true">Content here</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("Content here");
+}));
+(0, fixtures_1.test)("component toggles on summary click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="Click me">Hidden content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    // Initially collapsed
+    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible();
+    // Click to expand
+    yield driver.getSummary().click();
+    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
+    // Click to collapse
+    yield driver.getSummary().click();
+    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible();
+}));
+(0, fixtures_1.test)("component displays correct icons for collapsed and expanded states", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="Test">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    // Initially collapsed - should show chevronright icon
+    yield (0, fixtures_1.expect)(driver.getIcon()).toBeVisible();
+    // Expand and check icon changes
+    yield driver.getSummary().click();
+    yield (0, fixtures_1.expect)(driver.getIcon()).toBeVisible();
+}));
+(0, fixtures_1.test)("component handles custom icons", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`
+    <ExpandableItem 
+      summary="Test" 
+      iconCollapsed="plus" 
+      iconExpanded="minus">
+      Content
+    </ExpandableItem>
+  `, {});
+    const driver = yield createExpandableItemDriver();
+    yield (0, fixtures_1.expect)(driver.getIcon()).toBeVisible();
+    // Expand to see expanded icon
+    yield driver.getSummary().click();
+    yield (0, fixtures_1.expect)(driver.getIcon()).toBeVisible();
+}));
+(0, fixtures_1.test)("component supports iconPosition prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="Test" iconPosition="start">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    const className = yield driver.getSummary().getAttribute('class');
+    (0, fixtures_1.expect)(className).toMatch(/iconStart/);
+    yield (0, fixtures_1.expect)(driver.getIcon()).toBeVisible();
+}));
+(0, fixtures_1.test)("component handles withSwitch prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="Test" withSwitch="true">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    // Check that the switch container (aria-hidden div) is present
+    const switchContainer = driver.getSummary().locator('[aria-hidden="true"]');
+    yield (0, fixtures_1.expect)(switchContainer).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.getIcon()).not.toBeVisible();
+}));
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+(0, fixtures_1.test)("component has correct accessibility attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
+    yield initTestBed(`<ExpandableItem summary="Test Summary">Content here</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    const summary = driver.getSummary();
+    // Summary should have proper button role and ARIA attributes
+    yield (0, fixtures_1.expect)(summary).toHaveRole("button");
+    yield (0, fixtures_1.expect)(summary).toHaveAttribute("aria-expanded", "false");
+    yield (0, fixtures_1.expect)(summary).toHaveAttribute("aria-disabled", "false");
+    yield (0, fixtures_1.expect)(summary).toHaveAttribute("tabindex", "0");
+    yield (0, fixtures_1.expect)(summary).toHaveAttribute("aria-controls");
+    yield (0, fixtures_1.expect)(summary).toHaveAttribute("id");
+}));
+(0, fixtures_1.test)("component ARIA attributes update with expansion state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
+    yield initTestBed(`<ExpandableItem summary="Test Summary">Content here</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    const summary = driver.getSummary();
+    // Initially collapsed
+    yield (0, fixtures_1.expect)(summary).toHaveAttribute("aria-expanded", "false");
+    // Expand
+    yield summary.click();
+    yield (0, fixtures_1.expect)(summary).toHaveAttribute("aria-expanded", "true");
+    // Collapse
+    yield summary.click();
+    yield (0, fixtures_1.expect)(summary).toHaveAttribute("aria-expanded", "false");
+}));
+(0, fixtures_1.test)("component content region has correct ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
+    yield initTestBed(`<ExpandableItem summary="Test Summary" initiallyExpanded="true">Content here</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    const summary = driver.getSummary();
+    const content = driver.getContent();
+    // Content should have region role and proper labeling
+    yield (0, fixtures_1.expect)(content).toHaveRole("region");
+    yield (0, fixtures_1.expect)(content).toHaveAttribute("aria-labelledby");
+    yield (0, fixtures_1.expect)(content).toHaveAttribute("id");
+    // Verify ARIA relationship between summary and content
+    const summaryId = yield summary.getAttribute("id");
+    const contentAriaLabelledBy = yield content.getAttribute("aria-labelledby");
+    const summaryAriaControls = yield summary.getAttribute("aria-controls");
+    const contentId = yield content.getAttribute("id");
+    (0, fixtures_1.expect)(contentAriaLabelledBy).toBe(summaryId);
+    (0, fixtures_1.expect)(summaryAriaControls).toBe(contentId);
+}));
+(0, fixtures_1.test)("component is keyboard accessible with Enter key", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
+    const { testStateDriver } = yield initTestBed(`<ExpandableItem summary="Test" onExpandedChange="arg => testState = arg">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    const summary = driver.getSummary();
+    // Focus the summary button
+    yield summary.focus();
+    yield (0, fixtures_1.expect)(summary).toBeFocused();
+    // Press Enter to toggle
+    yield summary.press("Enter");
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
+    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
+    // Press Enter again to collapse
+    yield summary.press("Enter");
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(false);
+    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible();
+}));
+(0, fixtures_1.test)("component is keyboard accessible with Space key", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
+    const { testStateDriver } = yield initTestBed(`<ExpandableItem summary="Test" onExpandedChange="arg => testState = arg">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    const summary = driver.getSummary();
+    // Focus the summary button
+    yield summary.focus();
+    yield (0, fixtures_1.expect)(summary).toBeFocused();
+    // Press Space to toggle
+    yield summary.press(" ");
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
+    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
+    // Press Space again to collapse
+    yield summary.press(" ");
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(false);
+    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible();
+}));
+(0, fixtures_1.test)("component maintains focus after keyboard toggle", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
+    yield initTestBed(`<ExpandableItem summary="Test">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    const summary = driver.getSummary();
+    // Focus and expand with keyboard
+    yield summary.focus();
+    yield (0, fixtures_1.expect)(summary).toBeFocused();
+    yield summary.press("Enter");
+    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
+    yield (0, fixtures_1.expect)(summary).toBeFocused(); // Focus should remain
+    // Collapse with keyboard
+    yield summary.press("Space");
+    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible();
+    yield (0, fixtures_1.expect)(summary).toBeFocused(); // Focus should still remain
+}));
+(0, fixtures_1.test)("component is focusable only when enabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
+    yield initTestBed(`<ExpandableItem summary="Test" enabled="false">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    const summary = driver.getSummary();
+    // Disabled component should not be focusable (no tabindex attribute)
+    yield (0, fixtures_1.expect)(summary).not.toHaveAttribute("tabindex");
+    yield (0, fixtures_1.expect)(summary).toHaveAttribute("aria-disabled", "true");
+}));
+(0, fixtures_1.test)("component keyboard interaction works with switch variant", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
+    const { testStateDriver } = yield initTestBed(`<ExpandableItem summary="Test" withSwitch="true" onExpandedChange="arg => testState = arg">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    const summary = driver.getSummary();
+    // Focus and activate with Enter
+    yield summary.focus();
+    yield summary.press("Enter");
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
+    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
+    // Deactivate with Space
+    yield summary.press(" ");
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(false);
+    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible();
+}));
+(0, fixtures_1.test)("component icon/switch container is hidden from screen readers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
+    yield initTestBed(`<ExpandableItem summary="Test">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    // Icon container should be aria-hidden
+    const iconContainer = driver.getSummary().locator('[class*="icon"]');
+    yield (0, fixtures_1.expect)(iconContainer).toHaveAttribute("aria-hidden", "true");
+}));
+(0, fixtures_1.test)("component supports screen reader navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="Accessible Summary">Screen reader content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    // Summary should be properly announced as a button
+    const summary = driver.getSummary();
+    yield (0, fixtures_1.expect)(summary).toHaveRole("button");
+    yield summary.click();
+    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
+}));
+// =============================================================================
+// VISUAL STATE TESTS
+// =============================================================================
+(0, fixtures_1.test)("component applies theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="Test">Content</ExpandableItem>`, {
+        testThemeVars: { "backgroundColor-ExpandableItem": "rgb(255, 0, 0)" }
+    });
+    const driver = yield createExpandableItemDriver();
+    yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", "rgb(255, 0, 0)");
+}));
+(0, fixtures_1.test)("component applies disabled visual state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="Test" enabled="false">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    const className = yield driver.component.getAttribute('class');
+    (0, fixtures_1.expect)(className).toMatch(/disabled/);
+}));
+(0, fixtures_1.test)("component applies expanded visual state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="Test" initiallyExpanded="true">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    // Instead of checking for CSS class, check that content is visible when initially expanded
+    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("Content");
+}));
+(0, fixtures_1.test)("component applies withSwitch visual state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="Test" withSwitch="true">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    const className = yield driver.component.getAttribute('class');
+    (0, fixtures_1.expect)(className).toMatch(/withSwitch/);
+}));
+(0, fixtures_1.test)("component handles icon position styling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="Test" iconPosition="end">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    const className = yield driver.getSummary().getAttribute('class');
+    (0, fixtures_1.expect)(className).toMatch(/iconEnd/);
+}));
+// =============================================================================
+// EDGE CASE TESTS
+// =============================================================================
+(0, fixtures_1.test)("component handles null and undefined props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem>Content without summary</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.getSummary()).toBeVisible();
+}));
+(0, fixtures_1.test)("component handles empty summary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.getSummary()).toBeVisible();
+}));
+(0, fixtures_1.test)("component handles empty content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="Test"></ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    yield driver.getSummary().click();
+    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
+}));
+(0, fixtures_1.test)("component handles special characters in summary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="Test with émojis 🚀 & quotes">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    yield (0, fixtures_1.expect)(driver.getSummaryContent()).toContainText("Test with émojis 🚀 & quotes");
+}));
+(0, fixtures_1.test)("component handles complex summary content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`
+    <ExpandableItem summary="Complex Summary">
+      Content here
+    </ExpandableItem>
+  `, {});
+    const driver = yield createExpandableItemDriver();
+    yield (0, fixtures_1.expect)(driver.getSummary()).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.getSummaryContent()).toContainText("Complex Summary");
+}));
+(0, fixtures_1.test)("component handles disabled state interaction", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="Test" enabled="false">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    // Should not expand when disabled - use force click since the element is aria-disabled
+    yield driver.getSummary().click({ force: true });
+    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible();
+}));
+// =============================================================================
+// PERFORMANCE TESTS
+// =============================================================================
+(0, fixtures_1.test)("component memoization prevents unnecessary re-renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    const { testStateDriver } = yield initTestBed(`
+    <ExpandableItem 
+      summary="Test" 
+      onExpandedChange="testState = (testState || 0) + 1">
+      Content
+    </ExpandableItem>
+  `, {});
+    const driver = yield createExpandableItemDriver();
+    // Expand
+    yield driver.getSummary().click();
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(1);
+    // Collapse
+    yield driver.getSummary().click();
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(2);
+}));
+(0, fixtures_1.test)("component handles rapid toggling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`<ExpandableItem summary="Test">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    // Rapid clicks
+    yield driver.getSummary().click();
+    yield driver.getSummary().click();
+    yield driver.getSummary().click();
+    // Should end up collapsed (odd number of clicks)
+    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
+}));
+(0, fixtures_1.test)("component handles large content efficiently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    const largeContent = "Very long content ".repeat(100);
+    yield initTestBed(`<ExpandableItem summary="Test">${largeContent}</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    yield driver.getSummary().click();
+    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("Very long content");
+}));
+// =============================================================================
+// INTEGRATION TESTS
+// =============================================================================
+(0, fixtures_1.test)("component works in layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`
+    <VStack gap="2">
+      <ExpandableItem summary="First Item">First content</ExpandableItem>
+      <ExpandableItem summary="Second Item">Second content</ExpandableItem>
+    </VStack>
+  `, {});
+    const driver = yield createExpandableItemDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    // Use first() to get the first ExpandableItem's summary content
+    yield (0, fixtures_1.expect)(driver.getSummaryContent().first()).toContainText("First Item");
+}));
+(0, fixtures_1.test)("component API methods work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <Fragment>
+      <ExpandableItem id="expandable" summary="Test">Content</ExpandableItem>
+      <Button testId="expandBtn" onClick="expandable.expand()">Expand</Button>
+      <Button testId="collapseBtn" onClick="expandable.collapse()">Collapse</Button>
+      <Button testId="toggleBtn" onClick="expandable.toggle()">Toggle</Button>
+      <Button testId="checkBtn" onClick="testState = expandable.isExpanded()">Check</Button>
+    </Fragment>
+  `, {});
+    const { testStateDriver } = yield initTestBed(`
+    <Fragment>
+      <ExpandableItem id="expandable" summary="Test">Content</ExpandableItem>
+      <Button testId="expandBtn" onClick="expandable.expand()">Expand</Button>
+      <Button testId="collapseBtn" onClick="expandable.collapse()">Collapse</Button>
+      <Button testId="toggleBtn" onClick="expandable.toggle()">Toggle</Button>
+      <Button testId="checkBtn" onClick="testState = expandable.isExpanded()">Check</Button>
+    </Fragment>
+  `, {});
+    // Test expand API
+    yield page.getByTestId("expandBtn").click();
+    yield (0, fixtures_1.expect)(page.locator('[class*="_content_"]')).toBeVisible();
+    // Test isExpanded API
+    yield page.getByTestId("checkBtn").click();
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
+    // Test collapse API
+    yield page.getByTestId("collapseBtn").click();
+    yield (0, fixtures_1.expect)(page.locator('[class*="_content_"]')).not.toBeVisible();
+    // Test toggle API
+    yield page.getByTestId("toggleBtn").click();
+    yield (0, fixtures_1.expect)(page.locator('[class*="_content_"]')).toBeVisible();
+}));
+(0, fixtures_1.test)("component works with forms", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`
+    <Form>
+      <ExpandableItem summary="Advanced Options">
+        <FormItem label="Advanced Setting">
+          <TextBox name="advanced" />
+        </FormItem>
+      </ExpandableItem>
+    </Form>
+  `, {});
+    const driver = yield createExpandableItemDriver();
+    yield driver.getSummary().click();
+    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("Advanced Setting");
+}));
+(0, fixtures_1.test)("component event handlers work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    const { testStateDriver } = yield initTestBed(`
+    <ExpandableItem 
+      summary="Test" 
+      onExpandedChange="arg =>testState = arg">
+      Content
+    </ExpandableItem>
+  `, {});
+    const driver = yield createExpandableItemDriver();
+    // Click to expand - should set testState to true
+    yield driver.getSummary().click();
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
+    // Click to collapse - should set testState to false
+    yield driver.getSummary().click();
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(false);
+}));
+(0, fixtures_1.test)("component works with switch variant", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
+    yield initTestBed(`<ExpandableItem summary="Test" withSwitch="true">Content</ExpandableItem>`, {});
+    const driver = yield createExpandableItemDriver();
+    // With switch variant, users should click the summary (button) to toggle
+    // The switch itself is decorative and aria-hidden
+    yield driver.getSummary().click();
+    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
+    // Click the summary again to toggle back
+    yield driver.getSummary().click();
+    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible();
+}));
+(0, fixtures_1.test)("component works in nested scenarios", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
+    yield initTestBed(`
+    <ExpandableItem summary="Parent">
+      <ExpandableItem summary="Child">
+        Nested content
+      </ExpandableItem>
+    </ExpandableItem>
+  `, {});
+    const driver = yield createExpandableItemDriver();
+    // Expand parent
+    yield driver.getSummary().click();
+    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
+    // Should see nested expandable item
+    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("Child");
+}));