xmlui 0.10.13 → 0.10.14

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

@@ -0,0 +1,1257 @@
+"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");
+// 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");
+    }));
+    // =============================================================================
+    // 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();
+        }));
+    });
+    // =============================================================================
+    // 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");
+        }));
+    });
+    // =============================================================================
+    // 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.getByLabel("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");
+    (0, fixtures_1.expect)(driver.submitButton).not.toBeVisible();
+    (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)(yield fieldDriver.getValidationStatusIndicator()).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)(yield fieldDriver.getValidationStatusIndicator()).toHaveAttribute(fieldDriver.validationStatusTag, "warning");
+}));
+(0, fixtures_1.test)("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("", { timeout: 500 }); // trigger 'required' error
+    yield (0, fixtures_1.expect)(yield fieldDriver.getValidationStatusIndicator()).toHaveAttribute(fieldDriver.validationStatusTag, "error");
+    //await fieldDriver.component.focus();
+    yield fieldDriver.textBox.fill("a");
+    yield fieldDriver.textBox.blur();
+    yield fieldDriver2.component.focus();
+    yield page.waitForTimeout(200);
+    yield fieldDriver2.textBox.fill("b");
+    (0, fixtures_1.expect)(yield fieldDriver.getValidationStatusIndicator()).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 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.getByLabel("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");
+}));