@angular-wave/angular.ts 0.4.2 → 0.4.4

package/src/directive/attrs/element-style.spec.js

@@ -25,8 +25,6 @@ describe("style", () => {
       '<style type="text/css">.header{font-size:1.5em; h3{font-size:1.5em}}</style>',
     );
     $compile(element)($rootScope);
-    $rootScope.$digest();
-
     expect(element[0].innerHTML).toBe(
       ".header{font-size:1.5em; h3{font-size:1.5em}}",
     );
@@ -37,8 +35,6 @@ describe("style", () => {
       '<style type="text/css">.some-container{ width: {{elementWidth}}px; }</style>',
     );
     $compile(element)($rootScope);
-    $rootScope.$digest();
-
     expect(element[0].innerHTML).toBe(".some-container{ width: px; }");
 
     $rootScope.$apply(() => {
@@ -53,8 +49,6 @@ describe("style", () => {
       '<style type="text/css">.header{ h3 { font-size: {{fontSize}}em }}</style>',
     );
     $compile(element)($rootScope);
-    $rootScope.$digest();
-
     expect(element[0].innerHTML).toBe(".header{ h3 { font-size: em }}");
 
     $rootScope.$apply(() => {
@@ -69,8 +63,6 @@ describe("style", () => {
       '<style type="text/css">.header{ h3 { font-size: {{fontSize}}{{unit}} }}</style>',
     );
     $compile(element)($rootScope);
-    $rootScope.$digest();
-
     expect(element[0].innerHTML).toBe(".header{ h3 { font-size:  }}");
 
     $rootScope.$apply(() => {

package/src/{core/scope/scope.test.js → directive/attrs/element-style.test.js}

@@ -1,11 +1,10 @@
 import { test, expect } from "@playwright/test";
 
-const TEST_URL = "src/core/scope/scope.html";
+const TEST_URL = "src/directive/attrs/element-style.html";
 
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
-  await page.waitForTimeout(100);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/directive/attrs/src.spec.js

@@ -24,7 +24,6 @@ describe("ngSrc", () => {
     it("should not result empty string in img src", () => {
       $scope.image = {};
       element = $compile('<img ng-src="{{image.url}}">')($scope);
-      $scope.$digest();
       expect(element.attr("src")).not.toBe("");
       expect(element.attr("src")).toBeUndefined();
     });
@@ -32,20 +31,17 @@ describe("ngSrc", () => {
     it("should sanitize interpolated url", () => {
       $scope.imageUrl = "javascript:alert(1);";
       element = $compile('<img ng-src="{{imageUrl}}">')($scope);
-      $scope.$digest();
       expect(element.attr("src")).toBe("unsafe:javascript:alert(1);");
     });
 
     it("should sanitize non-interpolated url", () => {
       element = $compile('<img ng-src="javascript:alert(1);">')($scope);
-      $scope.$digest();
       expect(element.attr("src")).toBe("unsafe:javascript:alert(1);");
     });
 
     it("should interpolate the expression and bind to src with raw same-domain value", () => {
       element = $compile('<img ng-src="{{id}}"></img>')($scope);
 
-      $scope.$digest();
       expect(element.attr("src")).toBeUndefined();
 
       $scope.$apply(() => {
@@ -67,13 +63,11 @@ describe("ngSrc", () => {
       $scope.imageUrl = "dynamic";
       element = $compile('<img ng-src="{{imageUrl}}" src="static">')($scope);
       expect(element.attr("src")).toBe("static");
-      $scope.$digest();
       expect(element.attr("src")).toBe("dynamic");
       dealoc(element);
 
       element = $compile('<img src="static" ng-src="{{imageUrl}}">')($scope);
       expect(element.attr("src")).toBe("static");
-      $scope.$digest();
       expect(element.attr("src")).toBe("dynamic");
     });
   });
@@ -135,7 +129,6 @@ describe("ngSrc", () => {
     it("should interpolate the expression and bind to src with a trusted value", () => {
       element = $compile('<iframe ng-src="{{id}}"></iframe>')($scope);
 
-      $scope.$digest();
       expect(element.attr("src")).toBeUndefined();
 
       $scope.$apply(() => {

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

@@ -35,20 +35,16 @@ describe("ng-bind", () => {
       element = $compile('<div ng-bind="a"></div>')($rootScope);
       expect(element.text()).toEqual("");
       $rootScope.a = "misko";
-      $rootScope.$digest();
       expect(element.text()).toEqual("misko");
     });
 
     it("should set text to blank if undefined", () => {
       element = $compile('<div ng-bind="a"></div>')($rootScope);
       $rootScope.a = "misko";
-      $rootScope.$digest();
       expect(element.text()).toEqual("misko");
       $rootScope.a = undefined;
-      $rootScope.$digest();
       expect(element.text()).toEqual("");
       $rootScope.a = null;
-      $rootScope.$digest();
       expect(element.text()).toEqual("");
     });
 
@@ -61,7 +57,6 @@ describe("ng-bind", () => {
           '<span ng-bind="false"></span>' +
           "</div>",
       )($rootScope);
-      $rootScope.$digest();
       expect(element.text()).toEqual("-0false");
     });
 
@@ -74,7 +69,6 @@ describe("ng-bind", () => {
         () => {
           $rootScope.value = prop[0];
           element = $compile('<div ng-bind="value"></div>')($rootScope);
-          $rootScope.$digest();
           expect(element.text()).toEqual(prop[1]);
         };
       });
@@ -87,21 +81,18 @@ describe("ng-bind", () => {
         },
       };
       element = $compile('<div ng-bind="value"></div>')($rootScope);
-      $rootScope.$digest();
       expect(element.text()).toEqual("foo");
     });
 
     it("should NOT use toString on array objects", () => {
       $rootScope.value = [];
       element = $compile('<div ng-bind="value"></div>')($rootScope);
-      $rootScope.$digest();
       expect(element.text()).toEqual("[]");
     });
 
     it("should NOT use toString on Date objects", () => {
       $rootScope.value = new Date(2014, 10, 10, 0, 0, 0);
       element = $compile('<div ng-bind="value"></div>')($rootScope);
-      $rootScope.$digest();
       expect(element.text()).toBe(JSON.stringify($rootScope.value));
       expect(element.text()).not.toEqual($rootScope.value.toString());
     });
@@ -110,11 +101,9 @@ describe("ng-bind", () => {
       element = $compile('<div ng-bind="::a"></div>')($rootScope);
       $rootScope.a = "lucas";
       expect($rootScope.$$watchers.length).toEqual(1);
-      $rootScope.$digest();
       expect(element.text()).toEqual("lucas");
       expect($rootScope.$$watchers.length).toEqual(0);
       $rootScope.a = undefined;
-      $rootScope.$digest();
       expect(element.text()).toEqual("lucas");
     });
 
@@ -126,10 +115,8 @@ describe("ng-bind", () => {
         }
       });
       $rootScope.a = "foo";
-      $rootScope.$digest();
       expect(element.text()).toEqual("bar");
       $rootScope.a = undefined;
-      $rootScope.$digest();
       expect(element.text()).toEqual("bar");
     });
 
@@ -141,13 +128,10 @@ describe("ng-bind", () => {
         }
       });
       $rootScope.a = "foo";
-      $rootScope.$digest();
       expect(element.text()).toEqual("");
       $rootScope.a = "bar";
-      $rootScope.$digest();
       expect(element.text()).toEqual("bar");
       $rootScope.a = "man";
-      $rootScope.$digest();
       expect(element.text()).toEqual("bar");
     });
   });
@@ -158,7 +142,6 @@ describe("ng-bind", () => {
         $rootScope,
       );
       $rootScope.name = "Misko";
-      $rootScope.$digest();
       expect(element.text()).toEqual("Hello Misko!");
     });
 
@@ -168,12 +151,10 @@ describe("ng-bind", () => {
       )($rootScope);
       $rootScope.name = "Misko";
       expect($rootScope.$$watchers.length).toEqual(2);
-      $rootScope.$digest();
       expect(element.text()).toEqual(" Misko!");
       expect($rootScope.$$watchers.length).toEqual(1);
       $rootScope.hello = "Hello";
       $rootScope.name = "Lucas";
-      $rootScope.$digest();
       expect(element.text()).toEqual("Hello Misko!");
       expect($rootScope.$$watchers.length).toEqual(0);
     });
@@ -182,8 +163,6 @@ describe("ng-bind", () => {
       element = $compile('<pre>{{ {key:"value", $$key:"hide"}  }}</pre>')(
         $rootScope,
       );
-      $rootScope.$digest();
-
       expect(JSON.parse(element.text())).toEqual({ key: "value" });
     });
   });
@@ -192,7 +171,6 @@ describe("ng-bind", () => {
     it("should complain about accidental use of interpolation", () => {
       expect(() => {
         $compile('<div ng-bind-html="{{myHtml}}"></div>');
-        $rootScope.$digest();
       }).toThrowError(/syntax/);
     });
 
@@ -225,17 +203,14 @@ describe("ng-bind", () => {
       it("should set html", () => {
         element = $compile('<div ng-bind-html="html"></div>')($rootScope);
         $rootScope.html = '<div onclick="">hello</div>';
-        $rootScope.$digest();
         expect(element.html()).toEqual('<div onclick="">hello</div>');
       });
 
       it("should update html", () => {
         element = $compile('<div ng-bind-html="html"></div>')($rootScope);
         $rootScope.html = "hello";
-        $rootScope.$digest();
         expect(element.html()).toEqual("hello");
         $rootScope.html = "goodbye";
-        $rootScope.$digest();
         expect(element.html()).toEqual("goodbye");
       });
 
@@ -243,11 +218,9 @@ describe("ng-bind", () => {
         element = $compile('<div ng-bind-html="::html"></div>')($rootScope);
         $rootScope.html = '<div onclick="">hello</div>';
         expect($rootScope.$$watchers.length).toEqual(1);
-        $rootScope.$digest();
         expect(element.text()).toEqual("hello");
         expect($rootScope.$$watchers.length).toEqual(0);
         $rootScope.html = '<div onclick="">hello</div>';
-        $rootScope.$digest();
         expect(element.text()).toEqual("hello");
       });
     });
@@ -282,17 +255,14 @@ describe("ng-bind", () => {
       it("should set html for trusted values", () => {
         element = $compile('<div ng-bind-html="html"></div>')($rootScope);
         $rootScope.html = $sce.trustAsHtml('<div onclick="">hello</div>');
-        $rootScope.$digest();
         expect(element.html()).toEqual('<div onclick="">hello</div>');
       });
 
       it("should update html", () => {
         element = $compile('<div ng-bind-html="html"></div>')(scope);
         scope.html = $sce.trustAsHtml("hello");
-        scope.$digest();
         expect(element.html()).toEqual("hello");
         scope.html = $sce.trustAsHtml("goodbye");
-        scope.$digest();
         expect(element.html()).toEqual("goodbye");
       });
 
@@ -304,7 +274,6 @@ describe("ng-bind", () => {
         $rootScope.getHtml = function () {
           return $sce.trustAsHtml('<div onclick="">hello</div>');
         };
-        $rootScope.$digest();
         expect(element.html()).toEqual('<div onclick="">hello</div>');
       });
 
@@ -361,10 +330,8 @@ describe("ng-bind", () => {
           $rootScope.getHtml = function () {
             return $sce.trustAsHtml(html);
           };
-          $rootScope.$digest();
           expect(element.html()).toEqual("hello");
           html = "goodbye";
-          $rootScope.$digest();
           expect(element.html()).toEqual("goodbye");
         };
       });

package/src/directive/bind/bing-html.spec.js

@@ -16,20 +16,17 @@ describe("ngBindHtml", () => {
   it("should set html", () => {
     const element = $compile('<div ng-bind-html="html"></div>')($rootScope);
     $rootScope.html = "<div>hello</div>";
-    $rootScope.$digest();
     expect(element.html()).toEqual("<div>hello</div>");
   });
 
   it("should reset html when value is null or undefined", () => {
     const element = $compile('<div ng-bind-html="html"></div>')($rootScope);
 
-    forEach([null, undefined, ""], (val) => {
+    [null, undefined, ""].forEach((val) => {
       $rootScope.html = "some val";
-      $rootScope.$digest();
       expect(element.html()).toEqual("some val");
 
       $rootScope.html = val;
-      $rootScope.$digest();
       expect(element.html()).toEqual("");
     });
   });

package/src/{core/interval/interval.html → directive/channel/channel.html}

@@ -10,7 +10,7 @@
     <script src="/jasmine/jasmine-5.1.2/jasmine-html.js"></script>
     <script src="/jasmine/jasmine-5.1.2/boot0.js"></script>
     <script src="/jasmine/jasmine-5.1.2/boot1.js"></script>
-    <script type="module" src="/src/core/interval/interval.spec.js"></script>
+    <script type="module" src="/src/directive/channel/channel.spec.js"></script>
   </head>
   <body>
     <div id="dummy"></div>

package/src/directive/channel/channel.js

@@ -0,0 +1,29 @@
+import { EventBus } from "../../core/pubsub/pubsub";
+
+/**
+ * Dynamically updates an element's content based on events published on a specified channel.
+ * When the directive is applied, it listens for data sent via `EventBus` and
+ * updates the inner HTML of the element accordingly.
+ *
+ * When the scope is destroyed, the directive automatically unsubscribes from the channel.
+ *
+ *
+ * @returns {import("../../types").Directive}
+ */
+export function ngChannelDirective() {
+  return {
+    restrict: "EA",
+    link: (scope, element, attrs) => {
+      const targetElement = element[0];
+      const channel = attrs["ngChannel"];
+
+      const key = EventBus.subscribe(channel, (val) => {
+        targetElement.innerHTML = val;
+      });
+
+      scope.$on("$destroy", () => {
+        EventBus.unsubscribeByKey(key);
+      });
+    },
+  };
+}

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

@@ -0,0 +1,52 @@
+import { Angular } from "../../loader";
+import { EventBus } from "../../core/pubsub/pubsub";
+import { wait } from "../../shared/test-utils";
+
+describe("channel", () => {
+  let $compile, $scope, element, unsubscribeSpy;
+
+  beforeEach(() => {
+    window.angular = new Angular();
+    angular.module("myModule", ["ng"]);
+    angular
+      .bootstrap(document.getElementById("dummy"), ["myModule"])
+      .invoke((_$compile_, _$rootScope_) => {
+        $compile = _$compile_;
+        $scope = _$rootScope_;
+      });
+
+    spyOn(EventBus, "subscribe").and.callThrough();
+    unsubscribeSpy = spyOn(EventBus, "unsubscribeByKey").and.callThrough();
+  });
+
+  it("should subscribe to the specified EventBus channel", () => {
+    element = $compile('<div ng-channel="testChannel"></div>')($scope);
+    $scope.$digest();
+
+    expect(EventBus.subscribe).toHaveBeenCalledWith(
+      "testChannel",
+      jasmine.any(Function),
+    );
+  });
+
+  it("should update innerHtml when EventBus emits a value", async () => {
+    element = $compile('<div ng-channel="testChannel"></div>')($scope);
+    $scope.$digest();
+
+    expect(element[0].innerHTML).toBe("");
+
+    EventBus.publish("testChannel", "New Content");
+    await wait(10);
+
+    expect(element[0].innerHTML).toBe("New Content");
+  });
+
+  it("should unsubscribe from the EventBus when the scope is destroyed", () => {
+    element = $compile('<div ng-channel="testChannel"></div>')($scope);
+    $scope.$digest();
+
+    $scope.$destroy();
+
+    expect(unsubscribeSpy).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,9 @@
+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 expect(page.locator(".jasmine-overall-result")).toHaveText(
+    /0 failures/,
+  );
+});

package/src/directive/class/class.js

@@ -47,7 +47,7 @@ function classDirective(name, selector) {
           if (hasAnimate(element[0])) {
             attr.$addClass(classString);
           } else {
-            scope.$$postDigest(() => {
+            scope.$postUpdate(() => {
               if (classString !== "") {
                 element[0].classList.add(...classString.trim().split(" "));
               }
@@ -60,7 +60,7 @@ function classDirective(name, selector) {
           if (hasAnimate(element[0])) {
             attr.$removeClass(classString);
           } else {
-            scope.$$postDigest(() => {
+            scope.$postUpdate(() => {
               if (classString !== "") {
                 element[0].classList.remove(...classString.trim().split(" "));
               }
@@ -82,7 +82,7 @@ function classDirective(name, selector) {
             attr.$addClass(toAddString);
             attr.$removeClass(toRemoveString);
           } else {
-            scope.$$postDigest(() => {
+            scope.$postUpdate(() => {
               if (toAddString !== "") {
                 element[0].classList.add(...toAddString.trim().split(" "));
               }