@angular-wave/angular.ts 0.7.2 → 0.7.4

package/src/directive/http/get.spec.js

@@ -0,0 +1,211 @@
+import { Angular } from "../../loader.js";
+import { browserTrigger, wait } from "../../shared/test-utils.js";
+
+describe("ngGet", () => {
+  let $compile, $rootScope, $log, el;
+
+  beforeEach(() => {
+    el = document.getElementById("app");
+    el.innerHTML = "";
+    let angular = new Angular();
+    angular.module("default", []);
+    angular
+      .bootstrap(el, ["default"])
+      .invoke((_$compile_, _$rootScope_, _$log_) => {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $log = _$log_;
+      });
+  });
+
+  it("should replace innerHTML (default) on click", async () => {
+    const scope = $rootScope.$new();
+    el.innerHTML = '<button ng-get="/mock/hello">Load</button>';
+    $compile(el)(scope);
+    browserTrigger(el.querySelector("button"), "click");
+    await wait(100);
+    expect(el.innerText).toBe("Hello");
+  });
+
+  it("should replace innerHTML (default) on click when used with expression", async () => {
+    const scope = $rootScope.$new();
+    el.innerHTML = '<button ng-get="/mock/{{a}}">Load</button>';
+    scope.a = "div";
+    $compile(el)(scope);
+    browserTrigger(el.querySelector("button"), "click");
+    await wait(100);
+    expect(el.firstChild.innerHTML).toBe("<div>Hello</div>");
+  });
+
+  it("should replace innerHTML on error", async () => {
+    const scope = $rootScope.$new();
+    el.innerHTML = '<button ng-get="/mock/422">Load</button>';
+    $compile(el)(scope);
+    browserTrigger(el.querySelector("button"), "click");
+    await wait(100);
+    expect(el.innerText).toBe("Invalid data");
+  });
+
+  it("should not trigger request if element is disabled", async () => {
+    el.innerHTML = '<button ng-get="/mock/hello" disabled>Load</button>';
+    const scope = $rootScope.$new();
+    $compile(el)(scope);
+    browserTrigger(el.querySelector("button"), "click");
+    await wait(100);
+    expect(el.innerText).toBe("Load");
+  });
+
+  it("should replace innerHTML on statuc error without a body", async () => {
+    const scope = $rootScope.$new();
+    el.innerHTML = '<button ng-get="/mock/401">Load</button>';
+    $compile(el)(scope);
+    browserTrigger(el.querySelector("button"), "click");
+    await wait(100);
+    expect(el.innerText).toBe("Unauthorized");
+  });
+
+  describe("data-swap", () => {
+    it("should not change anything if swap is 'none'", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/div" data-swap="none" data-target="#found">Load</button><div id="found">Original</div>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const found = el.querySelector("#found");
+      expect(found.textContent).toBe("Original");
+    });
+
+    it("should replace outerHTML on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-swap="outerHTML">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.innerText).toBe("Hello");
+    });
+
+    it("should replace textcontent on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-swap="textContent">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.innerText).toBe("Hello");
+    });
+
+    it("should replace beforebegin on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/div" data-swap="beforebegin">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.firstChild.innerText).toBe("Hello");
+    });
+
+    it("should replace beforeend on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/div" data-swap="beforeend">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.firstChild.lastChild.innerText).toBe("Hello");
+    });
+
+    it("should delete the target on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-swap="delete" data-target="#found">Load</button><div id="found"></div>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.querySelector("#found")).toBeNull();
+    });
+  });
+
+  describe("data-target", () => {
+    it("should remain unchanged if target is not found and log a warning", async () => {
+      const scope = $rootScope.$new();
+      spyOn($log, "warn");
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-target="#missing">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.firstChild.innerText).toBe("Load");
+      expect($log.warn).toHaveBeenCalled();
+    });
+
+    it("should replace target innerHTML (default) on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-target="#found">Load</button><div id="found"></div>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.lastChild.innerHTML).toBe("Hello");
+    });
+
+    it("should replace textcontent on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-swap="textContent" data-target="#found">Load</button><div id="found"></div>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.lastChild.innerText).toBe("Hello");
+    });
+
+    it("should replace beforebegin on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/div" data-swap="beforebegin" data-target="#found">Load</button><div id="found"></div>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const found = el.querySelector("#found");
+      // The sibling before #found should contain "Hello"
+      const prevSibling = found.previousSibling;
+      expect(prevSibling.textContent).toBe("Hello");
+      expect(found.textContent).toBe(""); // found itself unchanged
+    });
+
+    it("should replace beforeend on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/div" data-swap="beforeend" data-target="#found">Load</button><div id="found"></div>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const found = el.querySelector("#found");
+      expect(found.textContent).toBe("Hello");
+    });
+
+    it("should insert afterbegin on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/div" data-swap="afterbegin" data-target="#found">Load</button><div id="found"><div>World</div></div>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const found = el.querySelector("#found");
+      expect(found.textContent).toBe("HelloWorld");
+    });
+
+    it("should insert afterend on click", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/div" data-swap="afterend" data-target="#found">Load</button><div id="found"><div>World</div></div>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const found = el.querySelector("#found");
+      const next = found.nextSibling;
+      expect(el.lastChild.textContent).toBe("Hello");
+    });
+  });
+});

package/src/directive/http/http.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>AngularTS Test Runner</title>
+
+    <link rel="shortcut icon" type="image/png" href="/images/favicon.ico" />
+    <link rel="stylesheet" href="/jasmine/jasmine.css" />
+    <link rel="stylesheet" href="/public/jasmine-helper.css" />
+    <script src="/jasmine/jasmine.js"></script>
+    <script src="/jasmine/jasmine-html.js"></script>
+    <script src="/jasmine/boot0.js"></script>
+    <script src="/jasmine/boot1.js"></script>
+    <script type="module" src="/src/directive/http/get.spec.js"></script>
+    <script type="module" src="/src/directive/http/post.spec.js"></script>
+    <script type="module" src="/src/directive/http/put.spec.js"></script>
+    <script type="module" src="/src/directive/http/delete.spec.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/src/directive/http/http.js

@@ -0,0 +1,245 @@
+import { isObject } from "../../shared/utils.js";
+
+/**
+ * @param {"get" | "delete" | "post" | "put"} method
+ * @returns {import('../../interface.ts').DirectiveFactory}
+ */
+function defineDirective(method) {
+  const attrName = "ng" + method.charAt(0).toUpperCase() + method.slice(1);
+  const directive = createHttpDirective(method, attrName);
+  directive["$inject"] = ["$http", "$compile", "$log"];
+  return directive;
+}
+
+export const ngGetDirective = defineDirective("get");
+export const ngDeleteDirective = defineDirective("delete");
+export const ngPostDirective = defineDirective("post");
+export const ngPutDirective = defineDirective("put");
+
+/**
+ * @typedef {"click" | "change" | "submit"} EventType
+ */
+
+/**
+ * Selects DOM event to listen for based on the element type.
+ *
+ * @param {Element} element - The DOM element to inspect.
+ * @returns {EventType} The name of the event to listen for.
+ */
+export function getEventNameForElement(element) {
+  const tag = element.tagName.toLowerCase();
+  if (["input", "textarea", "select"].includes(tag)) {
+    return "change";
+  } else if (tag === "form") {
+    return "submit";
+  }
+  return "click";
+}
+
+/**
+ * Handles DOM manipulation based on a swap strategy and server-rendered HTML.
+ *
+ * @param {string} html - The HTML string returned from the server.
+ * @param {import("../../interface.ts").SwapInsertPosition} swap
+ * @param {Element} target - The target DOM element to apply the swap to.
+ * @param {import('../../core/scope/scope.js').Scope} scope
+ * @param {import('../../core/compile/compile.js').CompileFn} $compile
+ */
+export function handleSwapResponse(html, swap, target, scope, $compile) {
+  let nodes = [];
+  if (!["textcontent", "delete", "none"].includes(swap)) {
+    if (!html) {
+      return;
+    }
+
+    if (isObject(html)) {
+      scope.$merge(html);
+      return;
+    }
+
+    const compiled = $compile(html)(scope);
+    nodes =
+      compiled instanceof DocumentFragment
+        ? Array.from(compiled.childNodes)
+        : [compiled];
+  }
+
+  switch (swap) {
+    case "innerHTML":
+      target.replaceChildren(...nodes);
+      break;
+
+    case "outerHTML": {
+      const parent = target.parentNode;
+      if (!parent) return;
+      const frag = document.createDocumentFragment();
+      nodes.forEach((n) => frag.appendChild(n));
+      parent.replaceChild(frag, target);
+      break;
+    }
+
+    case "textContent":
+      target.textContent = html;
+      break;
+
+    case "beforebegin":
+      nodes.forEach((node) => target.parentNode.insertBefore(node, target));
+      break;
+
+    case "afterbegin":
+      nodes
+        .slice()
+        .reverse()
+        .forEach((node) => target.insertBefore(node, target.firstChild));
+      break;
+
+    case "beforeend":
+      nodes.forEach((node) => target.appendChild(node));
+      break;
+
+    case "afterend":
+      nodes
+        .slice()
+        .reverse()
+        .forEach((node) =>
+          target.parentNode.insertBefore(node, target.nextSibling),
+        );
+      break;
+
+    case "delete":
+      target.remove();
+      break;
+
+    case "none":
+      break;
+
+    default:
+      target.replaceChildren(...nodes);
+      break;
+  }
+}
+
+/**
+ * Creates an HTTP directive factory that supports GET, DELETE, POST, PUT.
+ *
+ * @param {"get" | "delete" | "post" | "put"} method - HTTP method to use.
+ * @param {string} attrName - Attribute name containing the URL.
+ * @returns {import('../../interface.ts').DirectiveFactory}
+ */
+export function createHttpDirective(method, attrName) {
+  /**
+   * @param {import("interface.ts").HttpService} $http
+   * @param {import("../../core/compile/compile.js").CompileFn} $compile
+   * @param {import("../../services/log/interface.ts").LogService} $log
+   * @returns {import('../../interface.ts').Directive}
+   */
+  return function ($http, $compile, $log) {
+    /**
+     * Collects form data from the element or its associated form.
+     *
+     * @param {HTMLElement} element
+     * @returns {Object<string, any>}
+     */
+    function collectFormData(element) {
+      /** @type {HTMLFormElement | null} */
+      let form = null;
+
+      const tag = element.tagName.toLowerCase();
+
+      if (tag === "form") {
+        /** @type {HTMLFormElement} */
+        form = /** @type {HTMLFormElement} */ (element);
+      } else if ("form" in element && element.form) {
+        /** @type {HTMLFormElement} */
+        form = /** @type {HTMLFormElement} */ (element.form);
+      } else if (element.hasAttribute("form")) {
+        const formId = element.getAttribute("form");
+        if (formId) {
+          /** @type {HTMLElement | null} */
+          const maybeForm = document.getElementById(formId);
+          if (maybeForm && maybeForm.tagName.toLowerCase() === "form") {
+            form = /** @type {HTMLFormElement} */ (maybeForm);
+          }
+        }
+      }
+
+      if (!form) {
+        if (
+          "name" in element &&
+          typeof element.name === "string" &&
+          element.name.length > 0
+        ) {
+          if (
+            element instanceof HTMLInputElement ||
+            element instanceof HTMLTextAreaElement ||
+            element instanceof HTMLSelectElement
+          ) {
+            const key = element.name;
+            const value = element.value;
+            return { [key]: value };
+          }
+        }
+        return {};
+      }
+
+      const formData = new FormData(form);
+      const data = {};
+      formData.forEach((value, key) => {
+        data[key] = value;
+      });
+      return data;
+    }
+
+    return {
+      restrict: "A",
+      terminal: true,
+      link(scope, element, attrs) {
+        /** @type {EventType} */
+        const eventName = getEventNameForElement(element);
+        const tag = element.tagName.toLowerCase();
+
+        element.addEventListener(eventName, (event) => {
+          if (/** @type {HTMLButtonElement} */ (element).disabled) return;
+          if (tag === "form") event.preventDefault();
+
+          const swap = element.dataset.swap || "innerHTML";
+          const targetSelector = element.dataset.target;
+          const target = targetSelector
+            ? document.querySelector(targetSelector)
+            : element;
+
+          if (!target) {
+            $log.warn(`${attrName}: target "${targetSelector}" not found`);
+            return;
+          }
+
+          const url = attrs[attrName];
+          if (!url) {
+            $log.warn(`${attrName}: no URL specified`);
+            return;
+          }
+
+          const handler = (res) => {
+            const html = res.data;
+            handleSwapResponse(
+              html,
+              /** @type {import("../../interface.ts").SwapInsertPosition} */ (
+                swap
+              ),
+              target,
+              scope,
+              $compile,
+            );
+          };
+
+          if (method === "post" || method === "put") {
+            const data = collectFormData(element);
+            $http[method](url, data).then(handler).catch(handler);
+          } else {
+            $http[method](url).then(handler).catch(handler);
+          }
+        });
+      },
+    };
+  };
+}

package/src/directive/http/http.test.js

@@ -0,0 +1,12 @@
+import { test, expect } from "@playwright/test";
+
+const TEST_URL = "src/directive/http/http.html";
+
+test("unit tests contain no errors", async ({ page }) => {
+  await page.goto(TEST_URL);
+  await page.content();
+  await page.waitForTimeout(3000);
+  await expect(page.locator(".jasmine-overall-result")).toHaveText(
+    /0 failures/,
+  );
+});

package/src/directive/http/post-example.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>AngularTS</title>
+    <link rel="shortcut icon" type="image/png" href="images/favicon.ico" />
+    <script type="module" src="/src/index.js"></script>
+  </head>
+  <body ng-app>
+    InnerHTML
+    <form ng-post="/mock/posthtml">
+      <input name="name" />
+      <button type="submit">Test</button>
+    </form>
+
+    Target
+    <form ng-post="/mock/posthtml" data-target="#output">
+      <input name="name" />
+      <button type="submit">Test</button>
+    </form>
+    <div id="output"></div>
+
+    Target
+    <form ng-post="/mock/posthtml" data-target="#output">
+      <input name="name" />
+      <button type="submit">Test</button>
+    </form>
+    <div id="output"></div>
+  </body>
+</html>

package/src/directive/http/post.spec.js

@@ -0,0 +1,24 @@
+import { Angular } from "../../loader.js";
+// import { browserTrigger, wait } from "../../shared/test-utils.js";
+
+describe("ngPost", () => {
+  let $compile, $rootScope, $httpBackend, el;
+
+  beforeEach(() => {
+    el = document.getElementById("app");
+    el.innerHTML = "";
+    let angular = new Angular();
+    angular.module("default", []);
+    angular
+      .bootstrap(el, ["default"])
+      .invoke((_$compile_, _$rootScope_, _$httpBackend_) => {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $httpBackend = _$httpBackend_;
+      });
+  });
+
+  it("should pass", () => {
+    expect(true).toBeTrue();
+  });
+});

package/src/directive/http/put.spec.js

@@ -0,0 +1,24 @@
+import { Angular } from "../../loader.js";
+// import { browserTrigger, wait } from "../../shared/test-utils.js";
+
+describe("ngPut", () => {
+  let $compile, $rootScope, $httpBackend, el;
+
+  beforeEach(() => {
+    el = document.getElementById("app");
+    el.innerHTML = "";
+    let angular = new Angular();
+    angular.module("default", []);
+    angular
+      .bootstrap(el, ["default"])
+      .invoke((_$compile_, _$rootScope_, _$httpBackend_) => {
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $httpBackend = _$httpBackend_;
+      });
+  });
+
+  it("should pass", () => {
+    expect(true).toBeTrue();
+  });
+});

package/src/directive/if/if.js

@@ -3,8 +3,6 @@ import { hasAnimate } from "../../shared/utils.js";
 
 ngIfDirective.$inject = ["$animate"];
 /**
- *
- * TODO // Add type for animate service
  * @param {*}  $animate
  * @returns {import("../../interface.ts").Directive}
  */

package/src/directive/if/if.spec.js

@@ -1,5 +1,6 @@
 import {
   createElementFromHTML,
+  dealoc,
   getCacheData,
   setCacheData,
 } from "../../shared/dom.js";
@@ -17,6 +18,7 @@ describe("ngIf", () => {
     let angular;
 
     beforeEach(function () {
+      dealoc(document.getElementById("app"));
       angular = window.angular = new Angular();
       window.angular.module("test", []);
       injector = window.angular.bootstrap(document.getElementById("app"), [

package/src/directive/include/include.spec.js

@@ -18,6 +18,7 @@ describe("ngInclude", () => {
 
     beforeEach(() => {
       errorLog = [];
+      dealoc(document.getElementById("app"));
       delete window.angular;
       angular = window.angular = new Angular();
       module = angular
@@ -100,7 +101,6 @@ describe("ngInclude", () => {
       $rootScope = injector.get("$rootScope");
       $rootScope.url = "http://example.com/myUrl";
       await wait(100);
-      debugger;
       expect(errorLog[0]).toMatch(/insecurl/);
     });
 

package/src/directive/input/input.spec.js

@@ -14,6 +14,7 @@ describe("input", () => {
   let error = [];
 
   beforeEach(() => {
+    dealoc(document.getElementById("app"));
     error = [];
     window.angular = new Angular();
     window.angular

package/src/directive/model/model.spec.js

@@ -17,6 +17,7 @@ describe("ngModel", () => {
 
   beforeEach(() => {
     errors = [];
+    dealoc(document.getElementById("app"));
     window.angular = new Angular();
     window.angular
       .module("myModule", ["ng"])
@@ -1554,6 +1555,7 @@ describe("ngModel", () => {
     let module;
 
     beforeEach(() => {
+      dealoc(document.getElementById("app"));
       window.angular = new Angular();
       module = window.angular
         .module("myModule", [])
@@ -1900,6 +1902,7 @@ describe("data-change", () => {
   let el = document.getElementById("app");
 
   beforeEach(() => {
+    dealoc(document.getElementById("app"));
     window.angular = new Angular();
   });
 

package/src/directive/model-options/model-options.spec.js

@@ -1,9 +1,5 @@
 import { defaultModelOptions } from "./model-options.js";
-import {
-  createElementFromHTML,
-  dealoc,
-  getController,
-} from "../../shared/dom.js";
+import { dealoc, getController } from "../../shared/dom.js";
 import { Angular } from "../../loader.js";
 import { bootstrap, wait } from "../../shared/test-utils.js";
 
@@ -37,6 +33,7 @@ describe("ngModelOptions", () => {
       let injector;
 
       beforeEach(() => {
+        dealoc(document.getElementById("app"));
         window.angular = new Angular();
         window.angular
           .module("myModule", ["ng"])
@@ -1005,6 +1002,7 @@ describe("ngModelOptions", () => {
       let inputElm, module, $rootScope, angular;
 
       beforeEach(() => {
+        dealoc(document.getElementById("app"));
         window.angular = angular = new Angular();
         module = angular.module("myModule", []).directive("foo", () => ({
           replace: true,