@angular-wave/angular.ts 0.0.1

package/test/ng/directive/show-hide.spec.js

@@ -0,0 +1,253 @@
+import { publishExternalAPI } from "../../../src/public";
+import { createInjector } from "../../../src/injector";
+import { dealoc, jqLite } from "../../../src/jqLite";
+
+describe("ngShow / ngHide", () => {
+  let $scope;
+  let $compile;
+  let element;
+
+  beforeEach(() => {
+    publishExternalAPI();
+    createInjector(["ng"]).invoke(($rootScope, _$compile_) => {
+      $scope = $rootScope.$new();
+      $compile = _$compile_;
+    });
+  });
+
+  afterEach(() => {
+    dealoc(element);
+  });
+
+  describe("ngShow", () => {
+    it("should show and hide an element", () => {
+      element = jqLite('<div ng-show="exp"></div>');
+      element = $compile(element)($scope);
+      $scope.$digest();
+      expect(element[0].classList.contains("ng-hide")).toBeTrue();
+      $scope.exp = true;
+      $scope.$digest();
+      expect(element[0].classList.contains("ng-hide")).toBeFalse();
+    });
+
+    // https://github.com/angular/angular.js/issues/5414
+    it("should show if the expression is a function with a no arguments", () => {
+      element = jqLite('<div ng-show="exp"></div>');
+      element = $compile(element)($scope);
+      $scope.exp = function () {};
+      $scope.$digest();
+      expect(element[0].classList.contains("ng-hide")).toBeFalse();
+    });
+
+    it("should make hidden element visible", () => {
+      element = jqLite('<div class="ng-hide" ng-show="exp"></div>');
+      element = $compile(element)($scope);
+      expect(element[0].classList.contains("ng-hide")).toBeTrue();
+      $scope.exp = true;
+      $scope.$digest();
+      expect(element[0].classList.contains("ng-hide")).toBeFalse();
+    });
+
+    it("should hide the element if condition is falsy", () => {
+      ["false", "undefined", "null", "NaN", "''", "0"].forEach((x) => {
+        element = jqLite(`<div ng-show="${x}"></div>`);
+        element = $compile(element)($scope);
+        $scope.$digest();
+        expect(element[0].classList.contains("ng-hide")).toBeTrue();
+      });
+    });
+
+    it("should show the element if condition is a non-empty string", () => {
+      ["'f'", "'0'", "'false'", "'no'", "'n'", "'[]'"].forEach((x) => {
+        element = jqLite(`<div ng-show="${x}"></div>`);
+        element = $compile(element)($scope);
+        $scope.$digest();
+        expect(element[0].classList.contains("ng-hide")).toBeFalse();
+      });
+    });
+
+    it("should show the element if condition is an object", () => {
+      ["[]", "{}"].forEach((x) => {
+        element = jqLite(`<div ng-show="${x}"></div>`);
+        element = $compile(element)($scope);
+        $scope.$digest();
+        expect(element[0].classList.contains("ng-hide")).toBeFalse();
+      });
+    });
+  });
+
+  describe("ngHide", () => {
+    it("should hide an element", () => {
+      element = jqLite('<div ng-hide="exp"></div>');
+      element = $compile(element)($scope);
+      expect(element[0].classList.contains("ng-hide")).toBeFalse();
+      $scope.exp = true;
+      $scope.$digest();
+      expect(element[0].classList.contains("ng-hide")).toBeTrue();
+    });
+
+    it("should show the element if condition is falsy", () => {
+      ["false", "undefined", "null", "NaN", "''", "0"].forEach((x) => {
+        element = jqLite(`<div ng-hide="${x}"></div>`);
+        element = $compile(element)($scope);
+        $scope.$digest();
+        expect(element[0].classList.contains("ng-hide")).toBeFalse();
+      });
+    });
+
+    it("should hide the element if condition is a non-empty string", () => {
+      ["'f'", "'0'", "'false'", "'no'", "'n'", "'[]'"].forEach((x) => {
+        element = jqLite(`<div ng-hide="${x}"></div>`);
+        element = $compile(element)($scope);
+        $scope.$digest();
+        expect(element[0].classList.contains("ng-hide")).toBeTrue();
+      });
+    });
+
+    it("should hide the element if condition is an object", () => {
+      ["[]", "{}"].forEach((x) => {
+        element = jqLite(`<div ng-hide="${x}"></div>`);
+        element = $compile(element)($scope);
+        $scope.$digest();
+        expect(element[0].classList.contains("ng-hide")).toBeTrue();
+      });
+    });
+  });
+});
+
+// describe("ngShow / ngHide animations", () => {
+//   let body;
+//   let element;
+//   let $rootElement;
+
+//   function html(content) {
+//     body.append($rootElement);
+//     $rootElement.html(content);
+//     element = $rootElement.children().eq(0);
+//     return element;
+//   }
+
+//   beforeEach(() => {
+//     // we need to run animation on attached elements;
+//     body = jqLite(window.document.body);
+//   });
+
+//   afterEach(() => {
+//     dealoc(body);
+//     dealoc(element);
+//     body[0].removeAttribute("ng-animation-running");
+//   });
+
+//   beforeEach(module("ngAnimateMock"));
+
+//   beforeEach(
+//     module(
+//       ($animateProvider, $provide) =>
+//         function (_$rootElement_) {
+//           $rootElement = _$rootElement_;
+//         },
+//     ),
+//   );
+
+//   describe("ngShow", () => {
+//     it("should fire off the $animate.show and $animate.hide animation", inject((
+//       $compile,
+//       $rootScope,
+//       $animate,
+//     ) => {
+//       let item;
+//       const $scope = $rootScope.$new();
+//       $scope.on = true;
+//       element = $compile(html('<div ng-show="on">data</div>'))($scope);
+//       $scope.$digest();
+
+//       item = $animate.queue.shift();
+//       expect(item.event).toBe("removeClass");
+//       expect(item.element.text()).toBe("data");
+//       expect(item.element).toBeShown();
+
+//       $scope.on = false;
+//       $scope.$digest();
+
+//       item = $animate.queue.shift();
+//       expect(item.event).toBe("addClass");
+//       expect(item.element.text()).toBe("data");
+//       expect(item.element).toBeHidden();
+//     }));
+
+//     it("should apply the temporary `.ng-hide-animate` class to the element", inject((
+//       $compile,
+//       $rootScope,
+//       $animate,
+//     ) => {
+//       let item;
+//       const $scope = $rootScope.$new();
+//       $scope.on = false;
+//       element = $compile(
+//         html('<div class="show-hide" ng-show="on">data</div>'),
+//       )($scope);
+//       $scope.$digest();
+
+//       item = $animate.queue.shift();
+//       expect(item.event).toEqual("addClass");
+//       expect(item.options.tempClasses).toEqual("ng-hide-animate");
+
+//       $scope.on = true;
+//       $scope.$digest();
+//       item = $animate.queue.shift();
+//       expect(item.event).toEqual("removeClass");
+//       expect(item.options.tempClasses).toEqual("ng-hide-animate");
+//     }));
+//   });
+
+//   describe("ngHide", () => {
+//     it("should fire off the $animate.show and $animate.hide animation", inject((
+//       $compile,
+//       $rootScope,
+//       $animate,
+//     ) => {
+//       let item;
+//       const $scope = $rootScope.$new();
+//       $scope.off = true;
+//       element = $compile(html('<div ng-hide="off">datum</div>'))($scope);
+//       $scope.$digest();
+
+//       item = $animate.queue.shift();
+//       expect(item.event).toBe("addClass");
+//       expect(item.element.text()).toBe("datum");
+//       expect(item.element).toBeHidden();
+
+//       $scope.off = false;
+//       $scope.$digest();
+
+//       item = $animate.queue.shift();
+//       expect(item.event).toBe("removeClass");
+//       expect(item.element.text()).toBe("datum");
+//       expect(item.element).toBeShown();
+//     }));
+
+//     it("should apply the temporary `.ng-hide-animate` class to the element", inject((
+//       $compile,
+//       $rootScope,
+//       $animate,
+//     ) => {
+//       let item;
+//       const $scope = $rootScope.$new();
+//       $scope.on = false;
+//       element = $compile(
+//         html('<div class="show-hide" ng-hide="on">data</div>'),
+//       )($scope);
+//       $scope.$digest();
+
+//       item = $animate.queue.shift();
+//       expect(item.event).toEqual("removeClass");
+//       expect(item.options.tempClasses).toEqual("ng-hide-animate");
+
+//       $scope.on = true;
+//       $scope.$digest();
+//       item = $animate.queue.shift();
+//       expect(item.event).toEqual("addClass");
+//       expect(item.options.tempClasses).toEqual("ng-hide-animate");
+//     }));
+//   });
+// });

package/test/ng/directive/src.spec.js

@@ -0,0 +1,157 @@
+import { publishExternalAPI } from "../../../src/public";
+import { createInjector } from "../../../src/injector";
+import { dealoc } from "../../../src/jqLite";
+
+describe("ngSrc", () => {
+  let $scope;
+  let $compile;
+  let element;
+
+  beforeEach(() => {
+    publishExternalAPI();
+    createInjector(["ng"]).invoke(($rootScope, _$compile_) => {
+      $scope = $rootScope.$new();
+      $compile = _$compile_;
+    });
+  });
+
+  afterEach(() => {
+    dealoc(element);
+  });
+
+  describe("img[ng-src]", () => {
+    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();
+    });
+
+    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(() => {
+        $scope.id = "/somewhere/here";
+      });
+      expect(element.attr("src")).toEqual("/somewhere/here");
+    });
+
+    it("should interpolate a multi-part expression for img src attribute (which requires the MEDIA_URL context)", () => {
+      element = $compile('<img ng-src="some/{{id}}"></img>')($scope);
+      expect(element.attr("src")).toBe(undefined); // URL concatenations are all-or-nothing
+      $scope.$apply(() => {
+        $scope.id = 1;
+      });
+      expect(element.attr("src")).toEqual("some/1");
+    });
+
+    it("should work with `src` attribute on the same element", () => {
+      $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");
+    });
+  });
+
+  describe("iframe[ng-src]", () => {
+    let $scope;
+    let $compile;
+    let element;
+    let $sce;
+
+    beforeEach(() => {
+      publishExternalAPI();
+      createInjector(["ng"]).invoke(($rootScope, _$compile_, _$sce_) => {
+        $scope = $rootScope.$new();
+        $compile = _$compile_;
+        $sce = _$sce_;
+      });
+    });
+
+    afterEach(() => {
+      dealoc(element);
+    });
+
+    it("should pass through src attributes for the same domain", () => {
+      element = $compile('<iframe ng-src="{{testUrl}}"></iframe>')($scope);
+      $scope.testUrl = "different_page";
+      $scope.$apply();
+      expect(element.attr("src")).toEqual("different_page");
+    });
+
+    it("should error on src attributes for a different domain", () => {
+      element = $compile('<iframe ng-src="{{testUrl}}"></iframe>')($scope);
+      $scope.testUrl = "http://a.different.domain.example.com";
+      $scope.$apply();
+      expect($scope.$apply).toThrowError();
+    });
+
+    it("should error on JS src attributes", () => {
+      element = $compile('<iframe ng-src="{{testUrl}}"></iframe>')($scope);
+      $scope.testUrl = "javascript:alert(1);";
+      expect($scope.$apply).toThrowError();
+    });
+
+    it("should error on non-resource_url src attributes", () => {
+      element = $compile('<iframe ng-src="{{testUrl}}"></iframe>')($scope);
+      $scope.testUrl = $sce.trustAsUrl("javascript:doTrustedStuff()");
+      expect($scope.$apply).toThrowError();
+    });
+
+    it("should pass through $sce.trustAs() values in src attributes", () => {
+      element = $compile('<iframe ng-src="{{testUrl}}"></iframe>')($scope);
+      $scope.testUrl = $sce.trustAsResourceUrl("javascript:doTrustedStuff()");
+      $scope.$apply();
+
+      expect(element.attr("src")).toEqual("javascript:doTrustedStuff()");
+    });
+
+    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(() => {
+        $scope.id = $sce.trustAsResourceUrl("http://somewhere");
+      });
+      expect(element.attr("src")).toEqual("http://somewhere");
+    });
+
+    it("should NOT interpolate a multi-part expression in a `src` attribute that requires a non-MEDIA_URL context", () => {
+      element = $compile('<iframe ng-src="some/{{id}}"></iframe>')($scope);
+      $scope.id = 1;
+      expect($scope.$apply).toThrowError();
+    });
+
+    it("should NOT interpolate a wrongly typed expression", () => {
+      element = $compile('<iframe ng-src="{{id}}"></iframe>')($scope);
+      $scope.id = $sce.trustAsUrl("http://somewhere");
+      expect($scope.$apply).toThrowError();
+    });
+  });
+});

package/test/ng/directive/style.spec.js

@@ -0,0 +1,178 @@
+import { publishExternalAPI } from "../../../src/public";
+import { createInjector } from "../../../src/injector";
+import { dealoc, jqLite } from "../../../src/jqLite";
+
+describe("ng-style", () => {
+  let $scope;
+  let $compile;
+  let element;
+
+  beforeEach(() => {
+    publishExternalAPI();
+    createInjector(["ng"]).invoke(($rootScope, _$compile_) => {
+      $scope = $rootScope.$new();
+      $compile = _$compile_;
+    });
+  });
+
+  afterEach(() => {
+    dealoc(element);
+  });
+
+  it("should set", () => {
+    element = $compile("<div ng-style=\"{height: '40px'}\"></div>")($scope);
+    $scope.$digest();
+    expect(element[0].style.height).toEqual("40px");
+  });
+
+  it("should silently ignore undefined style", () => {
+    element = $compile('<div ng-style="myStyle"></div>')($scope);
+    $scope.$digest();
+    expect(element[0].classList.contains("ng-exception")).toBeFalsy();
+  });
+
+  it("should not deep watch objects", () => {
+    element = $compile('<div ng-style="{height: heightObj}"></div>')($scope);
+    $scope.$digest();
+    expect(parseInt(element[0].style.height + 0, 10)).toEqual(0); // height could be '' or '0px'
+    $scope.heightObj = {
+      toString() {
+        return "40px";
+      },
+    };
+    $scope.$digest();
+    expect(element[0].style.height).toBe("40px");
+
+    element[0].style.height = "10px";
+    $scope.heightObj.otherProp = 123;
+    $scope.$digest();
+    expect(element[0].style.height).toBe("10px");
+  });
+
+  it("should support binding for object literals", () => {
+    element = $compile('<div ng-style="{height: heightStr}"></div>')($scope);
+    $scope.$digest();
+    expect(parseInt(element[0].style.height + 0, 10)).toEqual(0); // height could be '' or '0px'
+    $scope.$apply('heightStr = "40px"');
+    expect(element[0].style.height).toBe("40px");
+
+    $scope.$apply('heightStr = "100px"');
+    expect(element[0].style.height).toBe("100px");
+  });
+
+  it("should support lazy one-time binding for object literals", () => {
+    element = $compile('<div ng-style="::{height: heightStr}"></div>')($scope);
+    $scope.$digest();
+    expect(parseInt(element[0].style.height + 0, 10)).toEqual(0); // height could be '' or '0px'
+    $scope.$apply('heightStr = "40px"');
+    expect(element[0].style.height).toBe("40px");
+  });
+
+  describe("preserving styles set before and after compilation", () => {
+    let scope;
+    let preCompStyle;
+    let preCompVal;
+    let postCompStyle;
+    let postCompVal;
+    let element;
+
+    beforeEach(() => {
+      preCompStyle = "width";
+      preCompVal = "300px";
+      postCompStyle = "height";
+      postCompVal = "100px";
+      element = jqLite('<div ng-style="styleObj"></div>');
+      element[0].style[preCompStyle] = preCompVal;
+      jqLite(window.document.body).append(element);
+      $compile(element)($scope);
+      scope = $scope;
+      scope.styleObj = { "margin-top": "44px" };
+      scope.$apply();
+      element[0].style[postCompStyle] = postCompVal;
+    });
+
+    afterEach(() => {
+      element.remove();
+    });
+
+    it("should not mess up stuff after compilation", () => {
+      element[0].style.margin = "44px";
+      expect(element[0].style[preCompStyle]).toBe(preCompVal);
+      expect(element[0].style["margin-top"]).toBe("44px");
+      expect(element[0].style[postCompStyle]).toBe(postCompVal);
+    });
+
+    it("should not mess up stuff after $apply with no model changes", () => {
+      element[0].style["padding-top"] = "33px";
+      scope.$apply();
+      expect(element[0].style[preCompStyle]).toBe(preCompVal);
+      expect(element[0].style["margin-top"]).toBe("44px");
+      expect(element[0].style[postCompStyle]).toBe(postCompVal);
+      expect(element[0].style["padding-top"]).toBe("33px");
+    });
+
+    it("should not mess up stuff after $apply with non-colliding model changes", () => {
+      scope.styleObj = { "padding-top": "99px" };
+      scope.$apply();
+      expect(element[0].style[preCompStyle]).toBe(preCompVal);
+      expect(element[0].style["margin-top"]).not.toBe("44px");
+      expect(element[0].style["padding-top"]).toBe("99px");
+      expect(element[0].style[postCompStyle]).toBe(postCompVal);
+    });
+
+    it("should overwrite original styles after a colliding model change", () => {
+      scope.styleObj = { height: "99px", width: "88px" };
+      scope.$apply();
+      expect(element[0].style[preCompStyle]).toBe("88px");
+      expect(element[0].style[postCompStyle]).toBe("99px");
+      scope.styleObj = {};
+      scope.$apply();
+      expect(element[0].style[preCompStyle]).not.toBe("88px");
+      expect(element[0].style[postCompStyle]).not.toBe("99px");
+    });
+
+    it("should clear style when the new model is null", () => {
+      scope.styleObj = { height: "99px", width: "88px" };
+      scope.$apply();
+      expect(element[0].style[preCompStyle]).toBe("88px");
+      expect(element[0].style[postCompStyle]).toBe("99px");
+      scope.styleObj = null;
+      scope.$apply();
+      expect(element[0].style[preCompStyle]).not.toBe("88px");
+      expect(element[0].style[postCompStyle]).not.toBe("99px");
+    });
+
+    it("should clear style when the value is undefined or null", () => {
+      scope.styleObj = { height: "99px", width: "88px" };
+      scope.$apply();
+      expect(element[0].style[preCompStyle]).toBe("88px");
+      expect(element[0].style[postCompStyle]).toBe("99px");
+      scope.styleObj = { height: undefined, width: null };
+      scope.$apply();
+      expect(element[0].style[preCompStyle]).not.toBe("88px");
+      expect(element[0].style[postCompStyle]).not.toBe("99px");
+    });
+
+    it("should clear style when the value is false", () => {
+      scope.styleObj = { height: "99px", width: "88px" };
+      scope.$apply();
+      expect(element[0].style[preCompStyle]).toBe("88px");
+      expect(element[0].style[postCompStyle]).toBe("99px");
+      scope.styleObj = { height: false, width: false };
+      scope.$apply();
+      expect(element[0].style[preCompStyle]).not.toBe("88px");
+      expect(element[0].style[postCompStyle]).not.toBe("99px");
+    });
+
+    it("should set style when the value is zero", () => {
+      scope.styleObj = { height: "99px", width: "88px" };
+      scope.$apply();
+      expect(element[0].style[preCompStyle]).toBe("88px");
+      expect(element[0].style[postCompStyle]).toBe("99px");
+      scope.styleObj = { height: 0, width: 0 };
+      scope.$apply();
+      expect(element[0].style[preCompStyle]).toBe("0px");
+      expect(element[0].style[postCompStyle]).toBe("0px");
+    });
+  });
+});