xmlui 0.11.3 → 0.11.6

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

@@ -1,725 +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");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component renders with label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" label="Username" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.label).toBeVisible();
-    }));
-    (0, fixtures_1.test)("initialValue sets field value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" initialValue="test value" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("test value");
-    }));
-    (0, fixtures_1.test)("initialValue accepts empty as empty string", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" initialValue="" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("");
-    }));
-    (0, fixtures_1.test)("initialValue accepts different data types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        // Test string
-        yield initTestBed(`<TextBox testId="test" initialValue="hello" />`);
-        const driver1 = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver1.input).toHaveValue("hello");
-        // Test number
-        yield initTestBed(`<TextBox testId="test" initialValue="{123}" />`);
-        const driver2 = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver2.input).toHaveValue("123");
-        // Test boolean
-        yield initTestBed(`<TextBox testId="test" initialValue="{true}" />`);
-        const driver3 = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver3.input).toHaveValue("true");
-    }));
-    (0, fixtures_1.test)("initialValue handles null", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" initialValue="{null}" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("");
-    }));
-    (0, fixtures_1.test)("initialValue handles undefined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" initialValue="{undefined}" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("");
-    }));
-    (0, fixtures_1.test)("component accepts user input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield driver.input.fill("user input");
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("user input");
-    }));
-    (0, fixtures_1.test)("component clears input correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" initialValue="initial text" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("initial text");
-        yield driver.input.clear();
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("");
-    }));
-    (0, fixtures_1.test)("component required prop adds required attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" required="true" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("required");
-    }));
-    (0, fixtures_1.test)("enabled=false disables control", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" enabled="false" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.input).toBeDisabled();
-    }));
-    (0, fixtures_1.test)("enabled=false prevents user input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" enabled="false" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.input).not.toBeEditable();
-    }));
-    (0, fixtures_1.test)("readOnly prevents editing but allows focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" readOnly="true" initialValue="read only text" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("readonly");
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("read only text");
-        yield (0, fixtures_1.expect)(driver.input).not.toBeEditable();
-        yield driver.input.focus();
-        yield (0, fixtures_1.expect)(driver.input).toBeFocused();
-    }));
-    (0, fixtures_1.test)("autoFocus focuses input on mount", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" autoFocus="true" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.input).toBeFocused();
-    }));
-    (0, fixtures_1.test)("autoFocus focuses input on mount with label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" autoFocus="true" label="Auto-focused input" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.input).toBeFocused();
-    }));
-    (0, fixtures_1.test)("placeholder shows when input is empty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" placeholder="Enter text here..." />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("placeholder", "Enter text here...");
-    }));
-    (0, fixtures_1.test)("maxLength limits input length", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" maxLength="5" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield driver.input.fill("12345678");
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("12345");
-    }));
-    (0, fixtures_1.test)("can render startIcon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" startIcon="search" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.startAdornment).toBeVisible();
-    }));
-    (0, fixtures_1.test)("can render endIcon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" endIcon="search" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.endAdornment).toBeVisible();
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("label is properly associated with input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" label="Username" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.label).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component supports keyboard navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" label="Input" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield driver.input.focus();
-        yield (0, fixtures_1.expect)(driver.input).toBeFocused();
-    }));
-    (0, fixtures_1.test)("component supports keyboard navigation from other elements", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Fragment>
-        <TextBox testId="first-input" label="First input" />
-        <TextBox testId="second-input" label="Second input" />
-      </Fragment>
-    `);
-        const firstInput = yield createTextBoxDriver("first-input");
-        const secondInput = yield createTextBoxDriver("second-input");
-        yield firstInput.input.focus();
-        yield (0, fixtures_1.expect)(firstInput.input).toBeFocused();
-        yield page.keyboard.press("Tab", { delay: 100 });
-        yield (0, fixtures_1.expect)(secondInput.input).toBeFocused();
-    }));
-    (0, fixtures_1.test)("required has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" required="true" label="Required input" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("required");
-        yield (0, fixtures_1.expect)(driver.label).toContainText("*");
-    }));
-    (0, fixtures_1.test)("disabled component has proper attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" enabled="false" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("disabled");
-    }));
-    (0, fixtures_1.test)("readOnly has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" readOnly="true" label="Read-only input" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("readonly");
-        yield (0, fixtures_1.expect)(driver.label).toContainText("Read-only input");
-        yield (0, fixtures_1.expect)(driver.input).not.toBeEditable();
-    }));
-});
-// =============================================================================
-// LABEL POSITIONING TESTS
-// =============================================================================
-fixtures_1.test.describe("Label", () => {
-    (0, fixtures_1.test)("labelPosition=start positions label before input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" direction="ltr" label="test" labelPosition="start" />`);
-        const driver = yield createTextBoxDriver("test");
-        const { left: textboxLeft } = yield (0, component_test_helpers_1.getBounds)(driver.input);
-        const { right: labelRight } = yield (0, component_test_helpers_1.getBounds)(driver.label);
-        (0, fixtures_1.expect)(labelRight).toBeLessThan(textboxLeft);
-    }));
-    (0, fixtures_1.test)("labelPosition=end positions label after input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" direction="ltr" label="test" labelPosition="end" />`);
-        const driver = yield createTextBoxDriver("test");
-        const { right: textboxRight } = yield (0, component_test_helpers_1.getBounds)(driver.input);
-        const { left: labelLeft } = yield (0, component_test_helpers_1.getBounds)(driver.label);
-        (0, fixtures_1.expect)(labelLeft).toBeGreaterThan(textboxRight);
-    }));
-    (0, fixtures_1.test)("labelPosition=top positions label above input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" label="test" labelPosition="top" />`);
-        const driver = yield createTextBoxDriver("test");
-        const { top: textboxTop } = yield (0, component_test_helpers_1.getBounds)(driver.input);
-        const { bottom: labelBottom } = yield (0, component_test_helpers_1.getBounds)(driver.label);
-        (0, fixtures_1.expect)(labelBottom).toBeLessThan(textboxTop);
-    }));
-    (0, fixtures_1.test)("labelPosition=bottom positions label below input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" label="test" labelPosition="bottom" />`);
-        const driver = yield createTextBoxDriver("test");
-        const { bottom: textboxBottom } = yield (0, component_test_helpers_1.getBounds)(driver.input);
-        const { top: labelTop } = yield (0, component_test_helpers_1.getBounds)(driver.label);
-        (0, fixtures_1.expect)(labelTop).toBeGreaterThan(textboxBottom);
-    }));
-    (0, fixtures_1.test)("labelBreak enables label line breaks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        const labelText = "Very long label text that should break";
-        const commonProps = `label="${labelText}" labelWidth="100px"`;
-        yield initTestBed(`<Fragment>
-        <TextBox ${commonProps} testId="break" labelBreak="{true}" />
-        <TextBox ${commonProps} testId="oneLine" labelBreak="{false}" />
-      </Fragment>`);
-        const driverBreak = yield createTextBoxDriver("break");
-        const driverOneLine = yield createTextBoxDriver("oneLine");
-        const { height: heightBreak } = yield (0, component_test_helpers_1.getBounds)(driverBreak.label);
-        const { height: heightOneLine } = yield (0, component_test_helpers_1.getBounds)(driverOneLine.label);
-        (0, fixtures_1.expect)(heightBreak).toBeGreaterThan(heightOneLine);
-    }));
-    (0, fixtures_1.test)("component handles invalid labelPosition gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="test" labelPosition="invalid" label="test" />`);
-        const driver = yield createTextBoxDriver("test");
-        yield (0, fixtures_1.expect)(driver.label).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.input).toBeVisible();
-    }));
-});
-// =============================================================================
-// EVENT HANDLING TESTS
-// =============================================================================
-fixtures_1.test.describe("Event Handling", () => {
-    (0, fixtures_1.test)("didChange event fires on input change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        const { testStateDriver } = yield initTestBed(`
-      <TextBox testId="test" onDidChange="testState = 'changed'" />
-    `);
-        const driver = yield createTextBoxDriver("test");
-        yield driver.input.fill("test");
-        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, createTextBoxDriver }) {
-        const { testStateDriver } = yield initTestBed(`
-      <TextBox testId="test" onDidChange="arg => testState = arg" />
-    `);
-        const driver = yield createTextBoxDriver("test");
-        yield driver.input.fill("test value");
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("test value");
-    }));
-    (0, fixtures_1.test)("gotFocus event fires on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        const { testStateDriver } = yield initTestBed(`
-      <TextBox testId="test" onGotFocus="testState = 'focused'" />
-    `);
-        const driver = yield createTextBoxDriver("test");
-        yield driver.input.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(`
-      <TextBox label="Username" onGotFocus="testState = 'focused'" />
-    `);
-        yield page.getByText("Username").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
-    }));
-    (0, fixtures_1.test)("component lostFocus event fires on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        const { testStateDriver } = yield initTestBed(`
-      <TextBox testId="test" onLostFocus="testState = 'blurred'" />
-    `);
-        const driver = yield createTextBoxDriver("test");
-        yield driver.input.focus();
-        yield driver.input.blur();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("blurred");
-    }));
-    (0, fixtures_1.test)("events do not fire when component is disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        const { testStateDriver } = yield initTestBed(`
-      <TextBox testId="test" enabled="false" didChange="testState = 'changed'" gotFocus="testState = 'focused'" />
-    `);
-        const driver = yield createTextBoxDriver("test");
-        yield driver.input.focus();
-        yield driver.input.fill("test", { force: true });
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null);
-    }));
-});
-// =============================================================================
-// API TESTS
-// =============================================================================
-fixtures_1.test.describe("Api", () => {
-    (0, fixtures_1.test)("component value API returns current state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <TextBox id="myTextBox" initialValue="initial" />
-        <Text testId="value">{myTextBox.value}</Text>
-      </Fragment>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("value")).toHaveText("initial");
-    }));
-    (0, fixtures_1.test)("component value API returns state after change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createTextBoxDriver }) {
-        yield initTestBed(`
-      <Fragment>
-        <TextBox id="myTextBox" testId="myTextBox" />
-        <Text testId="value">{myTextBox.value}</Text>
-      </Fragment>
-    `);
-        const driver = yield createTextBoxDriver("myTextBox");
-        yield (0, fixtures_1.expect)(page.getByTestId("value")).toHaveText("");
-        yield driver.input.fill("new value");
-        yield (0, fixtures_1.expect)(page.getByTestId("value")).toHaveText("new value");
-    }));
-    (0, fixtures_1.test)("component setValue API updates state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createTextBoxDriver }) {
-        yield initTestBed(`
-      <Fragment>
-        <TextBox id="myTextBox" testId="myTextBox" />
-        <Button testId="setBtn" onClick="myTextBox.setValue('api value')" />
-      </Fragment>
-    `);
-        const driver = yield createTextBoxDriver("myTextBox");
-        yield page.getByTestId("setBtn").click();
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("api value");
-    }));
-    (0, fixtures_1.test)("component setValue API triggers events", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <TextBox id="myTextBox" onDidChange="testState = 'api-changed'" />
-        <Button testId="setBtn" onClick="myTextBox.setValue('test')">Set Value</Button>
-      </Fragment>
-    `);
-        yield page.getByTestId("setBtn").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("api-changed");
-    }));
-    (0, fixtures_1.test)("focus API focuses the input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createTextBoxDriver }) {
-        yield initTestBed(`
-      <Fragment>
-        <TextBox id="myTextBox" />
-        <Button testId="focusBtn" onClick="myTextBox.focus()">Focus</Button>
-      </Fragment>
-    `);
-        const driver = yield createTextBoxDriver("myTextBox");
-        yield (0, fixtures_1.expect)(driver.input).not.toBeFocused();
-        yield page.getByTestId("focusBtn").click();
-        yield (0, fixtures_1.expect)(driver.input).toBeFocused();
-    }));
-    (0, fixtures_1.test)("focus API does nothing when component is disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createTextBoxDriver }) {
-        yield initTestBed(`
-      <Fragment>
-        <TextBox id="myTextBox" enabled="false" />
-        <Button testId="focusBtn" onClick="myTextBox.focus()">Focus</Button>
-      </Fragment>
-    `);
-        const driver = yield createTextBoxDriver("myTextBox");
-        yield page.getByTestId("focusBtn").click();
-        yield (0, fixtures_1.expect)(driver.input).not.toBeFocused();
-    }));
-});
-// =============================================================================
-// INPUT ADORNMENTS TESTS
-// =============================================================================
-fixtures_1.test.describe("Input Adornments", () => {
-    (0, fixtures_1.test)("startText displays at beginning of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" startText="$" />`);
-        const driver = yield createTextBoxDriver("input");
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(driver.input);
-        const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(driver.startAdornment);
-        yield (0, fixtures_1.expect)(driver.startAdornment).toContainText("$");
-        (0, fixtures_1.expect)(textRight - compLeft).toBeLessThanOrEqual(compRight - textLeft);
-    }));
-    (0, fixtures_1.test)("endText displays at end of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" endText="USD" />`);
-        const driver = yield createTextBoxDriver("input");
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(driver.input);
-        const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(driver.endAdornment);
-        yield (0, fixtures_1.expect)(driver.endAdornment).toContainText("USD");
-        (0, fixtures_1.expect)(textRight - compLeft).toBeGreaterThanOrEqual(compRight - textLeft);
-    }));
-    (0, fixtures_1.test)("startIcon displays at beginning of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" startIcon="search" />`);
-        const driver = yield createTextBoxDriver("input");
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(driver.input);
-        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(driver.startAdornment);
-        (0, fixtures_1.expect)(iconRight - compLeft).toBeLessThanOrEqual(compRight - iconLeft);
-    }));
-    (0, fixtures_1.test)("endIcon displays at end of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" endIcon="search" />`);
-        const driver = yield createTextBoxDriver("input");
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(driver.input);
-        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(driver.endAdornment);
-        (0, fixtures_1.expect)(iconRight - compLeft).toBeGreaterThanOrEqual(compRight - iconLeft);
-    }));
-    (0, fixtures_1.test)("multiple adornments can be combined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`
-      <TextBox testId="input" startText="$" endText="USD" startIcon="search" endIcon="search" />`);
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.startAdornment).toContainText("$");
-        yield (0, fixtures_1.expect)(driver.endAdornment).toContainText("USD");
-        yield (0, fixtures_1.expect)(driver.startAdornment).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.endAdornment).toBeVisible();
-    }));
-    (0, fixtures_1.test)("all adornments appear in the right place", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`
-      <TextBox testId="input" startText="$" endText="USD" startIcon="search" endIcon="search" direction="ltr" />
-    `);
-        const driver = yield createTextBoxDriver("input");
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(driver.input);
-        const { left: startTextLeft, right: startTextRight } = yield (0, component_test_helpers_1.getBounds)(driver.startAdornment);
-        const { left: endTextLeft, right: endTextRight } = yield (0, component_test_helpers_1.getBounds)(driver.endAdornment);
-        const { left: startIconLeft, right: startIconRight } = yield (0, component_test_helpers_1.getBounds)(driver.startAdornment);
-        const { left: endIconLeft, right: endIconRight } = yield (0, component_test_helpers_1.getBounds)(driver.endAdornment);
-        // Check order of adornments
-        (0, fixtures_1.expect)(startTextRight - compLeft).toBeLessThanOrEqual(compRight - startTextLeft);
-        (0, fixtures_1.expect)(startIconRight - compLeft).toBeLessThanOrEqual(compRight - startIconLeft);
-        (0, fixtures_1.expect)(endTextRight - compLeft).toBeGreaterThanOrEqual(compRight - endTextLeft);
-        (0, fixtures_1.expect)(endIconRight - compLeft).toBeGreaterThanOrEqual(compRight - endIconLeft);
-    }));
-});
-// =============================================================================
-// PASSWORD INPUT TESTS
-// =============================================================================
-fixtures_1.test.describe("Password Input", () => {
-    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<PasswordInput testId="input" />`);
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component has password type", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<PasswordInput testId="input" />`);
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("type", "password");
-    }));
-    (0, fixtures_1.test)("component has initial value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<PasswordInput testId="input" initialValue="secret" />`);
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("secret");
-    }));
-    (0, fixtures_1.test)("showPasswordToggle displays visibility toggle", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<PasswordInput testId="input" showPasswordToggle="true" />`);
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.input).toBeVisible();
-    }));
-    (0, fixtures_1.test)("password toggle switches between visible and hidden", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<PasswordInput testId="input" showPasswordToggle="true" />`);
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("type", "password");
-        yield driver.button.click();
-        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("type", "text");
-    }));
-    (0, fixtures_1.test)("custom password icons work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`
-      <PasswordInput
-        testId="input"
-        showPasswordToggle="true"
-        passwordVisibleIcon="test"
-        passwordHiddenIcon="test"
-      />`, {
-            resources: {
-                "icon.test": "resources/bell.svg",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        const icon = driver.button;
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-        yield icon.click();
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-    }));
-});
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Vars", () => {
-    (0, fixtures_1.test)("backgroundColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" />`, {
-            testThemeVars: {
-                "backgroundColor-TextBox": "rgb(255, 240, 240)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", "rgb(255, 240, 240)");
-    }));
-    (0, fixtures_1.test)("borderColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" />`, {
-            testThemeVars: {
-                "borderColor-TextBox": "rgb(255, 0, 0)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(255, 0, 0)");
-    }));
-    (0, fixtures_1.test)("textColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" />`, {
-            testThemeVars: {
-                "textColor-TextBox": "rgb(0, 0, 255)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("color", "rgb(0, 0, 255)");
-    }));
-    (0, fixtures_1.test)("focus borderColor applies on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" />`, {
-            testThemeVars: {
-                "borderColor-TextBox--focus": "rgb(0, 255, 0)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield driver.input.focus();
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(0, 255, 0)");
-    }));
-    (0, fixtures_1.test)("disabled backgroundColor applies when disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" enabled="false" />`, {
-            testThemeVars: {
-                "backgroundColor-TextBox--disabled": "rgb(240, 240, 240)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", "rgb(240, 240, 240)");
-    }));
-    (0, fixtures_1.test)("error borderColor applies with error validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" validationStatus="error" />`, {
-            testThemeVars: {
-                "borderColor-TextBox-error": "rgb(255, 0, 0)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(255, 0, 0)");
-    }));
-    (0, fixtures_1.test)("warning borderColor applies with warning validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" validationStatus="warning" />`, {
-            testThemeVars: {
-                "borderColor-TextBox-warning": "rgb(255, 165, 0)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(255, 165, 0)");
-    }));
-    (0, fixtures_1.test)("success borderColor applies with valid validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" validationStatus="valid" />`, {
-            testThemeVars: {
-                "borderColor-TextBox-success": "rgb(0, 255, 0)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(0, 255, 0)");
-    }));
-    (0, fixtures_1.test)("borderRadius applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" />`, {
-            testThemeVars: {
-                "borderRadius-TextBox": "8px",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-radius", "8px");
-    }));
-    (0, fixtures_1.test)("padding applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" />`, {
-            testThemeVars: {
-                "padding-TextBox": "12px",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("padding", "12px");
-    }));
-});
-// =============================================================================
-// VALIDATION STATUS TESTS
-// =============================================================================
-fixtures_1.test.describe("Validation", () => {
-    (0, fixtures_1.test)("validationStatus=error correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" validationStatus="error" />`, {
-            testThemeVars: {
-                "borderColor-TextBox-error": "rgb(255, 0, 0)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(255, 0, 0)");
-    }));
-    (0, fixtures_1.test)("validationStatus=warning correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" validationStatus="warning" />`, {
-            testThemeVars: {
-                "borderColor-TextBox-warning": "rgb(255, 165, 0)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(255, 165, 0)");
-    }));
-    (0, fixtures_1.test)("validationStatus=valid correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" validationStatus="valid" />`, {
-            testThemeVars: {
-                "borderColor-TextBox-success": "rgb(0, 255, 0)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(0, 255, 0)");
-    }));
-    (0, fixtures_1.test)("handles invalid validationStatus gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" validationStatus="invalid-status" />`, {
-            testThemeVars: {
-                "borderColor-TextBox": "rgb(0, 0, 0)",
-                "borderColor-TextBox-error": "rgb(255, 0, 0)",
-                "borderColor-TextBox-warning": "rgb(255, 165, 0)",
-                "borderColor-TextBox-success": "rgb(0, 255, 0)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).not.toHaveCSS("border-color", "rgb(255, 0, 0)");
-        yield (0, fixtures_1.expect)(driver.component).not.toHaveCSS("border-color", "rgb(255, 165, 0)");
-        yield (0, fixtures_1.expect)(driver.component).not.toHaveCSS("border-color", "rgb(0, 255, 0)");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(0, 0, 0)");
-    }));
-});
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-fixtures_1.test.describe("Edge Cases", () => {
-    (0, fixtures_1.test)("handle special characters in input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input"/>`);
-        const driver = yield createTextBoxDriver("input");
-        yield driver.input.fill("Hello 日本語 @#$%!");
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("Hello 日本語 @#$%!");
-    }));
-    (0, fixtures_1.test)("handle Unicode characters in input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input"/>`);
-        const driver = yield createTextBoxDriver("input");
-        yield driver.input.fill("🚀 Unicode test 🎉");
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("🚀 Unicode test 🎉");
-    }));
-    (0, fixtures_1.test)("component handles very long input text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        const longText = "This is a very long text that might cause layout or performance issues in the component".repeat(10);
-        yield initTestBed(`<TextBox testId="input"/>`);
-        const driver = yield createTextBoxDriver("input");
-        yield driver.input.fill(longText);
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue(longText);
-    }));
-    (0, fixtures_1.test)("component handles special characters correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" label="Input with !@#$%^&*()"/>`, {});
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.label).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component handles extremely long input values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input"/>`);
-        const driver = yield createTextBoxDriver("input");
-        const veryLongText = "A".repeat(10000);
-        yield driver.input.fill(veryLongText);
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue(veryLongText);
-    }));
-});
-// =============================================================================
-// INTEGRATION TESTS
-// =============================================================================
-fixtures_1.test.describe("Integration", () => {
-    (0, fixtures_1.test)("component works correctly in Stack layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<Stack><TextBox testId="input" /></Stack>`);
-        const driver = yield createTextBoxDriver("input");
-        const { width, height } = yield (0, component_test_helpers_1.getBounds)(driver.input);
-        yield (0, fixtures_1.expect)(driver.input).toBeVisible();
-        (0, fixtures_1.expect)(width).toBeGreaterThan(0);
-        (0, fixtures_1.expect)(height).toBeGreaterThan(0);
-    }));
-    (0, fixtures_1.test)("component works correctly in FlowLayout layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<FlowLayout><TextBox testId="input" /></FlowLayout>`);
-        const driver = yield createTextBoxDriver("input");
-        const { width, height } = yield (0, component_test_helpers_1.getBounds)(driver.input);
-        yield (0, fixtures_1.expect)(driver.input).toBeVisible();
-        (0, fixtures_1.expect)(width).toBeGreaterThan(0);
-        (0, fixtures_1.expect)(height).toBeGreaterThan(0);
-    }));
-    (0, fixtures_1.test)("component integrates with forms correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<Form><TextBox testId="input" label="Username" /></Form>`);
-        const driver = yield createTextBoxDriver("input");
-        const { width, height } = yield (0, component_test_helpers_1.getBounds)(driver.input);
-        yield (0, fixtures_1.expect)(driver.input).toBeVisible();
-        (0, fixtures_1.expect)(width).toBeGreaterThan(0);
-        (0, fixtures_1.expect)(height).toBeGreaterThan(0);
-    }));
-    (0, fixtures_1.test)("component works with conditional rendering", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createTextBoxDriver }) {
-        yield initTestBed(`
-      <Fragment var.showInput="{true}">
-        <Fragment when="{showInput}">
-          <TextBox testId="input" label="Conditional input" />
-        </Fragment>
-        <Button testId="toggleBtn" onClick="showInput = !showInput">Toggle</Button>
-      </Fragment>
-    `);
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.label).toBeVisible();
-        yield page.getByTestId("toggleBtn").click();
-        yield (0, fixtures_1.expect)(driver.label).not.toBeVisible();
-    }));
-});
-(0, fixtures_1.test)("labelWidth applies custom label width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-    const expected = 200;
-    yield initTestBed(`<TextBox testId="test" label="test test" labelWidth="${expected}px" />`);
-    const driver = yield createTextBoxDriver("test");
-    const { width } = yield (0, component_test_helpers_1.getBounds)(driver.label);
-    (0, fixtures_1.expect)(width).toEqual(expected);
-}));
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-(0, fixtures_1.test)("input has correct width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <TextBox width="200px" testId="test"/>
-  `);
-    const { width } = yield page.getByTestId("test").boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input with label has correct width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <TextBox width="200px" label="test" testId="test"/>
-  `);
-    const { width } = yield page.getByTestId("test").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(`<TextBox 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(`<TextBox width="50%" label="test" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));