xmlui 0.10.13 → 0.10.15

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

@@ -0,0 +1,910 @@
+"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 fixtures_1 = require("../../testing/fixtures");
+// Test data constants for API mocking
+const basicApiInterceptor = {
+    operations: {
+        "get-test": {
+            url: "/api/test",
+            method: "get",
+            handler: `console.log('GET!!!'); return { message: "GET success", id: 1 };`,
+        },
+        "post-test": {
+            url: "/api/test/1",
+            method: "post",
+            handler: `return { message: "POST success", id: 2, data: $requestBody };`,
+        },
+        "put-test": {
+            url: "/api/test/1",
+            method: "put",
+            handler: `return { message: "PUT success", id: 1, data: $requestBody };`,
+        },
+        "delete-test": {
+            url: "/api/test/1",
+            method: "delete",
+            handler: `return { message: "DELETE success", deleted: true };`,
+        },
+        "query-params-test": {
+            url: "/api/search",
+            method: "get",
+            handler: `return { query: $queryParams, results: ["item1", "item2"] };`,
+        },
+        "headers-test": {
+            url: "/api/headers",
+            method: "get",
+            handler: `console.log('hd', $requestHeaders); return { headers: $requestHeaders };`,
+        },
+        "error-test": {
+            url: "/api/error",
+            method: "post",
+            handler: `throw Errors.HttpError(400, { message: "Bad request", details: "Invalid data" });`,
+        },
+        "slow-test": {
+            url: "/api/slow",
+            method: "get",
+            handler: `
+        await new Promise(resolve => setTimeout(resolve, 100));
+        return { message: "Slow response" };
+      `,
+        },
+    },
+};
+const confirmationInterceptor = {
+    operations: {
+        "confirm-test": {
+            url: "/api/confirm",
+            method: "post",
+            handler: `return { message: "Confirmed action", timestamp: Date.now() };`,
+        },
+    },
+};
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("component renders and initializes correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<APICall id="test" url="/api/test" method="get" />`, {
+            apiInterceptor: basicApiInterceptor,
+        });
+        // APICall is non-visual, so we check for proper registration by checking if it exists in context
+        const component = page.getByTestId("test-id-component");
+        (0, fixtures_1.expect)(yield component.count()).toBe(0); // Non-visual component
+    }));
+    (0, fixtures_1.test)("component executes with basic properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <APICall id="api" url="/api/test" method="get" onSuccess="arg => testState = arg.message" />
+        <Button testId="trigger" onClick="api.execute()" label="Execute" />
+      </Fragment>
+    `, {
+            apiInterceptor: basicApiInterceptor,
+        });
+        const button = yield createButtonDriver("trigger");
+        yield button.click();
+        yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("GET success");
+    }));
+    // =============================================================================
+    // HTTP METHOD TESTS
+    // =============================================================================
+    fixtures_1.test.describe("HTTP method property", () => {
+        const methods = ["get", "post", "put", "delete"];
+        methods.forEach((method) => {
+            (0, fixtures_1.test)(`executes ${method.toUpperCase()} request correctly`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+                const { testStateDriver } = yield initTestBed(`
+          <Fragment>
+            <APICall 
+              id="api" 
+              url="/api/test${method === "get" ? "" : "/1"}" 
+              method="${method}" 
+              ${method !== "get" ? `body='{{ "test": "data" }}'` : ""}
+              onSuccess="result => testState = result.message" 
+            />
+            <Button testId="trigger" onClick="api.execute()" label="Execute" />
+          </Fragment>
+        `, {
+                    apiInterceptor: basicApiInterceptor,
+                });
+                const button = yield createButtonDriver("trigger");
+                yield button.click();
+                yield fixtures_1.expect
+                    .poll(testStateDriver.testState, { timeout: 2000 })
+                    .toEqual(`${method.toUpperCase()} success`);
+            }));
+        });
+        (0, fixtures_1.test)("supports additional HTTP methods like PATCH", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/test/1" 
+            method="patch" 
+            body='{{ "test": "data" }}'
+            onSuccess="() => testState = 'patch-success'" 
+          />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: {
+                    operations: {
+                        "real-patch": {
+                            url: "/api/test/1",
+                            method: "patch",
+                            handler: `return { message: "PATCH success" };`,
+                        },
+                    },
+                },
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("patch-success");
+        }));
+        (0, fixtures_1.test)("defaults to GET method when not specified", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall id="api" url="/api/test" onSuccess="result => testState = result.message" />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("GET success");
+        }));
+        (0, fixtures_1.test)("handles invalid method gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall id="api" url="/api/test" method="invalid" onError="() => testState = 'error'" />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("error");
+        }));
+    });
+    // =============================================================================
+    // URL PROPERTY TESTS
+    // =============================================================================
+    fixtures_1.test.describe("url property", () => {
+        (0, fixtures_1.test)("handles absolute URLs", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall id="api" url="/api/test" onSuccess="() => testState = 'success'" />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
+        }));
+        (0, fixtures_1.test)("handles relative URLs", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall id="api" url="api/test" onSuccess="() => testState = 'success'" />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: {
+                    operations: {
+                        "relative-test": {
+                            url: "**/api/test",
+                            method: "get",
+                            handler: `return { success: true };`,
+                        },
+                    },
+                },
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
+        }));
+        (0, fixtures_1.test)("handles URL with special characters", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall id="api" url="/api/test?q=hello%20world&filter=a%26b" onSuccess="() => testState = 'success'" />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: {
+                    operations: {
+                        "special-chars": {
+                            url: "**/api/test**",
+                            method: "get",
+                            handler: `return { success: true };`,
+                        },
+                    },
+                },
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
+        }));
+    });
+    // =============================================================================
+    // BODY PROPERTY TESTS
+    // =============================================================================
+    fixtures_1.test.describe("body property", () => {
+        (0, fixtures_1.test)("sends JSON body correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/test/1" 
+            method="post" 
+            body="{{ name: 'John', age: 30 }}" 
+            onSuccess="result => testState = result.data.name" 
+          />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("John");
+        }));
+        (0, fixtures_1.test)("handles empty body", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall id="api" url="/api/test/1" method="post" body="" onSuccess="() => testState = 'success'" />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
+        }));
+        (0, fixtures_1.test)("handles complex nested objects in body", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/test/1" 
+            method="post" 
+            body="{{ user: { profile: { name: 'Jane', settings: { theme: 'dark' } } }, items: [1, 2, 3] }}" 
+            onSuccess="result => testState = result.data.user.profile.name" 
+          />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("Jane");
+        }));
+    });
+    // =============================================================================
+    // RAW BODY PROPERTY TESTS
+    // =============================================================================
+    fixtures_1.test.describe("rawBody property", () => {
+        (0, fixtures_1.test)("sends raw string body", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/test" 
+            method="post" 
+            rawBody="plain text content" 
+            onSuccess="() => testState = 'success'" 
+          />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: {
+                    operations: {
+                        "raw-body": {
+                            url: "/api/test",
+                            method: "post",
+                            handler: `return { received: $requestBody };`,
+                        },
+                    },
+                },
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
+        }));
+        (0, fixtures_1.test)("rawBody takes precedence over body", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/test" 
+            method="post" 
+            body="{{ name: 'John' }}" 
+            rawBody="raw content" 
+            onSuccess="() => testState = 'success'" 
+          />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: {
+                    operations: {
+                        "precedence-test": {
+                            url: "/api/test",
+                            method: "post",
+                            handler: `return { received: $requestBody };`,
+                        },
+                    },
+                },
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
+        }));
+    });
+    // =============================================================================
+    // QUERY PARAMS PROPERTY TESTS
+    // =============================================================================
+    fixtures_1.test.describe("queryParams property", () => {
+        (0, fixtures_1.test)("sends query parameters correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/search" 
+            queryParams="{{ q: 'test', limit: 10, active: true }}" 
+            onSuccess="result => testState = result.query.q" 
+          />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("test");
+        }));
+        (0, fixtures_1.test)("handles empty query parameters", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall id="api" url="/api/search" queryParams="{{}}" onSuccess="() => testState = 'success'" />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
+        }));
+        (0, fixtures_1.test)("handles special characters in query parameters", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/search" 
+            queryParams="{{ q: 'hello world', special: 'a&b=c' }}" 
+            onSuccess="result => testState = result.query.q" 
+          />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("hello world");
+        }));
+    });
+    // =============================================================================
+    // HEADERS PROPERTY TESTS
+    // =============================================================================
+    fixtures_1.test.describe("headers property", () => {
+        (0, fixtures_1.test)("sends custom headers correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/headers" 
+            headers="{{ 'X-Custom-Header': 'test-value', 'Authorization': 'Bearer token123' }}" 
+            onSuccess="result => testState = result.headers['x-custom-header']" 
+          />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("test-value");
+        }));
+        (0, fixtures_1.test)("handles empty headers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall id="api" url="/api/headers" headers="{{}}" onSuccess="() => testState = 'success'" />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
+        }));
+    });
+    // =============================================================================
+    // CONFIRMATION DIALOG TESTS
+    // =============================================================================
+    fixtures_1.test.describe("confirmation dialog properties", () => {
+        (0, fixtures_1.test)("shows confirmation dialog with custom title and message", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, page, }) {
+            yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/confirm" 
+            method="post"
+            confirmTitle="Custom Title"
+            confirmMessage="Are you sure you want to proceed?"
+            confirmButtonLabel="Yes, Continue"
+          />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: confirmationInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            // Check for confirmation dialog
+            yield (0, fixtures_1.expect)(page.getByText("Custom Title")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Are you sure you want to proceed?")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByText("Yes, Continue")).toBeVisible();
+        }));
+        (0, fixtures_1.test)("API call proceeds when confirmation is accepted", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, page, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/confirm" 
+            method="post"
+            confirmTitle="Confirm"
+            confirmMessage="Proceed?"
+            onSuccess="() => testState = 'confirmed'"
+          />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: confirmationInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            // Accept confirmation
+            yield page.getByRole("button", { name: /yes/i }).click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("confirmed");
+        }));
+        (0, fixtures_1.test)("API call is cancelled when confirmation is rejected", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, page, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/confirm" 
+            method="post"
+            confirmTitle="Confirm"
+            confirmMessage="Proceed?"
+            onSuccess="() => testState = 'confirmed'"
+            onError="() => testState = 'error'"
+          />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: confirmationInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            // Reject confirmation
+            yield page.getByRole("button", { name: /cancel|no/i }).click();
+            // Should not execute API call
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual(null);
+        }));
+    });
+    // =============================================================================
+    // NOTIFICATION MESSAGE TESTS
+    // =============================================================================
+    fixtures_1.test.describe("notification message properties", () => {
+        (0, fixtures_1.test)("shows progress notification during API call", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, page, }) {
+            yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/slow" 
+            inProgressNotificationMessage="Processing your request..."
+          />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            // Check for progress notification
+            yield (0, fixtures_1.expect)(page.getByText("Processing your request...")).toBeVisible();
+        }));
+        (0, fixtures_1.test)("shows success notification with result data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, page, }) {
+            yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/test" 
+            completedNotificationMessage="Success: {$result.message}"
+          />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            // Check for success notification
+            yield (0, fixtures_1.expect)(page.getByText("Success: GET success")).toBeVisible();
+        }));
+        (0, fixtures_1.test)("shows error notification with error details", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, page, }) {
+            yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/error" 
+            method="post"
+            errorNotificationMessage="Error {$error.statusCode}: {$error.details.message}"
+          />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            // Check for error notification
+            yield (0, fixtures_1.expect)(page.getByText("Error 400: Bad request")).toBeVisible();
+        }));
+    });
+    // =============================================================================
+    // EXECUTE METHOD TESTS
+    // =============================================================================
+    fixtures_1.test.describe("execute method", () => {
+        (0, fixtures_1.test)("triggers API call", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall id="api" url="/api/test" onSuccess="() => testState = 'executed'" />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("executed");
+        }));
+        (0, fixtures_1.test)("accepts parameters", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/test/1" 
+            method="post"
+            body="{$param}"
+            onSuccess="result => testState = result.data.name" 
+          />
+          <Button testId="trigger" onClick="api.execute({ name: 'John', age: 30 })" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("John");
+        }));
+        (0, fixtures_1.test)("provides access to multiple parameters", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/test/1" 
+            method="post"
+            body="{{ first: $params[0], second: $params[1], third: $params[2] }}"
+            onSuccess="result => testState = result.data.first + '-' + result.data.second + '-' + result.data.third" 
+          />
+          <Button testId="trigger" onClick="api.execute('param1', 'param2', 'param3')" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect
+                .poll(testStateDriver.testState, { timeout: 2000 })
+                .toEqual("param1-param2-param3");
+        }));
+        (0, fixtures_1.test)("can be called multiple times", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment var.callCount="{0}">
+          <Button testId="trigger" label="Execute {callCount}" >
+            <event name="click">
+              <APICall 
+                url="/api/test" 
+                onSuccess="console.log('before', callCount); callCount++; console.log('after', callCount); testState = callCount;"
+              />
+            </event>
+          </Button>
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield new Promise((resolve) => setTimeout(resolve, 100)); // Wait for async execution
+            //await expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual(1);
+            yield button.click();
+            //await expect.poll(testStateDriver.testState).toEqual(2);
+            yield button.click();
+            //await expect.poll(testStateDriver.testState).toEqual(3);
+        }));
+    });
+    // =============================================================================
+    // CONTEXT VARIABLE TESTS
+    // =============================================================================
+    fixtures_1.test.describe("context variables", () => {
+        (0, fixtures_1.test)("$param provides access to first parameter", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/test/1" 
+            method="post"
+            body="{$param}"
+            onSuccess="result => testState = result.data.message" 
+          />
+          <Button testId="trigger" onClick="api.execute({ message: 'hello' })" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("hello");
+        }));
+        (0, fixtures_1.test)("$params provides access to all parameters", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/test/1" 
+            method="post"
+            body="{{ all: $params }}"
+            onSuccess="result => testState = result.data.all.length" 
+          />
+          <Button testId="trigger" onClick="api.execute('a', 'b', 'c')" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual(3);
+        }));
+        (0, fixtures_1.test)("$result provides access to response data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/test" 
+            onSuccess="result => testState = result.id + ' - ' + result.message"
+          />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("1 - GET success");
+        }));
+        (0, fixtures_1.test)("$error provides access to error information", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <APICall 
+            id="api" 
+            url="/api/error" 
+            method="post"
+            onError="error => testState = error.statusCode + ' - ' + error.details.message"
+          />
+          <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        </Fragment>
+      `, {
+                apiInterceptor: basicApiInterceptor,
+            });
+            const button = yield createButtonDriver("trigger");
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("400 - Bad request");
+        }));
+    });
+});
+// =============================================================================
+// OTHER EDGE CASE TESTS
+// =============================================================================
+fixtures_1.test.describe("Other Edge Cases", () => {
+    (0, fixtures_1.test)("handles null and undefined parameters gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <APICall 
+          id="api" 
+          url="/api/test/1" 
+          method="post"
+          body="{$param}"
+          onSuccess="() => testState = 'success'"
+          onError="() => testState = 'error'"
+        />
+        <Button testId="trigger" onClick="api.execute(null)" label="Execute" />
+      </Fragment>
+    `, {
+            apiInterceptor: basicApiInterceptor,
+        });
+        const button = yield createButtonDriver("trigger");
+        yield button.click();
+        yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
+    }));
+    (0, fixtures_1.test)("handles undefined URL gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <APICall id="api" onError="() => testState = 'error'" />
+        <Button testId="trigger" onClick="api.execute()" label="Execute" />
+      </Fragment>
+    `, {
+            apiInterceptor: basicApiInterceptor,
+        });
+        const button = yield createButtonDriver("trigger");
+        yield button.click();
+        yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("error");
+    }));
+    (0, fixtures_1.test)("handles malformed JSON in body gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <APICall 
+          id="api" 
+          url="/api/test" 
+          method="post"
+          body="{ invalid json }"
+          onSuccess="() => testState = 'success'"
+          onError="() => testState = 'error'"
+        />
+        <Button testId="trigger" onClick="api.execute()" label="Execute" />
+      </Fragment>
+    `, {
+            apiInterceptor: basicApiInterceptor,
+        });
+        const button = yield createButtonDriver("trigger");
+        yield button.click();
+        yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("error");
+    }));
+    (0, fixtures_1.test)("handles very large request payloads", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <APICall 
+          id="api" 
+          url="/api/test/1" 
+          method="post"
+          body="{$param}"
+          onSuccess="() => testState = 'success'"
+        />
+        <Button testId="trigger" onClick="api.execute({ data: 'x'.repeat(10000) })" label="Execute" />
+      </Fragment>
+    `, {
+            apiInterceptor: basicApiInterceptor,
+        });
+        const button = yield createButtonDriver("trigger");
+        yield button.click();
+        yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
+    }));
+    (0, fixtures_1.test)("handles special Unicode characters in data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <APICall 
+          id="api" 
+          url="/api/test/1" 
+          method="post"
+          body="{$param}"
+          onSuccess="result => testState = result.data.emoji"
+        />
+        <Button testId="trigger" onClick="api.execute({ emoji: '👨‍👩‍👧‍👦🚀', chinese: '你好世界' })" label="Execute" />
+      </Fragment>
+    `, {
+            apiInterceptor: basicApiInterceptor,
+        });
+        const button = yield createButtonDriver("trigger");
+        yield button.click();
+        yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("👨‍👩‍👧‍👦🚀");
+    }));
+    (0, fixtures_1.test)("handles rapid successive API calls", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createButtonDriver }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <APICall 
+          id="api" 
+          url="/api/test" 
+          onSuccess="testState ??= 0; testState++;"
+        />
+        <Button testId="trigger" onClick="api.execute()" label="Execute" />
+      </Fragment>
+    `, {
+            apiInterceptor: basicApiInterceptor,
+        });
+        const button = yield createButtonDriver("trigger");
+        // Rapidly click multiple times
+        yield button.click();
+        yield page.waitForTimeout(100);
+        yield button.click();
+        yield page.waitForTimeout(100);
+        yield button.click();
+        yield page.waitForTimeout(100);
+        // Should handle all calls
+        yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 5000 }).toEqual(3);
+    }));
+    (0, fixtures_1.test)("handles component cleanup correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment var.showApi="true">
+        <Fragment if="showApi">
+          <APICall id="api" url="/api/test" onSuccess="() => testState = 'success'" />
+        </Fragment>
+        <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        <Button testId="hide" onClick="showApi = false" label="Hide" />
+      </Fragment>
+    `, {
+            apiInterceptor: basicApiInterceptor,
+        });
+        const executeButton = yield createButtonDriver("trigger");
+        const hideButton = yield createButtonDriver("hide");
+        // Execute API call first
+        yield executeButton.click();
+        yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
+        // Hide the component
+        yield hideButton.click();
+        // Try to execute again (should not crash)
+        try {
+            yield executeButton.click();
+        }
+        catch (error) {
+            // This is expected as the component is no longer available
+        }
+    }));
+    (0, fixtures_1.test)("handles when condition preventing execution", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment var.allowExecution="false">
+        <APICall 
+          id="api" 
+          url="/api/test" 
+          when="allowExecution"
+          onSuccess="() => testState = 'success'"
+          onError="() => testState = 'error'"
+        />
+        <Button testId="trigger" onClick="api.execute()" label="Execute" />
+        <Button testId="allow" onClick="allowExecution = true" label="Allow" />
+      </Fragment>
+    `, {
+            apiInterceptor: basicApiInterceptor,
+        });
+        const executeButton = yield createButtonDriver("trigger");
+        const allowButton = yield createButtonDriver("allow");
+        // Try to execute when not allowed
+        yield executeButton.click();
+        yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual(null);
+        // Allow execution and try again
+        yield allowButton.click();
+        yield executeButton.click();
+        yield fixtures_1.expect.poll(testStateDriver.testState, { timeout: 2000 }).toEqual("success");
+    }));
+});