xmlui 0.11.4 → 0.11.7

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

@@ -1,886 +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 with basic props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea />`);
-        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(`<TextArea label="Comments" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Comments")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("initialValue sets textarea value correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea initialValue="Initial text content" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("Initial text content");
-    }));
-    (0, fixtures_1.test)("initialValue accepts different data types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        // Test string
-        yield initTestBed(`<TextArea initialValue="hello world" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("hello world");
-        // Test number
-        yield initTestBed(`<TextArea initialValue="{123}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("123");
-        // Test boolean
-        yield initTestBed(`<TextArea initialValue="{true}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("true");
-    }));
-    (0, fixtures_1.test)("component handles null and undefined props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea initialValue="{null}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("");
-        yield initTestBed(`<TextArea initialValue="{undefined}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("");
-        yield initTestBed(`<TextArea />`);
-        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(`<TextArea />`);
-        yield page.getByRole("textbox").fill("user input");
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("user input");
-    }));
-    (0, fixtures_1.test)("component accepts multiline input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea />`);
-        const multilineText = "First line\nSecond line\nThird line";
-        yield page.getByRole("textbox").fill(multilineText);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue(multilineText);
-    }));
-    (0, fixtures_1.test)("component clears input correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea initialValue="Initial content" />`);
-        const textarea = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("Initial content");
-        yield textarea.clear();
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("");
-    }));
-    (0, fixtures_1.test)("required prop adds required attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea 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(`<TextArea 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(`<TextArea readOnly="true" initialValue="Read only content" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("readonly");
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("Read only content");
-        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 textarea on mount", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea 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(`<TextArea autoFocus="true" label="Auto-focused input" />`);
-        yield (0, fixtures_1.expect)(page.getByLabel("Auto-focused input")).toBeFocused();
-    }));
-    (0, fixtures_1.test)("placeholder shows when textarea is empty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea placeholder="Enter your comments here..." />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("placeholder", "Enter your comments here...");
-    }));
-    (0, fixtures_1.test)("placeholder is hidden when textarea has content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea placeholder="Enter comments" />`);
-        const textarea = page.getByRole("textbox");
-        yield textarea.fill("Some content");
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("Some content");
-        yield (0, fixtures_1.expect)(textarea).toHaveAttribute("placeholder", "Enter comments");
-    }));
-    (0, fixtures_1.test)("maxLength limits input length", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea maxLength="10" />`);
-        yield page.getByRole("textbox").fill("12345678901234567890");
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("1234567890");
-    }));
-    (0, fixtures_1.test)("rows prop sets textarea height", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea rows="5" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("rows", "5");
-    }));
-    (0, fixtures_1.test)("component handles special characters correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea />`);
-        const specialText = "Hello 日本語 @#$%! 🚀 Unicode test 🎉";
-        yield page.getByRole("textbox").fill(specialText);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue(specialText);
-    }));
-    (0, fixtures_1.test)("component handles very long input values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const longText = "This is a very long text that might cause issues with component rendering or processing. ".repeat(50);
-        yield initTestBed(`<TextArea />`);
-        yield page.getByRole("textbox").fill(longText);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue(longText);
-    }));
-    (0, fixtures_1.test)("component prop changes update display correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment var.rows="{3}">
-        <TextArea rows="{rows}" />
-        <Button onClick="rows = 5">Set Rows to 5</Button>
-      </Fragment>`);
-        const textarea = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(textarea).toHaveAttribute("rows", "3");
-        yield page.getByRole("button", { name: "Set Rows to 5" }).click();
-        yield (0, fixtures_1.expect)(textarea).toHaveAttribute("rows", "5");
-    }));
-    (0, fixtures_1.test)("autoSize enables automatic height adjustment", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea testId="input" autoSize="true" />`);
-        const textarea = page.getByTestId("input");
-        const areaField = page.getByRole("textbox");
-        // Get initial height with single line
-        yield areaField.fill("Single line");
-        const initialHeight = yield textarea.evaluate((el) => el.scrollHeight);
-        // Add multiple lines and verify height increases
-        yield areaField.fill("Line 1\nLine 2\nLine 3\nLine 4");
-        const expandedHeight = yield textarea.evaluate((el) => el.scrollHeight);
-        // Height should increase when more lines are added
-        (0, fixtures_1.expect)(expandedHeight).toBeGreaterThan(initialHeight);
-        // Verify content is correct
-        yield (0, fixtures_1.expect)(areaField).toHaveValue("Line 1\nLine 2\nLine 3\nLine 4");
-        // Test reduction - go back to fewer lines
-        yield areaField.fill("Line 1\nLine 2");
-        const reducedHeight = yield areaField.evaluate((el) => el.scrollHeight);
-        // Height should decrease when lines are removed
-        (0, fixtures_1.expect)(reducedHeight).toBeLessThan(expandedHeight);
-        (0, fixtures_1.expect)(reducedHeight).toBeGreaterThanOrEqual(initialHeight);
-    }));
-    (0, fixtures_1.test)("maxRows limits auto-size height", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea testId="input" autoSize="true" maxRows="3" />`);
-        const textarea = page.getByTestId("input");
-        const areaField = page.getByRole("textbox");
-        // Fill with more content than maxRows should allow
-        const manyLines = Array(10).fill("Line content").join("\n");
-        yield areaField.fill(manyLines);
-        // Content should still be there - the key is that maxRows is applied
-        yield (0, fixtures_1.expect)(areaField).toHaveValue(manyLines);
-        // Verify the component is still visible and functional with large content
-        yield (0, fixtures_1.expect)(areaField).toBeVisible();
-        yield (0, fixtures_1.expect)(areaField).toBeEditable();
-        // The textarea should have some form of height constraint applied
-        // (exact implementation may vary, but component should remain functional)
-        const boundingRect = yield (0, component_test_helpers_1.getBounds)(textarea);
-        (0, fixtures_1.expect)(boundingRect).not.toBeNull();
-        (0, fixtures_1.expect)(boundingRect.height).toBeGreaterThan(0);
-    }));
-    (0, fixtures_1.test)("minRows sets minimum auto-size height", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea testId="input" autoSize="true" minRows="4" />`);
-        const textarea = page.getByTestId("input");
-        const areaField = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(textarea).toBeVisible();
-        yield (0, fixtures_1.expect)(areaField).toBeVisible();
-        // Even with no content, component should be functional
-        yield (0, fixtures_1.expect)(areaField).toHaveValue("");
-        // Fill with single line (less than minRows)
-        yield areaField.fill("Single line");
-        yield (0, fixtures_1.expect)(areaField).toHaveValue("Single line");
-        // Fill with content that matches minRows
-        yield areaField.fill("Line 1\nLine 2\nLine 3\nLine 4");
-        yield (0, fixtures_1.expect)(areaField).toHaveValue("Line 1\nLine 2\nLine 3\nLine 4");
-        // Verify the component remains functional with different content lengths
-        yield (0, fixtures_1.expect)(areaField).toBeVisible();
-        yield (0, fixtures_1.expect)(areaField).toBeEditable();
-    }));
-    (0, fixtures_1.test)("enterSubmits enables form submission on Enter", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Form onSubmit="testState = 'submitted'">
-        <TextArea enterSubmits="true" />
-        <Button type="submit" testId="submitBtn">Submit</Button>
-      </Form>
-    `);
-        const textarea = page.getByRole("textbox");
-        yield textarea.focus();
-        yield textarea.fill("Some content");
-        yield textarea.press("Enter");
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("submitted");
-    }));
-    (0, fixtures_1.test)("enterSubmits=false prevents form submission on Enter", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Form onSubmit="testState = 'submitted'">
-        <TextArea enterSubmits="false" />
-        <Button type="submit" testId="submitBtn">Submit</Button>
-      </Form>
-    `);
-        const textarea = page.getByRole("textbox");
-        yield textarea.focus();
-        yield textarea.fill("Some content");
-        yield textarea.press("Enter");
-        // Should not submit, so testState should remain null
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null);
-        // But should allow new line in textarea
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("Some content\n");
-    }));
-    (0, fixtures_1.test)("Shift+Enter creates new line even with enterSubmits=true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Form onSubmit="testState = 'submitted'">
-        <TextArea enterSubmits="true" />
-      </Form>
-    `);
-        const textarea = page.getByRole("textbox");
-        yield textarea.focus();
-        yield textarea.fill("Line 1");
-        yield textarea.press("Shift+Enter");
-        yield textarea.type("Line 2");
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("Line 1\nLine 2");
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null); // Should not have submitted
-    }));
-    (0, fixtures_1.test)("escResets enables form reset on Escape", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Form>
-        <TextArea id="myTextarea" initialValue="Initial value" escResets="true" />
-      </Form>
-    `);
-        const textarea = page.getByRole("textbox");
-        yield textarea.fill("Changed content");
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("Changed content");
-        yield textarea.press("Escape");
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("Initial value");
-    }));
-    (0, fixtures_1.test)("escResets=false does not reset on Escape", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea escResets="false" initialValue="Initial value" />`);
-        const textarea = page.getByRole("textbox");
-        yield textarea.fill("Changed content");
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("Changed content");
-        yield textarea.press("Escape");
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("Changed content"); // Should remain unchanged
-    }));
-    (0, fixtures_1.test)("component handles readOnly and enabled=false together", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea readOnly="true" enabled="false" />`);
-        const textarea = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(textarea).toBeDisabled();
-        yield (0, fixtures_1.expect)(textarea).toHaveAttribute("readonly");
-    }));
-    (0, fixtures_1.test)("component handles autoFocus with enabled=false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea autoFocus="true" enabled="false" />`);
-        const textarea = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(textarea).toBeDisabled();
-        yield (0, fixtures_1.expect)(textarea).not.toBeFocused();
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("component has correct accessibility attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea label="Comments" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("aria-multiline", "true");
-    }));
-    (0, fixtures_1.test)("component is keyboard accessible when interactive", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <TextArea
-        label="Comments"
-        onGotFocus="testState = 'keyboard-focused'"
-      />
-    `);
-        const textarea = page.getByRole("textbox");
-        yield textarea.focus();
-        yield (0, fixtures_1.expect)(textarea).toBeFocused();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("keyboard-focused");
-    }));
-    (0, fixtures_1.test)("non-interactive component is not focusable when disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`<TextArea enabled="false" />`);
-        const textarea = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(textarea).toBeDisabled();
-        yield (0, fixtures_1.expect)(textarea).not.toBeFocused();
-    }));
-    (0, fixtures_1.test)("label is properly associated with textarea", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea label="User Comments" />`);
-        const component = page.getByLabel("User Comments");
-        yield (0, fixtures_1.expect)(component).toHaveRole("textbox");
-    }));
-    (0, fixtures_1.test)("required has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea required="true" label="Required Comments" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("required");
-        yield (0, fixtures_1.expect)(page.getByText("Required Comments")).toContainText("*");
-    }));
-    (0, fixtures_1.test)("readOnly has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea readOnly="true" label="Read-only textarea" />`);
-        const textarea = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(textarea).toHaveAttribute("aria-readonly", "true");
-        yield (0, fixtures_1.expect)(textarea).toHaveAttribute("readonly");
-    }));
-    (0, fixtures_1.test)("placeholder provides accessible description", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea placeholder="Describe your feedback in detail" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("placeholder", "Describe your feedback in detail");
-    }));
-    (0, fixtures_1.test)("component supports multiple textareas with keyboard navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <Fragment>
-        <TextArea label="First textarea" />
-        <TextArea label="Second textarea" />
-      </Fragment>
-    `);
-        const firstTextarea = page.getByLabel("First textarea");
-        const secondTextarea = page.getByLabel("Second textarea");
-        yield firstTextarea.focus();
-        yield (0, fixtures_1.expect)(firstTextarea).toBeFocused();
-        yield page.keyboard.press("Tab");
-        yield (0, fixtures_1.expect)(secondTextarea).toBeFocused();
-    }));
-});
-// =============================================================================
-// 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(`
-      <TextArea 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(`
-      <TextArea 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(`
-      <TextArea onGotFocus="testState = 'focused'" />
-    `);
-        yield page.getByRole("textbox").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(`
-      <TextArea label="Comments" onGotFocus="testState = 'focused'" />
-    `);
-        yield page.getByText("Comments").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
-    }));
-    (0, fixtures_1.test)("lostFocus event fires on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <TextArea onLostFocus="testState = 'blurred'" />
-    `);
-        const textarea = page.getByRole("textbox");
-        yield textarea.focus();
-        yield textarea.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(`
-      <TextArea enabled="false" onDidChange="testState = 'changed'" onGotFocus="testState = 'focused'" />
-    `);
-        const textarea = page.getByRole("textbox");
-        yield textarea.focus();
-        yield textarea.fill("test", { force: true });
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null);
-    }));
-});
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-fixtures_1.test.describe("Visual States", () => {
-    (0, fixtures_1.test)("component applies theme variables correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea testId="input" />`, {
-            testThemeVars: {
-                "backgroundColor-TextArea--default": "rgb(255, 0, 0)",
-                "textColor-TextArea--default": "rgb(0, 255, 0)",
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("background-color", "rgb(255, 0, 0)");
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("color", "rgb(0, 255, 0)");
-    }));
-    (0, fixtures_1.test)("component handles horizontal resize option", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea resize="horizontal" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveCSS("resize", "horizontal");
-    }));
-    (0, fixtures_1.test)("component handles vertical resize option", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea resize="vertical" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveCSS("resize", "vertical");
-    }));
-    (0, fixtures_1.test)("component handles both resize option", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea resize="both" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveCSS("resize", "both");
-    }));
-    (0, fixtures_1.test)("component handles disabled visual state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea enabled="false" />`, {
-            testThemeVars: {
-                "backgroundColor-TextArea--disabled": "rgb(255, 0, 0)",
-                "textColor-TextArea--disabled": "rgb(0, 255, 0)",
-                "borderColor-TextArea--disabled": "rgb(0, 0, 255)",
-            },
-        });
-        const textarea = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(textarea).toBeDisabled();
-        yield (0, fixtures_1.expect)(textarea).toHaveCSS("background-color", "rgb(255, 0, 0)");
-        yield (0, fixtures_1.expect)(textarea).toHaveCSS("color", "rgb(0, 255, 0)");
-        yield (0, fixtures_1.expect)(textarea).toHaveCSS("border-color", "rgb(0, 0, 255)");
-    }));
-    (0, fixtures_1.test)("component handles focus state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea />`, {
-            testThemeVars: {
-                "borderColor-TextArea--focus": "rgb(255, 0, 0)",
-                "backgroundColor-TextArea--focus": "rgb(0, 255, 0)",
-                "textColor-TextArea--focus": "rgb(0, 0, 255)",
-            },
-        });
-        const textarea = page.getByRole("textbox");
-        // Test focus state
-        yield textarea.focus();
-        yield (0, fixtures_1.expect)(textarea).toHaveCSS("border-color", "rgb(255, 0, 0)");
-        yield (0, fixtures_1.expect)(textarea).toHaveCSS("background-color", "rgb(0, 255, 0)");
-        yield (0, fixtures_1.expect)(textarea).toHaveCSS("color", "rgb(0, 0, 255)");
-    }));
-    (0, fixtures_1.test)("component handles hover state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea />`, {
-            testThemeVars: {
-                "borderColor-TextArea--hover": "rgb(255, 0, 0)",
-                "backgroundColor-TextArea--hover": "rgb(0, 255, 0)",
-                "textColor-TextArea--hover": "rgb(0, 0, 255)",
-            },
-        });
-        const textarea = page.getByRole("textbox");
-        // Test hover state (simulated through interaction)
-        yield textarea.hover();
-        yield (0, fixtures_1.expect)(textarea).toHaveCSS("border-color", "rgb(255, 0, 0)");
-        yield (0, fixtures_1.expect)(textarea).toHaveCSS("background-color", "rgb(0, 255, 0)");
-        yield (0, fixtures_1.expect)(textarea).toHaveCSS("color", "rgb(0, 0, 255)");
-    }));
-});
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-fixtures_1.test.describe("Edge Cases", () => {
-    (0, fixtures_1.test)("component handles special characters correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea label="José María's Comments" placeholder="Введите текст здесь" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("José María's Comments")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("placeholder", "Введите текст здесь");
-    }));
-    (0, fixtures_1.test)("component handles empty array as initialValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea initialValue="{[]}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("");
-    }));
-    (0, fixtures_1.test)("component handles empty object as initialValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea initialValue="{{}}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("[object Object]");
-    }));
-    (0, fixtures_1.test)("component handles function as initialValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea initialValue="{() => {}}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("[object Object]");
-    }));
-    (0, fixtures_1.test)("component handles negative maxLength gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea maxLength="{-1}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component handles zero maxLength gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea maxLength="0" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component handles very large maxLength gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea maxLength="999999" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component handles invalid resize values gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea resize="invalid" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveCSS("resize", "none");
-    }));
-    (0, fixtures_1.test)("component handles empty value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea initialValue="" />`);
-        const textarea = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("");
-    }));
-    (0, fixtures_1.test)("component handles whitespace-only value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea initialValue="   " />`);
-        const whitespaceTextarea = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(whitespaceTextarea).toHaveValue("   ");
-    }));
-    (0, fixtures_1.test)("component handles tab and newline characters in value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea initialValue="\t\n" />`);
-        const tabNewlineTextarea = page.getByRole("textbox");
-        const value = yield tabNewlineTextarea.inputValue();
-        (0, fixtures_1.expect)(value).toContain("\t");
-        (0, fixtures_1.expect)(value).toContain("\n");
-    }));
-    (0, fixtures_1.test)("component handles very long input values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const longValue = "Very long value that might cause issues with component rendering or processing. ".repeat(100);
-        yield initTestBed(`<TextArea initialValue="${longValue}" />`);
-        const textarea = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(textarea).toBeVisible();
-        yield (0, fixtures_1.expect)(textarea).toHaveValue(longValue);
-    }));
-    (0, fixtures_1.test)("component handles invalid maxRows/minRows combinations with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`<TextArea autoSize="true" maxRows="2" minRows="5" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component handles zero maxRows/minRows values with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`<TextArea autoSize="true" maxRows="0" minRows="0" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component handles negative maxRows/minRows values with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`<TextArea autoSize="true" maxRows="{-1}" minRows="{-1}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
-    }));
-});
-// =============================================================================
-// PERFORMANCE TESTS
-// =============================================================================
-fixtures_1.test.describe("Performance", () => {
-    (0, fixtures_1.test)("component memoization prevents unnecessary re-renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <TextArea
-        label="Performance Test"
-        onDidChange="testState = ++testState || 1"
-      />
-    `);
-        const textarea = page.getByRole("textbox");
-        // Test that memoization works through stable behavior
-        yield textarea.fill("a");
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(1);
-        yield textarea.fill("ab");
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(2);
-        // Component should maintain consistent behavior
-        yield (0, fixtures_1.expect)(textarea).toBeVisible();
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("ab");
-    }));
-    (0, fixtures_1.test)("component handles large content efficiently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const largeContent = "Large content line.\n".repeat(1000);
-        yield initTestBed(`<TextArea />`);
-        const textarea = page.getByRole("textbox");
-        // Fill with large content
-        yield textarea.fill(largeContent);
-        yield (0, fixtures_1.expect)(textarea).toHaveValue(largeContent);
-        // Verify component still responsive
-        yield textarea.clear();
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("");
-    }));
-    (0, fixtures_1.test)("component performs well with rapid user input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <TextArea onDidChange="testState = (testState || 0) + 1" />
-    `);
-        const textarea = page.getByRole("textbox");
-        // Simulate rapid typing
-        yield textarea.pressSequentially("rapid input test", { delay: 10 });
-        // Should have received multiple change events efficiently
-        const changeCount = yield testStateDriver.testState();
-        (0, fixtures_1.expect)(changeCount).toBeGreaterThan(10);
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("rapid input test");
-    }));
-});
-// =============================================================================
-// INTEGRATION TESTS
-// =============================================================================
-fixtures_1.test.describe("Integration", () => {
-    (0, fixtures_1.test)("component works correctly in different layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextArea label="Layout Test" />`);
-        const textarea = page.getByRole("textbox");
-        // Test basic layout integration
-        yield (0, fixtures_1.expect)(textarea).toBeVisible();
-        // Test bounding box and dimensions
-        const boundingBox = yield (0, component_test_helpers_1.getBounds)(textarea);
-        (0, fixtures_1.expect)(boundingBox).not.toBeNull();
-        (0, fixtures_1.expect)(boundingBox.width).toBeGreaterThan(0);
-        (0, fixtures_1.expect)(boundingBox.height).toBeGreaterThan(0);
-    }));
-    (0, fixtures_1.test)("component integrates with Form components", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <TextArea id="comments" label="Comments" required="true" />
-        <Button testId="submit">Submit</Button>
-      </Fragment>
-    `);
-        const textarea = page.getByLabel("Comments");
-        const submitButton = page.getByTestId("submit");
-        yield (0, fixtures_1.expect)(textarea).toBeVisible();
-        yield (0, fixtures_1.expect)(submitButton).toBeVisible();
-        // Test form interaction
-        yield textarea.fill("User feedback");
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("User feedback");
-    }));
-    (0, fixtures_1.test)("component state synchronization with other components", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <TextArea id="textarea" initialValue="Initial text" />
-        <Text testId="display">{textarea.value}</Text>
-        <Button testId="clear" onClick="textarea.setValue('')">Clear</Button>
-      </Fragment>
-    `);
-        // Initial state sync
-        yield (0, fixtures_1.expect)(page.getByTestId("display")).toHaveText("Initial text");
-        // Manual input sync
-        const textarea = page.getByRole("textbox");
-        yield textarea.fill("Updated text");
-        yield (0, fixtures_1.expect)(page.getByTestId("display")).toHaveText("Updated text");
-        // API call sync
-        yield page.getByTestId("clear").click();
-        yield (0, fixtures_1.expect)(page.getByTestId("display")).toHaveText("");
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("");
-    }));
-    (0, fixtures_1.test)("component works with event handling chain", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <TextArea
-          onGotFocus="testState = 'focused'"
-          onLostFocus="testState = 'blurred'"
-          onDidChange="(value) => testState = 'changed: ' + value"
-        />
-        <Button testId="otherElement">Other Element</Button>
-      </Fragment>
-    `);
-        const textarea = page.getByRole("textbox");
-        const button = page.getByTestId("otherElement");
-        // Test focus event
-        yield textarea.focus();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
-        // Test change event (use fill for reliable event triggering)
-        yield textarea.fill("test input");
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("changed: test input");
-        // Test blur event
-        yield button.focus();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("blurred");
-    }));
-    (0, fixtures_1.test)("component API methods work in integrated scenarios", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <TextArea id="textarea1" />
-        <TextArea id="textarea2" />
-        <Button testId="copyBtn" onClick="textarea2.setValue(textarea1.value)">Copy</Button>
-        <Button testId="focusBtn" onClick="textarea1.focus()">Focus First</Button>
-      </Fragment>
-    `);
-        const textarea1 = page.getByRole("textbox").first();
-        const textarea2 = page.getByRole("textbox").nth(1);
-        const copyBtn = page.getByTestId("copyBtn");
-        const focusBtn = page.getByTestId("focusBtn");
-        // Setup initial content
-        yield textarea1.fill("Content to copy");
-        // Test setValue API integration
-        yield copyBtn.click();
-        yield (0, fixtures_1.expect)(textarea2).toHaveValue("Content to copy");
-        // Test focus API integration
-        yield focusBtn.click();
-        yield (0, fixtures_1.expect)(textarea1).toBeFocused();
-    }));
-    (0, fixtures_1.test)("component works in nested component structures", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <VStack>
-          <TextArea label="Nested Textarea 1" />
-          <HStack>
-            <TextArea label="Nested Textarea 2" />
-            <Button testId="nestedBtn">Button</Button>
-          </HStack>
-        </VStack>
-      </Fragment>
-    `);
-        const textarea1 = page.getByLabel("Nested Textarea 1");
-        const textarea2 = page.getByLabel("Nested Textarea 2");
-        const button = page.getByTestId("nestedBtn");
-        yield (0, fixtures_1.expect)(textarea1).toBeVisible();
-        yield (0, fixtures_1.expect)(textarea2).toBeVisible();
-        yield (0, fixtures_1.expect)(button).toBeVisible();
-        // Test interaction in nested structure
-        yield textarea1.fill("Content in nested structure");
-        yield (0, fixtures_1.expect)(textarea1).toHaveValue("Content in nested structure");
-    }));
-    (0, fixtures_1.test)("programmatic control works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <TextArea id="input" />
-        <Button testId="focusBtn" onClick="input.focus()">Focus</Button>
-        <Button testId="setBtn" onClick="input.setValue('API Value')">Set Value</Button>
-        <Button testId="insertBtn" onClick="input.insert(' inserted')">Insert Text</Button>
-      </Fragment>
-    `);
-        const textarea = page.getByRole("textbox");
-        // Test focus API
-        yield page.getByTestId("focusBtn").click();
-        yield (0, fixtures_1.expect)(textarea).toBeFocused();
-        // Test setValue API
-        yield page.getByTestId("setBtn").click();
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("API Value");
-        // Test insert API
-        yield textarea.click(); // Focus and position cursor at end
-        yield page.getByTestId("insertBtn").click();
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("API Value inserted");
-    }));
-    (0, fixtures_1.test)("insert API method works at cursor position", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <TextArea id="textarea" initialValue="Hello World" />
-        <Button testId="insertBtn" onClick="textarea.insert(' Beautiful')">Insert</Button>
-      </Fragment>
-    `);
-        const textarea = page.getByRole("textbox");
-        // Position cursor between "Hello" and " World" (after "Hello")
-        yield textarea.focus();
-        yield page.evaluate(() => {
-            const textarea = document.querySelector("textarea");
-            if (textarea) {
-                textarea.setSelectionRange(5, 5); // Position after "Hello"
-            }
-        });
-        yield page.getByTestId("insertBtn").click();
-        yield (0, fixtures_1.expect)(textarea).toHaveValue("Hello Beautiful World");
-    }));
-    (0, fixtures_1.test)("component value API reflects current content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <TextArea id="myTextArea" initialValue="Initial content" />
-        <Text testId="valueDisplay">{myTextArea.value}</Text>
-      </Fragment>
-    `);
-        const textarea = page.getByRole("textbox");
-        const valueDisplay = page.getByTestId("valueDisplay");
-        yield (0, fixtures_1.expect)(valueDisplay).toHaveText("Initial content");
-        yield textarea.fill("Updated content");
-        yield (0, fixtures_1.expect)(valueDisplay).toHaveText("Updated content");
-    }));
-});
-// =============================================================================
-// REGRESSION TESTS
-// =============================================================================
-fixtures_1.test.describe("Regression", () => {
-    (0, fixtures_1.test)("component does not loose focus #1", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextAreaDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Fragment var.value="">
-        <TextBox testId="myTextBox" initialValue="{value}" onDidChange="{(val) => {value = val}}"/>
-        <TextArea testId="myTextArea" initialValue="{value}" onDidChange="{(val) => {value = val}}"/>
-      </Fragment>
-    `);
-        const tbDriver = yield createTextBoxDriver("myTextBox");
-        const driver = yield createTextAreaDriver("myTextArea");
-        // Test basic layout integration
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield driver.focus();
-        yield (0, fixtures_1.expect)(driver.component).toBeFocused();
-        yield driver.component.fill("a");
-        yield (0, fixtures_1.expect)(driver.component).toHaveValue("a");
-        yield driver.component.fill("abc");
-        yield (0, fixtures_1.expect)(driver.component).toHaveValue("abc");
-        yield driver.component.fill("abcde");
-        yield (0, fixtures_1.expect)(driver.component).toHaveValue("abcde");
-    }));
-});
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-(0, fixtures_1.test)("input has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<TextArea width="200px" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input with label has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<TextArea width="200px" label="test" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield page.setViewportSize({ width: 400, height: 300 });
-    yield initTestBed(`<TextArea 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(`<TextArea width="50%" label="test" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-// =============================================================================
-// THEME VARIABLE TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Variables", () => {
-    [
-        { value: "--default", prop: "" },
-        { value: "--warning", prop: 'validationStatus="warning"' },
-        { value: "--error", prop: 'validationStatus="error"' },
-        { value: "--success", prop: 'validationStatus="valid"' },
-    ].forEach((variant) => {
-        (0, fixtures_1.test)(`applies correct borderRadius ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<TextArea testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderRadius-TextArea${variant.value}`]: "12px" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-radius", "12px");
-        }));
-        (0, fixtures_1.test)(`applies correct borderColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<TextArea testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderColor-TextArea${variant.value}`]: "rgb(255, 0, 0)" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(255, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct borderWidth ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<TextArea testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderWidth-TextArea${variant.value}`]: "1px" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-width", "1px");
-        }));
-        (0, fixtures_1.test)(`applies correct borderStyle ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<TextArea testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderStyle-TextArea${variant.value}`]: "dashed" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-style", "dashed");
-        }));
-        (0, fixtures_1.test)(`applies correct fontSize ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<TextArea testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`fontSize-TextArea${variant.value}`]: "14px" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("font-size", "14px");
-        }));
-        (0, fixtures_1.test)(`applies correct backgroundColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<TextArea testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`backgroundColor-TextArea${variant.value}`]: "rgb(240, 240, 240)" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("background-color", "rgb(240, 240, 240)");
-        }));
-        (0, fixtures_1.test)(`applies correct boxShadow ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<TextArea testId="test" ${variant.prop} />`, {
-                testThemeVars: {
-                    [`boxShadow-TextArea${variant.value}`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
-                },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
-        }));
-        (0, fixtures_1.test)(`applies correct textColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<TextArea testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`textColor-TextArea${variant.value}`]: "rgb(0, 0, 0)" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("color", "rgb(0, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct borderColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<TextArea testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderColor-TextArea${variant.value}--hover`]: "rgb(0, 0, 0)" },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(0, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct backgroundColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-            yield initTestBed(`<TextArea testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`backgroundColor-TextArea${variant.value}--hover`]: "rgb(0, 0, 0)" },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("background-color", "rgb(0, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct boxShadow on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<TextArea testId="test" ${variant.prop} />`, {
-                testThemeVars: {
-                    [`boxShadow-TextArea${variant.value}--hover`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
-                },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
-        }));
-        (0, fixtures_1.test)(`applies correct textColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<TextArea testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`textColor-TextArea${variant.value}--hover`]: "rgb(0, 0, 0)" },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("color", "rgb(0, 0, 0)");
-        }));
-    });
-});