xmlui 0.10.12 → 0.10.14

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

@@ -0,0 +1,574 @@
+"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");
+    }));
+    fixtures_1.test.fixme("minStepsBetweenThumbs maintains thumb separation", component_test_helpers_1.SKIP_REASON.TO_BE_IMPLEMENTED("Need to test actual thumb separation logic"), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Slider initialValue="{[2, 7]}" minStepsBetweenThumbs="5" />`);
+        // Test that thumbs maintain minimum separation
+        yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeVisible();
+    }));
+    (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 }) {
+        yield initTestBed(`
+      <Fragment>
+        <Slider id="mySlider" readOnly="true" />
+        <Text testId="slider-value" value="{mySlider.value}" />
+      </Fragment>`);
+        const slider = page.getByRole("slider");
+        const sliderOffsetWidth = yield page.locator("[data-track]").evaluate((el) => {
+            return el.getBoundingClientRect().width;
+        });
+        yield slider.hover();
+        yield page.mouse.down({ button: "left" });
+        yield page.mouse.move(sliderOffsetWidth, 0); // Attempt to drag to end
+        yield page.mouse.up();
+        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)("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 STATUS TESTS
+// =============================================================================
+fixtures_1.test.describe("Validation", () => {
+    (0, fixtures_1.test)(`validationStatus=error applies correctly`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Slider validationStatus="error" />`, {
+            testThemeVars: {
+                [`borderColor-Slider-error`]: "rgb(255, 0, 0)",
+            },
+        });
+        const sliderTrack = page.locator("[data-track]");
+        yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("border-color", "rgb(255, 0, 0)");
+    }));
+    // NOTE: warning color is not applied correctly
+    fixtures_1.test.fixme(`validationStatus=warning applies correctly`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Slider validationStatus="warning" />`, {
+            testThemeVars: {
+                [`borderColor-Slider-warning`]: "rgb(255, 165, 0)",
+            },
+        });
+        const sliderTrack = page.locator("[data-track]");
+        yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("border-color", "rgb(218, 127, 0)");
+    }));
+    (0, fixtures_1.test)(`validationStatus=valid applies correctly`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Slider validationStatus="valid" />`, {
+            testThemeVars: {
+                [`borderColor-Slider-success`]: "rgb(0, 255, 0)",
+            },
+        });
+        const sliderTrack = page.locator("[data-track]");
+        yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("border-color", "rgb(0, 255, 0)");
+    }));
+    (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();
+    }));
+});
+// =============================================================================
+// 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);
+    }));
+});