Melsumner/issue 378 (#379)

* add devdep
* add test
* update tests to cover additional combinations of scenarios
* Updating the hasQueryParams function

addon/components/navigation-narrator.js

@@ -76,15 +76,14 @@ export default class NavigationNarratorComponent extends Component {
   /*
    * @param hasQueryParams
    * @type {boolean}
-   * @description Detect if the `transition.from` or the `transition.to` has queryParams.
+   * @description Check for queryParams.
    * @default false
    */
   get hasQueryParams() {
-    const qps =
-      (this.transition.from && this.transition.from.queryParams) ||
-      (this.transition.to && this.transition.to.queryParams);
-
-    if (qps && Object.keys(qps).length > 0) {
+    if (
+      Object.keys(this.transition.from.queryParams || {}).length ||
+      Object.keys(this.transition.to.queryParams).length > 0
+    ) {
       return true;
     } else {
       return false;
@@ -108,7 +107,10 @@ export default class NavigationNarratorComponent extends Component {
     let shouldFocus;
     this.transition = transition; // We need to do this because we can't pass an argument to a getter
 
-    if (this.excludeAllQueryParams && this.hasQueryParams) {
+    // add a check to see if it's the same route (question: what if the user refreshes the page?)
+    let hasSameRoute = this.transition.from.name === this.transition.to.name;
+
+    if (this.excludeAllQueryParams && this.hasQueryParams && hasSameRoute) {
       return;
     }
 

package.json

@@ -70,6 +70,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
     "loader.js": "^4.7.0",
+    "npm-run-all": "^4.1.5",
     "npm-run-all2": "^5.0.0",
     "prettier": "^2.5.1",
     "qunit": "^2.17.2",

tests/integration/components/navigation-narrator-test.js

@@ -173,5 +173,88 @@ module('Integration | Component | navigation-narrator', function (hooks) {
 
       assert.dom('#ember-a11y-refocus-nav-message').isFocused();
     });
+
+    test('excludeAllQueryParams is true, queryParams do not exist but are added, do not manage focus', async function (assert) {
+      let router = this.owner.lookup('service:router');
+
+      await render(hbs`<NavigationNarrator @excludeAllQueryParams={{true}} />`);
+      router.trigger(
+        'routeDidChange',
+        new MockTransition({
+          from: new MockRouteInfo({
+            name: 'biscuit',
+            params: { id: 'hobnob' },
+          }),
+          to: new MockRouteInfo({
+            name: 'biscuit',
+            params: { id: 'hobnob' },
+            queryParams: { region: 'apac' },
+          }),
+        })
+      );
+
+      await settled();
+
+      assert.dom('#ember-a11y-refocus-nav-message').isNotFocused();
+    });
+
+    test('excludeAllQueryParams is true, queryParams exist on the route but then are emptied, still do not manage focus', async function (assert) {
+      let router = this.owner.lookup('service:router');
+
+      await render(hbs`<NavigationNarrator @excludeAllQueryParams={{true}} />`);
+      router.trigger(
+        'routeDidChange',
+        new MockTransition({
+          from: new MockRouteInfo({
+            name: 'biscuit',
+            params: { id: 'hobnob' },
+            queryParams: { region: 'apac' },
+          }),
+          to: new MockRouteInfo({
+            name: 'biscuit',
+            params: { id: 'hobnob' },
+          }),
+        })
+      );
+
+      await settled();
+
+      assert.dom('#ember-a11y-refocus-nav-message').isNotFocused();
+    });
+
+    test('excludeAllQueryParams is true, queryParams exist on the route, user navigates to new route without any query params, manage focus', async function (assert) {
+      let router = this.owner.lookup('service:router');
+
+      await render(hbs`<NavigationNarrator @excludeAllQueryParams={{true}} />`);
+      router.trigger(
+        'routeDidChange',
+        new MockTransition({
+          from: new MockRouteInfo({
+            name: 'biscuit',
+            params: { id: 'hobnob' },
+            queryParams: { region: 'apac' },
+            parent: new MockRouteInfo({
+              name: 'biscuits',
+              parent: new MockRouteInfo({
+                name: 'application',
+              }),
+            }),
+          }),
+          to: new MockRouteInfo({
+            name: 'index',
+            parent: new MockRouteInfo({
+              name: 'cakes',
+              parent: new MockRouteInfo({
+                name: 'application',
+              }),
+            }),
+          }),
+        })
+      );
+
+      await settled();
+
+      assert.dom('#ember-a11y-refocus-nav-message').isFocused();
+    });
   });
 });