xmlui 0.11.3 → 0.11.6

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

@@ -1,1719 +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 abstractions_1 = require("../abstractions");
-const fixtures_1 = require("../../testing/fixtures");
-const component_test_helpers_1 = require("../../testing/component-test-helpers");
-// Test data constants
-const errorDisplayInterceptor = {
-    initialize: `
-    $state.items = {
-      [10]: { name: "Smith", id: 10 }
-    };
-    $state.currentId = 10;
-  `,
-    operations: {
-        "no-validation-error": {
-            url: "/no-validation-error",
-            method: "post",
-            handler: `return true;`,
-        },
-        "general-validation-error": {
-            url: "/general-validation-error",
-            method: "post",
-            handler: `
-        throw Errors.HttpError(404,
-          {
-            message: "General error message from the backend",
-            issues: [
-              { message: "Error for the whole form", severity: "error" },
-              { message: "Warning for the whole form", severity: "warning" },
-            ]
-          }
-        );
-      `,
-        },
-        "field-validation-error": {
-            url: "/field-validation-error",
-            method: "post",
-            handler: `
-        throw Errors.HttpError(404,
-          {
-            message: "Field error message from the backend",
-            issues: [
-              { field: "test", message: "Display warning", severity: "warning" },
-            ]
-          }
-        );
-      `,
-        },
-    },
-};
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("component renders with default props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-        yield initTestBed(`<Form testId="form"/>`);
-        const driver = yield createFormDriver("form");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component renders with form items", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem label="Name" bindTo="name" />
-        <FormItem label="Email" bindTo="email" />
-      </Form>
-    `);
-        yield (0, fixtures_1.expect)(page.getByText("Name")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Email")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component renders save and cancel buttons by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Form/>`);
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component renders custom button labels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Form cancelLabel="Go Back" saveLabel="Submit"/>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Go Back" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Submit" })).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component swaps cancel and save button positions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Form swapCancelAndSave="true"/>
-    `);
-        const buttons = page.getByRole("button");
-        yield (0, fixtures_1.expect)(buttons.first()).toHaveText("Save");
-        yield (0, fixtures_1.expect)(buttons.last()).toHaveText("Cancel");
-    }));
-    // =============================================================================
-    // HIDE BUTTON ROW TESTS
-    // =============================================================================
-    fixtures_1.test.describe("hideButtonRow property", () => {
-        (0, fixtures_1.test)("hides button row when set to true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Form hideButtonRow="true"/>`);
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
-        }));
-        (0, fixtures_1.test)("shows button row when set to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Form hideButtonRow="false"/>`);
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("shows button row by default when property not set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Form/>`);
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("hides custom button row template when set to true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Form hideButtonRow="true">
-          <property name="buttonRowTemplate">
-            <Button label="Custom Save" type="submit" testId="customSave" />
-            <Button label="Custom Cancel" type="button" testId="customCancel" />
-          </property>
-        </Form>
-      `);
-            yield (0, fixtures_1.expect)(page.getByTestId("customSave")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByTestId("customCancel")).not.toBeVisible();
-        }));
-        (0, fixtures_1.test)("overrides hideButtonRowUntilDirty when both are set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            yield initTestBed(`
-        <Form hideButtonRow="true" hideButtonRowUntilDirty="true">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-        </Form>
-      `);
-            // Button row should be hidden even before making changes
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).not.toBeVisible();
-            // Make the form dirty
-            const driver = yield createFormItemDriver("nameField");
-            const input = yield createTextBoxDriver(driver.input);
-            yield input.field.fill("John");
-            // Button row should still be hidden even after making changes
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).not.toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles null value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Form hideButtonRow="{null}"/>`);
-            // Should show button row (default behavior)
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles undefined value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Form hideButtonRow="{undefined}"/>`);
-            // Should show button row (default behavior)
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles string 'true' value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Form hideButtonRow="true"/>`);
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles string 'false' value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Form hideButtonRow="false"/>`);
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("form submission still works with hidden button row via external submit", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Fragment>
-          <Form id="testForm" hideButtonRow="true" onSubmit="arg => testState = arg">
-            <FormItem label="Name" bindTo="name" testId="nameField" />
-            <Button type="submit" label="External Submit" testId="externalSubmit" />
-          </Form>
-        </Fragment>
-      `);
-            const driver = yield createFormItemDriver("nameField");
-            const input = yield createTextBoxDriver(driver.input);
-            yield input.field.fill("John Doe");
-            yield page.getByTestId("externalSubmit").click();
-            const submittedData = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(submittedData).toEqual({ name: "John Doe" });
-        }));
-    });
-    // =============================================================================
-    // HIDE BUTTON ROW UNTIL DIRTY TESTS
-    // =============================================================================
-    fixtures_1.test.describe("hideButtonRowUntilDirty property", () => {
-        (0, fixtures_1.test)("hides button row initially when form is not dirty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Form hideButtonRowUntilDirty="true">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-        </Form>
-      `);
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
-        }));
-        (0, fixtures_1.test)("shows button row when form becomes dirty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            yield initTestBed(`
-        <Form hideButtonRowUntilDirty="true">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-        </Form>
-      `);
-            // Initially hidden
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
-            // Make form dirty
-            const driver = yield createFormItemDriver("nameField");
-            const input = yield createTextBoxDriver(driver.input);
-            yield input.field.fill("John");
-            // Now visible
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("keeps button row visible after form becomes dirty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            yield initTestBed(`
-        <Form hideButtonRowUntilDirty="true">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-        </Form>
-      `);
-            const driver = yield createFormItemDriver("nameField");
-            const input = yield createTextBoxDriver(driver.input);
-            // Make form dirty
-            yield input.field.fill("John");
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-            // Clear the input (form is still dirty)
-            yield input.field.clear();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("shows button row by default when property set to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-            yield initTestBed(`
-        <Form hideButtonRowUntilDirty="false">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-        </Form>
-      `);
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("shows button row by default when property not set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Form>
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-        </Form>
-      `);
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("works with multiple form items", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            yield initTestBed(`
-        <Form hideButtonRowUntilDirty="true">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-          <FormItem label="Email" bindTo="email" testId="emailField" />
-        </Form>
-      `);
-            // Initially hidden
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
-            // Modify second field
-            const emailDriver = yield createFormItemDriver("emailField");
-            const emailInput = yield createTextBoxDriver(emailDriver.input);
-            yield emailInput.field.fill("test@example.com");
-            // Now visible
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("hides custom button row template until dirty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            yield initTestBed(`
-        <Form hideButtonRowUntilDirty="true">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-          <property name="buttonRowTemplate">
-            <Button label="Custom Save" type="submit" testId="customSave" />
-          </property>
-        </Form>
-      `);
-            // Initially hidden
-            yield (0, fixtures_1.expect)(page.getByTestId("customSave")).not.toBeVisible();
-            // Make form dirty
-            const driver = yield createFormItemDriver("nameField");
-            const input = yield createTextBoxDriver(driver.input);
-            yield input.field.fill("John");
-            // Now visible
-            yield (0, fixtures_1.expect)(page.getByTestId("customSave")).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles null value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Form hideButtonRowUntilDirty="{null}">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-        </Form>
-      `);
-            // Should show button row (default behavior)
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles undefined value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Form hideButtonRowUntilDirty="{undefined}">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-        </Form>
-      `);
-            // Should show button row (default behavior)
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("works with form initialized with data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            yield initTestBed(`
-        <Form hideButtonRowUntilDirty="true" data="{{ name: 'Initial' }}">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-        </Form>
-      `);
-            // Initially hidden (form has data but is not dirty)
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
-            // Make form dirty
-            const driver = yield createFormItemDriver("nameField");
-            const input = yield createTextBoxDriver(driver.input);
-            yield input.field.fill("Modified");
-            // Now visible
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("button row appears when checkbox is checked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Form hideButtonRowUntilDirty="true">
-          <FormItem label="Accept Terms" bindTo="terms" type="checkbox" />
-        </Form>
-      `);
-            // Initially hidden
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
-            // Check the checkbox
-            const checkbox = page.getByRole("checkbox");
-            yield checkbox.check();
-            // Now visible
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("button row appears when slider value changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Form hideButtonRowUntilDirty="true">
-          <FormItem label="Volume" bindTo="volume" type="slider" testId="volumeField" />
-        </Form>
-      `);
-            // Initially hidden
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
-            // Move the slider using keyboard
-            const slider = page.getByRole("slider");
-            yield slider.press("ArrowRight");
-            // Now visible
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
-        }));
-    });
-    // =============================================================================
-    // ENABLE SUBMIT PROPERTY TESTS
-    // =============================================================================
-    fixtures_1.test.describe("enableSubmit property", () => {
-        (0, fixtures_1.test)("disables submit button when set to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Form enableSubmit="false"/>`);
-            const saveButton = page.getByRole("button", { name: "Save" });
-            yield (0, fixtures_1.expect)(saveButton).toBeVisible();
-            yield (0, fixtures_1.expect)(saveButton).toBeDisabled();
-        }));
-        (0, fixtures_1.test)("enables submit button when set to true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Form enableSubmit="true"/>`);
-            const saveButton = page.getByRole("button", { name: "Save" });
-            yield (0, fixtures_1.expect)(saveButton).toBeVisible();
-            yield (0, fixtures_1.expect)(saveButton).toBeEnabled();
-        }));
-        (0, fixtures_1.test)("submit button is enabled by default when property not set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-            yield initTestBed(`<Form/>`);
-            const saveButton = page.getByRole("button", { name: "Save" });
-            yield (0, fixtures_1.expect)(saveButton).toBeEnabled();
-        }));
-        (0, fixtures_1.test)("prevents form submission when set to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form enableSubmit="false" onSubmit="arg => testState = arg">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-        </Form>
-      `);
-            const saveButton = page.getByRole("button", { name: "Save" });
-            yield (0, fixtures_1.expect)(saveButton).toBeDisabled();
-            // Verify form does not submit (button is disabled, so click won't work)
-            yield saveButton.click({ force: true }); // Force click on disabled button
-            // testState should remain null since submit was prevented
-            yield fixtures_1.expect.poll(testStateDriver.testState).toBeNull();
-        }));
-        (0, fixtures_1.test)("allows form submission when set to true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form enableSubmit="true" onSubmit="arg => testState = arg">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-        </Form>
-      `);
-            const driver = yield createFormItemDriver("nameField");
-            const input = yield createTextBoxDriver(driver.input);
-            yield input.field.fill("John Doe");
-            const saveButton = page.getByRole("button", { name: "Save" });
-            yield (0, fixtures_1.expect)(saveButton).toBeEnabled();
-            yield saveButton.click();
-            const submittedData = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(submittedData).toEqual({ name: "John Doe" });
-        }));
-        (0, fixtures_1.test)("handles null value gracefully (defaults to enabled)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Form enableSubmit="{null}"/>`);
-            const saveButton = page.getByRole("button", { name: "Save" });
-            yield (0, fixtures_1.expect)(saveButton).toBeEnabled();
-        }));
-        (0, fixtures_1.test)("handles string 'true' value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Form enableSubmit="true"/>`);
-            const saveButton = page.getByRole("button", { name: "Save" });
-            yield (0, fixtures_1.expect)(saveButton).toBeEnabled();
-        }));
-        (0, fixtures_1.test)("handles string 'false' value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Form enableSubmit="false"/>`);
-            const saveButton = page.getByRole("button", { name: "Save" });
-            yield (0, fixtures_1.expect)(saveButton).toBeDisabled();
-        }));
-        (0, fixtures_1.test)("does not affect cancel button", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Form enableSubmit="false"/>`);
-            const cancelButton = page.getByRole("button", { name: "Cancel" });
-            yield (0, fixtures_1.expect)(cancelButton).toBeEnabled();
-        }));
-        (0, fixtures_1.test)("works with custom submit button label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Form enableSubmit="false" saveLabel="Submit Now"/>`);
-            const submitButton = page.getByRole("button", { name: "Submit Now" });
-            yield (0, fixtures_1.expect)(submitButton).toBeDisabled();
-        }));
-        (0, fixtures_1.test)("works together with form disabled state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Form enabled="false" enableSubmit="true"/>`);
-            const saveButton = page.getByRole("button", { name: "Save" });
-            // Form disabled takes precedence
-            yield (0, fixtures_1.expect)(saveButton).toBeDisabled();
-        }));
-    });
-    // =============================================================================
-    // DATA PROPERTY TESTS
-    // =============================================================================
-    fixtures_1.test.describe("data property", () => {
-        (0, fixtures_1.test)("sets initial form data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-            yield initTestBed(`
-        <Form data="{{ name: 'John', age: 30 }}">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-          <FormItem label="Age" bindTo="age" type="integer" testId="ageField" />
-        </Form>
-      `);
-            const nameDriver = yield createFormItemDriver("nameField");
-            const nameInput = yield createTextBoxDriver(nameDriver.input);
-            const ageDriver = yield createFormItemDriver("ageField");
-            const ageInput = yield createTextBoxDriver(ageDriver.input);
-            yield (0, fixtures_1.expect)(nameInput.field).toHaveValue("John");
-            yield (0, fixtures_1.expect)(ageInput.field).toHaveValue("30");
-        }));
-        (0, fixtures_1.test)("handles null data gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-            yield initTestBed(`<Form data="{null}" testId="form"/>`);
-            const driver = yield createFormDriver("form");
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles undefined data gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-            yield initTestBed(`<Form data="{undefined}" testId="form"/>`);
-            const driver = yield createFormDriver("form");
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles empty object data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-            yield initTestBed(`<Form data="{{}}" testId="form"/>`);
-            const driver = yield createFormDriver("form");
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        }));
-    });
-    // =============================================================================
-    // ITEM LABEL POSITION TESTS
-    // =============================================================================
-    fixtures_1.test.describe("itemLabelPosition property", () => {
-        abstractions_1.labelPositionValues.forEach((position) => {
-            (0, fixtures_1.test)(`sets item label position to ${position}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, }) {
-                yield initTestBed(`
-          <Form itemLabelPosition="${position}">
-            <FormItem label="Test Label" bindTo="test" testId="testField" />
-          </Form>
-        `);
-                const driver = yield createFormItemDriver("testField");
-                yield (0, fixtures_1.expect)(driver.label).toBeVisible();
-            }));
-        });
-        (0, fixtures_1.test)("handles invalid itemLabelPosition gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, }) {
-            yield initTestBed(`<Form itemLabelPosition="invalid" testId="form"/>`);
-            const driver = yield createFormDriver("form");
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        }));
-    });
-    // =============================================================================
-    // ITEM LABEL WIDTH TESTS
-    // =============================================================================
-    fixtures_1.test.describe("itemLabelWidth property", () => {
-        (0, fixtures_1.test)("sets custom label width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-            yield initTestBed(`
-        <Form itemLabelWidth="200px">
-          <FormItem label="Test Label" bindTo="test" testId="testField" />
-        </Form>
-      `);
-            const driver = yield createFormItemDriver("testField");
-            yield (0, fixtures_1.expect)(driver.label).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles numeric label width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-            yield initTestBed(`
-        <Form itemLabelWidth="150">
-          <FormItem label="Test Label" bindTo="test" testId="testField" />
-        </Form>
-      `);
-            const driver = yield createFormItemDriver("testField");
-            yield (0, fixtures_1.expect)(driver.label).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles invalid label width gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-            yield initTestBed(`<Form itemLabelWidth="invalid" testId="form"/>`);
-            const driver = yield createFormDriver("form");
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-            const spaceBase = 0.25; //rem
-            const labelSize = 10;
-            const widthInPx = labelSize * spaceBase * 16; //px
-            yield initTestBed(`
-        <Theme space-base="${spaceBase}rem">
-          <Form itemLabelWidth="$space-${labelSize}">
-            <FormItem label="Test Label" bindTo="test" testId="testField" />
-          </Form>
-        </Theme>
-      `);
-            const driver = yield createFormItemDriver("testField");
-            const labelWidth = yield (0, component_test_helpers_1.getElementStyle)(driver.label, "width");
-            (0, fixtures_1.expect)(labelWidth).toBe(`${widthInPx}px`);
-        }));
-    });
-    // =============================================================================
-    // ITEM LABEL BREAK TESTS
-    // =============================================================================
-    fixtures_1.test.describe("itemLabelBreak property", () => {
-        (0, fixtures_1.test)("enables label line breaking", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-            yield initTestBed(`
-        <Form itemLabelBreak="true">
-          <FormItem label="Very Long Label That Should Break" bindTo="test" testId="testField" />
-        </Form>
-      `);
-            const driver = yield createFormItemDriver("testField");
-            yield (0, fixtures_1.expect)(driver.label).toBeVisible();
-        }));
-        (0, fixtures_1.test)("disables label line breaking", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-            yield initTestBed(`
-        <Form itemLabelBreak="false">
-          <FormItem label="Very Long Label That Should Not Break" bindTo="test" testId="testField" />
-        </Form>
-      `);
-            const driver = yield createFormItemDriver("testField");
-            yield (0, fixtures_1.expect)(driver.label).toBeVisible();
-        }));
-    });
-    // =============================================================================
-    // ENABLED PROPERTY TESTS
-    // =============================================================================
-    fixtures_1.test.describe("enabled property", () => {
-        (0, fixtures_1.test)("disables save button when enabled is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Form enabled="false">
-          <FormItem label="Test" bindTo="test" />
-        </Form>
-      `);
-            const saveButton = page.getByRole("button", { name: "Save" });
-            yield (0, fixtures_1.expect)(saveButton).toBeDisabled();
-        }));
-        (0, fixtures_1.test)("enables form when enabled is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Form enabled="true">
-          <FormItem label="Test" bindTo="test" />
-        </Form>
-      `);
-            const saveButton = page.getByRole("button", { name: "Save" });
-            const cancelButton = page.getByRole("button", { name: "Cancel" });
-            yield (0, fixtures_1.expect)(saveButton).toBeEnabled();
-            yield (0, fixtures_1.expect)(cancelButton).toBeEnabled();
-        }));
-    });
-    // =============================================================================
-    // BUTTON ROW TEMPLATE TESTS
-    // =============================================================================
-    fixtures_1.test.describe("buttonRowTemplate property", () => {
-        (0, fixtures_1.test)("supports custom button row template", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Form>
-          <FormItem label="Test" bindTo="test" />
-          <property name="buttonRowTemplate">
-            <Button label="Custom Save" type="submit" />
-            <Button label="Custom Cancel" type="button" />
-          </property>
-        </Form>
-      `);
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Custom Save" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Custom Cancel" })).toBeVisible();
-        }));
-    });
-    // =============================================================================
-    // EVENT TESTS
-    // =============================================================================
-    fixtures_1.test.describe("Events", () => {
-        (0, fixtures_1.test)("onSubmit event fires with form data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form data="{{ name: 'John', email: 'john@example.com' }}" onSubmit="data => testState = data">
-          <FormItem label="Name" bindTo="name" />
-          <FormItem label="Email" bindTo="email" />
-        </Form>
-      `);
-            yield page.getByRole("button", { name: "Save" }).click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
-                name: "John",
-                email: "john@example.com",
-            });
-        }));
-        (0, fixtures_1.test)("onCancel event fires when cancel button clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form onCancel="testState = 'cancelled'">
-          <FormItem label="Test" bindTo="test" />
-        </Form>
-      `);
-            yield page.getByRole("button", { name: "Cancel" }).click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("cancelled");
-        }));
-        (0, fixtures_1.test)("onSuccess event fires on successful submission", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form
-          testId="form"
-          submitUrl="/test-success"
-          onSuccess="testState = 'success'; console.log('Submitted successfully')"
-          data="{{ name: 'Test' }}">
-          <FormItem label="Name" bindTo="name" />
-        </Form>
-      `, {
-                apiInterceptor: {
-                    operations: {
-                        testSuccess: {
-                            url: "/test-success",
-                            method: "put",
-                            handler: `return { success: true };`,
-                        },
-                    },
-                },
-            });
-            const driver = yield createFormDriver("form");
-            yield driver.submitForm();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("success");
-        }));
-        (0, fixtures_1.test)("onReset event fires when form is reset", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form
-          id="testForm"
-          onReset="testState = 'reset'"
-          data="{{ name: 'Test' }}">
-          <FormItem label="Name" bindTo="name" />
-          <Button onClick="testForm.reset()" label="Reset Form" />
-        </Form>
-      `);
-            yield page.getByRole("button", { name: "Reset Form" }).click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("reset");
-        }));
-    });
-    // =============================================================================
-    // API TESTS
-    // =============================================================================
-    fixtures_1.test.describe("APIs", () => {
-        (0, fixtures_1.test)("update method updates form data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            yield initTestBed(`
-        <Form
-          id="testForm"
-          data="{{ name: 'Original', age: 25 }}">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-          <FormItem label="Age" bindTo="age" type="integer" testId="ageField" />
-          <Button onClick="testForm.update({ name: 'Updated', age: 30 })" label="Update" />
-        </Form>
-      `);
-            const nameDriver = yield createFormItemDriver("nameField");
-            const nameInput = yield createTextBoxDriver(nameDriver.input);
-            const ageDriver = yield createFormItemDriver("ageField");
-            const ageInput = yield createTextBoxDriver(ageDriver.input);
-            yield (0, fixtures_1.expect)(nameInput.field).toHaveValue("Original");
-            yield (0, fixtures_1.expect)(ageInput.field).toHaveValue("25");
-            yield page.getByRole("button", { name: "Update" }).click();
-            yield (0, fixtures_1.expect)(nameInput.field).toHaveValue("Updated");
-            yield (0, fixtures_1.expect)(ageInput.field).toHaveValue("30");
-        }));
-        (0, fixtures_1.test)("reset method resets form to initial state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            yield initTestBed(`
-        <Form
-          id="testForm"
-          data="{{ name: 'Initial' }}">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-          <Button onClick="testForm.reset()" label="Reset" />
-        </Form>
-      `);
-            const nameDriver = yield createFormItemDriver("nameField");
-            const nameInput = yield createTextBoxDriver(nameDriver.input);
-            // Change the input value
-            yield nameInput.field.fill("Changed");
-            yield (0, fixtures_1.expect)(nameInput.field).toHaveValue("Changed");
-            // Reset the form
-            yield page.getByRole("button", { name: "Reset" }).click();
-            yield (0, fixtures_1.expect)(nameInput.field).toHaveValue("Initial");
-        }));
-        (0, fixtures_1.test)("validate method returns validation results without submitting", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form id="testForm">
-          <FormItem label="Name" bindTo="name" required="true" testId="nameField" />
-          <FormItem label="Email" bindTo="email" testId="emailField" />
-          <Button onClick="testState = testForm.validate()" label="Validate" testId="validateBtn" />
-        </Form>
-      `);
-            // Click validate button without filling required field
-            yield page.getByTestId("validateBtn").click();
-            // Wait for validation to complete
-            yield page.waitForTimeout(100);
-            const result = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(result).toBeTruthy();
-            (0, fixtures_1.expect)(result.isValid).toBe(false);
-            (0, fixtures_1.expect)(result.errors).toBeDefined();
-            (0, fixtures_1.expect)(result.errors.length).toBeGreaterThan(0);
-        }));
-        (0, fixtures_1.test)("validate method returns isValid true when all validations pass", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form id="testForm">
-          <FormItem label="Name" bindTo="name" required="true" testId="nameField" />
-          <Button onClick="testState = testForm.validate()" label="Validate" testId="validateBtn" />
-        </Form>
-      `);
-            // Fill the required field
-            const nameDriver = yield createFormItemDriver("nameField");
-            const nameInput = yield createTextBoxDriver(nameDriver.input);
-            yield nameInput.field.fill("John Doe");
-            // Click validate button
-            yield page.getByTestId("validateBtn").click();
-            // Wait for validation to complete
-            yield page.waitForTimeout(100);
-            const result = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(result).toBeTruthy();
-            (0, fixtures_1.expect)(result.isValid).toBe(true);
-            (0, fixtures_1.expect)(result.errors.length).toBe(0);
-        }));
-        (0, fixtures_1.test)("validate method returns cleaned form data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form id="testForm">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-          <FormItem label="Age" bindTo="age" type="integer" testId="ageField" />
-          <Button onClick="testState = testForm.validate()" label="Validate" testId="validateBtn" />
-        </Form>
-      `);
-            // Fill form fields
-            const nameDriver = yield createFormItemDriver("nameField");
-            const nameInput = yield createTextBoxDriver(nameDriver.input);
-            yield nameInput.field.fill("John Doe");
-            const ageDriver = yield createFormItemDriver("ageField");
-            const ageInput = yield createTextBoxDriver(ageDriver.input);
-            yield ageInput.field.fill("30");
-            // Click validate button
-            yield page.getByTestId("validateBtn").click();
-            // Wait for validation to complete
-            yield page.waitForTimeout(100);
-            const result = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(result).toBeTruthy();
-            (0, fixtures_1.expect)(result.data).toEqual({ name: "John Doe", age: "30" });
-        }));
-        (0, fixtures_1.test)("validate method displays validation errors on form", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, }) {
-            yield initTestBed(`
-        <Form id="testForm">
-          <FormItem label="Name" bindTo="name" required="true" testId="nameField" />
-          <Button onClick="testForm.validate()" label="Validate" testId="validateBtn" />
-        </Form>
-      `);
-            // Click validate without filling required field
-            yield page.getByTestId("validateBtn").click();
-            // Validation error should be displayed
-            const nameField = page.getByTestId("nameField");
-            yield (0, fixtures_1.expect)(nameField).toContainText("This field is required");
-        }));
-        (0, fixtures_1.test)("validate method does not trigger form submission", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form id="testForm" onSubmit="testState = 'submitted'">
-          <FormItem label="Name" bindTo="name" testId="nameField" />
-          <Button onClick="testForm.validate()" label="Validate" testId="validateBtn" />
-        </Form>
-      `);
-            // Fill form
-            const nameDriver = yield createFormItemDriver("nameField");
-            const nameInput = yield createTextBoxDriver(nameDriver.input);
-            yield nameInput.field.fill("John");
-            // Click validate button
-            yield page.getByTestId("validateBtn").click();
-            // Wait a bit
-            yield page.waitForTimeout(200);
-            // testState should remain null (not 'submitted')
-            yield fixtures_1.expect.poll(testStateDriver.testState).toBeNull();
-        }));
-        (0, fixtures_1.test)("validate method returns complete validation results object", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form id="testForm">
-          <FormItem label="Name" bindTo="name" required="true" testId="nameField" />
-          <FormItem label="Email" bindTo="email" testId="emailField" />
-          <Button onClick="testState = testForm.validate()" label="Validate" testId="validateBtn" />
-        </Form>
-      `);
-            // Fill only email (name is required)
-            const emailDriver = yield createFormItemDriver("emailField");
-            const emailInput = yield createTextBoxDriver(emailDriver.input);
-            yield emailInput.field.fill("test@example.com");
-            // Click validate button
-            yield page.getByTestId("validateBtn").click();
-            // Wait for validation to complete
-            yield page.waitForTimeout(100);
-            const result = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(result).toBeTruthy();
-            (0, fixtures_1.expect)(result.isValid).toBeDefined();
-            (0, fixtures_1.expect)(result.data).toBeDefined();
-            (0, fixtures_1.expect)(result.errors).toBeDefined();
-            (0, fixtures_1.expect)(result.warnings).toBeDefined();
-            (0, fixtures_1.expect)(result.validationResults).toBeDefined();
-        }));
-    });
-    // =============================================================================
-    // CONTEXT VARIABLE TESTS
-    // =============================================================================
-    fixtures_1.test.describe("Context Variables", () => {
-        (0, fixtures_1.test)("$data context variable provides access to form data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, }) {
-            // This test needs specific FormItem behavior that may vary
-            yield initTestBed(`
-        <Form data="{{ isEnabled: true, name: 'Joe' }}">
-          <FormItem testId="isEnabled" label="Enable name" bindTo="isEnabled" type="checkbox" />
-          <FormItem testId="name" enabled="{$data.isEnabled}" label="Name" bindTo="name" />
-        </Form>
-      `);
-            const enableSwitch = (yield createFormItemDriver("isEnabled")).checkbox;
-            const nameInput = (yield createFormItemDriver("name")).textBox;
-            yield (0, fixtures_1.expect)(enableSwitch).toBeVisible();
-            yield (0, fixtures_1.expect)(nameInput).toBeEnabled();
-            yield enableSwitch.click();
-            yield (0, fixtures_1.expect)(nameInput).toBeDisabled();
-        }));
-        (0, fixtures_1.test)("$data.update method updates form data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, }) {
-            yield initTestBed(`
-        <Form data="{{ counter: 0 }}">
-          <FormItem testId="counter" label="Counter" bindTo="counter" type="integer" />
-          <Button onClick="$data.update({ counter: $data.counter + 1 })" label="Increment" />
-        </Form>
-      `);
-            const counterDriver = yield createFormItemDriver("counter");
-            const counterInput = counterDriver.textBox;
-            yield (0, fixtures_1.expect)(counterInput).toHaveValue("0");
-            yield page.getByRole("button", { name: "Increment" }).click({ force: true });
-            yield (0, fixtures_1.expect)(counterInput).toHaveValue("1");
-        }));
-    });
-    // =============================================================================
-    // SUBMIT URL AND METHOD TESTS
-    // =============================================================================
-    fixtures_1.test.describe("Submit URL and Method", () => {
-        (0, fixtures_1.test)("submits to custom URL with POST method (new date)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, }) {
-            yield initTestBed(`<App><Form testId="form" submitUrl="/custom-endpoint" data="{null}">
-            <FormItem label="Name" bindTo="name" />
-        </Form></App>`, {
-                apiInterceptor: {
-                    operations: {
-                        customEndpoint: {
-                            url: "/custom-endpoint",
-                            method: "post",
-                            handler: `return { success: true };`,
-                        },
-                    },
-                },
-            });
-            const driver = yield createFormDriver("form");
-            yield driver.submitForm();
-            const response = yield driver.getSubmitResponse("/custom-endpoint");
-            (0, fixtures_1.expect)(response.ok()).toEqual(true);
-        }));
-        (0, fixtures_1.test)("uses PUT method for existing data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-            yield initTestBed(`<Form submitUrl="/entities/1" data="{{ id: 1, name: 'Existing' }}">
-          <FormItem label="Name" bindTo="name" />
-         </Form>`, {
-                apiInterceptor: {
-                    operations: {
-                        updateEntity: {
-                            url: "/entities/1",
-                            method: "put",
-                            handler: `return { success: true };`,
-                        },
-                    },
-                },
-            });
-            const driver = yield createFormDriver();
-            yield driver.submitForm();
-            const response = yield driver.getSubmitResponse("/entities/1");
-            (0, fixtures_1.expect)(response.ok()).toEqual(true);
-        }));
-        (0, fixtures_1.test)("uses custom submit method", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-            yield initTestBed(`<Form submitUrl="/custom" submitMethod="put" data="{{ name: 'Test' }}">
-          <FormItem label="Name" bindTo="name" />
-         </Form>`, {
-                apiInterceptor: {
-                    operations: {
-                        putCustom: {
-                            url: "/custom",
-                            method: "put",
-                            handler: `return { success: true };`,
-                        },
-                    },
-                },
-            });
-            const driver = yield createFormDriver();
-            yield driver.submitForm();
-            const response = yield driver.getSubmitResponse("/custom");
-            (0, fixtures_1.expect)(response.ok()).toEqual(true);
-        }));
-    });
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("form has correct semantic role", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Form/>`);
-        yield (0, fixtures_1.expect)(page.locator("form")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("form items are properly associated with labels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem label="Full Name" bindTo="name" testId="nameField" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("nameField");
-        yield (0, fixtures_1.expect)(driver.label).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.label).toHaveText("Full Name");
-    }));
-    (0, fixtures_1.test)("form submission is keyboard accessible", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Form onSubmit="testState = 'submitted via keyboard'">
-        <FormItem label="Name" bindTo="name" />
-      </Form>
-    `);
-        const submitButton = page.getByRole("button", { name: "Save" });
-        yield submitButton.focus();
-        yield page.keyboard.press("Enter");
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("submitted via keyboard");
-    }));
-    (0, fixtures_1.test)("form cancel is keyboard accessible", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Form onCancel="testState = 'cancelled via keyboard'">
-        <FormItem label="Name" bindTo="name" />
-      </Form>
-    `);
-        const cancelButton = page.getByRole("button", { name: "Cancel" });
-        yield cancelButton.focus();
-        yield page.keyboard.press("Enter");
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("cancelled via keyboard");
-    }));
-    (0, fixtures_1.test)("disabled form buttons are properly disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Form enabled="false">
-        <FormItem label="Name" bindTo="name" />
-      </Form>
-    `);
-        const saveButton = page.getByRole("button", { name: "Save" });
-        yield (0, fixtures_1.expect)(saveButton).toBeDisabled();
-    }));
-});
-// =============================================================================
-// THEME VARIABLE TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Variables", () => {
-    (0, fixtures_1.test)("applies custom gap theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-        yield initTestBed(`<Form testId="form"/>`, {
-            testThemeVars: {
-                "gap-Form": "2rem",
-            },
-        });
-        const driver = yield createFormDriver("form");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("gap", "32px");
-    }));
-    (0, fixtures_1.test)("applies custom button row gap theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, }) {
-        yield initTestBed(`<Form testId="form"/>`, {
-            testThemeVars: {
-                "gap-buttonRow-Form": "1rem",
-            },
-        });
-        const driver = yield createFormDriver("form");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("applies validation display theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        // This test requires validation system to trigger error display
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="email" label="Email" bindTo="email" type="email" required="true" />
-      </Form>
-    `, {
-            testThemeVars: {
-                "backgroundColor-ValidationDisplay-error": "rgb(255, 0, 0)",
-                "textColor-ValidationDisplay-error": "rgb(255, 255, 255)",
-            },
-        });
-        // Trigger validation by submitting with empty required field
-        yield page.getByRole("button", { name: "Save" }).click();
-        const emailComp = page.getByTestId("email");
-        yield (0, fixtures_1.expect)(emailComp).toContainText("This field is required");
-    }));
-});
-// =============================================================================
-// EDGE CASES TESTS
-// =============================================================================
-fixtures_1.test.describe("Edge Cases", () => {
-    (0, fixtures_1.test)("handles form without any form items", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-        yield initTestBed(`<Form testId="form"/>`);
-        const driver = yield createFormDriver("form");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles malformed data input gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-        yield initTestBed(`<Form data="{invalidJson}" testId="form"/>`);
-        const driver = yield createFormDriver("form");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("Form does not render if data receives malformed input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, }) {
-        yield initTestBed(`<Form data="{}" />`);
-        yield (0, fixtures_1.expect)((yield createFormDriver()).component).not.toBeAttached();
-    }));
-    (0, fixtures_1.test)("handles deeply nested data structure", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form data="{{ user: { profile: { name: 'John' } } }}">
-        <FormItem label="Name" bindTo="user.profile.name" testId="nameField" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("nameField");
-        const input = yield createTextBoxDriver(driver.input);
-        yield (0, fixtures_1.expect)(input.field).toHaveValue("John");
-    }));
-    (0, fixtures_1.test)("handles form with validation errors", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem label="Email" bindTo="email" type="email" required="true" />
-      </Form>
-    `);
-        // Try to submit form without filling required field
-        yield page.getByRole("button", { name: "Save" }).click();
-        // Validation should prevent submission and show error
-        const form = page.locator("form");
-        yield (0, fixtures_1.expect)(form).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles rapid form submissions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Form onSubmit="testState = (testState || 0) + 1">
-        <FormItem label="Name" bindTo="name" />
-      </Form>
-    `);
-        const submitButton = page.getByRole("button", { name: "Save" });
-        // Click submit button multiple times rapidly
-        yield submitButton.click();
-        yield submitButton.click();
-        yield submitButton.click();
-        // Should only submit once or handle gracefully
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBeGreaterThanOrEqual(1);
-    }));
-    (0, fixtures_1.test)("handles null and undefined in nested data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form data="{{ user: null, settings: undefined, name: 'Test' }}">
-        <FormItem label="Name" bindTo="name" testId="nameField" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("nameField");
-        const input = yield createTextBoxDriver(driver.input);
-        yield (0, fixtures_1.expect)(input.field).toHaveValue("Test");
-    }));
-    (0, fixtures_1.test)("handles form with empty string properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Form
-        cancelLabel=""
-        saveLabel=""
-        data="{{ name: '' }}">
-        <FormItem label="Name" bindTo="name" />
-      </Form>
-    `);
-        // Form should still be visible
-        const form = page.locator("form");
-        yield (0, fixtures_1.expect)(form).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles special characters in form data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form data="{{ name: 'José María', description: 'Test & symbols' }}">
-        <FormItem label="Name" bindTo="name" testId="nameField" />
-        <FormItem label="Description" bindTo="description" testId="descField" />
-      </Form>
-    `);
-        const nameDriver = yield createFormItemDriver("nameField");
-        const nameInput = yield createTextBoxDriver(nameDriver.input);
-        const descDriver = yield createFormItemDriver("descField");
-        const descInput = yield createTextBoxDriver(descDriver.input);
-        yield (0, fixtures_1.expect)(nameInput.field).toHaveValue("José María");
-        yield (0, fixtures_1.expect)(descInput.field).toHaveValue("Test & symbols");
-    }));
-    (0, fixtures_1.test)("user cannot submit with clientside errors present", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Form onSubmit="testState = true">
-        <FormItem bindTo="name" required="true" />
-      </Form>
-    `);
-        const driver = yield createFormDriver();
-        // The onSubmit event should have been triggered if not for the client error of an empty required field
-        yield driver.submitForm("click");
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null);
-    }));
-    (0, fixtures_1.test)("can submit with invisible required field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, createFormItemDriver, createTextBoxDriver, page, }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Form onSubmit="testState = true">
-        <FormItem testId="select" bindTo="authenticationType"
-          type="select" label="Authentication Type:" initialValue="{0}">
-          <Option value="{0}" label="Password" />
-          <Option value="{1}" label="Public Key" />
-        </FormItem>
-        <FormItem label="name1" testId="name1" bindTo="name1"
-          required="true" when="{$data.authenticationType == 0}"/>
-        <FormItem label="name2" testId="name2" bindTo="name2"
-          required="true" when="{$data.authenticationType == 1}"/>
-      </Form>
-    `);
-        const formDriver = yield createFormDriver();
-        const selectDriver = yield createFormItemDriver("select");
-        const textfieldElement = (yield createFormItemDriver("name2")).input;
-        const textfieldDriver = yield createTextBoxDriver(textfieldElement);
-        yield selectDriver.component.click();
-        yield page.getByText("Public Key").click();
-        yield textfieldDriver.field.fill("John");
-        yield formDriver.submitForm();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
-    }));
-    (0, fixtures_1.test)("conditional fields keep the state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createOptionDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="select" bindTo="authenticationType"
-          type="radioGroup" label="Authentication Type:" initialValue="{0}">
-          <Option value="{0}" label="Password" testId="password"/>
-          <Option value="{1}" label="Public Key" testId="publicKey" />
-        </FormItem>
-        <FormItem label="name1" testId="name1" bindTo="name1"
-          required="true" when="{$data.authenticationType == 0}"/>
-        <FormItem label="name2" testId="name2" bindTo="name2"
-          required="true" when="{$data.authenticationType == 1}"/>
-      </Form>
-    `);
-        const option1Driver = yield createFormItemDriver("password");
-        const option2Driver = yield createOptionDriver("publicKey");
-        const textfield1Element = (yield createFormItemDriver("name1")).input;
-        const textfield1Driver = yield createTextBoxDriver(textfield1Element);
-        // Fill in first field
-        yield textfield1Driver.field.fill("Test Value");
-        yield (0, fixtures_1.expect)(textfield1Driver.field).toHaveValue("Test Value");
-        // Switch to second option
-        yield option2Driver.component.click();
-        // Switch back to first option
-        yield option1Driver.component.click();
-        // Field should retain its value
-        yield (0, fixtures_1.expect)(textfield1Driver.field).toHaveValue("Test Value");
-    }));
-});
-// =============================================================================
-// ORIGINAL TEST SUITE (LEGACY TESTS)
-// =============================================================================
-(0, fixtures_1.test)("mock service responds", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-    yield initTestBed(`
-    <Form submitUrl="/test" />`, {
-        apiInterceptor: {
-            operations: {
-                test: {
-                    url: "/test",
-                    method: "post",
-                    handler: `return true;`,
-                },
-            },
-        },
-    });
-    const driver = yield createFormDriver();
-    yield driver.submitForm();
-    const request = yield driver.getSubmitResponse("/test");
-    (0, fixtures_1.expect)(request.ok()).toEqual(true);
-}));
-// --- $data
-(0, fixtures_1.test)("$data is correctly bound to form data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-    yield initTestBed(`
-        <Form data="{{ field: 'test' }}">
-          <FormItem label="testField" bindTo="field">
-            <Button testId="custom" label="{$data.field}" />
-          </FormItem>
-        </Form> `);
-    const driver = yield createButtonDriver("custom");
-    yield (0, fixtures_1.expect)(driver.component).toHaveExplicitLabel("test");
-}));
-(0, fixtures_1.test)("$data is correctly undefined if data is not set in props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
-    yield initTestBed(`
-        <Form>
-          <FormItem label="testField" bindTo="field">
-            <Button testId="custom" label="{$data.field}" />
-          </FormItem>
-        </Form> `);
-    const driver = yield createButtonDriver("custom");
-    yield (0, fixtures_1.expect)(driver.component).toHaveExplicitLabel(undefined);
-}));
-(0, fixtures_1.test)("Form buttons and contained FormItems are enabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormDriver, }) {
-    yield initTestBed(`
-      <Form testId="form">
-        <FormItem label="Name" bindTo="name" />
-        <FormItem label="Email" bindTo="email" />
-      </Form>
-    `);
-    const driver = yield createFormDriver("form");
-    yield (0, fixtures_1.expect)(page.getByText("Name")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("Email")).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.cancelButton).toBeEnabled();
-    yield (0, fixtures_1.expect)(driver.submitButton).toBeEnabled();
-}));
-(0, fixtures_1.test)("submit only triggers when enabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-    const { testStateDriver } = yield initTestBed(`
-      <Form enabled="false" data="{{ name: 'John' }}" onSubmit="testState = true">
-        <FormItem bindTo="name" />
-      </Form>`);
-    const driver = yield createFormDriver();
-    yield (0, fixtures_1.expect)(driver.submitButton).toBeDisabled();
-    yield driver.submitForm("keypress");
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null);
-}));
-(0, fixtures_1.test)("submit with unbound fields", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createFormDriver }) {
-    yield initTestBed(`
-      <Fragment var.output="none">
-        <Form testId="form"
-          data="{{ firstname: 'James', lastname: 'Clewell' }}"
-          onSubmit="args => output = JSON.stringify(args)">
-          <FormItem label="Firstname" bindTo="firstname" />
-          <FormItem label="Middle name" initialValue="Robert" />
-          <FormItem label="Lastname" />
-        </Form>
-        <Text testId="text">{output}</Text>
-      </Fragment>
-    `);
-    const driver = yield createFormDriver("form");
-    yield driver.submitForm();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText('{"firstname":"James"}');
-}));
-(0, fixtures_1.test)(`submit with type 'items'`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, createButtonDriver, createFormItemDriver, }) {
-    const { testStateDriver } = yield initTestBed(`
-      <Form onSubmit="data => testState = data" testId="form">
-        <FormItem testId="formItem" type="items" bindTo="arrayItems" id="arrayItems">
-            <FormItem bindTo="name" testId="text{$itemIndex}"/>
-        </FormItem>
-        <Button testId="addButton" onClick="arrayItems.addItem()"/>
-      </Form>`);
-    yield (yield createButtonDriver("addButton")).click();
-    yield (yield createFormItemDriver("text0")).textBox.fill("John");
-    yield (yield createButtonDriver("addButton")).click();
-    yield (yield createFormItemDriver("text1")).textBox.fill("Peter");
-    const driver = yield createFormDriver("form");
-    yield driver.submitForm();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toStrictEqual({
-        arrayItems: [{ name: "John" }, { name: "Peter" }],
-    });
-}));
-(0, fixtures_1.test)(`submit with type 'items', empty bindTo`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, createButtonDriver, createFormItemDriver, }) {
-    const { testStateDriver } = yield initTestBed(`
-      <Form onSubmit="data => testState = data" testId="form">
-        <FormItem testId="formItem" type="items" bindTo="arrayItems" id="arrayItems">
-            <FormItem testId="text{$itemIndex}" bindTo=""/>
-        </FormItem>
-        <Button testId="addButton" onClick="arrayItems.addItem()"/>
-      </Form>`);
-    yield (yield createButtonDriver("addButton")).click();
-    yield (yield createFormItemDriver("text0")).textBox.fill("John");
-    yield (yield createButtonDriver("addButton")).click();
-    yield (yield createFormItemDriver("text1")).textBox.fill("Peter");
-    const driver = yield createFormDriver("form");
-    yield driver.submitForm();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toStrictEqual({
-        arrayItems: ["John", "Peter"],
-    });
-}));
-// --- Testing
-// --- --- buttonRowTemplate
-(0, fixtures_1.test)("buttonRowTemplate can render buttons", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-    yield initTestBed(`
-    <Form>
-      <property name="buttonRowTemplate">
-        <Button testId="submitBtn" type="submit" label="Hello Button" />
-      </property>
-    </Form>`);
-    yield (0, fixtures_1.expect)((yield createButtonDriver("submitBtn")).component).toBeAttached();
-}));
-(0, fixtures_1.test)("buttonRowTemplate replaces built-in buttons", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-    yield initTestBed(`
-    <Form testId="form">
-      <property name="buttonRowTemplate">
-        <Button testId="submitBtn" type="submit" label="Hello Button" />
-      </property>
-    </Form>`);
-    const driver = yield createFormDriver("form");
-    yield (0, fixtures_1.expect)(driver.submitButton).not.toBeVisible();
-    yield (0, fixtures_1.expect)(driver.cancelButton).not.toBeVisible();
-}));
-(0, fixtures_1.test)("setting buttonRowTemplate without buttons still runs submit on Enter", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, }) {
-    const { testStateDriver } = yield initTestBed(`
-    <Form onSubmit="testState = true">
-      <property name="buttonRowTemplate">
-        <Fragment />
-      </property>
-      <FormItem bindTo="name" />
-    </Form>
-  `);
-    const driver = yield createFormDriver();
-    yield driver.submitForm("keypress");
-    yield fixtures_1.expect.poll(testStateDriver.testState).toBe(true);
-}));
-(0, fixtures_1.test)("data accepts an object", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-    yield initTestBed(`
-    <Form data="{{ field1: 'test' }}">
-      <FormItem testId="inputField" bindTo="field1" />
-    </Form>
-  `);
-    const driver = yield createFormItemDriver("inputField");
-    yield (0, fixtures_1.expect)((yield createTextBoxDriver(driver.input)).field).toHaveValue("test");
-}));
-(0, fixtures_1.test)(`data accepts primitive`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-    yield initTestBed(`
-    <Form data="test">
-      <FormItem bindTo="field1" />
-    </Form>
-  `);
-    const component = (yield createFormDriver()).component;
-    yield (0, fixtures_1.expect)(component).toBeAttached();
-}));
-(0, fixtures_1.test)(`data accepts empty array`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-    yield initTestBed(`
-    <Form data="{[]}">
-      <FormItem bindTo="field1" />
-    </Form>
-  `);
-    const component = (yield createFormDriver()).component;
-    yield (0, fixtures_1.expect)(component).toBeAttached();
-}));
-(0, fixtures_1.test)("data accepts relative URL endpoint", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-    yield initTestBed(`
-      <Form data="/test">
-        <FormItem testId="inputField" bindTo="name" />
-      </Form>`, {
-        apiInterceptor: {
-            operations: {
-                test: {
-                    url: "/test",
-                    method: "get",
-                    handler: `return { name: 'John' };`,
-                },
-            },
-        },
-    });
-    const driver = yield createFormItemDriver("inputField");
-    yield (0, fixtures_1.expect)((yield createTextBoxDriver(driver.input)).field).toHaveValue("John");
-}));
-(0, fixtures_1.test)("cancel button and save button use default label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, }) {
-    yield initTestBed(`
-      <Form testId="form">
-        <FormItem label="Name" bindTo="name" />
-        <FormItem label="Email" bindTo="email" />
-      </Form>
-    `);
-    const driver = yield createFormDriver("form");
-    yield (0, fixtures_1.expect)(driver.cancelButton).toHaveText("Cancel");
-    yield (0, fixtures_1.expect)(driver.submitButton).toHaveText("Save");
-}));
-(0, fixtures_1.test)("cancel button is rendered with cancelLabel", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-    yield initTestBed(`
-      <Form testId="form" cancelLabel="Abort">
-        <FormItem label="Name" bindTo="name" />
-        <FormItem label="Email" bindTo="email" />
-      </Form>
-    `);
-    const driver = yield createFormDriver("form");
-    yield (0, fixtures_1.expect)(driver.cancelButton).toHaveText("Abort");
-    yield (0, fixtures_1.expect)(driver.submitButton).toHaveText("Save");
-}));
-(0, fixtures_1.test)("save button is rendered with saveLabel", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-    yield initTestBed(`
-      <Form testId="form" saveLabel="Submit">
-        <FormItem label="Name" bindTo="name" />
-        <FormItem label="Email" bindTo="email" />
-      </Form>
-    `);
-    const driver = yield createFormDriver("form");
-    yield (0, fixtures_1.expect)(driver.cancelButton).toHaveText("Cancel");
-    yield (0, fixtures_1.expect)(driver.submitButton).toHaveText("Submit");
-}));
-// swapCancelAndSave
-(0, fixtures_1.test)("built-in button row order is default if swapCancelAndSave is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, }) {
-    yield initTestBed(`
-      <Form testId="form" saveLabel="Submit">
-        <FormItem label="Name" bindTo="name" />
-        <FormItem label="Email" bindTo="email" />
-      </Form>
-    `);
-    const driver = yield createFormDriver("form");
-    const cancelBox = yield driver.cancelButton.boundingBox();
-    const submitBox = yield driver.submitButton.boundingBox();
-    (0, fixtures_1.expect)(cancelBox.x).toBeLessThan(submitBox.x);
-}));
-(0, fixtures_1.test)("built-in button row order flips if swapCancelAndSave is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, }) {
-    yield initTestBed(`
-      <Form testId="form" saveLabel="Submit" swapCancelAndSave="true">
-        <FormItem label="Name" bindTo="name" />
-        <FormItem label="Email" bindTo="email" />
-      </Form>
-    `);
-    const driver = yield createFormDriver("form");
-    const cancelBox = yield driver.cancelButton.boundingBox();
-    const submitBox = yield driver.submitButton.boundingBox();
-    (0, fixtures_1.expect)(cancelBox.x).toBeGreaterThan(submitBox.x);
-}));
-// --- submitUrl
-(0, fixtures_1.test)("form submits to correct url", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-    const endpoint = "/test";
-    yield initTestBed(`
-    <Form data="{{ name: 'John' }}" submitUrl="${endpoint}" submitMethod="post">
-      <FormItem bindTo="name" />
-    </Form>`, {
-        apiInterceptor: {
-            operations: {
-                test: {
-                    url: endpoint,
-                    method: "post",
-                    handler: `{ return true; }`,
-                },
-            },
-        },
-    });
-    const driver = yield createFormDriver();
-    yield driver.submitForm();
-    const response = yield driver.getSubmitResponse(endpoint);
-    (0, fixtures_1.expect)(response.ok()).toBe(true);
-    (0, fixtures_1.expect)(new URL(response.url()).pathname).toBe(endpoint);
-}));
-// --- submitMethod
-// NOTE: GET doesn't work because GET/HEAD cannot have a 'body'
-["post", "put", "delete"].forEach((method) => {
-    (0, fixtures_1.test)(`${method} REST op on submit`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-        yield initTestBed(`<Form submitUrl="/test" submitMethod="${method}" />`, {
-            apiInterceptor: {
-                operations: {
-                    testPost: {
-                        url: "/test",
-                        method: "post",
-                        handler: `return true;`,
-                    },
-                    testPut: {
-                        url: "/test",
-                        method: "put",
-                        handler: `return true;`,
-                    },
-                    testDelete: {
-                        url: "/test",
-                        method: "delete",
-                        handler: `return true;`,
-                    },
-                },
-            },
-        });
-        const driver = yield createFormDriver();
-        const request = yield driver.getSubmitRequest("/test", method, "click");
-        (0, fixtures_1.expect)(request.failure()).toBeNull();
-    }));
-});
-// --- submitting the Form
-(0, fixtures_1.test)("submit triggers when clicking save/submit button", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, }) {
-    yield initTestBed(`
-    <Form data="{{ name: 'John' }}" submitUrl="/test" submitMethod="post">
-      <FormItem bindTo="name" />
-    </Form>`, {
-        apiInterceptor: {
-            operations: {
-                test: {
-                    url: "/test",
-                    method: "post",
-                    handler: `return true;`,
-                },
-            },
-        },
-    });
-    const driver = yield createFormDriver();
-    const request = yield driver.getSubmitRequest("/test", "POST", "click");
-    (0, fixtures_1.expect)(request.failure()).toBeNull();
-}));
-(0, fixtures_1.test)("submit triggers when pressing Enter", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver }) {
-    yield initTestBed(`
-    <Form data="{{ name: 'John' }}" submitUrl="/test" submitMethod="post">
-      <FormItem bindTo="name" />
-    </Form>`, {
-        apiInterceptor: {
-            operations: {
-                test: {
-                    url: "/test",
-                    method: "post",
-                    handler: `return true;`,
-                },
-            },
-        },
-    });
-    const driver = yield createFormDriver();
-    const request = yield driver.getSubmitRequest("/test", "POST", "keypress");
-    (0, fixtures_1.expect)(request.failure()).toBeNull();
-}));
-(0, fixtures_1.test)("user cannot submit with clientside errors present", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, }) {
-    const { testStateDriver } = yield initTestBed(`
-    <Form onSubmit="testState = true">
-      <FormItem bindTo="name" required="true" />
-    </Form>
-  `);
-    const driver = yield createFormDriver();
-    // The onSubmit event should have been triggered if not for the client error of an empty required field
-    yield driver.submitForm("click");
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null);
-}));
-// --- backend validation summary
-(0, fixtures_1.test)("submitting with errors shows validation summary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, }) {
-    yield initTestBed(`<Form submitUrl="/general-validation-error" submitMethod="post" />`, {
-        apiInterceptor: errorDisplayInterceptor,
-    });
-    const driver = yield createFormDriver();
-    yield driver.submitForm();
-    yield (0, fixtures_1.expect)(yield driver.getValidationSummary()).toBeVisible();
-}));
-(0, fixtures_1.test)("submitting without errors does not show summary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, }) {
-    yield initTestBed(`<Form submitUrl="/no-validation-error" submitMethod="post" />`, {
-        apiInterceptor: errorDisplayInterceptor,
-    });
-    const driver = yield createFormDriver();
-    yield driver.submitForm();
-    yield (0, fixtures_1.expect)(yield driver.getValidationSummary()).not.toBeVisible();
-}));
-(0, fixtures_1.test)("general error messages are rendered in the summary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, createValidationDisplayDriver, }) {
-    yield initTestBed(`<Form submitUrl="/general-validation-error" submitMethod="post" />`, {
-        apiInterceptor: errorDisplayInterceptor,
-    });
-    const formDriver = yield createFormDriver();
-    yield formDriver.submitForm();
-    // TODO: strip this down -> it's verbose but hard to read
-    const warningDisplay = yield createValidationDisplayDriver(yield formDriver.getValidationDisplaysBySeverity("warning"));
-    const errorDisplay = yield createValidationDisplayDriver(yield formDriver.getValidationDisplaysBySeverity("error"));
-    (0, fixtures_1.expect)(yield warningDisplay.getText()).toContain("Warning for the whole form");
-    (0, fixtures_1.expect)(yield errorDisplay.getText()).toContain("Error for the whole form");
-}));
-(0, fixtures_1.test)("field-related errors are rendered at FormItems", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, createFormItemDriver, }) {
-    yield initTestBed(`
-      <Form submitUrl="/field-validation-error" submitMethod="post">
-        <FormItem testId="testField" bindTo="test" label="test" />
-      </Form>`, {
-        apiInterceptor: errorDisplayInterceptor,
-    });
-    const formDriver = yield createFormDriver();
-    const fieldDriver = yield createFormItemDriver("testField");
-    yield formDriver.submitForm();
-    yield (0, fixtures_1.expect)(fieldDriver.validationStatusIndicator).toHaveAttribute(fieldDriver.validationStatusTag, "warning");
-}));
-(0, fixtures_1.test)("field-related errors map to correct FormItems", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, createFormItemDriver, }) {
-    yield initTestBed(`
-      <Form submitUrl="/field-validation-error" submitMethod="post">
-        <FormItem testId="testField" bindTo="test" label="test" />
-        <FormItem testId="testField2" bindTo="test2" label="test2" />
-      </Form>`, {
-        apiInterceptor: errorDisplayInterceptor,
-    });
-    const formDriver = yield createFormDriver();
-    const fieldDriver = yield createFormItemDriver("testField");
-    yield formDriver.submitForm();
-    yield (0, fixtures_1.expect)(fieldDriver.validationStatusIndicator).toHaveAttribute(fieldDriver.validationStatusTag, "warning");
-}));
-fixtures_1.test.skip("field-related errors disappear if user updates FormItems", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, }) {
-    yield initTestBed(`
-      <Form testId="form">
-        <FormItem testId="testField" bindTo="test" label="test" required />
-        <FormItem testId="testField2" bindTo="test2" label="test2" />
-      </Form>`);
-    const fieldDriver = yield createFormItemDriver("testField");
-    const fieldDriver2 = yield createFormItemDriver("testField2");
-    yield fieldDriver.component.focus();
-    yield fieldDriver.textBox.fill("a");
-    yield fieldDriver.textBox.fill("");
-    yield fieldDriver.textBox.blur();
-    // Should show required error now
-    yield (0, fixtures_1.expect)(fieldDriver.textBox).toHaveValue("");
-    yield (0, fixtures_1.expect)(fieldDriver.validationStatusIndicator).toHaveAttribute(fieldDriver.validationStatusTag, "error");
-    yield fieldDriver.textBox.fill("a");
-    yield fieldDriver.textBox.blur();
-    yield fieldDriver2.textBox.focus();
-    yield (0, fixtures_1.expect)(fieldDriver2.textBox).toBeFocused();
-    yield fieldDriver2.textBox.fill("b");
-    yield (0, fixtures_1.expect)(fieldDriver.validationStatusIndicator).not.toBeVisible();
-}));
-const smartCrudInterceptor = {
-    initialize: `
-    $state.items = {
-      [10]: { name: "Smith", id: 10 }
-    };
-    $state.currentId = 10;
-  `,
-    operations: {
-        create: {
-            url: "/entities",
-            method: "post",
-            handler: `() => {
-        $state.currentId++;
-        $state.items[$state.currentId] = $requestBody;
-        $state.items[$state.currentId].id = $state.currentId;
-
-        return $state.items[$state.currentId];
-      }`,
-        },
-        read: {
-            url: "/entities/:id",
-            method: "get",
-            handler: `() => {
-        return $state.items[$pathParams.id];
-      }`,
-        },
-        update: {
-            url: "/entities/:id",
-            method: "put",
-            handler: `() => {
-        $state.items[$pathParams.id] = { ...$state.items[$pathParams.id], ...$requestBody };
-        return $state.items[$pathParams.id];
-      }`,
-        },
-    },
-};
-(0, fixtures_1.test)("create form works with submitUrl", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, createFormItemDriver, createTextBoxDriver, }) {
-    yield initTestBed(`
-    <Form submitUrl="/entities">
-      <FormItem bindTo="name" testId="nameInput"/>
-    </Form>
-  `, { apiInterceptor: smartCrudInterceptor });
-    const formDriver = yield createFormDriver();
-    const inputElement = (yield createFormItemDriver("nameInput")).input;
-    const fieldDriver = yield createTextBoxDriver(inputElement);
-    yield fieldDriver.field.fill("John");
-    yield formDriver.submitForm("click");
-    const response = yield formDriver.getSubmitResponse();
-    (0, fixtures_1.expect)(yield response.json()).toEqual({
-        name: "John",
-        id: 11,
-    });
-}));
-(0, fixtures_1.test)("regression: data url through modal context", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, createFormDriver, createFormItemDriver, createTextBoxDriver, }) {
-    yield initTestBed(`
-      <Fragment>
-        <Button testId="openModalButton" onClick="modal.open({data: '/entities/10'})"/>
-        <ModalDialog id="modal">
-          <Form testId="modalForm" data="{$param.data}" submitUrl="{$param.submitUrl}">
-             <FormItem bindTo="name" testId="nameInput"/>
-          </Form>
-        </ModalDialog>
-      </Fragment>
-    `, {
-        apiInterceptor: smartCrudInterceptor,
-    });
-    const formDriver = yield createFormDriver("modalForm");
-    const inputElement = (yield createFormItemDriver("nameInput")).input;
-    const inputDriver = yield createTextBoxDriver(inputElement);
-    yield (yield createButtonDriver("openModalButton")).click();
-    yield (0, fixtures_1.expect)(inputDriver.field).toHaveValue("Smith");
-    yield inputDriver.field.fill("EDITED-Smith");
-    yield formDriver.submitForm("click");
-    const response = yield formDriver.getSubmitResponse();
-    (0, fixtures_1.expect)(yield response.json()).toEqual({
-        name: "EDITED-Smith",
-        id: 10,
-    });
-}));
-// --- Conditional Rendering Cases
-(0, fixtures_1.test)("can submit with invisible required field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, createFormItemDriver, createTextBoxDriver, page, }) {
-    const { testStateDriver } = yield initTestBed(`
-    <Form onSubmit="testState = true">
-      <FormItem testId="select" bindTo="authenticationType"
-        type="select" label="Authentication Type:" initialValue="{0}">
-        <Option value="{0}" label="Password" />
-        <Option value="{1}" label="Public Key" />
-      </FormItem>
-      <FormItem label="name1" testId="name1" bindTo="name1"
-        required="true" when="{$data.authenticationType == 0}"/>
-      <FormItem label="name2" testId="name2" bindTo="name2"
-        required="true" when="{$data.authenticationType == 1}"/>
-    </Form>
-  `);
-    const formDriver = yield createFormDriver();
-    const selectDriver = yield createFormItemDriver("select");
-    const textfieldElement = (yield createFormItemDriver("name2")).input;
-    const textfieldDriver = yield createTextBoxDriver(textfieldElement);
-    yield selectDriver.component.click();
-    yield page.getByText("Public Key").click();
-    yield textfieldDriver.field.fill("John");
-    yield formDriver.submitForm();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
-}));
-(0, fixtures_1.test)("conditional fields keep the state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createOptionDriver, createTextBoxDriver, }) {
-    yield initTestBed(`
-    <Form>
-      <FormItem testId="select" bindTo="authenticationType"
-        type="radioGroup" label="Authentication Type:" initialValue="{0}">
-        <Option value="{0}" label="Password" testId="password"/>
-        <Option value="{1}" label="Public Key" testId="publicKey" />
-      </FormItem>
-      <FormItem label="name1" testId="name1" bindTo="name1"
-        required="true" when="{$data.authenticationType == 0}"/>
-      <FormItem label="name2" testId="name2" bindTo="name2"
-        required="true" when="{$data.authenticationType == 1}"/>
-    </Form>
-  `);
-    const option1Driver = yield createFormItemDriver("password");
-    const option2Driver = yield createOptionDriver("publicKey");
-    const textfield1Element = (yield createFormItemDriver("name1")).input;
-    const textfield1Driver = yield createTextBoxDriver(textfield1Element);
-    const textfield2Element = (yield createFormItemDriver("name2")).input;
-    const textfield2Driver = yield createTextBoxDriver(textfield2Element);
-    yield textfield1Driver.field.fill("name1");
-    yield option2Driver.click();
-    yield textfield2Driver.field.fill("name2");
-    yield option1Driver.click();
-    yield (0, fixtures_1.expect)(textfield1Driver.field).toHaveValue("name1");
-}));