@angular-wave/angular.ts 0.7.7 → 0.8.0

package/src/directive/bind/bind.js

@@ -51,6 +51,7 @@ export function ngBindTemplateDirective() {
 
 ngBindHtmlDirective.$inject = [$injectTokens.$parse];
 /**
+ * @param {import('../../core/parse/interface.ts').ParseService} $parse
  * @returns {import('../../interface.ts').Directive}
  */
 export function ngBindHtmlDirective($parse) {

package/src/directive/bind/bind.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { dealoc } from "../../shared/dom.js";
 import { wait } from "../../shared/test-utils.js";
 

package/src/directive/bind/bind.test.js

@@ -5,6 +5,7 @@ const TEST_URL = "src/directive/bind/bind.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/channel/channel.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { EventBus } from "../../services/pubsub/pubsub.js";
 import { dealoc } from "../../shared/dom.js";
 import { wait } from "../../shared/test-utils.js";

package/src/directive/channel/channel.test.js

@@ -3,6 +3,7 @@ import { test, expect } from "@playwright/test";
 test("unit observer tests contain no errors", async ({ page }) => {
   await page.goto("src/directive/channel/channel.html");
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/class/class.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { dealoc } from "../../shared/dom.js";
 import { wait } from "../../shared/test-utils.js";
 

package/src/directive/class/class.test.js

@@ -5,6 +5,7 @@ const TEST_URL = "src/directive/class/class.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/cloak/cloak.spec.js

@@ -1,5 +1,5 @@
 import { createElementFromHTML, dealoc } from "../../shared/dom.js";
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { createInjector } from "../../core/di/injector.js";
 
 describe("ngCloak", () => {

package/src/directive/cloak/cloak.test.js

@@ -5,6 +5,7 @@ const TEST_URL = "src/directive/cloak/cloak.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/controller/controller.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { createInjector } from "../../core/di/injector.js";
 import { dealoc, createElementFromHTML } from "../../shared/dom.js";
 import { bind } from "../../shared/utils.js";

package/src/directive/controller/controller.test.js

@@ -5,6 +5,7 @@ const TEST_URL = "src/directive/controller/controller.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/events/click.spec.js

@@ -1,5 +1,5 @@
 import { dealoc } from "../../shared/dom.js";
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { createInjector } from "../../core/di/injector.js";
 
 describe("ngClick", () => {

package/src/directive/events/event.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { createInjector } from "../../core/di/injector.js";
 import { dealoc } from "../../shared/dom.js";
 import { browserTrigger, wait } from "../../shared/test-utils.js";

package/src/directive/events/events.js

@@ -4,6 +4,10 @@ import { directiveNormalize } from "../../shared/utils.js";
  * A collection of directives that allows creation of custom event handlers that are defined as
  * AngularTS expressions and are compiled and executed within the current scope.
  */
+
+/**
+ * @type {Record<string, import("../../interface.js").DirectiveFactory>}
+ */
 export const ngEventDirectives = {};
 
 "click copy cut dblclick focus blur keydown keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup paste submit touchstart touchend touchmove"
@@ -15,7 +19,7 @@ export const ngEventDirectives = {};
       "$exceptionHandler",
       /**
        * @param {import("../../core/parse/interface.ts").ParseService} $parse
-       * @param {import('../../core/exception-handler.js').ErrorHandler} $exceptionHandler
+       * @param {import('../../services/exception/exception-handler.js').ErrorHandler} $exceptionHandler
        * @returns
        */
       ($parse, $exceptionHandler) => {
@@ -32,7 +36,7 @@ export const ngEventDirectives = {};
 /**
  *
  * @param {import("../../core/parse/interface.ts").ParseService} $parse
- * @param {import('../../core/exception-handler.js').ErrorHandler} $exceptionHandler
+ * @param {import('../../services/exception/exception-handler.js').ErrorHandler} $exceptionHandler
  * @param {string} directiveName
  * @param {string} eventName
  * @returns {import("../../interface.ts").Directive}

package/src/directive/events/events.test.js

@@ -5,6 +5,7 @@ const TEST_URL = "src/directive/events/events.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/form/form.js

@@ -96,7 +96,13 @@ const SUBMITTED_CLASS = "ng-submitted";
 
 export class FormController {
   static $nonscope = true;
-  static $inject = ["$element", "$attrs", "$scope", "$animate", "$interpolate"];
+  /* @ignore */ static $inject = [
+    "$element",
+    "$attrs",
+    "$scope",
+    "$animate",
+    "$interpolate",
+  ];
 
   /**
    * @param {Element} $element
@@ -560,7 +566,7 @@ const formDirectiveFactory = function (isNgForm) {
   return [
     "$parse",
     function ($parse) {
-      const formDirective = {
+      return {
         name: "form",
         restrict: isNgForm ? "EA" : "E",
         require: ["form", "^^?form"], // first is the form's own ctrl, second is an optional parent form
@@ -641,9 +647,6 @@ const formDirectiveFactory = function (isNgForm) {
           };
         },
       };
-
-      return formDirective;
-
       function getSetter(expression) {
         if (expression === "") {
           // create an assignable expression, so forms with an empty name can be renamed later

package/src/directive/form/form.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import {
   createElementFromHTML,
   dealoc,

package/src/directive/form/form.test.js

@@ -5,6 +5,7 @@ const TEST_URL = "src/directive/form/form.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(1000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

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

@@ -1,4 +1,5 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
+import { dealoc } from "../../shared/dom.js";
 // import { browserTrigger, wait } from "../../shared/test-utils.js";
 
 describe("ngDelete", () => {
@@ -6,6 +7,7 @@ describe("ngDelete", () => {
 
   beforeEach(() => {
     el = document.getElementById("app");
+    dealoc(el);
     el.innerHTML = "";
     let angular = new Angular();
     angular.module("default", []);

package/src/directive/http/form-test.html

@@ -0,0 +1,18 @@
+<!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>
+    <form
+      ng-post="/mock/urlencoded"
+      enctype="application/x-www-form-urlencoded"
+    >
+      <input type="text" name="name" />
+      <button type="submit">Add</button>
+    </form>
+  </body>
+</html>

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

@@ -1,14 +1,32 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { browserTrigger, wait } from "../../shared/test-utils.js";
+import { dealoc } from "../../shared/dom.js";
 
-describe("ngGet", () => {
+describe("ng-get", () => {
   let $compile, $rootScope, $log, el;
 
   beforeEach(() => {
     el = document.getElementById("app");
+    dealoc(el);
     el.innerHTML = "";
     let angular = new Angular();
-    angular.module("default", []);
+    angular.module("default", []).config([
+      "$stateProvider",
+      "$locationProvider",
+      ($stateProvider) => {
+        $stateProvider
+          .state({
+            name: "success",
+            url: "/success",
+            template: `success`,
+          })
+          .state({
+            name: "error",
+            url: "/error",
+            template: `error`,
+          });
+      },
+    ]);
     angular
       .bootstrap(el, ["default"])
       .invoke((_$compile_, _$rootScope_, _$log_) => {
@@ -37,6 +55,16 @@ describe("ngGet", () => {
     expect(el.firstChild.innerHTML).toBe("<div>Hello</div>");
   });
 
+  it("should compile innerHTML", async () => {
+    const scope = $rootScope.$new();
+    el.innerHTML = '<button ng-get="/mock/divexpr">Load</button>';
+    scope.expr = "World";
+    $compile(el)(scope);
+    browserTrigger(el.querySelector("button"), "click");
+    await wait(100);
+    expect(el.innerText).toBe("World");
+  });
+
   it("should replace innerHTML on error", async () => {
     const scope = $rootScope.$new();
     el.innerHTML = '<button ng-get="/mock/422">Load</button>';
@@ -55,7 +83,7 @@ describe("ngGet", () => {
     expect(el.innerText).toBe("Load");
   });
 
-  it("should replace innerHTML on statuc error without a body", async () => {
+  it("should replace innerHTML on status error without a body", async () => {
     const scope = $rootScope.$new();
     el.innerHTML = '<button ng-get="/mock/401">Load</button>';
     $compile(el)(scope);
@@ -64,6 +92,111 @@ describe("ngGet", () => {
     expect(el.innerText).toBe("Unauthorized");
   });
 
+  describe("data-trigger", () => {
+    it("should not trigger request on click if element has trigger attribute", async () => {
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-trigger="mouseover">Load</button>';
+      const scope = $rootScope.$new();
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.innerText).toBe("Load");
+    });
+
+    it("should trigger request on new event name if element has trigger attribute", async () => {
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-trigger="mouseover">Load</button>';
+      const scope = $rootScope.$new();
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "mouseover");
+      await wait(100);
+      expect(el.innerText).toBe("Hello");
+    });
+  });
+
+  describe("data-latch", () => {
+    it("should trigger request on latch change", async () => {
+      el.innerHTML =
+        '<button ng-get="/mock/now" data-latch="{{ latch }}">Load</button>';
+      const scope = $rootScope.$new();
+      $compile(el)(scope);
+      await wait(100);
+      expect(el.innerText).toBe("Load");
+      scope.latch = true;
+      await wait(100);
+      expect(el.innerText).not.toBe("Load");
+      const firstRes = parseInt(el.innerText);
+      expect(firstRes).toBeLessThan(Date.now());
+
+      scope.latch = !scope.latch;
+      await wait(100);
+      const secondRes = parseInt(el.innerText);
+      expect(secondRes).toBeGreaterThan(firstRes);
+
+      scope.latch = !scope.latch;
+      await wait(100);
+      const thirdRes = parseInt(el.innerText);
+      expect(thirdRes).toBeGreaterThan(secondRes);
+    });
+
+    it("should still work with events with latch change", async () => {
+      el.innerHTML =
+        '<button ng-get="/mock/now" data-latch="{{ latch }}">Load</button>';
+      const scope = $rootScope.$new();
+      $compile(el)(scope);
+      await wait(100);
+      expect(el.innerText).toBe("Load");
+      scope.latch = true;
+      await wait(100);
+      expect(el.innerText).not.toBe("Load");
+      const firstRes = parseInt(el.innerText);
+      expect(firstRes).toBeLessThan(Date.now());
+
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const secondRes = parseInt(el.innerText);
+      expect(secondRes).toBeGreaterThan(firstRes);
+    });
+
+    it("should still work with custom events with latch change", async () => {
+      el.innerHTML =
+        '<button ng-get="/mock/now" data-latch="{{ latch }}" data-trigger="mouseover">Load</button>';
+      const scope = $rootScope.$new();
+      $compile(el)(scope);
+      await wait(100);
+      expect(el.innerText).toBe("Load");
+      scope.latch = true;
+      await wait(100);
+      expect(el.innerText).not.toBe("Load");
+      const firstRes = parseInt(el.innerText);
+      expect(firstRes).toBeLessThan(Date.now());
+
+      browserTrigger(el.querySelector("button"), "mouseover");
+      await wait(100);
+      const secondRes = parseInt(el.innerText);
+      expect(secondRes).toBeGreaterThan(firstRes);
+    });
+
+    it("should still work with ng-event directives with latch change", async () => {
+      el.innerHTML =
+        '<button ng-get="/mock/now" data-latch="{{ latch }}" ng-mouseover="latch = !latch">Load</button>';
+      const scope = $rootScope.$new();
+      $compile(el)(scope);
+      await wait(100);
+      expect(el.innerText).toBe("Load");
+      browserTrigger(el.querySelector("button"), "mouseover");
+      await wait(100);
+      expect(el.innerText).not.toBe("Load");
+      const firstRes = parseInt(el.innerText);
+      expect(firstRes).toBeLessThan(Date.now());
+
+      browserTrigger(el.querySelector("button"), "mouseover");
+      await wait(100);
+      const secondRes = parseInt(el.innerText);
+      expect(secondRes).toBeGreaterThan(firstRes);
+    });
+  });
+
   describe("data-swap", () => {
     it("should not change anything if swap is 'none'", async () => {
       const scope = $rootScope.$new();
@@ -208,4 +341,148 @@ describe("ngGet", () => {
       expect(el.lastChild.textContent).toBe("Hello");
     });
   });
+
+  describe("data-delay", () => {
+    it("should accept delay as a data attribute", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-delay="1000">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      expect(el.innerText).toBe("Load");
+
+      await wait(1000);
+      expect(el.innerText).toBe("Hello");
+    });
+  });
+
+  describe("data-throttle", () => {
+    it("should accept throttle as a data attribute", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/now" data-throttle="1000">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const firstRes = parseInt(el.innerText);
+      expect(firstRes).toBeLessThan(Date.now());
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const secondRes = parseInt(el.innerText);
+      expect(secondRes).toBe(firstRes);
+
+      await wait(900);
+      // should release the throttle
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(100);
+      const thirdRes = parseInt(el.innerText);
+      expect(thirdRes).toBeGreaterThan(firstRes);
+    });
+  });
+
+  describe("data-interval", () => {
+    it("should accept delay as a data attribute and should stop on $destroy", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/now" data-interval="100">Load</button>';
+      $compile(el)(scope);
+
+      await wait(200);
+      await wait(200);
+      const firstRes = parseInt(el.innerText);
+      expect(firstRes).toBeLessThan(Date.now());
+      await wait(200);
+      await wait(200);
+      const secondRes = parseInt(el.innerText);
+      expect(secondRes).toBeGreaterThan(firstRes);
+      await wait(200);
+      await wait(200);
+      const thirdRes = parseInt(el.innerText);
+      expect(thirdRes).toBeGreaterThan(secondRes);
+
+      scope.$broadcast("$destroy");
+
+      await wait(200);
+      await wait(200);
+      const finalRes = parseInt(el.innerText);
+
+      await wait(1000);
+      await wait(200);
+      expect(parseInt(el.innerText)).toEqual(finalRes);
+    });
+  });
+
+  describe("data-loading", () => {
+    it("should update loading data attribute", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML = '<button ng-get="/mock/now" data-loading>Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      expect(el.querySelector("button").dataset.loading).toEqual("true");
+      await wait(200);
+      expect(el.querySelector("button").dataset.loading).toEqual("false");
+    });
+  });
+
+  describe("data-loading-class", () => {
+    it("should update class from data-loading-class attribute", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/now" data-loading-class="red">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      expect(el.querySelector("button").classList.contains("red")).toBeTrue();
+      await wait(200);
+      expect(el.querySelector("button").classList.contains("red")).toBeFalse();
+    });
+  });
+
+  describe("data-success", () => {
+    it("should evaluate expression passing result", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-success="res = $res">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(200);
+      expect(scope.res).toEqual("Hello");
+    });
+  });
+
+  describe("data-state-success", () => {
+    it("should call stateService with success state", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/hello" data-state-success="success">Load</button><ng-view id="view"></ng-view>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(200);
+      expect(document.getElementById("view").innerHTML).toEqual("success");
+    });
+  });
+
+  describe("data-state-error", () => {
+    it("should call stateService with success state", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/422" data-state-success="success" data-state-error="error">Load</button><ng-view id="view"></ng-view>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(200);
+      expect(document.getElementById("view").innerHTML).toEqual("error");
+    });
+  });
+
+  describe("data-error", () => {
+    it("should evaluate expression passing result", async () => {
+      const scope = $rootScope.$new();
+      el.innerHTML =
+        '<button ng-get="/mock/422" data-error="res = $res">Load</button>';
+      $compile(el)(scope);
+      browserTrigger(el.querySelector("button"), "click");
+      await wait(200);
+      expect(scope.res).toEqual("Invalid data");
+    });
+  });
 });