add tests

test/core/functions.ts

@@ -39,6 +39,76 @@ const aeq = (
   });
 };
 
+const aeqError = (
+  template: string,
+  get: (...args: any[]) => void,
+  options: any = {},
+  scopeOptions: ScopeOptions = {}
+) => {
+  it("should handle template errors correctly", async () => {
+    const scope = createScope({ ...scopeOptions });
+
+    try {
+      const req = await new Promise<string>((resolve) => {
+        compile(template)({
+          get: (...args) => get(resolve, ...args),
+          ...options
+        });
+      });
+      assert.deepEqual(req, "true");
+    } catch (e) {
+      console.error("Error occurred during test:", e);
+      throw e;
+    } finally {
+      clearScope(scope);
+    }
+  });
+};
+const defaultGetEl: (el: Element | null | undefined) => Element | undefined = (
+  el
+) => el?.getElementsByTagName("button")?.[0];
+
+// async equal event
+const aeqe = (
+  template: string,
+  get: (...args: any[]) => void,
+  compileOptions: any = {},
+  options: any = {},
+  scopeOptions: ScopeOptions = {},
+  quantity = 1,
+  getEl = defaultGetEl,
+  event: string = "click",
+  eventOptions: EventInit = {
+    bubbles: true,
+    cancelable: true
+  }
+) => {
+  it("", async () => {
+    const scope = createScope({ ...scopeOptions });
+    const req = await new Promise((res) => {
+      const instance = compile(
+        template,
+        compileOptions
+      )({
+        get: (...args) => get(res, ...args),
+        ...options
+      });
+      const el = instance.response;
+      const currentEl = getEl(el);
+      if (currentEl) {
+        for (let i = 0; i < quantity; i++) {
+          if (currentEl) {
+            const clickEvent = new window.Event(event, eventOptions);
+            currentEl.dispatchEvent(clickEvent);
+          }
+        }
+      }
+    });
+    assert.deepEqual(req, true);
+    clearScope(scope);
+  });
+};
+
 const ae = (
   template: string,
   message: string,
@@ -72,5 +142,23 @@ const createTestObj1 = (obj: Record<string, any>) => {
 const createTestObj2 = (text: string) => {
   return `<div>${text}</div>`;
 };
+const createTestObj3 = (text: string) => {
+  return `<div><button id="click">click</button>${text}</div>`;
+};
+
+const createTestObj4 = (text: string) => {
+  return `<div><form onsubmit="function prevent(e){e.preventDefault();};return prevent(event);" id="form"></form>${text}</div>`;
+};
 
-export { e, eq, ae, aeq, createTestObj1, createTestObj2 };
+export {
+  e,
+  eq,
+  ae,
+  aeq,
+  aeqe,
+  aeqError,
+  createTestObj1,
+  createTestObj2,
+  createTestObj3,
+  createTestObj4
+};

test/core/template-function.test.ts

@@ -6,7 +6,15 @@ import {
 } from "../config/config";
 
 import { compile, stringify } from "../../src/main";
-import { e, eq, aeq, createTestObj2 } from "./functions";
+import {
+  e,
+  eq,
+  aeq,
+  aeqe,
+  createTestObj2,
+  createTestObj3,
+  createTestObj4
+} from "./functions";
 
 /**
  * Template function
@@ -143,22 +151,6 @@ describe("template function", () => {
       }
     }
   );
-  //   aeq(
-  //     createTestObj2(
-  //       `<button id="increment">Click</button>{{ "src":"${BASE_URL}/api/test", "after":"click:#increment", "memo": true }}`
-  //     ),
-  //     (res, prop, value) => {
-  //       switch (prop) {
-  //         case "response":
-  //           if (value?.outerHTML === `<div><div>123</div></div>`) {
-  //             res(true);
-  //           } else {
-  //             res(false);
-  //           }
-  //           break;
-  //       }
-  //     }
-  //   );
   const aeq0 = stringify({
     src: `${BASE_URL}/api/test`,
     indicators: [
@@ -204,4 +196,198 @@ describe("template function", () => {
       }
     }
   );
+  const aeq1 = stringify({
+    src: `${BASE_URL}/api/test`,
+    after: "click:#click"
+  });
+
+  aeqe(createTestObj3(`{${aeq1}}`), (res, prop, value) => {
+    switch (prop) {
+      case "response":
+        if (
+          value?.outerHTML ===
+          `<div><button id="click">click</button><div>123</div></div>`
+        ) {
+          res(true);
+        } else {
+          res(false);
+        }
+        break;
+    }
+  });
+  let memoItem: Element | undefined = undefined;
+  aeqe(
+    createTestObj3(`{${aeq1}}`),
+    (res, prop, value) => {
+      switch (prop) {
+        case "response":
+          if (
+            value?.outerHTML ===
+            `<div><button id="click">click</button><div>123</div></div>`
+          ) {
+            if (!memoItem) {
+              memoItem = value;
+            } else {
+              res(memoItem.childNodes[1] === value.childNodes[1]);
+            }
+          } else {
+            res(false);
+          }
+          break;
+      }
+    },
+    {
+      memo: true
+    },
+    {},
+    {},
+    2
+  );
+
+  let memoItem1: Element | undefined = undefined;
+  aeqe(
+    createTestObj3(`{${aeq1}}`),
+    (res, prop, value) => {
+      switch (prop) {
+        case "response":
+          if (
+            value?.outerHTML ===
+            `<div><button id="click">click</button><div>123</div></div>`
+          ) {
+            if (!memoItem1) {
+              memoItem1 = value;
+            } else {
+              // this is false
+              res(memoItem1.childNodes[1] === value.childNodes[1]);
+            }
+          } else {
+            res(false);
+          }
+          break;
+      }
+    },
+    {},
+    {},
+    {},
+    2
+  );
+  let memoItem2: Element | undefined = undefined;
+  const aeq2 = stringify({
+    src: `${BASE_URL}/api/test`,
+    after: "click:#click",
+    indicators: [
+      {
+        trigger: "pending",
+        content: "<p>Loading...</p>"
+      }
+    ]
+  });
+  aeqe(
+    createTestObj3(`{${aeq2}}`),
+    (res, prop, value) => {
+      switch (prop) {
+        case "response":
+          if (
+            value?.outerHTML ===
+            `<div><button id="click">click</button><div>123</div></div>`
+          ) {
+            if (!memoItem2) {
+              memoItem2 = value;
+            } else {
+              res(memoItem2.childNodes[1] === value.childNodes[1]);
+            }
+          }
+          break;
+      }
+    },
+    {},
+    {},
+    {},
+    2
+  );
+  aeqe(
+    createTestObj3(`{${aeq2}}`),
+    (res, prop, value) => {
+      switch (prop) {
+        case "response":
+          if (
+            value?.outerHTML ===
+            `<div><button id="click">click</button><div>123</div></div>`
+          ) {
+            if (!memoItem2) {
+              memoItem2 = value;
+            } else {
+              res(memoItem2.childNodes[1] !== value.childNodes[1]);
+            }
+          }
+          break;
+      }
+    },
+    {
+      memo: true
+    },
+    {},
+    {},
+    2
+  );
+  aeqe(
+    createTestObj3(`{${aeq2}}`),
+    (res, prop, value) => {
+      switch (prop) {
+        case "response":
+          if (
+            value?.outerHTML ===
+            `<div><button id="click">click</button><div>123</div></div>`
+          ) {
+            if (!memoItem2) {
+              memoItem2 = value;
+            } else {
+              res(memoItem2.childNodes[1] !== value.childNodes[1]);
+            }
+          }
+          break;
+      }
+    },
+    {
+      memo: true
+    },
+    {},
+    {},
+    2
+  );
+  const aeq3 = stringify({
+    src: `${BASE_URL}/api/getFormComponent`,
+    after: "submit:#form",
+    method: "post"
+  });
+  aeqe(
+    createTestObj4(`{${aeq3}}`),
+    (res, prop, value) => {
+      switch (prop) {
+        case "response":
+          if (
+            value?.outerHTML ===
+            `<div><form onsubmit="function prevent(e){e.preventDefault();};return prevent(event);" id="form"></form><div>123</div></div>`
+          ) {
+            res(true);
+          } else {
+            res(false);
+          }
+          break;
+      }
+    },
+    {
+      autoBody: true
+    },
+    {},
+    {
+      route: "/api/getFormComponent",
+      method: "post"
+    },
+    1,
+    (el) => {
+      return el?.getElementsByTagName("form")?.[0];
+    },
+    "submit"
+  );
 });

test/server/server.ts

@@ -9,7 +9,7 @@ const createScope = ({
   route = "/api/test",
   method = "get"
 }: ScopeOptions) => {
-  return nock(BASE_URL)[method](route).reply(code, template);
+  return nock(BASE_URL).persist()[method](route).reply(code, template);
 };
 
 const clearScope = (scope: nock.Scope) => {