xmlui 0.11.4 → 0.11.7

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

@@ -1,677 +0,0 @@
-"use strict";
-/**
- * Testing Notes: the Driver needs to account for the correct positioning of the indicators on the slider
- */
-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");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider />`);
-        yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component renders with label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider label="Volume" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Volume")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("sets initialValue of field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-        <Fragment>
-          <Slider id="slider" initialValue="5" />
-          <Text testId="slider-value" value="{slider.value}" />
-        </Fragment>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("5");
-    }));
-    (0, fixtures_1.test)("accepts empty as initialValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-        <Fragment>
-          <Slider id="slider" initialValue="" />
-          <Text testId="slider-value" value="{slider.value}" />
-        </Fragment>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("0");
-    }));
-    [
-        { label: "int", value: 5, expected: "5" },
-        { label: "float", value: 5.5, expected: "5.5" },
-    ].forEach(({ label, value, expected }) => {
-        (0, fixtures_1.test)(`handles ${label} correctly`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Fragment>
-          <Slider id="slider" initialValue="${JSON.stringify(value)}" />
-          <Text testId="slider-value" value="{slider.value}" />
-        </Fragment>`);
-            yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText(expected);
-        }));
-    });
-    [
-        { label: "string that resolves to int", value: "5", expected: "5" },
-        { label: "string that resolves to float", value: "5.5", expected: "5.5" },
-    ].forEach(({ label, value, expected }) => {
-        (0, fixtures_1.test)(`handles ${label} correctly`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Fragment>
-          <Slider id="slider" initialValue="${value}" />
-          <Text testId="slider-value" value="{slider.value}" />
-        </Fragment>`);
-            yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText(expected);
-        }));
-    });
-    [
-        { label: "NaN", value: NaN },
-        { label: "null", value: null },
-        { label: "undefined", value: undefined },
-        { label: "empty string", value: "" },
-        { label: "string not resolving to number", value: "abc" },
-    ].forEach(({ label, value }) => {
-        (0, fixtures_1.test)(`handles ${label} gracefully`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Fragment>
-          <Slider id="slider" initialValue="${value}" />
-          <Text testId="slider-value" value="{slider.value}" />
-        </Fragment>`);
-            yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("0");
-        }));
-    });
-    (0, fixtures_1.test)("minValue sets the lower bound", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-        <Fragment>
-          <Slider id="slider" minValue="5" />
-          <Text testId="slider-value" value="{slider.value}" />
-        </Fragment>`);
-        const slider = page.getByRole("slider");
-        yield (0, fixtures_1.expect)(slider).toHaveAttribute("aria-valuemin", "5");
-    }));
-    (0, fixtures_1.test)("value cannot be lower than minValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Slider id="slider" minValue="20" maxValue="30" initialValue="10" />
-        <Text testId="slider-value" value="{slider.value}" />
-      </Fragment>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("20");
-    }));
-    (0, fixtures_1.test)("maxValue sets the upper bound", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider maxValue="50" />`);
-        const slider = page.getByRole("slider");
-        yield (0, fixtures_1.expect)(slider).toHaveAttribute("aria-valuemax", "50");
-    }));
-    (0, fixtures_1.test)("value cannot be larger than maxValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-        <Fragment>
-          <Slider id="slider" maxValue="30" initialValue="40" />
-          <Text testId="slider-value" value="{slider.value}" />
-        </Fragment>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("30");
-    }));
-    (0, fixtures_1.test)("handles invalid minValue/maxValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider minValue="invalid" maxValue="invalid" />`);
-        const slider = page.getByRole("slider");
-        yield (0, fixtures_1.expect)(slider).toHaveAttribute("aria-valuemin", "0");
-        yield (0, fixtures_1.expect)(slider).toHaveAttribute("aria-valuemax", "10");
-    }));
-    (0, fixtures_1.test)("step defines increment value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-    <Fragment>
-      <Slider id="slider" step="2" initialValue="0" />
-      <Text testId="slider-value" value="{slider.value}" />
-    </Fragment>`);
-        const slider = page.getByRole("slider");
-        yield slider.press("ArrowRight");
-        yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("2");
-    }));
-    (0, fixtures_1.test)("handles fractional step values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-    <Fragment>
-      <Slider id="slider" step="0.1" initialValue="0" />
-      <Text testId="slider-value" value="{slider.value}" />
-    </Fragment>`);
-        const slider = page.getByRole("slider");
-        yield slider.press("ArrowRight");
-        yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("0.1");
-    }));
-    (0, fixtures_1.test)("component handles multiple thumbs", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider initialValue="{[2, 4]}" />`);
-        const thumbs = page.getByRole("slider");
-        yield (0, fixtures_1.expect)(thumbs).toHaveCount(2);
-    }));
-    (0, fixtures_1.test)("all thumbs are interactable via mouse", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSliderDriver, page, }) {
-        yield initTestBed(`
-      <Fragment>
-        <Slider id="slider" initialValue="{[2, 4]}" minValue="0" maxValue="10" />
-        <Text testId="sliderValue0">{slider.value[0]}</Text>
-        <Text testId="sliderValue1">{slider.value[1]}</Text>
-      </Fragment>
-    `);
-        const driver = yield createSliderDriver("slider");
-        yield driver.dragThumbByMouse("start", 0);
-        yield driver.dragThumbByMouse("end", 1);
-        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue0")).toHaveText("0");
-        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue1")).toHaveText("10");
-    }));
-    (0, fixtures_1.test)("all thumbs are interactable via keyboard", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSliderDriver, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Slider id="slider" initialValue="{[2, 4]}" minValue="0" maxValue="10" />
-        <Text testId="sliderValue0">{slider.value[0]}</Text>
-        <Text testId="sliderValue1">{slider.value[1]}</Text>
-      </Fragment>
-    `);
-        const driver = yield createSliderDriver("slider");
-        yield driver.stepThumbByKeyboard("ArrowLeft", 0);
-        yield driver.stepThumbByKeyboard("ArrowRight", 1);
-        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue0")).toHaveText("1");
-        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue1")).toHaveText("5");
-    }));
-    (0, fixtures_1.test)("minStepsBetweenThumbs maintains thumb separation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSliderDriver, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Slider id="slider" initialValue="{[0, 5]}" minStepsBetweenThumbs="3" minValue="0" maxValue="10" />
-        <Text testId="sliderValue1">{slider.value[1]}</Text>
-      </Fragment>
-    `);
-        const driver = yield createSliderDriver("slider");
-        yield driver.stepThumbByKeyboard("ArrowLeft", 1, 3); // Try to move left by 3 steps
-        yield (0, fixtures_1.expect)(page.getByTestId("sliderValue1")).toHaveText("3");
-    }));
-    (0, fixtures_1.test)("enabled=false disables control", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider enabled="false" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeDisabled();
-    }));
-    (0, fixtures_1.test)("readOnly prevents interaction", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSliderDriver }) {
-        yield initTestBed(`
-      <Fragment>
-        <Slider id="mySlider" readOnly="true" />
-        <Text testId="slider-value" value="{mySlider.value}" />
-      </Fragment>`);
-        const driver = yield createSliderDriver("mySlider");
-        yield driver.dragThumbByMouse("end");
-        yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("0"); // Value should remain unchanged
-    }));
-    fixtures_1.test.fixme("autoFocus focuses slider on mount", component_test_helpers_1.SKIP_REASON.XMLUI_BUG("autoFocus does not seem to work with radix-ui, need to double-check"), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider autoFocus="true" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeFocused();
-    }));
-    (0, fixtures_1.test)("required shows visual indicator", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider required="true" label="Required slider" />`);
-        yield (0, fixtures_1.expect)(page.getByText("Required slider")).toContainText("*");
-    }));
-    (0, fixtures_1.test)("showValues=true displays current value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider showValues="true" initialValue="10" />`);
-        yield page.getByRole("slider").hover();
-        yield (0, fixtures_1.expect)(page.getByText("10")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("showValues=false hides current value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider showValues="false" initialValue="10" />`);
-        yield page.getByRole("slider").hover();
-        yield (0, fixtures_1.expect)(page.getByText("10")).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("valueFormat customizes value display", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider showValues="true" initialValue="10" valueFormat="{(v) => v + '%'}" />`);
-        yield page.getByRole("slider").hover();
-        yield (0, fixtures_1.expect)(page.getByText("10%")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles array initialValue for range", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider initialValue="{[2, 6]}" />`);
-        const sliders = page.getByRole("slider");
-        yield sliders.first().hover();
-        yield (0, fixtures_1.expect)(page.getByText("2")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("6")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("maintains thumb order in range mode", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider initialValue="{[6, 2]}" />`);
-        const sliders = page.getByRole("slider");
-        // Should auto-correct to [2, 6]
-        yield sliders.first().hover();
-        yield (0, fixtures_1.expect)(page.getByText("2")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("6")).toBeVisible();
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("has correct ARIA role", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider />`);
-        yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("label is properly associated", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider label="Volume Control" />`);
-        yield page.getByText("Volume Control").click();
-        yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeFocused();
-    }));
-    (0, fixtures_1.test)("supports keyboard navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Slider id="mySlider" initialValue="5" />
-        <Text testId="slider-value">{mySlider.value}</Text>
-      </Fragment>`);
-        const slider = page.getByRole("slider");
-        yield slider.focus();
-        yield slider.press("ArrowRight");
-        yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("6");
-        yield slider.press("ArrowLeft");
-        yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("5");
-    }));
-    (0, fixtures_1.test)("supports Home/End key navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Slider id="mySlider" minValue="0" maxValue="100" initialValue="50" />
-        <Text testId="slider-value">{mySlider.value}</Text>
-      </Fragment>`);
-        const slider = page.getByRole("slider");
-        yield slider.focus();
-        yield slider.press("Home");
-        yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("0");
-        yield slider.press("End");
-        yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("100");
-    }));
-    (0, fixtures_1.test)("disabled slider has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider enabled="false" />`);
-        yield (0, fixtures_1.expect)(page.locator("span").first()).toHaveAttribute("aria-disabled", "true");
-    }));
-    (0, fixtures_1.test)("required slider has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider required="true" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("slider")).toHaveAttribute("aria-required", "true");
-    }));
-    (0, fixtures_1.test)("range slider has multiple slider roles", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider initialValue="{[3, 5]}" />`);
-        const sliders = page.getByRole("slider");
-        yield (0, fixtures_1.expect)(sliders).toHaveCount(2);
-    }));
-});
-// =============================================================================
-// LABEL POSITIONING TESTS
-// =============================================================================
-fixtures_1.test.describe("Label", () => {
-    (0, fixtures_1.test)("labelPosition=top positions label above slider", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider label="test" labelPosition="top" />`);
-        const { top: sliderTop } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("slider"));
-        const { bottom: labelBottom } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test"));
-        (0, fixtures_1.expect)(labelBottom).toBeLessThan(sliderTop);
-    }));
-    (0, fixtures_1.test)("labelPosition=start positions label before slider", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider label="test" labelPosition="start" />`);
-        const { left: sliderLeft } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("slider"));
-        const { right: labelRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test"));
-        (0, fixtures_1.expect)(labelRight).toBeLessThan(sliderLeft);
-    }));
-    (0, fixtures_1.test)("labelWidth applies custom label width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const expected = 150;
-        yield initTestBed(`<Slider label="test label" labelWidth="${expected}px" />`);
-        const { width } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test label"));
-        (0, fixtures_1.expect)(width).toEqual(expected);
-    }));
-    (0, fixtures_1.test)("labelBreak enables label line breaks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const labelText = "Very long label text that should break";
-        yield initTestBed(`<Slider label="${labelText}" labelWidth="100px" labelBreak="true" />`);
-        const label = page.getByText(labelText);
-        const { height } = yield (0, component_test_helpers_1.getBounds)(label);
-        (0, fixtures_1.expect)(height).toBeGreaterThan(20); // Assumes multi-line height
-    }));
-    (0, fixtures_1.test)("handles invalid labelPosition gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider labelPosition="invalid" label="test" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("test")).toBeVisible();
-    }));
-});
-// =============================================================================
-// EVENT HANDLING TESTS
-// =============================================================================
-fixtures_1.test.describe("Event Handling", () => {
-    (0, fixtures_1.test)("didChange event fires on value change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Slider onDidChange="testState = 'changed'" initialValue="0" />
-    `);
-        const slider = page.getByRole("slider");
-        yield slider.focus();
-        yield slider.press("ArrowRight");
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("changed");
-    }));
-    (0, fixtures_1.test)("didChange event passes new value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Slider onDidChange="arg => testState = arg" initialValue="1" />
-    `);
-        const slider = page.getByRole("slider");
-        yield slider.focus();
-        yield slider.press("ArrowRight");
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(2);
-    }));
-    (0, fixtures_1.test)("gotFocus event fires on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Slider onGotFocus="testState = 'focused'" />
-    `);
-        yield page.getByRole("slider").focus();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
-    }));
-    (0, fixtures_1.test)("gotFocus event fires on label click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Slider label="Volume" onGotFocus="testState = 'focused'" />
-    `);
-        yield page.getByText("Volume").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
-    }));
-    (0, fixtures_1.test)("lostFocus event fires on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Slider onLostFocus="testState = 'blurred'" />
-    `);
-        const slider = page.getByRole("slider");
-        yield slider.focus();
-        yield slider.blur();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("blurred");
-    }));
-    (0, fixtures_1.test)("events do not fire when disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Slider enabled="false" onDidChange="testState = 'changed'" onGotFocus="testState = 'focused'" />
-    `);
-        const slider = page.getByRole("slider");
-        yield slider.focus();
-        yield slider.press("ArrowRight");
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null);
-    }));
-});
-// =============================================================================
-// API TESTS
-// =============================================================================
-fixtures_1.test.describe("Api", () => {
-    (0, fixtures_1.test)("value API returns current state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Slider id="mySlider" initialValue="5" />
-        <Text testId="value">{mySlider.value}</Text>
-      </Fragment>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("value")).toHaveText("5");
-    }));
-    (0, fixtures_1.test)("value API returns state after change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Slider id="mySlider" initialValue="1" />
-        <Text testId="value">{mySlider.value}</Text>
-      </Fragment>
-    `);
-        const slider = page.getByRole("slider");
-        yield slider.focus();
-        yield slider.press("ArrowRight");
-        yield (0, fixtures_1.expect)(page.getByTestId("value")).toHaveText("2");
-    }));
-    (0, fixtures_1.test)("setValue API updates state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Slider id="mySlider" />
-        <Button testId="setBtn" onClick="mySlider.setValue(5)" label="{mySlider.value}" />
-      </Fragment>
-    `);
-        yield page.getByTestId("setBtn").click();
-        yield (0, fixtures_1.expect)(page.getByTestId("setBtn")).toHaveText("5");
-    }));
-    (0, fixtures_1.test)("setValue API triggers events", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Slider id="mySlider" onDidChange="testState = 'api-changed'" />
-        <Button testId="setBtn" onClick="mySlider.setValue(75)" />
-      </Fragment>
-    `);
-        yield page.getByTestId("setBtn").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("api-changed");
-    }));
-    (0, fixtures_1.test)("focus API focuses the slider", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Slider id="mySlider" />
-        <Button testId="focusBtn" onClick="mySlider.focus()" />
-      </Fragment>
-    `);
-        const slider = page.getByRole("slider");
-        yield (0, fixtures_1.expect)(slider).not.toBeFocused();
-        yield page.getByTestId("focusBtn").click();
-        yield (0, fixtures_1.expect)(slider).toBeFocused();
-    }));
-    (0, fixtures_1.test)("focus API does nothing when disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Slider id="mySlider" enabled="false" />
-        <Button testId="focusBtn" onClick="mySlider.focus()" />
-      </Fragment>
-    `);
-        yield page.getByTestId("focusBtn").click();
-        yield (0, fixtures_1.expect)(page.getByRole("slider")).not.toBeFocused();
-    }));
-    (0, fixtures_1.test)("setValue does not update when disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Slider id="mySlider" enabled="false" initialValue="5" />
-        <Button testId="setBtn" onClick="mySlider.setValue(10)" label="{mySlider.value}" />
-      </Fragment>
-    `);
-        yield page.getByTestId("setBtn").click();
-        yield (0, fixtures_1.expect)(page.getByTestId("setBtn")).toHaveText("5");
-    }));
-    (0, fixtures_1.test)("setValue handles invalid values gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Slider id="mySlider" initialValue="5" minValue="0" />
-        <Button testId="setBtn" onClick="mySlider.setValue('invalid')" label="{mySlider.value}" />
-      </Fragment>
-    `);
-        yield page.getByTestId("setBtn").click();
-        yield (0, fixtures_1.expect)(page.getByTestId("setBtn")).toHaveText("0");
-    }));
-});
-// =============================================================================
-// THEME VARIABLE TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Variables", () => {
-    (0, fixtures_1.test)("backgroundColor-track applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider testId="slider" />`, {
-            testThemeVars: {
-                "backgroundColor-track-Slider": "rgb(255, 0, 0)",
-            },
-        });
-        const track = page.locator("[data-track]");
-        yield (0, fixtures_1.expect)(track).toHaveCSS("background-color", "rgb(255, 0, 0)");
-    }));
-    (0, fixtures_1.test)("backgroundColor-range applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider testId="slider" initialValue="5" />`, {
-            testThemeVars: {
-                "backgroundColor-range-Slider": "rgb(0, 255, 0)",
-            },
-        });
-        const range = page.locator("[data-range]");
-        yield (0, fixtures_1.expect)(range).toHaveCSS("background-color", "rgb(0, 255, 0)");
-    }));
-    (0, fixtures_1.test)("backgroundColor-thumb applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider testId="slider" />`, {
-            testThemeVars: {
-                "backgroundColor-thumb-Slider": "rgb(0, 0, 255)",
-            },
-        });
-        const thumb = page.getByRole("slider");
-        yield (0, fixtures_1.expect)(thumb).toHaveCSS("background-color", "rgb(0, 0, 255)");
-    }));
-    (0, fixtures_1.test)("disabled theme variables apply when disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider testId="slider" enabled="false" />`, {
-            testThemeVars: {
-                "backgroundColor-track-Slider--disabled": "rgb(200, 200, 200)",
-            },
-        });
-        const track = page.locator("[data-track]");
-        yield (0, fixtures_1.expect)(track).toHaveCSS("background-color", "rgb(200, 200, 200)");
-    }));
-    (0, fixtures_1.test)("focus theme variables apply on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider testId="slider" />`, {
-            testThemeVars: {
-                "boxShadow-thumb-Slider--focus": "rgb(0, 123, 255) 0px 0px 10px 0px",
-            },
-        });
-        const slider = page.getByRole("slider");
-        yield slider.focus();
-        yield (0, fixtures_1.expect)(slider).toHaveCSS("box-shadow", "rgb(0, 123, 255) 0px 0px 10px 0px");
-    }));
-    (0, fixtures_1.test)("hover theme variables apply on hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider testId="slider" />`, {
-            testThemeVars: {
-                "boxShadow-thumb-Slider--hover": "rgb(0, 0, 0) 0px 0px 5px 0px",
-            },
-        });
-        const slider = page.getByRole("slider");
-        yield slider.hover();
-        yield (0, fixtures_1.expect)(slider).toHaveCSS("box-shadow", "rgb(0, 0, 0) 0px 0px 5px 0px");
-    }));
-});
-// =============================================================================
-// VALIDATION TESTS
-// =============================================================================
-fixtures_1.test.describe("Validation", () => {
-    (0, fixtures_1.test)("handles invalid validationStatus gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider validationStatus="invalid" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeVisible();
-    }));
-    [
-        { value: "--default", prop: "" },
-        { value: "--warning", prop: 'validationStatus="warning"' },
-        { value: "--error", prop: 'validationStatus="error"' },
-        { value: "--success", prop: 'validationStatus="valid"' },
-    ].forEach((variant) => {
-        (0, fixtures_1.test)(`applies correct borderRadius ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Slider ${variant.prop} />`, {
-                testThemeVars: { [`borderRadius-Slider${variant.value}`]: "12px" },
-            });
-            const sliderTrack = page.locator("[data-track]");
-            yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("border-radius", "12px");
-        }));
-        (0, fixtures_1.test)(`applies correct borderColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Slider ${variant.prop} />`, {
-                testThemeVars: { [`borderColor-Slider${variant.value}`]: "rgb(255, 0, 0)" },
-            });
-            const sliderTrack = page.locator("[data-track]");
-            yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("border-color", "rgb(255, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct borderWidth ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Slider testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderWidth-Slider${variant.value}`]: "1px" },
-            });
-            const sliderTrack = page.locator("[data-track]");
-            yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("border-width", "1px");
-        }));
-        (0, fixtures_1.test)(`applies correct borderStyle ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Slider ${variant.prop} />`, {
-                testThemeVars: { [`borderStyle-Slider${variant.value}`]: "dashed" },
-            });
-            const sliderTrack = page.locator("[data-track]");
-            yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("border-style", "dashed");
-        }));
-        (0, fixtures_1.test)(`applies correct boxShadow ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Slider ${variant.prop} />`, {
-                testThemeVars: {
-                    [`boxShadow-Slider${variant.value}`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
-                },
-            });
-            const sliderTrack = page.locator("[data-track]");
-            yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
-        }));
-        (0, fixtures_1.test)(`applies correct borderColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Slider ${variant.prop} />`, {
-                testThemeVars: { [`borderColor-Slider${variant.value}--hover`]: "rgb(0, 0, 0)" },
-            });
-            const sliderTrack = page.locator("[data-track]");
-            yield sliderTrack.hover();
-            yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("border-color", "rgb(0, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct boxShadow on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Slider ${variant.prop} />`, {
-                testThemeVars: {
-                    [`boxShadow-Slider${variant.value}--hover`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
-                },
-            });
-            const sliderTrack = page.locator("[data-track]");
-            yield sliderTrack.hover();
-            yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
-        }));
-    });
-});
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-fixtures_1.test.describe("Edge Cases", () => {
-    (0, fixtures_1.test)("handles extremely large values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-    <Fragment>
-      <Slider id="mySlider" initialValue="${Number.MAX_SAFE_INTEGER}" maxValue="${Number.MAX_SAFE_INTEGER}" />
-      <Text testId="slider-value" value="{mySlider.value}" />
-    </Fragment>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText(Number.MAX_SAFE_INTEGER.toString());
-    }));
-    (0, fixtures_1.test)("handles negative values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Slider id="mySlider" minValue="-100" maxValue="0" initialValue="-50" />
-        <Text testId="slider-value" value="{mySlider.value}" />
-      </Fragment>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText("-50");
-    }));
-    (0, fixtures_1.test)("handles very small step values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Slider id="mySlider" step="0.000000001" initialValue="0" />
-        <Text testId="slider-value" value="{mySlider.value}" />
-      </Fragment>`);
-        const slider = page.getByRole("slider");
-        yield slider.focus();
-        yield slider.press("ArrowRight");
-        yield (0, fixtures_1.expect)(page.getByTestId("slider-value")).toHaveText((0.000000001).toExponential());
-    }));
-    (0, fixtures_1.test)("handles conflicting min/max values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider minValue="100" maxValue="50" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles zero step value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider step="0" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles range with identical values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider initialValue="{[50, 50]}" />`);
-        const sliders = page.getByRole("slider");
-        yield (0, fixtures_1.expect)(sliders).toHaveCount(2);
-    }));
-});
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-(0, fixtures_1.test)("input has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<Slider width="200px" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input with label has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<Slider width="200px" label="test" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield page.setViewportSize({ width: 400, height: 300 });
-    yield initTestBed(`<Slider width="50%" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input with label has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield page.setViewportSize({ width: 400, height: 300 });
-    yield initTestBed(`<Slider width="50%" label="test" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));