xmlui 0.10.13 → 0.10.15

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

@@ -0,0 +1,714 @@
+"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");
+        (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();
+    }));
+});
+// =============================================================================
+// 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");
+    }));
+});