@angular-wave/angular.ts 0.4.4 → 0.4.5

package/src/router/directives/view-directive.js

@@ -137,7 +137,8 @@ export let ngView = [
   "$animate",
   "$ngViewScroll",
   "$interpolate",
-  function $ViewDirective($view, $animate, $ngViewScroll, $interpolate) {
+  "$q",
+  function $ViewDirective($view, $animate, $ngViewScroll, $interpolate, $q) {
     function getRenderer() {
       return {
         enter: function (element, target, cb) {
@@ -236,7 +237,6 @@ export let ngView = [
           }
           function updateView(config) {
             const newScope = scope.$new();
-
             const animEnter = $q.defer(),
               animLeave = $q.defer();
             const $ngViewData = {
@@ -292,8 +292,15 @@ $ViewDirectiveFill.$inject = [
   "$controller",
   "$transitions",
   "$view",
+  "$q",
 ];
-export function $ViewDirectiveFill($compile, $controller, $transitions, $view) {
+export function $ViewDirectiveFill(
+  $compile,
+  $controller,
+  $transitions,
+  $view,
+  $q,
+) {
   const getControllerAs = parse("viewDecl.controllerAs");
   const getResolveAs = parse("viewDecl.resolveAs");
   return {
@@ -366,6 +373,7 @@ export function $ViewDirectiveFill($compile, $controller, $transitions, $view) {
             function (ctrlInstance) {
               if (!ctrlInstance) return;
               registerControllerCallbacks(
+                $q,
                 $transitions,
                 ctrlInstance,
                 scope,
@@ -385,6 +393,7 @@ export function $ViewDirectiveFill($compile, $controller, $transitions, $view) {
 let _uiCanExitId = 0;
 /** @ignore TODO: move these callbacks to $view and/or `/hooks/components.ts` or something */
 function registerControllerCallbacks(
+  $q,
   $transitions,
   controllerInstance,
   $scope,
@@ -461,7 +470,7 @@ function registerControllerCallbacks(
       let promise;
       const ids = (trans[cacheProp] = trans[cacheProp] || {});
       if (!prevTruthyAnswer(trans)) {
-        promise = Promise.resolve(controllerInstance.uiCanExit(trans));
+        promise = $q.resolve(controllerInstance.uiCanExit(trans));
         promise.then((val) => (ids[id] = val !== false));
       }
       return promise;

package/src/router/directives/view-directive.spec.js

@@ -20,6 +20,8 @@ describe("ngView", () => {
     app,
     $injector,
     $state,
+    $q,
+    $timeout,
     $ngViewScroll;
 
   const aState = {
@@ -165,10 +167,11 @@ describe("ngView", () => {
     ]);
 
     $injector.invoke(
-      (_$state_, _$timeout_, $rootScope, _$compile_, _$ngViewScroll_) => {
+      (_$state_, _$q_, _$timeout_, $rootScope, _$compile_, _$ngViewScroll_) => {
         scope = $rootScope.$new();
         $compile = _$compile_;
         $state = _$state_;
+        $q = _$q_;
         $timeout = _$timeout_;
         elem = JQLite("<div>");
         $ngViewScroll = _$ngViewScroll_;
@@ -387,7 +390,7 @@ describe("ngView", () => {
         name: "resolve",
         resolve: {
           user: function () {
-            return setTimeout(() => {
+            return $timeout(() => {
               return "joeschmoe";
             }, 100);
           },
@@ -525,16 +528,22 @@ describe("ngView", () => {
 
       // Turn on the div that holds the ng-view
       scope.someBoolean = true;
+      scope.$digest();
+
       // Verify that the ng-view is there and it has the correct content
       expect(elem.find("ng-view").text()).toBe(aState.template);
 
       // Turn off the ng-view
       scope.someBoolean = false;
+      scope.$digest();
+
       // Verify there is no ng-view in the DOM
       expect(elem.find("ng-view").length).toBe(0);
 
       // Turn on the div that holds the ng-view once again
       scope.someBoolean = true;
+      scope.$digest();
+
       // Verify that the ng-view is there and it has the correct content
       expect(elem.find("ng-view").text()).toBe(aState.template);
     });
@@ -552,9 +561,13 @@ describe("ngView", () => {
       expect(classes(elem.find("ng-view"))).not.toContain("someClass");
 
       scope.showClass = true;
+      scope.$digest();
+
       expect(classes(elem.find("ng-view"))).toContain("someClass");
 
       scope.showClass = false;
+      scope.$digest();
+
       expect(classes(elem.find("ng-view"))).not.toContain("someClass");
     });
 
@@ -571,17 +584,23 @@ describe("ngView", () => {
 
         // Lets add 3
         scope.views = ["view1", "view2", "view3"];
+        scope.$digest();
+
         // Should be 3 ng-views in the DOM
         expect(elem.find("ng-view").length).toBe(scope.views.length);
 
         // Lets add one more - yay two-way binding
         scope.views.push("view4");
+        scope.$digest();
+
         // Should have 4 ng-views
         expect(elem.find("ng-view").length).toBe(scope.views.length);
 
         // Lets remove 2 ng-views from the DOM
         scope.views.pop();
         scope.views.pop();
+        scope.$digest();
+
         // Should have 2 ng-views
         expect(elem.find("ng-view").length).toBe(scope.views.length);
       });
@@ -600,6 +619,8 @@ describe("ngView", () => {
 
         scope.views = ["view1", "view2"];
 
+        scope.$digest();
+
         let ngViews = elem.find("ng-view");
 
         expect(ngViews.eq(0).text()).toBe(lState.views.view1.template);
@@ -607,6 +628,8 @@ describe("ngView", () => {
         expect(ngViews.eq(2).length).toBe(0);
 
         scope.views.push("view3");
+        scope.$digest();
+
         ngViews = elem.find("ng-view");
 
         expect(ngViews.eq(0).text()).toBe(lState.views.view1.template);
@@ -630,6 +653,8 @@ describe("ngView", () => {
 
         scope.views = ["view1", "view2"];
 
+        scope.$digest();
+
         let ngViews = elem.find("ng-view");
 
         expect(ngViews.eq(0).text()).toBe(lState.views.view1.template);
@@ -637,6 +662,8 @@ describe("ngView", () => {
         expect(ngViews.eq(2).length).toBe(0);
 
         scope.views.push("view3");
+        scope.$digest();
+
         ngViews = elem.find("ng-view");
 
         expect(ngViews.eq(0).text()).toBe(lState.views.view1.template);
@@ -705,14 +732,14 @@ describe("ngView", () => {
   //     $animate.queue.shift();
 
   //     scope.classOn = true;
-  //     ;
+  //     scope.$digest();
 
   //     animation = $animate.queue.shift();
   //     expect(animation.event).toBe("addClass");
   //     expect(animation.element.text()).toBe(content);
 
   //     scope.classOn = false;
-  //     ;
+  //     scope.$digest();
 
   //     animation = $animate.queue.shift();
   //     expect(animation.event).toBe("removeClass");
@@ -736,7 +763,7 @@ describe("ngView", () => {
   //     expect($animate.queue.length).toBe(0);
 
   //     scope.shouldShow = true;
-  //     ;
+  //     scope.$digest();
 
   //     // $ViewDirective enter animation - Basically it's just the <!-- ngView --> comment
   //     animation = $animate.queue.shift();
@@ -749,7 +776,7 @@ describe("ngView", () => {
   //     expect(animation.element.text()).toBe(content);
 
   //     scope.shouldShow = false;
-  //     ;
+  //     scope.$digest();
 
   //     // ngView leave animation
   //     animation = $animate.queue.shift();
@@ -1021,6 +1048,8 @@ describe("ngView controllers or onEnter handlers", () => {
   it("should not go into an infinite loop when controller uses $state.go", async () => {
     el = JQLite("<div><ng-view></ng-view></div>");
     template = $compile(el)($rootScope);
+    $rootScope.$digest();
+
     await $state.transitionTo("aside");
     await wait(100);
     expect(template[0].querySelector(".aside")).toBeDefined();
@@ -1339,7 +1368,8 @@ describe("angular 1.5+ style .component()", () => {
       });
 
       const $state = svcs.$state,
-        $httpBackend = svcs.$httpBackend;
+        $httpBackend = svcs.$httpBackend,
+        $q = svcs.$q;
 
       $templateCache.set("/comp_tpl.html", "-{{ $ctrl.data }}-");
       $state.transitionTo("route2cmp");
@@ -1385,7 +1415,8 @@ describe("angular 1.5+ style .component()", () => {
       });
 
       const $state = svcs.$state,
-        $httpBackend = svcs.$httpBackend;
+        $httpBackend = svcs.$httpBackend,
+        $q = svcs.$q;
 
       $templateCache.set("/comp_tpl.html", "-{{ $ctrl.data }}-");
       $state.transitionTo("route2cmp");
@@ -1409,7 +1440,8 @@ describe("angular 1.5+ style .component()", () => {
       });
 
       const $state = svcs.$state,
-        $httpBackend = svcs.$httpBackend;
+        $httpBackend = svcs.$httpBackend,
+        $q = svcs.$q;
 
       $templateCache.set("/comp_tpl.html", "-{{ $ctrl.data }}-");
       $state.transitionTo("route2cmp");
@@ -1430,7 +1462,8 @@ describe("angular 1.5+ style .component()", () => {
       });
 
       const $state = svcs.$state,
-        $httpBackend = svcs.$httpBackend;
+        $httpBackend = svcs.$httpBackend,
+        $q = svcs.$q;
 
       $templateCache.set("/comp_tpl.html", "-{{ $ctrl.data }}-");
       $state.transitionTo("route2cmp");
@@ -1458,7 +1491,8 @@ describe("angular 1.5+ style .component()", () => {
       });
 
       const $state = svcs.$state,
-        $httpBackend = svcs.$httpBackend;
+        $httpBackend = svcs.$httpBackend,
+        $q = svcs.$q;
 
       $state.transitionTo("bindingtypes");
       await wait(100);
@@ -1513,7 +1547,8 @@ describe("angular 1.5+ style .component()", () => {
         component: "dataComponent",
       });
 
-      const $state = svcs.$state;
+      const $state = svcs.$state,
+        $q = svcs.$q;
       $state.transitionTo("data");
       await wait(100);
 
@@ -1528,7 +1563,8 @@ describe("angular 1.5+ style .component()", () => {
         resolve: { dataUser: () => "user" },
       });
 
-      const $state = svcs.$state;
+      const $state = svcs.$state,
+        $q = svcs.$q;
       $state.transitionTo("data");
       await wait(100);
 
@@ -1537,7 +1573,8 @@ describe("angular 1.5+ style .component()", () => {
 
     // Test for #3239
     it("should pass any bindings (wired from a parent component template via the ng-view) through to the child", async () => {
-      const $state = svcs.$state;
+      const $state = svcs.$state,
+        $q = svcs.$q;
 
       $stateProvider.state({
         name: "parent",
@@ -1561,7 +1598,8 @@ describe("angular 1.5+ style .component()", () => {
 
     // Test for #3239
     it("should prefer ng-view bindings over resolve data", async () => {
-      const $state = svcs.$state;
+      const $state = svcs.$state,
+        $q = svcs.$q;
 
       $stateProvider.state({
         name: "parent",
@@ -1590,7 +1628,8 @@ describe("angular 1.5+ style .component()", () => {
 
     // Test for #3239
     it("should prefer ng-view bindings over resolve data unless a bindings exists", async () => {
-      const $state = svcs.$state;
+      const $state = svcs.$state,
+        $q = svcs.$q;
 
       $stateProvider.state({
         name: "parent",
@@ -1620,7 +1659,8 @@ describe("angular 1.5+ style .component()", () => {
 
     // Test for #3239
     it("should pass & bindings (wired from a parent component via the ng-view) through to the child", async () => {
-      const $state = svcs.$state;
+      const $state = svcs.$state,
+        $q = svcs.$q;
       $rootScope.log = [];
 
       $stateProvider.state({
@@ -1653,8 +1693,9 @@ describe("angular 1.5+ style .component()", () => {
 
     // Test for #3111
     it("should bind & bindings to a resolve that returns a function", async () => {
-      const $state = svcs.$state;
-      log = [];
+      const $state = svcs.$state,
+        $q = svcs.$q,
+        log = [];
 
       $stateProvider.state({
         name: "resolve",
@@ -1676,8 +1717,9 @@ describe("angular 1.5+ style .component()", () => {
 
     // Test for #3111
     it("should bind & bindings to a resolve that returns an array-style function", async () => {
-      const $state = svcs.$state;
-      log = [];
+      const $state = svcs.$state,
+        $q = svcs.$q,
+        log = [];
 
       $stateProvider.state({
         name: "resolve",
@@ -1770,7 +1812,8 @@ describe("angular 1.5+ style .component()", () => {
       };
       $stateProvider.state(stateDef);
       const $state = svcs.$state,
-        $httpBackend = svcs.$httpBackend;
+        $httpBackend = svcs.$httpBackend,
+        $q = svcs.$q;
 
       $templateCache.set("/comp_tpl.html", "-{{ $ctrl.data }}-");
       $state.transitionTo("route2cmp");
@@ -1841,7 +1884,8 @@ describe("angular 1.5+ style .component()", () => {
       });
 
       const $state = svcs.$state,
-        $httpBackend = svcs.$httpBackend;
+        $httpBackend = svcs.$httpBackend,
+        $q = svcs.$q;
 
       $templateCache.set(
         "/comp_tpl.html",
@@ -1870,7 +1914,8 @@ describe("angular 1.5+ style .component()", () => {
         ],
       });
 
-      const $state = svcs.$state;
+      const $state = svcs.$state,
+        $q = svcs.$q;
 
       $state.transitionTo("ng12-dynamic-directive", {
         type: "ng12DynamicDirective",
@@ -1952,7 +1997,8 @@ describe("angular 1.5+ style .component()", () => {
     });
 
     it("should work with componentProvider", async () => {
-      const $state = svcs.$state;
+      const $state = svcs.$state,
+        $q = svcs.$q;
       $state.go("dynamic2", { param: "abc" });
       await wait(100);
       $state.go("dynamic2", { param: "def" });

package/src/router/hooks/lazy-load.js

@@ -61,7 +61,7 @@ export function registerLazyLoadHook(
         .entering()
         .filter((state) => !!state.$$state().lazyLoad)
         .map((state) => lazyLoadState(transition, state, stateRegistry));
-      return Promise.all(promises).then(retryTransition);
+      return services.$q.all(promises).then(retryTransition);
     },
   );
 }
@@ -86,7 +86,7 @@ export function lazyLoadState(transition, state, stateRegistry) {
     };
     const error = (err) => {
       delete lazyLoadFn["_promise"];
-      return Promise.reject(err);
+      return services.$q.reject(err);
     };
     promise = lazyLoadFn["_promise"] = services.$q
       .resolve(lazyLoadFn(transition, state))

package/src/router/hooks/views.js

@@ -1,3 +1,4 @@
+import { services } from "../common/coreservices";
 /**
  * A [[TransitionHookFn]] which waits for the views to load
  *
@@ -7,11 +8,12 @@
  * In angular 1, this includes loading the templates.
  */
 const loadEnteringViews = (transition) => {
+  const $q = services.$q;
   const enteringViews = transition.views("entering");
   if (!enteringViews.length) return;
-  return Promise.all(
-    enteringViews.map((view) => Promise.resolve(view.load())),
-  ).then(() => {});
+  return $q
+    .all(enteringViews.map((view) => $q.resolve(view.load())))
+    .then(() => {});
 };
 export const registerLoadEnteringViews = (transitionService) =>
   transitionService.onFinish({}, loadEnteringViews);

package/src/router/resolve/resolvable.js

@@ -1,4 +1,5 @@
 import { assert, isFunction, isObject } from "../../shared/utils";
+import { services } from "../common/coreservices";
 import { trace } from "../common/trace";
 import { stringify } from "../../shared/strings";
 import { isNullOrUndefined } from "../../shared/predicates";
@@ -33,7 +34,7 @@ export class Resolvable {
       this.deps = deps || [];
       this.data = data;
       this.resolved = data !== undefined;
-      this.promise = this.resolved ? Promise.resolve(this.data) : undefined;
+      this.promise = this.resolved ? services.$q.resolve(this.data) : undefined;
     } else if (
       isObject(arg1) &&
       arg1.token &&
@@ -66,9 +67,10 @@ export class Resolvable {
    * and update the Resolvable's state
    */
   resolve(resolveContext, trans) {
+    const $q = services.$q;
     // Gets all dependencies from ResolveContext and wait for them to be resolved
     const getResolvableDependencies = () =>
-      Promise.all(
+      $q.all(
         resolveContext
           .getDependencies(this)
           .map((resolvable) => resolvable.get(resolveContext, trans)),
@@ -89,7 +91,8 @@ export class Resolvable {
       return this.data;
     };
     // Sets the promise property first, then getsResolvableDependencies in the context of the promise chain. Always waits one tick.
-    return (this.promise = Promise.resolve()
+    return (this.promise = $q
+      .resolve()
       .then(getResolvableDependencies)
       .then(invokeResolveFn)
       .then(customAsyncPolicy)

package/src/router/resolve/resolve-context.js

@@ -119,7 +119,7 @@ export class ResolveContext {
    *
    * @param {string} when
    * @param trans
-   * @returns {Promise<any>|any}
+   * @returns {import("../../core/q/q").QPromise<any>|any}
    */
   resolvePath(when = "LAZY", trans) {
     // This option determines which 'when' policy Resolvables we are about to fetch.
@@ -153,7 +153,7 @@ export class ResolveContext {
       return acc.concat(wait.map(getResult));
     }, []);
     // Wait for all the "WAIT" resolvables
-    return Promise.all(promises);
+    return services.$q.all(promises);
   }
 
   injector() {

package/src/router/state/state-service.js

@@ -244,7 +244,7 @@ export class StateProvider {
       const nextCallback = callbackQueue.dequeue();
       if (nextCallback === undefined)
         return Rejection.invalid(toState.error()).toPromise();
-      const callbackResult = Promise.resolve(
+      const callbackResult = services.$q.resolve(
         nextCallback(toState, fromState, injector),
       );
       return callbackResult
@@ -459,7 +459,7 @@ export class StateProvider {
         if (error.type === RejectType.IGNORED) {
           isLatest && this.urlService.update();
           // Consider ignored `Transition.run()` as a successful `transitionTo`
-          return Promise.resolve(this.globals.current);
+          return services.$q.resolve(this.globals.current);
         }
         const detail = error.detail;
         if (
@@ -474,12 +474,12 @@ export class StateProvider {
         }
         if (error.type === RejectType.ABORTED) {
           isLatest && this.urlService.update();
-          return Promise.reject(error);
+          return services.$q.reject(error);
         }
       }
       const errorHandler = this.defaultErrorHandler();
       errorHandler(error);
-      return Promise.reject(error);
+      return services.$q.reject(error);
     };
     const transition = this.transitionService.create(currentPath, ref);
     const transitionToPromise = transition

package/src/router/state/state.spec.js

@@ -12,7 +12,8 @@ describe("$state", () => {
   }
 
   async function initStateTo(state, params) {
-    const $state = $get("$state");
+    const $state = $get("$state"),
+      $q = $get("$q");
     return $state.transitionTo(state, params || {});
   }
 
@@ -240,7 +241,7 @@ describe("$state", () => {
             url: "/resolve-timeout/:foo",
             resolve: {
               value: function ($timeout) {
-                return setTimeout(function () {
+                return $timeout(function () {
                   log += "Success!";
                 }, 1);
               },
@@ -310,6 +311,7 @@ describe("$state", () => {
           _$state_,
           _$stateParams_,
           _$transitions_,
+          _$q_,
           _$location_,
           _$compile_,
           _$stateRegistry_,
@@ -318,6 +320,7 @@ describe("$state", () => {
           $state = _$state_;
           $stateParams = _$stateParams_;
           $transitions = _$transitions_;
+          $q = _$q_;
           $location = _$location_;
           $compile = _$compile_;
           $stateRegistry = _$stateRegistry_;

package/src/router/state/state.test.js

@@ -1,6 +1,6 @@
 import { test, expect } from "@playwright/test";
 
-const TEST_URL = "src/router/state/state.html";
+const TEST_URL = "src/router/state/state.html?random=false";
 
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);

package/src/router/state/views.js

@@ -115,19 +115,22 @@ export class Ng1ViewConfig {
   }
 
   load() {
+    const $q = services.$q;
     const context = new ResolveContext(this.path);
     const params = this.path.reduce(
       (acc, node) => Object.assign(acc, node.paramValues),
       {},
     );
-    const promises = [
-      Promise.resolve(this.factory.fromConfig(this.viewDecl, params, context)),
-      Promise.resolve(this.getController(context)),
-    ];
-    return Promise.all(promises).then((results) => {
+    const promises = {
+      template: $q.resolve(
+        this.factory.fromConfig(this.viewDecl, params, context),
+      ),
+      controller: $q.resolve(this.getController(context)),
+    };
+    return $q.all(promises).then((results) => {
       trace.traceViewServiceEvent("Loaded", this);
-      this.controller = results[0];
-      Object.assign(this, results[1]); // Either { template: "tpl" } or { component: "cmpName" }
+      this.controller = results.controller;
+      Object.assign(this, results.template); // Either { template: "tpl" } or { component: "cmpName" }
       return this;
     });
   }

package/src/router/template-factory.js

@@ -24,18 +24,21 @@ export class TemplateFactoryProvider {
     "$http",
     "$templateCache",
     "$templateRequest",
+    "$q",
     "$injector",
     /**
      * @param {any} $http
      * @param {import("../core/cache/cache-factory").TemplateCache} $templateCache
      * @param {any} $templateRequest
+     * @param {any} $q
      * @param {import("../core/di/internal-injector").InjectorService} $injector
      * @returns
      */
-    ($http, $templateCache, $templateRequest, $injector) => {
+    ($http, $templateCache, $templateRequest, $q, $injector) => {
       this.$templateRequest = $templateRequest;
       this.$http = $http;
       this.$templateCache = $templateCache;
+      this.$q = $q;
       this.$injector = $injector;
       return this;
     },
@@ -66,9 +69,9 @@ export class TemplateFactoryProvider {
   fromConfig(config, params, context) {
     const defaultTemplate = "<ui-view></ui-view>";
     const asTemplate = (result) =>
-      Promise.resolve(result).then((str) => ({ template: str }));
+      this.$q.resolve(result).then((str) => ({ template: str }));
     const asComponent = (result) =>
-      Promise.resolve(result).then((str) => ({ component: str }));
+      this.$q.resolve(result).then((str) => ({ component: str }));
 
     const getConfigType = (config) => {
       if (isDefined(config.template)) return "template";

package/src/router/template-factory.spec.js

@@ -36,6 +36,7 @@ describe("templateFactory", () => {
   describe("should follow $sce policy and", () => {
     it("accepts relative URLs", async () => {
       let res = $templateFactory.fromUrl("mock/hello");
+      $scope.$digest();
       await wait(100);
       expect(res.$$state.status).toBe(1);
     });
@@ -127,6 +128,7 @@ describe("templateFactory", () => {
     it("should not prefix the components dom element with anything", async () => {
       $stateRegistry.register({ name: "cmp", component: "myComponent" });
       $stateService.go("cmp");
+      $scope.$digest();
       await wait(100);
       expect(el.html()).toMatch(/\<my-component/);
     });
@@ -137,12 +139,14 @@ describe("templateFactory", () => {
         component: "dataComponent",
       });
       $stateService.go("cmp");
+      $scope.$digest();
       expect(el.html()).toMatch(/\<x-data-component/);
     });
 
     it("should prefix the components dom element with x- for components named xFoo", () => {
       $stateRegistry.register({ name: "cmp", component: "xComponent" });
       $stateService.go("cmp");
+      $scope.$digest();
       expect(el.html()).toMatch(/\<x-x-component/);
     });
   });

package/src/router/transition/transition-hook.js

@@ -37,7 +37,7 @@ export class TransitionHook {
     // Chain the next hook off the previous
     const createHookChainR = (prev, nextHook) =>
       prev.then(() => nextHook.invokeHook());
-    return hooks.reduce(createHookChainR, waitFor || Promise.resolve());
+    return hooks.reduce(createHookChainR, waitFor || services.$q.resolve());
   }
   /**
    * Invokes all the provided TransitionHooks, in order.