xmlui 0.10.12 → 0.10.14

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

@@ -0,0 +1,643 @@
+"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, page }) {
+        yield initTestBed(`<TextBox />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("component renders with label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox label="Username" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Username")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("initialValue sets field value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox initialValue="test value" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("test value");
+    }));
+    (0, fixtures_1.test)("initialValue accepts empty as empty string", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox initialValue="" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("initialValue accepts different data types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        // Test string
+        yield initTestBed(`<TextBox initialValue="hello" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("hello");
+        // Test number
+        yield initTestBed(`<TextBox initialValue="{123}" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("123");
+        // Test boolean
+        yield initTestBed(`<TextBox initialValue="{true}" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("true");
+    }));
+    (0, fixtures_1.test)("initialValue handles null", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox initialValue="{null}" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("initialValue handles undefined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox initialValue="{undefined}" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("component accepts user input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox />`);
+        yield page.getByRole("textbox").fill("user input");
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("user input");
+    }));
+    (0, fixtures_1.test)("component clears input correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox initialValue="initial text" />`);
+        const textbox = page.getByRole("textbox");
+        yield (0, fixtures_1.expect)(textbox).toHaveValue("initial text");
+        yield textbox.clear();
+        yield (0, fixtures_1.expect)(textbox).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("component required prop adds required attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox required="true" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("required");
+    }));
+    (0, fixtures_1.test)("enabled=false disables control", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox enabled="false" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeDisabled();
+    }));
+    (0, fixtures_1.test)("enabled=false prevents user input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox enabled="false" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).not.toBeEditable();
+    }));
+    (0, fixtures_1.test)("readOnly prevents editing but allows focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox readOnly="true" initialValue="read only text" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("readonly");
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("read only text");
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).not.toBeEditable();
+        yield page.getByRole("textbox").focus();
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeFocused();
+    }));
+    (0, fixtures_1.test)("autoFocus focuses input on mount", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox autoFocus="true" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeFocused();
+    }));
+    (0, fixtures_1.test)("autoFocus focuses input on mount with label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox autoFocus="true" label="Auto-focused input" />`);
+        yield (0, fixtures_1.expect)(page.getByLabel("Auto-focused input")).toBeFocused();
+    }));
+    (0, fixtures_1.test)("placeholder shows when input is empty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox placeholder="Enter text here..." />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("placeholder", "Enter text here...");
+    }));
+    (0, fixtures_1.test)("maxLength limits input length", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox maxLength="5" />`);
+        yield page.getByRole("textbox").fill("12345678");
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("12345");
+    }));
+    (0, fixtures_1.test)("can render startIcon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox startIcon="search" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("img")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("can render endIcon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox endIcon="search" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("img")).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, page }) {
+        yield initTestBed(`<TextBox label="Username" />`);
+        yield (0, fixtures_1.expect)(page.getByLabel("Username")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("component supports keyboard navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox label="Input" />`);
+        yield page.keyboard.press("Tab", { delay: 100 });
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeFocused();
+    }));
+    (0, fixtures_1.test)("component supports keyboard navigation from other elements", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <Fragment>
+        <TextBox testId="first-input" label="First input" />
+        <TextBox testId="second-input" label="Second input" />
+      </Fragment>
+    `);
+        const firstInput = page.getByTestId("first-input").getByRole("textbox");
+        const secondInput = page.getByTestId("second-input").getByRole("textbox");
+        yield firstInput.focus();
+        yield (0, fixtures_1.expect)(firstInput).toBeFocused();
+        yield page.keyboard.press("Tab", { delay: 100 });
+        yield (0, fixtures_1.expect)(secondInput).toBeFocused();
+    }));
+    (0, fixtures_1.test)("required has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox required="true" label="Required input" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("required");
+        yield (0, fixtures_1.expect)(page.getByText("Required input")).toContainText("*");
+    }));
+    (0, fixtures_1.test)("disabled component has proper attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox enabled="false" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("disabled");
+    }));
+    (0, fixtures_1.test)("readOnly has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox readOnly="true" label="Read-only input" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("readonly");
+    }));
+});
+// =============================================================================
+// 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, page }) {
+        yield initTestBed(`<TextBox direction="ltr" label="test" labelPosition="start" />`);
+        const { left: textboxLeft } = yield (0, component_test_helpers_1.getBounds)(page.getByLabel("test"));
+        const { right: labelRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test"));
+        (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, page }) {
+        yield initTestBed(`<TextBox direction="ltr" label="test" labelPosition="end" />`);
+        const { right: textboxRight } = yield (0, component_test_helpers_1.getBounds)(page.getByLabel("test"));
+        const { left: labelLeft } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test"));
+        (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, page }) {
+        yield initTestBed(`<TextBox label="test" labelPosition="top" />`);
+        const { top: textboxTop } = yield (0, component_test_helpers_1.getBounds)(page.getByLabel("test"));
+        const { bottom: labelBottom } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test"));
+        (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, page }) {
+        yield initTestBed(`<TextBox label="test" labelPosition="bottom" />`);
+        const { bottom: textboxBottom } = yield (0, component_test_helpers_1.getBounds)(page.getByLabel("test"));
+        const { top: labelTop } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test"));
+        (0, fixtures_1.expect)(labelTop).toBeGreaterThan(textboxBottom);
+    }));
+    (0, fixtures_1.test)("labelWidth applies custom label width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const expected = 200;
+        yield initTestBed(`<TextBox label="test test" labelWidth="${expected}px" />`);
+        const { width } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test test"));
+        (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";
+        const commonProps = `label="${labelText}" labelWidth="100px"`;
+        yield initTestBed(`<Fragment>
+        <TextBox ${commonProps} testId="break" labelBreak="{true}" />
+        <TextBox ${commonProps} testId="oneLine" labelBreak="{false}" />
+      </Fragment>`);
+        const labelBreak = page.getByTestId("break").getByText(labelText);
+        const labelOneLine = page.getByTestId("oneLine").getByText(labelText);
+        const { height: heightBreak } = yield (0, component_test_helpers_1.getBounds)(labelBreak);
+        const { height: heightOneLine } = yield (0, component_test_helpers_1.getBounds)(labelOneLine);
+        (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, page }) {
+        yield initTestBed(`<TextBox labelPosition="invalid" label="test" />`);
+        yield (0, fixtures_1.expect)(page.getByLabel("test")).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 input change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <TextBox onDidChange="testState = 'changed'" />
+    `);
+        yield page.getByRole("textbox").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, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <TextBox onDidChange="arg => testState = arg" />
+    `);
+        yield page.getByRole("textbox").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, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <TextBox onGotFocus="testState = 'focused'" />
+    `);
+        yield page.getByRole("textbox").focus();
+        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, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <TextBox onLostFocus="testState = 'blurred'" />
+    `);
+        yield page.getByRole("textbox").focus();
+        yield page.getByRole("textbox").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, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <TextBox enabled="false" didChange="testState = 'changed'" gotFocus="testState = 'focused'" />
+    `);
+        yield page.getByRole("textbox").focus();
+        yield page.getByRole("textbox").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 }) {
+        yield initTestBed(`
+      <Fragment>
+        <TextBox id="myTextBox" />
+        <Text testId="value">{myTextBox.value}</Text>
+      </Fragment>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("value")).toHaveText("");
+        yield page.getByRole("textbox").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 }) {
+        yield initTestBed(`
+      <Fragment>
+        <TextBox id="myTextBox" />
+        <Button testId="setBtn" onClick="myTextBox.setValue('api value')" />
+      </Fragment>
+    `);
+        yield page.getByTestId("setBtn").click();
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).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 }) {
+        yield initTestBed(`
+      <Fragment>
+        <TextBox id="myTextBox" />
+        <Button testId="focusBtn" onClick="myTextBox.focus()">Focus</Button>
+      </Fragment>
+    `);
+        const textbox = page.getByRole("textbox");
+        yield (0, fixtures_1.expect)(textbox).not.toBeFocused();
+        yield page.getByTestId("focusBtn").click();
+        yield (0, fixtures_1.expect)(textbox).toBeFocused();
+    }));
+    (0, fixtures_1.test)("focus API does nothing when component is disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Fragment>
+        <TextBox id="myTextBox" enabled="false" />
+        <Button testId="focusBtn" onClick="myTextBox.focus()">Focus</Button>
+      </Fragment>
+    `);
+        yield page.getByTestId("focusBtn").click();
+        const textbox = page.getByRole("textbox");
+        yield (0, fixtures_1.expect)(textbox).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, page }) {
+        yield initTestBed(`<TextBox testId="input" direction="ltr" startText="$" />`);
+        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
+        const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("$"));
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("$");
+        (0, fixtures_1.expect)(textRight - compLeft).toBeLessThanOrEqual(compRight - textLeft);
+    }));
+    (0, fixtures_1.test)("startText displays at beginning of input (rtl)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox testId="input" direction="rtl" startText="$" />`);
+        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
+        const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("$"));
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("$");
+        (0, fixtures_1.expect)(textRight - compLeft).toBeGreaterThanOrEqual(compRight - textLeft);
+    }));
+    (0, fixtures_1.test)("endText displays at end of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox testId="input" direction="ltr" endText="USD" />`);
+        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
+        const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("USD"));
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("USD");
+        (0, fixtures_1.expect)(textRight - compLeft).toBeGreaterThanOrEqual(compRight - textLeft);
+    }));
+    (0, fixtures_1.test)("endText displays at end of input (rtl)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox testId="input" direction="rtl" endText="USD" />`);
+        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
+        const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("USD"));
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("USD");
+        (0, fixtures_1.expect)(textRight - compLeft).toBeLessThanOrEqual(compRight - textLeft);
+    }));
+    (0, fixtures_1.test)("startIcon displays at beginning of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox testId="input" direction="ltr" startIcon="search" />`);
+        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
+        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img"));
+        (0, fixtures_1.expect)(iconRight - compLeft).toBeLessThanOrEqual(compRight - iconLeft);
+    }));
+    (0, fixtures_1.test)("startIcon displays at beginning of input (rtl)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox testId="input" direction="rtl" startIcon="search" />`);
+        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
+        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img"));
+        (0, fixtures_1.expect)(iconRight - compLeft).toBeGreaterThanOrEqual(compRight - iconLeft);
+    }));
+    (0, fixtures_1.test)("endIcon displays at end of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox testId="input" endIcon="search" />`);
+        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
+        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img"));
+        (0, fixtures_1.expect)(iconRight - compLeft).toBeGreaterThanOrEqual(compRight - iconLeft);
+    }));
+    (0, fixtures_1.test)("endIcon displays at end of input (rtl)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox testId="input" direction="rtl" endIcon="search" />`);
+        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
+        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img"));
+        (0, fixtures_1.expect)(iconRight - compLeft).toBeLessThanOrEqual(compRight - iconLeft);
+    }));
+    (0, fixtures_1.test)("multiple adornments can be combined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <TextBox testId="input" startText="$" endText="USD" startIcon="search" endIcon="search" />`);
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("$");
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("USD");
+        yield (0, fixtures_1.expect)(page.getByRole("img").first()).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("img").last()).toBeVisible();
+    }));
+    (0, fixtures_1.test)("all adornments appear in the right place", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <TextBox testId="input" startText="$" endText="USD" startIcon="search" endIcon="search" direction="ltr" />
+    `);
+        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
+        const { left: startTextLeft, right: startTextRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("$"));
+        const { left: endTextLeft, right: endTextRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("USD"));
+        const { left: startIconLeft, right: startIconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img").first());
+        const { left: endIconLeft, right: endIconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img").last());
+        // 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, page }) {
+        yield initTestBed(`<PasswordInput />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("component has password type", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<PasswordInput />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("type", "password");
+    }));
+    (0, fixtures_1.test)("component has initial value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<PasswordInput initialValue="secret" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("secret");
+    }));
+    (0, fixtures_1.test)("showPasswordToggle displays visibility toggle", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<PasswordInput testId="input" showPasswordToggle="true" />`);
+        yield (0, fixtures_1.expect)(page.getByTestId("input").getByRole("button")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("password toggle switches between visible and hidden", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<PasswordInput testId="input" showPasswordToggle="true" />`);
+        const toggleButton = page.getByTestId("input").getByRole("button");
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("type", "password");
+        yield toggleButton.click();
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("type", "text");
+    }));
+    (0, fixtures_1.test)("custom password icons work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PasswordInput
+        testId="input"
+        showPasswordToggle="true"
+        passwordVisibleIcon="test"
+        passwordHiddenIcon="test"
+      />`, {
+            resources: {
+                "icon.test": "resources/bell.svg",
+            },
+        });
+        const icon = page.getByTestId("input").getByRole("img");
+        yield (0, fixtures_1.expect)(icon).toBeVisible();
+        yield page.getByTestId("input").getByRole("button").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, page }) {
+        yield initTestBed(`<TextBox testId="input" />`, {
+            testThemeVars: {
+                "backgroundColor-TextBox": "rgb(255, 240, 240)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("background-color", "rgb(255, 240, 240)");
+    }));
+    (0, fixtures_1.test)("borderColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox testId="input" />`, {
+            testThemeVars: {
+                "borderColor-TextBox": "rgb(255, 0, 0)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 0, 0)");
+    }));
+    (0, fixtures_1.test)("textColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox testId="input" />`, {
+            testThemeVars: {
+                "textColor-TextBox": "rgb(0, 0, 255)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("color", "rgb(0, 0, 255)");
+    }));
+    (0, fixtures_1.test)("focus borderColor applies on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox testId="input" />`, {
+            testThemeVars: {
+                "borderColor-TextBox--focus": "rgb(0, 255, 0)",
+            },
+        });
+        const input = page.getByTestId("input");
+        yield input.focus();
+        yield (0, fixtures_1.expect)(input).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, page }) {
+        yield initTestBed(`<TextBox testId="input" enabled="false" />`, {
+            testThemeVars: {
+                "backgroundColor-TextBox--disabled": "rgb(240, 240, 240)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).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, page }) {
+        yield initTestBed(`<TextBox testId="input" validationStatus="error" />`, {
+            testThemeVars: {
+                "borderColor-TextBox-error": "rgb(255, 0, 0)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).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, page }) {
+        yield initTestBed(`<TextBox testId="input" validationStatus="warning" />`, {
+            testThemeVars: {
+                "borderColor-TextBox-warning": "rgb(255, 165, 0)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).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, page }) {
+        yield initTestBed(`<TextBox testId="input" validationStatus="valid" />`, {
+            testThemeVars: {
+                "borderColor-TextBox-success": "rgb(0, 255, 0)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(0, 255, 0)");
+    }));
+    (0, fixtures_1.test)("borderRadius applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox testId="input" />`, {
+            testThemeVars: {
+                "borderRadius-TextBox": "8px",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-radius", "8px");
+    }));
+    (0, fixtures_1.test)("padding applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox testId="input" />`, {
+            testThemeVars: {
+                "padding-TextBox": "12px",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).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, page }) {
+        yield initTestBed(`<TextBox testId="input" validationStatus="error" />`, {
+            testThemeVars: {
+                "borderColor-TextBox-error": "rgb(255, 0, 0)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 0, 0)");
+    }));
+    (0, fixtures_1.test)("validationStatus=warning correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox testId="input" validationStatus="warning" />`, {
+            testThemeVars: {
+                "borderColor-TextBox-warning": "rgb(255, 165, 0)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 165, 0)");
+    }));
+    (0, fixtures_1.test)("validationStatus=valid correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox testId="input" validationStatus="valid" />`, {
+            testThemeVars: {
+                "borderColor-TextBox-success": "rgb(0, 255, 0)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).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(`<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)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).not.toHaveCSS("border-color", "rgb(255, 0, 0)");
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).not.toHaveCSS("border-color", "rgb(255, 165, 0)");
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).not.toHaveCSS("border-color", "rgb(0, 255, 0)");
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).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, page }) {
+        yield initTestBed(`<TextBox />`);
+        yield page.getByRole("textbox").fill("Hello 日本語 @#$%!");
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("Hello 日本語 @#$%!");
+    }));
+    (0, fixtures_1.test)("handle Unicode characters in input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox />`);
+        yield page.getByRole("textbox").fill("🚀 Unicode test 🎉");
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("🚀 Unicode test 🎉");
+    }));
+    (0, fixtures_1.test)("component handles very long input text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const longText = "This is a very long text that might cause layout or performance issues in the component".repeat(10);
+        yield initTestBed(`<TextBox />`);
+        yield page.getByRole("textbox").fill(longText);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue(longText);
+    }));
+    (0, fixtures_1.test)("component handles special characters correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox label="Input with !@#$%^&*()"/>`, {});
+        yield (0, fixtures_1.expect)(page.getByText("Input with !@#$%^&*()")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("component handles extremely long input values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TextBox />`);
+        const veryLongText = "A".repeat(10000);
+        yield page.getByRole("textbox").fill(veryLongText);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).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, page }) {
+        yield initTestBed(`<Stack><TextBox testId="input" /></Stack>`);
+        const input = page.getByTestId("input");
+        const { width, height } = yield (0, component_test_helpers_1.getBounds)(input);
+        yield (0, fixtures_1.expect)(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, page }) {
+        yield initTestBed(`<FlowLayout><TextBox testId="input" /></FlowLayout>`);
+        const input = page.getByTestId("input");
+        const { width, height } = yield (0, component_test_helpers_1.getBounds)(input);
+        yield (0, fixtures_1.expect)(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, page }) {
+        yield initTestBed(`<Form><TextBox label="Username" /></Form>`);
+        const input = page.getByLabel("Username");
+        const { width, height } = yield (0, component_test_helpers_1.getBounds)(input);
+        yield (0, fixtures_1.expect)(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 }) {
+        yield initTestBed(`
+      <Fragment var.showInput="{true}">
+        <Fragment when="{showInput}">
+          <TextBox label="Conditional input" />
+        </Fragment>
+        <Button testId="toggleBtn" onClick="showInput = !showInput">Toggle</Button>
+      </Fragment>
+    `);
+        yield (0, fixtures_1.expect)(page.getByLabel("Conditional input")).toBeVisible();
+        yield page.getByTestId("toggleBtn").click();
+        yield (0, fixtures_1.expect)(page.getByLabel("Conditional input")).not.toBeVisible();
+    }));
+});