add Transition.waitFor() method

packages/router_js/lib/route-info.ts

@@ -248,6 +248,7 @@ export default class InternalRouteInfo<R extends Route> {
         throwIfAborted(transition);
         return route;
       })
+      .then(() => transition._pausingPromise || Promise.resolve(null))
       .then(() => this.runBeforeModelHook(transition))
       .then(() => throwIfAborted(transition))
       .then(() => this.getModel(transition))

packages/router_js/lib/router.ts

@@ -123,8 +123,10 @@ export default abstract class Router<R extends Route> {
 
       this.routeWillChange(newTransition);
 
-      newTransition.promise = newTransition.promise!.then(
-        (result: TransitionState<R> | Route | Error | undefined) => {
+      let transitionPromise = newTransition.promise!;
+      newTransition.promise = (newTransition._pausingPromise || Promise.resolve(null))
+        .then(() => transitionPromise)
+        .then((result: TransitionState<R> | Route | Error | undefined) => {
           if (!newTransition.isAborted) {
             this._updateURL(newTransition, oldState);
             this.didTransition(this.currentRouteInfos!);

packages/router_js/lib/transition.ts

@@ -71,6 +71,7 @@ export default class Transition<R extends Route> implements Partial<Promise<R>>
   _visibleQueryParams: Dict<unknown> = {};
   isIntermediate = false;
   [REDIRECT_DESTINATION_SYMBOL]?: Transition<R>;
+   _pausingPromise?: Promise<any>;
 
   /**
     In non-production builds, this function will return the stack that this Transition was
@@ -309,6 +310,10 @@ export default class Transition<R extends Route> implements Partial<Promise<R>>
     }
   }
 
+  waitFor(promise: Promise<any>) {
+     this._pausingPromise = promise;
+   }
+
   redirect(newTransition: Transition<R>) {
     this[REDIRECT_DESTINATION_SYMBOL] = newTransition;
     this.rollback();

packages/router_js/tests/async_get_handler_test.ts

@@ -1,18 +1,36 @@
-import type { Route } from '../index';
+import Router, { Route, Transition, TransitionError } from '../index';
+import RouteInfo from '../lib/route-info';
 import type { Dict } from '../lib/core';
 import { Promise } from 'rsvp';
-import { createHandler, TestRouter } from './test_helpers';
+import { createHandler, TestRouter, trigger } from './test_helpers';
 
-function map(router: TestRouter) {
+function map(router: Router<Route>) {
   router.map(function (match) {
     match('/index').to('index');
+    match('/query').to('query');
     match('/foo').to('foo', function (match) {
       match('/').to('fooIndex');
       match('/bar').to('fooBar');
     });
   });
 }
 
+function createDeferred<T>(): {
+  promise: Promise<T>;
+  resolve: (value?: T | PromiseLike<T>) => void;
+  reject: (reason?: unknown) => void;
+} {
+  let resolve!: (value?: T | PromiseLike<T>) => void;
+  let reject!: (reason?: unknown) => void;
+
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+
+  return { promise, resolve, reject };
+}
+
 // Intentionally use QUnit.module instead of module from test_helpers
 // so that we avoid using Backburner to handle the async portions of
 // the test suite
@@ -111,3 +129,173 @@ QUnit.test('calls hooks of lazily-resolved routes in order', function (assert) {
     done();
   }, null);
 });
+
+QUnit.test('pause transitions', function (assert) {
+  let done = assert.async();
+  let operations: string[] = [];
+  let enteredWillChange = 0;
+  let enteredDidError = 0;
+
+  class PauseRouter extends TestRouter {
+    getRoute(name: string) {
+      operations.push('resolved ' + name);
+      return routes[name] || (routes[name] = createHandler('empty'));
+    }
+  }
+
+  let router: Router<Route> = new PauseRouter();
+
+  router.routeWillChange = (transition: Transition) => {
+    enteredWillChange++;
+
+    const { promise, resolve, reject } = createDeferred();
+    transition.waitFor(promise);
+    setTimeout(() => {
+      operations.push('paused transition');
+      if (enteredWillChange === 1) {
+        resolve();
+        operations.push('resolved pause');
+      } else {
+        reject('reject');
+        operations.push('rejected pause');
+      }
+    }, 1);
+  };
+
+  router.transitionDidError = (error: TransitionError, transition: Transition) => {
+    enteredDidError++;
+    assert.equal('reject', error.error);
+    transition.trigger(false, 'error', error.error, transition, error.route);
+    transition.abort();
+    return error.error;
+  };
+
+  map(router);
+
+  routes['index'] = createHandler('index', {
+    model: function () {
+      operations.push('model index');
+    },
+  });
+  routes['foo'] = createHandler('foo', {
+    model: function () {
+      operations.push('model foo');
+    },
+  });
+  routes['fooBar'] = createHandler('fooBar', {
+    model: function () {
+      operations.push('model fooBar');
+    },
+  });
+
+  router.transitionTo('/index').then(function () {
+    assert.deepEqual(
+      operations,
+      [
+        'resolved index',
+        'paused transition',
+        'resolved pause',
+        'model index',
+      ],
+      'order of /index operations is correct'
+    );
+
+    operations = [];
+
+    router.transitionTo('/foo/bar').catch(function () {
+      assert.deepEqual(
+        operations,
+        [
+          'resolved foo',
+          'resolved fooBar',
+          'paused transition',
+          'rejected pause',
+        ],
+        'order of /foo/bar operations is correct'
+      );
+      done();
+    });
+
+  }, null);
+});
+
+QUnit.test('pause transitions query params only', function (assert) {
+  let done = assert.async();
+  let operations: string[] = [];
+  let enteredWillChange = 0;
+
+  class QpPauseRouter extends TestRouter {
+    getRoute(name: string) {
+      operations.push('resolved ' + name);
+      return routes[name] || (routes[name] = createHandler('empty'));
+    }
+    triggerEvent(
+      handlerInfos: RouteInfo<Route>[],
+      ignoreFailure: boolean,
+      name: string,
+      args: any[]
+    ) {
+      trigger(handlerInfos, ignoreFailure, name, ...args);
+    }
+  }
+
+  let router: Router<Route> = new QpPauseRouter();
+
+  router.routeWillChange = (transition: Transition) => {
+    enteredWillChange++;
+
+    const { promise, resolve } = createDeferred();
+    transition.waitFor(promise);
+    setTimeout(() => {
+      operations.push('paused transition');
+      resolve();
+      operations.push('resolved pause');
+    }, 1);
+  };
+
+  map(router);
+
+  routes['query'] = createHandler('query', {
+    model: function () {
+      operations.push('model query');
+    },
+
+    events: {
+      finalizeQueryParamChange: function ({ param }: { param: string }) {
+        operations.push('param is now ' + param);
+      }
+    },
+  });
+
+  router.transitionTo('/query').then(function () {
+    operations = [];
+    router.transitionTo('/query?param=1').then(function () {
+      assert.deepEqual(
+        operations,
+        [
+          'resolved query',
+          'param is now 1',
+          'paused transition',
+          'resolved pause',
+        ],
+        'order of /query?param=1 operations is correct'
+      );
+
+      operations = [];
+      router.transitionTo('/query?param=2').then(function () {
+        assert.deepEqual(
+          operations,
+          [
+            'resolved query',
+            'param is now 2',
+            'paused transition',
+            'resolved pause',
+          ],
+          'order of /query?param=2 operations is correct'
+        );
+        done();
+      });
+
+    }, null);
+  });
+});