@angular-wave/angular.ts 0.0.1

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

@@ -0,0 +1,38 @@
+import { dealoc } from "../../../src/jqLite";
+import { publishExternalAPI } from "../../../src/public";
+import { createInjector } from "../../../src/injector";
+
+describe("ngClick", () => {
+  let element;
+  let $compile;
+  let $rootScope;
+  let injector;
+
+  beforeEach(() => {
+    publishExternalAPI();
+    injector = createInjector(["ng"]);
+    $compile = injector.get("$compile");
+    $rootScope = injector.get("$rootScope");
+  });
+
+  afterEach(() => {
+    dealoc(element);
+  });
+
+  it("should get called on a click", () => {
+    element = $compile('<div ng-click="clicked = true"></div>')($rootScope);
+    $rootScope.$digest();
+    expect($rootScope.clicked).toBeFalsy();
+
+    element[0].click();
+    expect($rootScope.clicked).toEqual(true);
+  });
+
+  it("should pass event object", () => {
+    element = $compile('<div ng-click="event = $event"></div>')($rootScope);
+    $rootScope.$digest();
+
+    element[0].click();
+    expect($rootScope.event).toBeDefined();
+  });
+});

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

@@ -0,0 +1,44 @@
+import { dealoc, jqLite } from "../../../src/jqLite";
+import { setupModuleLoader } from "../../../src/loader";
+import { publishExternalAPI } from "../../../src/public";
+import { createInjector } from "../../../src/injector";
+
+describe("ngCloak", () => {
+  let element;
+  let $compile;
+  let $rootScope;
+  let injector;
+
+  beforeEach(() => {
+    setupModuleLoader(window);
+    publishExternalAPI();
+    injector = createInjector(["ng"]);
+    $compile = injector.get("$compile");
+    $rootScope = injector.get("$rootScope");
+  });
+
+  afterEach(() => {
+    dealoc(element);
+  });
+
+  it("should get removed when an element is compiled", () => {
+    element = jqLite("<div ng-cloak></div>");
+    expect(element.attr("ng-cloak")).toBe("");
+    $compile(element);
+    expect(element.attr("ng-cloak")).toBeUndefined();
+  });
+
+  it("should remove ngCloak class from a compiled element with attribute", () => {
+    element = jqLite('<div ng-cloak class="foo ng-cloak bar"></div>');
+
+    expect(element[0].classList.contains("foo")).toBe(true);
+    expect(element[0].classList.contains("ng-cloak")).toBe(true);
+    expect(element[0].classList.contains("bar")).toBe(true);
+
+    $compile(element);
+
+    expect(element[0].classList.contains("foo")).toBe(true);
+    expect(element[0].classList.contains("ng-cloak")).toBe(false);
+    expect(element[0].classList.contains("bar")).toBe(true);
+  });
+});

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

@@ -0,0 +1,194 @@
+import { publishExternalAPI } from "../../../src/public";
+import { createInjector } from "../../../src/injector";
+import { dealoc, jqLite } from "../../../src/jqLite";
+import { bind } from "../../../src/core/utils";
+import { Angular } from "../../../src/loader";
+
+describe("ngController", () => {
+  let angular;
+  let element;
+  let injector;
+  let $rootScope;
+  let $compile;
+
+  const Greeter = function ($scope) {
+    // private stuff (not exported to scope)
+    this.prefix = "Hello ";
+
+    // public stuff (exported to scope)
+    const ctrl = this;
+    $scope.name = "Misko";
+    $scope.expr = "Vojta";
+    $scope.greet = function (name) {
+      return ctrl.prefix + name + ctrl.suffix;
+    };
+
+    $scope.protoGreet = bind(this, this.protoGreet);
+  };
+  Greeter.prototype = {
+    suffix: "!",
+    protoGreet(name) {
+      return this.prefix + name + this.suffix;
+    },
+  };
+
+  beforeEach(() => {
+    angular = new Angular();
+    publishExternalAPI();
+    injector = createInjector([
+      "ng",
+      ($controllerProvider) => {
+        $controllerProvider.register("PublicModule", function () {
+          this.mark = "works";
+        });
+        $controllerProvider.register("Greeter", Greeter);
+
+        $controllerProvider.register("Child", ($scope) => {
+          $scope.name = "Adam";
+        });
+
+        $controllerProvider.register("Public", function ($scope) {
+          this.mark = "works";
+        });
+
+        const Foo = function ($scope) {
+          $scope.mark = "foo";
+        };
+        $controllerProvider.register("BoundFoo", ["$scope", Foo.bind(null)]);
+      },
+    ]).invoke((_$rootScope_, _$compile_) => {
+      $rootScope = _$rootScope_;
+      $compile = _$compile_;
+    });
+  });
+
+  afterEach(() => {
+    dealoc(element);
+  });
+
+  it("should instantiate controller and bind methods", () => {
+    element = $compile('<div ng-controller="Greeter">{{greet(name)}}</div>')(
+      $rootScope,
+    );
+    $rootScope.$digest();
+    expect(element.text()).toBe("Hello Misko!");
+  });
+
+  it("should instantiate bound constructor functions", () => {
+    element = $compile('<div ng-controller="BoundFoo">{{mark}}</div>')(
+      $rootScope,
+    );
+    $rootScope.$digest();
+    expect(element.text()).toBe("foo");
+  });
+
+  it("should publish controller into scope", () => {
+    element = $compile('<div ng-controller="Public as p">{{p.mark}}</div>')(
+      $rootScope,
+    );
+    $rootScope.$digest();
+    expect(element.text()).toBe("works");
+  });
+
+  it("should publish controller into scope from module", () => {
+    element = $compile(
+      '<div ng-controller="PublicModule as p">{{p.mark}}</div>',
+    )($rootScope);
+    $rootScope.$digest();
+    expect(element.text()).toBe("works");
+  });
+
+  it("should allow nested controllers", () => {
+    element = $compile(
+      '<div ng-controller="Greeter"><div ng-controller="Child">{{greet(name)}}</div></div>',
+    )($rootScope);
+    $rootScope.$digest();
+    expect(element.text()).toBe("Hello Adam!");
+    dealoc(element);
+
+    element = $compile(
+      '<div ng-controller="Greeter"><div ng-controller="Child">{{protoGreet(name)}}</div></div>',
+    )($rootScope);
+    $rootScope.$digest();
+    expect(element.text()).toBe("Hello Adam!");
+  });
+
+  it("should instantiate controller defined on scope", () => {
+    $rootScope.VojtaGreeter = function ($scope) {
+      $scope.name = "Vojta";
+    };
+
+    element = $compile('<div ng-controller="VojtaGreeter">{{name}}</div>')(
+      $rootScope,
+    );
+    $rootScope.$digest();
+    expect(element.text()).toBe("Vojta");
+  });
+
+  it("should work with ngInclude on the same element", (done) => {
+    element = jqLite(
+      '<div><div ng-controller="Greeter" ng-include="\'/mock/interpolation\'"></div></div>',
+    );
+    window.angular
+      .module("myModule", [])
+      .controller("Greeter", function GreeterController($scope) {
+        $scope.expr = "Vojta";
+      });
+
+    injector = angular.bootstrap(element, ["myModule"]);
+
+    $rootScope = injector.get("$rootScope");
+    $rootScope.$digest();
+    setTimeout(() => {
+      expect(element.text()).toEqual("Vojta");
+      dealoc($rootScope);
+      done();
+    }, 200);
+  });
+
+  it("should only instantiate the controller once with ngInclude on the same element", () => {
+    let count = 0;
+
+    element = jqLite(
+      '<div><div ng-controller="Count" ng-include="\'/mock/interpolation\'"></div></div>',
+    );
+    window.angular
+      .module("myModule", [])
+      .controller("Count", function CountController($scope) {
+        count += 1;
+      });
+
+    injector = angular.bootstrap(element, ["myModule"]);
+
+    $rootScope = injector.get("$rootScope");
+
+    $rootScope.expr = "first";
+    $rootScope.$digest();
+
+    $rootScope.expr = "second";
+    $rootScope.$digest();
+
+    expect(count).toBe(1);
+  });
+
+  it("when ngInclude is on the same element, the content included content should get a child scope of the controller", () => {
+    let controllerScope;
+
+    element = jqLite(
+      '<div><div ng-controller="ExposeScope" ng-include="\'/mock/scopeinit\'"></div></div>',
+    );
+
+    window.angular
+      .module("myModule", [])
+      .controller("ExposeScope", function ExposeScopeController($scope) {
+        controllerScope = $scope;
+      });
+
+    injector = angular.bootstrap(element, ["myModule"]);
+
+    $rootScope = injector.get("$rootScope");
+    $rootScope.$digest();
+
+    expect(controllerScope.name).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,92 @@
+import { publishExternalAPI } from "../../../src/public";
+import { createInjector } from "../../../src/injector";
+import { dealoc, jqLite } from "../../../src/jqLite";
+
+describe("style", () => {
+  let $rootScope;
+  let $compile;
+  let element;
+
+  beforeEach(() => {
+    publishExternalAPI();
+    createInjector(["ng"]).invoke((_$rootScope_, _$compile_) => {
+      $rootScope = _$rootScope_;
+      $compile = _$compile_;
+    });
+  });
+
+  afterEach(() => {
+    dealoc(element);
+  });
+
+  it("should compile style element without binding", () => {
+    element = jqLite(
+      '<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}}",
+    );
+  });
+
+  it("should compile style element with one simple bind", () => {
+    element = jqLite(
+      '<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(() => {
+      $rootScope.elementWidth = 200;
+    });
+
+    expect(element[0].innerHTML).toBe(".some-container{ width: 200px; }");
+  });
+
+  it("should compile style element with one bind", () => {
+    element = jqLite(
+      '<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(() => {
+      $rootScope.fontSize = 1.5;
+    });
+
+    expect(element[0].innerHTML).toBe(".header{ h3 { font-size: 1.5em }}");
+  });
+
+  it("should compile style element with two binds", () => {
+    element = jqLite(
+      '<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(() => {
+      $rootScope.fontSize = 1.5;
+      $rootScope.unit = "em";
+    });
+
+    expect(element[0].innerHTML).toBe(".header{ h3 { font-size: 1.5em }}");
+  });
+
+  it("should compile content of element with style attr", () => {
+    element = jqLite('<div style="some">{{bind}}</div>');
+    $compile(element)($rootScope);
+    $rootScope.$apply(() => {
+      $rootScope.bind = "value";
+    });
+
+    expect(element.text()).toBe("value");
+  });
+});

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

@@ -0,0 +1,282 @@
+import { publishExternalAPI } from "../../../src/public";
+import { createInjector } from "../../../src/injector";
+import { dealoc } from "../../../src/jqLite";
+import { Angular } from "../../../src/loader";
+
+describe("event directives", () => {
+  let angular;
+  let element;
+  let injector;
+  let $rootScope;
+  let $compile;
+  let logs = [];
+
+  beforeEach(() => {
+    angular = new Angular();
+    publishExternalAPI().decorator("$exceptionHandler", function () {
+      return (exception, cause) => {
+        logs.push(exception.message);
+      };
+    });
+    injector = createInjector(["ng"]).invoke((_$rootScope_, _$compile_) => {
+      $rootScope = _$rootScope_;
+      $compile = _$compile_;
+    });
+  });
+
+  afterEach(() => {
+    dealoc(element);
+    logs = [];
+    document.getElementById("dummy").innerHTML = "";
+  });
+
+  describe("ngSubmit", () => {
+    it("should get called on form submit", () => {
+      element = $compile(
+        '<form ng-submit="submitted = true">' +
+          '<input type="submit" />' +
+          "</form>",
+      )($rootScope);
+      $rootScope.$digest();
+
+      // Support: Chrome 60+
+      // We need to add the form to the DOM in order for `submit` events to be properly fired.
+      document.getElementById("dummy").appendChild(element[0]);
+
+      // prevent submit within the test harness
+      element[0].addEventListener("submit", (e) => {
+        e.preventDefault();
+      });
+
+      expect($rootScope.submitted).toBeUndefined();
+
+      element[0].dispatchEvent(new Event("submit"));
+      expect($rootScope.submitted).toEqual(true);
+    });
+
+    it("should expose event on form submit", () => {
+      $rootScope.formSubmission = function (e) {
+        if (e) {
+          $rootScope.formSubmitted = "foo";
+        }
+      };
+
+      element = $compile(
+        '<form ng-submit="formSubmission($event)">' +
+          '<input type="submit" />' +
+          "</form>",
+      )($rootScope);
+      $rootScope.$digest();
+
+      // Support: Chrome 60+ (on Windows)
+      // We need to add the form to the DOM in order for `submit` events to be properly fired.
+      document.getElementById("dummy").appendChild(element[0]);
+
+      // prevent submit within the test harness
+      element[0].addEventListener("submit", (e) => {
+        e.preventDefault();
+      });
+
+      expect($rootScope.formSubmitted).toBeUndefined();
+
+      element[0].dispatchEvent(new Event("submit"));
+      expect($rootScope.formSubmitted).toEqual("foo");
+    });
+  });
+
+  describe("focus", () => {
+    describe("call the listener asynchronously during $apply", () => {
+      it("should call the listener with non isolate scopes", () => {
+        let scope = $rootScope.$new();
+        element = $compile('<input type="text" ng-focus="focus()">')(scope);
+        scope.focus = jasmine.createSpy("focus");
+
+        scope.$apply(() => {
+          element.triggerHandler("focus");
+          expect(scope.focus).not.toHaveBeenCalled();
+        });
+
+        expect(scope.focus).toHaveBeenCalled();
+      });
+
+      it("should call the listener with isolate scopes", () => {
+        let scope = $rootScope.$new(true);
+        element = $compile('<input type="text" ng-focus="focus()">')(scope);
+        scope.focus = jasmine.createSpy("focus");
+
+        scope.$apply(() => {
+          element.triggerHandler("focus");
+          expect(scope.focus).not.toHaveBeenCalled();
+        });
+      });
+    });
+
+    it("should call the listener synchronously inside of $apply if outside of $apply", () => {
+      element = $compile(
+        '<input type="text" ng-focus="focus()" ng-model="value">',
+      )($rootScope);
+      $rootScope.focus = jasmine.createSpy("focus").and.callFake(() => {
+        $rootScope.value = "newValue";
+      });
+
+      element.triggerHandler("focus");
+
+      expect($rootScope.focus).toHaveBeenCalled();
+      expect(element.val()).toBe("newValue");
+    });
+  });
+
+  describe("DOM event object", () => {
+    it("should allow access to the $event object", () => {
+      const scope = $rootScope.$new();
+      element = $compile('<button ng-click="e = $event">BTN</button>')(scope);
+      element.triggerHandler("click");
+      expect(scope.e.target).toBe(element[0]);
+    });
+  });
+
+  describe("blur", () => {
+    describe("call the listener asynchronously during $apply", () => {
+      it("should call the listener with non isolate scopes", () => {
+        const scope = $rootScope.$new();
+        element = $compile('<input type="text" ng-blur="blur()">')(scope);
+        scope.blur = jasmine.createSpy("blur");
+
+        scope.$apply(() => {
+          element.triggerHandler("blur");
+          expect(scope.blur).not.toHaveBeenCalled();
+        });
+
+        expect(scope.blur).toHaveBeenCalled();
+      });
+
+      it("should call the listener with isolate scopes", () => {
+        const scope = $rootScope.$new(true);
+        element = $compile('<input type="text" ng-blur="blur()">')(scope);
+        scope.blur = jasmine.createSpy("blur");
+
+        scope.$apply(() => {
+          element.triggerHandler("blur");
+          expect(scope.blur).not.toHaveBeenCalled();
+        });
+
+        expect(scope.blur).toHaveBeenCalled();
+      });
+    });
+
+    it("should call the listener synchronously inside of $apply if outside of $apply", () => {
+      element = $compile(
+        '<input type="text" ng-blur="blur()" ng-model="value">',
+      )($rootScope);
+      $rootScope.blur = jasmine.createSpy("blur").and.callFake(() => {
+        $rootScope.value = "newValue";
+      });
+
+      element.triggerHandler("blur");
+
+      expect($rootScope.blur).toHaveBeenCalled();
+      expect(element.val()).toBe("newValue");
+    });
+  });
+
+  it("should call the listener synchronously if the event is triggered inside of a digest", () => {
+    let watchedVal;
+
+    element = $compile(
+      '<button type="button" ng-click="click()">Button</button>',
+    )($rootScope);
+    $rootScope.$watch("value", (newValue) => {
+      watchedVal = newValue;
+    });
+    $rootScope.click = jasmine.createSpy("click").and.callFake(() => {
+      $rootScope.value = "newValue";
+    });
+
+    $rootScope.$apply(() => {
+      element.triggerHandler("click");
+    });
+
+    expect($rootScope.click).toHaveBeenCalled();
+    expect(watchedVal).toEqual("newValue");
+  });
+
+  it("should call the listener synchronously if the event is triggered outside of a digest", () => {
+    let watchedVal;
+
+    element = $compile(
+      '<button type="button" ng-click="click()">Button</button>',
+    )($rootScope);
+    $rootScope.$watch("value", (newValue) => {
+      watchedVal = newValue;
+    });
+    $rootScope.click = jasmine.createSpy("click").and.callFake(() => {
+      $rootScope.value = "newValue";
+    });
+
+    element.triggerHandler("click");
+
+    expect($rootScope.click).toHaveBeenCalled();
+    expect(watchedVal).toEqual("newValue");
+  });
+
+  describe("throwing errors in event handlers", () => {
+    it("should not stop execution if the event is triggered outside a digest", () => {
+      element = $compile('<button ng-click="click()">Click</button>')(
+        $rootScope,
+      );
+
+      $rootScope.click = function () {
+        throw new Error("listener error");
+      };
+
+      $rootScope.do = function () {
+        element[0].click();
+      };
+
+      $rootScope.do();
+
+      expect(logs).toEqual(["listener error"]);
+    });
+
+    it("should not stop execution if the event is triggered inside a digest", () => {
+      element = $compile('<button ng-click="click()">Click</button>')(
+        $rootScope,
+      );
+
+      $rootScope.click = function () {
+        throw new Error("listener error");
+      };
+
+      $rootScope.do = function () {
+        element.triggerHandler("click");
+        logs.push("done");
+      };
+
+      $rootScope.$apply(() => {
+        $rootScope.do();
+      });
+
+      expect(logs[0]).toEqual("listener error");
+      expect(logs[1]).toEqual("done");
+    });
+
+    it("should not stop execution if the event is triggered in a watch expression function", () => {
+      element = $compile('<button ng-click="click()">Click</button>')(
+        $rootScope,
+      );
+      $rootScope.click = function () {
+        throw new Error("listener error");
+      };
+
+      $rootScope.$watch(() => {
+        element[0].click();
+        logs.push("done");
+      });
+
+      $rootScope.$digest();
+
+      expect(logs[0]).toEqual("listener error");
+      expect(logs[1]).toEqual("done");
+    });
+  });
+});