Merge pull request #19448 from sly7-7/loading-state-qp-bug

Ensure query params are preserved through an intermediate loading state transition

Author: rwjblue

package.json

@@ -141,7 +141,7 @@
     "rollup-plugin-commonjs": "^9.3.4",
     "rollup-plugin-node-resolve": "^4.2.4",
     "route-recognizer": "^0.3.4",
-    "router_js": "^7.1.1",
+    "router_js": "^7.2.0",
     "rsvp": "^4.8.5",
     "serve-static": "^1.14.1",
     "simple-dom": "^1.4.0",

packages/ember/tests/routing/substates_test.js

@@ -1,5 +1,7 @@
 import { RSVP } from '@ember/-internals/runtime';
 import { Route } from '@ember/-internals/routing';
+import Controller from '@ember/controller';
+
 import { moduleFor, ApplicationTestCase, runTask } from 'internal-test-helpers';
 
 let counter;
@@ -193,6 +195,155 @@ moduleFor(
       });
     }
 
+    ['@test Enter loading route with correct query parameters'](assert) {
+      let deferred = RSVP.defer();
+
+      this.router.map(function () {
+        this.route('dummy');
+      });
+
+      this.add(
+        'route:dummy',
+        Route.extend({
+          model() {
+            step(assert, 1, 'DummyRoute#model');
+            return deferred.promise;
+          },
+        })
+      );
+
+      this.add(
+        'controller:application',
+        class extends Controller {
+          queryParams = ['qux'];
+
+          qux = 'initial';
+        }
+      );
+
+      this.add(
+        'route:loading',
+        Route.extend({
+          setupController() {
+            step(assert, 2, 'LoadingRoute#setupController');
+          },
+        })
+      );
+      this.addTemplate('dummy', 'DUMMY');
+
+      return this.visit('/?qux=updated').then(() => {
+        assert.equal(
+          this.getController('application').qux,
+          'updated',
+          'the application controller has the correct qp value'
+        );
+
+        let promise = this.visit('/dummy?qux=updated').then(() => {
+          let text = this.$('#app').text();
+
+          assert.equal(text, 'DUMMY', `dummy template has been rendered`);
+          assert.equal(
+            this.getController('application').qux,
+            'updated',
+            'the application controller has the correct qp value'
+          );
+        });
+
+        assert.equal(this.currentPath, 'loading', `loading state entered`);
+        assert.equal(
+          this.currentURL,
+          '/dummy?qux=updated',
+          `during loading url reflect the correct state`
+        );
+        assert.equal(
+          this.getController('application').qux,
+          'updated',
+          'the application controller has the correct qp value'
+        );
+
+        deferred.resolve();
+
+        return promise;
+      });
+    }
+
+    ['@test Enter child-loading route with correct query parameters'](assert) {
+      assert.expect(9);
+      let deferred = RSVP.defer();
+
+      this.router.map(function () {
+        this.route('parent', function () {
+          this.route('child');
+        });
+      });
+
+      this.add(
+        'route:parent.child',
+        Route.extend({
+          model() {
+            step(assert, 1, 'ChildRoute#model');
+            return deferred.promise;
+          },
+        })
+      );
+
+      this.add(
+        'controller:parent',
+        class extends Controller {
+          queryParams = ['qux'];
+
+          qux = 'initial';
+        }
+      );
+
+      this.add(
+        'route:parent.child_loading',
+        Route.extend({
+          setupController() {
+            step(assert, 2, 'ChildLoadingRoute#setupController');
+          },
+        })
+      );
+      this.addTemplate('parent', 'PARENT {{outlet}}');
+
+      this.addTemplate('parent.child', 'CHILD');
+
+      return this.visit('/parent?qux=updated').then(() => {
+        assert.equal(
+          this.getController('parent').qux,
+          'updated',
+          'in the parent route, the parent controller has the correct qp value'
+        );
+
+        let promise = this.visit('/parent/child?qux=updated').then(() => {
+          let text = this.$('#app').text();
+
+          assert.equal(text, 'PARENT CHILD', `child template has been rendered`);
+          assert.equal(
+            this.getController('parent').qux,
+            'updated',
+            'after entered in the parent.child route, the parent controller has the correct qp value'
+          );
+        });
+
+        assert.equal(this.currentPath, 'parent.child_loading', `child loading state entered`);
+        assert.equal(
+          this.currentURL,
+          '/parent/child?qux=updated',
+          `during child loading, url reflect the correct state`
+        );
+        assert.equal(
+          this.getController('parent').qux,
+          'updated',
+          'in the child_loading route, the parent controller has the correct qp value'
+        );
+
+        deferred.resolve();
+
+        return promise;
+      });
+    }
+
     ['@test Slow promises returned from ApplicationRoute#model enter ApplicationLoadingRoute if present'](
       assert
     ) {

yarn.lock

@@ -8907,10 +8907,10 @@ route-recognizer@^0.3.4:
   resolved "https://registry.yarnpkg.com/route-recognizer/-/route-recognizer-0.3.4.tgz#39ab1ffbce1c59e6d2bdca416f0932611e4f3ca3"
   integrity sha512-2+MhsfPhvauN1O8KaXpXAOfR/fwe8dnUXVM+xw7yt40lJRfPVQxV6yryZm0cgRvAj5fMF/mdRZbL2ptwbs5i2g==
 
-router_js@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/router_js/-/router_js-7.1.1.tgz#cb7614a96cfb6bc65c066668b2dd32e3ad7ca38d"
-  integrity sha512-kOdKqBj7aj9GusG0umtWgkTtNtDspT9EfJNnJN9B8g0DDNp9CdIwpO+2Qnmf/fNos38Pj9jlfU44l/oycn5goQ==
+router_js@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/router_js/-/router_js-7.2.0.tgz#a7168155fe494f85f1e5058802a3a633c29ea243"
+  integrity sha512-kZBOqD/kRMDymmVbiVrX6OK3cGBoG1c9tO8egxkoxX2TgC78sBwFhvFqkAJLvK8oTEXYNcjk8+FbNIn9hg9VMA==
   dependencies:
     "@glimmer/env" "^0.1.7"