xmlui 0.11.3 → 0.11.6

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

@@ -1,631 +0,0 @@
-"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 component_test_helpers_1 = require("../../testing/component-test-helpers");
-const fixtures_1 = require("../../testing/fixtures");
-const utils_1 = require("./utils");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("renders with basic setup", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Splitter height="200px" testId="splitter">
-        <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-        <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-      </Splitter>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with single child", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Splitter height="200px" testId="splitter">
-        <Stack backgroundColor="lightblue" height="100%" testId="single-child"/>
-      </Splitter>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("single-child")).toBeVisible();
-    }));
-    fixtures_1.test.describe("orientation property", () => {
-        (0, fixtures_1.test)("orientation='horizontal' arranges sections left to right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Splitter height="200px" width="400px" orientation="horizontal" testId="splitter">
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            const primary = page.getByTestId("primary");
-            const secondary = page.getByTestId("secondary");
-            const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
-            const secondaryBounds = yield (0, component_test_helpers_1.getBounds)(secondary);
-            // In horizontal orientation, primary should be to the left of secondary
-            (0, fixtures_1.expect)(primaryBounds.right).toBeLessThanOrEqual(secondaryBounds.left + 10); // Allow for small overlap due to resizer
-        }));
-        (0, fixtures_1.test)("orientation='vertical' arranges sections top to bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Splitter height="200px" width="400px" orientation="vertical" testId="splitter">
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            const primary = page.getByTestId("primary");
-            const secondary = page.getByTestId("secondary");
-            const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
-            const secondaryBounds = yield (0, component_test_helpers_1.getBounds)(secondary);
-            // In vertical orientation, primary should be above secondary
-            (0, fixtures_1.expect)(primaryBounds.bottom).toBeLessThanOrEqual(secondaryBounds.top + 10); // Allow for small overlap due to resizer
-        }));
-        (0, fixtures_1.test)("defaults to vertical orientation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Splitter height="200px" width="400px" testId="splitter">
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            const primary = page.getByTestId("primary");
-            const secondary = page.getByTestId("secondary");
-            const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
-            const secondaryBounds = yield (0, component_test_helpers_1.getBounds)(secondary);
-            // Default should be vertical (primary above secondary)
-            (0, fixtures_1.expect)(primaryBounds.bottom).toBeLessThanOrEqual(secondaryBounds.top + 10);
-        }));
-    });
-    fixtures_1.test.describe("swapped property", () => {
-        [
-            { swapped: false, orientation: "horizontal", description: "primary left, secondary right" },
-            { swapped: true, orientation: "horizontal", description: "secondary left, primary right" },
-            { swapped: false, orientation: "vertical", description: "primary top, secondary bottom" },
-            { swapped: true, orientation: "vertical", description: "secondary top, primary bottom" },
-        ].forEach(({ swapped, orientation, description }) => {
-            (0, fixtures_1.test)(`swapped=${swapped} with orientation=${orientation} renders ${description}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-                yield initTestBed(`
-          <Splitter height="200px" width="400px" orientation="${orientation}" swapped="${swapped}" testId="splitter">
-            <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-            <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-          </Splitter>
-        `);
-                const primary = page.getByTestId("primary");
-                const secondary = page.getByTestId("secondary");
-                const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
-                const secondaryBounds = yield (0, component_test_helpers_1.getBounds)(secondary);
-                if (orientation === "horizontal") {
-                    if (swapped) {
-                        // Secondary should be to the left of primary
-                        (0, fixtures_1.expect)(secondaryBounds.right).toBeLessThanOrEqual(primaryBounds.left + 10);
-                    }
-                    else {
-                        // Primary should be to the left of secondary
-                        (0, fixtures_1.expect)(primaryBounds.right).toBeLessThanOrEqual(secondaryBounds.left + 10);
-                    }
-                }
-                else {
-                    if (swapped) {
-                        // Secondary should be above primary
-                        (0, fixtures_1.expect)(secondaryBounds.bottom).toBeLessThanOrEqual(primaryBounds.top + 10);
-                    }
-                    else {
-                        // Primary should be above secondary
-                        (0, fixtures_1.expect)(primaryBounds.bottom).toBeLessThanOrEqual(secondaryBounds.top + 10);
-                    }
-                }
-            }));
-        });
-    });
-    fixtures_1.test.describe("initialPrimarySize property", () => {
-        (0, fixtures_1.test)("sets initial size with percentage", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Splitter height="200px" width="400px" orientation="horizontal" initialPrimarySize="25%" testId="splitter">
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            const splitter = page.getByTestId("splitter");
-            const primary = page.getByTestId("primary");
-            const splitterBounds = yield (0, component_test_helpers_1.getBounds)(splitter);
-            const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
-            const expectedWidth = splitterBounds.width * 0.25;
-            const tolerance = 10; // Allow some tolerance for rounding/margins
-            (0, fixtures_1.expect)(Math.abs(primaryBounds.width - expectedWidth)).toBeLessThan(tolerance);
-        }));
-        (0, fixtures_1.test)("sets initial size with pixels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Splitter height="200px" width="400px" orientation="horizontal" initialPrimarySize="100px" testId="splitter">
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            const primary = page.getByTestId("primary");
-            const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
-            const tolerance = 10;
-            (0, fixtures_1.expect)(Math.abs(primaryBounds.width - 100)).toBeLessThan(tolerance);
-        }));
-        (0, fixtures_1.test)("defaults to 50%", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Splitter height="200px" width="400px" orientation="horizontal" testId="splitter">
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            const splitter = page.getByTestId("splitter");
-            const primary = page.getByTestId("primary");
-            const splitterBounds = yield (0, component_test_helpers_1.getBounds)(splitter);
-            const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
-            const expectedWidth = splitterBounds.width * 0.5;
-            const tolerance = 15; // Allow some tolerance for default behavior
-            (0, fixtures_1.expect)(Math.abs(primaryBounds.width - expectedWidth)).toBeLessThan(tolerance);
-        }));
-    });
-    fixtures_1.test.describe("floating property", () => {
-        (0, fixtures_1.test)("floating=false shows resizer permanently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-            yield initTestBed(`
-        <Splitter height="200px" width="400px" orientation="horizontal" floating="false" testId="splitter">
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            const splitter = page.getByTestId("splitter");
-            const driver = yield createSplitterDriver(splitter);
-            const resizer = yield driver.getResizer();
-            yield (0, fixtures_1.expect)(resizer).toBeVisible();
-        }));
-        (0, fixtures_1.test)("floating=true hides resizer until hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Splitter height="200px" width="400px" orientation="horizontal" floating="true" testId="splitter">
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            const splitter = page.getByTestId("splitter");
-            // When floating=true, the regular resizer should not be visible
-            const regularResizer = splitter.locator('[class*="resizer"]:not([class*="floating"])');
-            const isRegularResizerVisible = yield regularResizer.isVisible().catch(() => false);
-            (0, fixtures_1.expect)(isRegularResizerVisible).toBe(false);
-            // The floating resizer should exist but be initially hidden (opacity 0)
-            const floatingResizer = splitter.locator('[class*="floating"]');
-            if ((yield floatingResizer.count()) > 0) {
-                const initialOpacity = yield floatingResizer.evaluate(el => window.getComputedStyle(el).opacity);
-                (0, fixtures_1.expect)(parseFloat(initialOpacity)).toBe(0);
-            }
-        }));
-    });
-    fixtures_1.test.describe("splitterTemplate property", () => {
-        (0, fixtures_1.test)("renders custom splitter template", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-            yield initTestBed(`
-        <Splitter height="200px" width="400px" testId="splitter">
-          <property name="splitterTemplate">
-            <ContentSeparator backgroundColor="green" height="4px" testId="custom-separator"/>
-          </property>
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            yield (0, fixtures_1.expect)(page.getByTestId("custom-separator")).toBeVisible();
-        }));
-    });
-    fixtures_1.test.describe("resize functionality", () => {
-        (0, fixtures_1.test)("drag resizer changes panel sizes in horizontal orientation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-            yield initTestBed(`
-        <Splitter height="200px" width="400px" orientation="horizontal" testId="splitter">
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            const splitter = page.getByTestId("splitter");
-            const primary = page.getByTestId("primary");
-            const driver = yield createSplitterDriver(splitter);
-            // Get initial size
-            const initialBounds = yield (0, component_test_helpers_1.getBounds)(primary);
-            // Drag resizer to the right by 50 pixels
-            yield driver.dragResizer(50, 0);
-            // Get new size and verify it changed
-            const newBounds = yield (0, component_test_helpers_1.getBounds)(primary);
-            (0, fixtures_1.expect)(newBounds.width).toBeGreaterThan(initialBounds.width + 30); // Allow some tolerance
-        }));
-        (0, fixtures_1.test)("drag resizer changes panel sizes in vertical orientation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-            yield initTestBed(`
-        <Splitter height="200px" width="400px" orientation="vertical" testId="splitter">
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            const splitter = page.getByTestId("splitter");
-            const primary = page.getByTestId("primary");
-            const driver = yield createSplitterDriver(splitter);
-            // Get initial size
-            const initialBounds = yield (0, component_test_helpers_1.getBounds)(primary);
-            // Drag resizer down by 30 pixels
-            yield driver.dragResizer(0, 30);
-            // Get new size and verify it changed
-            const newBounds = yield (0, component_test_helpers_1.getBounds)(primary);
-            (0, fixtures_1.expect)(newBounds.height).toBeGreaterThan(initialBounds.height + 15); // Allow some tolerance
-        }));
-    });
-    fixtures_1.test.describe("size constraint properties", () => {
-        (0, fixtures_1.test)("minPrimarySize constrains minimum size", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-            yield initTestBed(`
-        <Splitter height="200px" width="400px" orientation="horizontal" minPrimarySize="100px" testId="splitter">
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            const splitter = page.getByTestId("splitter");
-            const primary = page.getByTestId("primary");
-            const driver = yield createSplitterDriver(splitter);
-            // Try to drag resizer far to the left
-            yield driver.dragResizer(-300, 0);
-            // Primary should not be smaller than minimum
-            const bounds = yield (0, component_test_helpers_1.getBounds)(primary);
-            (0, fixtures_1.expect)(bounds.width).toBeGreaterThanOrEqual(90); // Allow small tolerance
-        }));
-        (0, fixtures_1.test)("maxPrimarySize constrains maximum size", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-            yield initTestBed(`
-        <Splitter height="200px" width="400px" orientation="horizontal" maxPrimarySize="300px" testId="splitter">
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            const splitter = page.getByTestId("splitter");
-            const primary = page.getByTestId("primary");
-            const driver = yield createSplitterDriver(splitter);
-            // Try to drag resizer far to the right
-            yield driver.dragResizer(300, 0);
-            // Primary should not be larger than maximum
-            const bounds = yield (0, component_test_helpers_1.getBounds)(primary);
-            (0, fixtures_1.expect)(bounds.width).toBeLessThanOrEqual(310); // Allow small tolerance
-        }));
-        (0, fixtures_1.test)("negative maxPrimarySize in pixels constrains from end", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-            yield initTestBed(`
-        <Splitter height="200px" width="400px" orientation="horizontal" maxPrimarySize="-100px" testId="splitter">
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            const splitter = page.getByTestId("splitter");
-            const primary = page.getByTestId("primary");
-            const driver = yield createSplitterDriver(splitter);
-            // Try to drag resizer far to the right
-            yield driver.dragResizer(350, 0);
-            // Primary should not be larger than 400 - 100 = 300px
-            const bounds = yield (0, component_test_helpers_1.getBounds)(primary);
-            (0, fixtures_1.expect)(bounds.width).toBeLessThanOrEqual(310); // Allow small tolerance for 300px max
-        }));
-        (0, fixtures_1.test)("negative maxPrimarySize in percentage constrains from end", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-            yield initTestBed(`
-        <Splitter height="200px" width="400px" orientation="horizontal" maxPrimarySize="-25%" testId="splitter">
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            const splitter = page.getByTestId("splitter");
-            const primary = page.getByTestId("primary");
-            const driver = yield createSplitterDriver(splitter);
-            // Try to drag resizer far to the right
-            yield driver.dragResizer(350, 0);
-            // Primary should not be larger than 75% of 400px = 300px
-            const bounds = yield (0, component_test_helpers_1.getBounds)(primary);
-            (0, fixtures_1.expect)(bounds.width).toBeLessThanOrEqual(310); // Allow small tolerance for 300px max
-        }));
-        (0, fixtures_1.test)("negative maxPrimarySize works in vertical orientation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-            yield initTestBed(`
-        <Splitter height="400px" width="200px" orientation="vertical" maxPrimarySize="-100px" testId="splitter">
-          <Stack backgroundColor="lightblue" width="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" width="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            const splitter = page.getByTestId("splitter");
-            const primary = page.getByTestId("primary");
-            const driver = yield createSplitterDriver(splitter);
-            // Try to drag resizer far down
-            yield driver.dragResizer(0, 350);
-            // Primary should not be larger than 400 - 100 = 300px height
-            const bounds = yield (0, component_test_helpers_1.getBounds)(primary);
-            (0, fixtures_1.expect)(bounds.height).toBeLessThanOrEqual(310); // Allow small tolerance for 300px max
-        }));
-    });
-    fixtures_1.test.describe("resize event", () => {
-        (0, fixtures_1.test)("fires resize event when dragging", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Splitter height="200px" width="400px" orientation="horizontal" onResize="arg => testState = arg" testId="splitter">
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            const splitter = page.getByTestId("splitter");
-            const driver = yield createSplitterDriver(splitter);
-            // Drag resizer
-            yield driver.dragResizer(50, 0);
-            // Verify resize event was called with array of percentages
-            yield fixtures_1.expect.poll(testStateDriver.testState).toBeDefined();
-            const resizeData = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(Array.isArray(resizeData)).toBe(true);
-            (0, fixtures_1.expect)(resizeData).toHaveLength(2);
-            (0, fixtures_1.expect)(typeof resizeData[0]).toBe("number");
-            (0, fixtures_1.expect)(typeof resizeData[1]).toBe("number");
-        }));
-    });
-    fixtures_1.test.describe("edge cases", () => {
-        (0, fixtures_1.test)("handles null properties gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Splitter 
-          height="200px" 
-          initialPrimarySize="50px" 
-          minPrimarySize="10px" 
-          maxPrimarySize="180px"
-          testId="splitter"
-        >
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles undefined properties gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Splitter 
-          height="200px" 
-          width="400px"
-          testId="splitter"
-        >
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles invalid size values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Splitter 
-          height="200px" 
-          width="400px"
-          initialPrimarySize="50%" 
-          testId="splitter"
-        >
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles object values for string properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Splitter 
-          height="200px" 
-          width="400px"
-          orientation="horizontal" 
-          initialPrimarySize="50%"
-          testId="splitter"
-        >
-          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-        </Splitter>
-      `);
-            yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
-        }));
-    });
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("resizer has appropriate cursor styles", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-        yield initTestBed(`
-      <Splitter height="200px" width="400px" orientation="horizontal" testId="splitter">
-        <Stack backgroundColor="lightblue" height="100%"/>
-        <Stack backgroundColor="darksalmon" height="100%"/>
-      </Splitter>
-    `);
-        const splitter = page.getByTestId("splitter");
-        const driver = yield createSplitterDriver(splitter);
-        const resizer = yield driver.getResizer();
-        yield (0, fixtures_1.expect)(resizer).toHaveCSS("cursor", "ew-resize");
-    }));
-    (0, fixtures_1.test)("vertical resizer has appropriate cursor style", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-        yield initTestBed(`
-      <Splitter height="200px" width="400px" orientation="vertical" testId="splitter">
-        <Stack backgroundColor="lightblue" height="100%"/>
-        <Stack backgroundColor="darksalmon" height="100%"/>
-      </Splitter>
-    `);
-        const splitter = page.getByTestId("splitter");
-        const driver = yield createSplitterDriver(splitter);
-        const resizer = yield driver.getResizer();
-        yield (0, fixtures_1.expect)(resizer).toHaveCSS("cursor", "ns-resize");
-    }));
-    (0, fixtures_1.test)("splitter prevents text selection during drag", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Splitter height="200px" width="400px" testId="splitter">
-        <Stack backgroundColor="lightblue" height="100%"/>
-        <Stack backgroundColor="darksalmon" height="100%"/>
-      </Splitter>
-    `);
-        const splitter = page.getByTestId("splitter");
-        yield (0, fixtures_1.expect)(splitter).toHaveCSS("user-select", "none");
-    }));
-});
-// =============================================================================
-// THEME VARIABLE TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Variables", () => {
-    (0, fixtures_1.test)("applies backgroundColor-resizer-Splitter theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-        yield initTestBed(`
-      <Splitter height="200px" width="400px" testId="splitter">
-        <Stack backgroundColor="lightblue" height="100%"/>
-        <Stack backgroundColor="darksalmon" height="100%"/>
-      </Splitter>
-    `, {
-            testThemeVars: { "backgroundColor-resizer-Splitter": "rgb(255, 0, 0)" },
-        });
-        const splitter = page.getByTestId("splitter");
-        const driver = yield createSplitterDriver(splitter);
-        const resizer = yield driver.getResizer();
-        yield (0, fixtures_1.expect)(resizer).toHaveCSS("background-color", "rgb(255, 0, 0)");
-    }));
-    (0, fixtures_1.test)("applies thickness-resizer-Splitter theme variable for horizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-        yield initTestBed(`
-      <Splitter height="200px" width="400px" orientation="horizontal" testId="splitter">
-        <Stack backgroundColor="lightblue" height="100%"/>
-        <Stack backgroundColor="darksalmon" height="100%"/>
-      </Splitter>
-    `, {
-            testThemeVars: { "thickness-resizer-Splitter": "10px" },
-        });
-        const splitter = page.getByTestId("splitter");
-        const driver = yield createSplitterDriver(splitter);
-        const resizer = yield driver.getResizer();
-        yield (0, fixtures_1.expect)(resizer).toHaveCSS("width", "10px");
-    }));
-    (0, fixtures_1.test)("applies thickness-resizer-Splitter theme variable for vertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-        yield initTestBed(`
-      <Splitter height="200px" width="400px" orientation="vertical" testId="splitter">
-        <Stack backgroundColor="lightblue" height="100%"/>
-        <Stack backgroundColor="darksalmon" height="100%"/>
-      </Splitter>
-    `, {
-            testThemeVars: { "thickness-resizer-Splitter": "10px" },
-        });
-        const splitter = page.getByTestId("splitter");
-        const driver = yield createSplitterDriver(splitter);
-        const resizer = yield driver.getResizer();
-        yield (0, fixtures_1.expect)(resizer).toHaveCSS("height", "10px");
-    }));
-    (0, fixtures_1.test)("applies cursor-resizer-horizontal-Splitter theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-        yield initTestBed(`
-      <Splitter height="200px" width="400px" orientation="horizontal" testId="splitter">
-        <Stack backgroundColor="lightblue" height="100%"/>
-        <Stack backgroundColor="darksalmon" height="100%"/>
-      </Splitter>
-    `, {
-            testThemeVars: { "cursor-resizer-horizontal-Splitter": "col-resize" },
-        });
-        const splitter = page.getByTestId("splitter");
-        const driver = yield createSplitterDriver(splitter);
-        const resizer = yield driver.getResizer();
-        yield (0, fixtures_1.expect)(resizer).toHaveCSS("cursor", "col-resize");
-    }));
-    (0, fixtures_1.test)("applies cursor-resizer-vertical-Splitter theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-        yield initTestBed(`
-      <Splitter height="200px" width="400px" orientation="vertical" testId="splitter">
-        <Stack backgroundColor="lightblue" height="100%"/>
-        <Stack backgroundColor="darksalmon" height="100%"/>
-      </Splitter>
-    `, {
-            testThemeVars: { "cursor-resizer-vertical-Splitter": "row-resize" },
-        });
-        const splitter = page.getByTestId("splitter");
-        const driver = yield createSplitterDriver(splitter);
-        const resizer = yield driver.getResizer();
-        yield (0, fixtures_1.expect)(resizer).toHaveCSS("cursor", "row-resize");
-    }));
-});
-// =============================================================================
-// OTHER EDGE CASE TESTS
-// =============================================================================
-fixtures_1.test.describe("Other Edge Cases", () => {
-    (0, fixtures_1.test)("handles very small container dimensions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Splitter height="20px" width="20px" testId="splitter">
-        <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-        <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-      </Splitter>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
-        // Secondary might be hidden in very small containers due to space constraints
-        const secondary = page.getByTestId("secondary");
-        const isSecondaryVisible = yield secondary.isVisible();
-        if (isSecondaryVisible) {
-            yield (0, fixtures_1.expect)(secondary).toBeVisible();
-        }
-    }));
-    (0, fixtures_1.test)("handles very large initial size values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Splitter height="200px" width="400px" initialPrimarySize="90%" testId="splitter">
-        <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-        <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-      </Splitter>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
-        // Secondary might be very small but should still be visible
-        const secondary = page.getByTestId("secondary");
-        const isSecondaryVisible = yield secondary.isVisible();
-        if (isSecondaryVisible) {
-            yield (0, fixtures_1.expect)(secondary).toBeVisible();
-        }
-    }));
-    (0, fixtures_1.test)("handles rapid resize operations", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
-        yield initTestBed(`
-      <Splitter height="200px" width="400px" orientation="horizontal" testId="splitter">
-        <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
-        <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
-      </Splitter>
-    `);
-        const splitter = page.getByTestId("splitter");
-        const driver = yield createSplitterDriver(splitter);
-        // Perform multiple rapid drag operations
-        yield driver.dragResizer(20, 0);
-        yield driver.dragResizer(-30, 0);
-        yield driver.dragResizer(40, 0);
-        yield driver.dragResizer(-10, 0);
-        // Should still be functional
-        yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
-    }));
-});
-// =============================================================================
-// UTILITY FUNCTION TESTS
-// =============================================================================
-fixtures_1.test.describe("Utility Functions", () => {
-    fixtures_1.test.describe("parseSize", () => {
-        (0, fixtures_1.test)("parses positive pixel values", () => {
-            (0, fixtures_1.expect)((0, utils_1.parseSize)("100px", 400)).toBe(100);
-            (0, fixtures_1.expect)((0, utils_1.parseSize)("200px", 400)).toBe(200);
-        });
-        (0, fixtures_1.test)("parses positive percentage values", () => {
-            (0, fixtures_1.expect)((0, utils_1.parseSize)("50%", 400)).toBe(200);
-            (0, fixtures_1.expect)((0, utils_1.parseSize)("25%", 400)).toBe(100);
-            (0, fixtures_1.expect)((0, utils_1.parseSize)("100%", 400)).toBe(400);
-        });
-        (0, fixtures_1.test)("parses negative pixel values (calculated from end)", () => {
-            (0, fixtures_1.expect)((0, utils_1.parseSize)("-100px", 400)).toBe(300); // 400 - 100
-            (0, fixtures_1.expect)((0, utils_1.parseSize)("-50px", 400)).toBe(350); // 400 - 50
-            (0, fixtures_1.expect)((0, utils_1.parseSize)("-200px", 600)).toBe(400); // 600 - 200
-        });
-        (0, fixtures_1.test)("parses negative percentage values (calculated from end)", () => {
-            (0, fixtures_1.expect)((0, utils_1.parseSize)("-20%", 400)).toBe(320); // 80% of 400
-            (0, fixtures_1.expect)((0, utils_1.parseSize)("-50%", 400)).toBe(200); // 50% of 400
-            (0, fixtures_1.expect)((0, utils_1.parseSize)("-10%", 600)).toBe(540); // 90% of 600
-        });
-        (0, fixtures_1.test)("throws error for invalid format", () => {
-            (0, fixtures_1.expect)(() => (0, utils_1.parseSize)("100", 400)).toThrow("Invalid size format. Use px or %.");
-            (0, fixtures_1.expect)(() => (0, utils_1.parseSize)("100em", 400)).toThrow("Invalid size format. Use px or %.");
-            (0, fixtures_1.expect)(() => (0, utils_1.parseSize)("invalid", 400)).toThrow("Invalid size format. Use px or %.");
-        });
-    });
-    fixtures_1.test.describe("toPercentage", () => {
-        (0, fixtures_1.test)("converts pixel size to percentage", () => {
-            (0, fixtures_1.expect)((0, utils_1.toPercentage)(200, 400)).toBe(50);
-            (0, fixtures_1.expect)((0, utils_1.toPercentage)(100, 400)).toBe(25);
-            (0, fixtures_1.expect)((0, utils_1.toPercentage)(400, 400)).toBe(100);
-            (0, fixtures_1.expect)((0, utils_1.toPercentage)(0, 400)).toBe(0);
-        });
-    });
-});