Updated tests, worked on logic (2 failing tests at this point)

Co-authored-by: Joseph D. Sumner <me@jds.dev>
ember-a11y · May 31, 2024 · 928d702 · 928d702
1 parent 2acae3f
commit 928d702
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 14 deletions.
diff --git a/addon/components/navigation-narrator.js b/addon/components/navigation-narrator.js
@@ -73,6 +73,25 @@ export default class NavigationNarratorComponent extends Component {
     return this.args.includeAllQueryParams ?? true;
   }
 
+  /*
+   * @param hasQueryParams
+   * @type {boolean}
+   * @description Detect if the `transition.from` or the `transition.to` has queryParams.
+   * @default false
+   */
+  get hasQueryParams() {
+    const qps =
+      (this.transition.from && this.transition.from.queryParams) ||
+      (this.transition.to && this.transition.to.queryParams);
+    // this.transition.from.queryParams || this.transition.to.queryParams;
+    if (qps && Object.keys(qps).length > 0) {
+      console.log('hasQueryParams', qps);
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   constructor() {
     super(...arguments);
 
@@ -89,10 +108,17 @@ export default class NavigationNarratorComponent extends Component {
   onRouteChange(transition) {
     let shouldFocus;
 
-    // TODO need to detect if there are any query params or not, though. Maybe do this in the includeAllQueryParams getter?
+    // console.log('transition from QP', transition.from.queryParams);
+    // console.log('transition to QP', transition.to.queryParams);
+
+    // if `includeAllQueryParams` is true, we should manage focus
     if (this.includeAllQueryParams) {
       shouldFocus = this.routeChangeValidator(transition);
+    } else if (this.includeAllQueryParams === false && !this.hasQueryParams) {
+      // if `includeAllQueryParams` is false BUT there are no query params, we should still manage focus
+      shouldFocus = this.routeChangeValidator(transition);
     } else {
+      // if `includeAllQueryParams` is false and there are query params, we should NOT manage focus
       return;
     }
 

diff --git a/tests/integration/components/navigation-narrator-test.js b/tests/integration/components/navigation-narrator-test.js
@@ -70,7 +70,7 @@ module('Integration | Component | navigation-narrator', function (hooks) {
   });
 
   module('on routeDidChange', function () {
-    test('it takes focus', async function (assert) {
+    test('it handles focus', async function (assert) {
       let router = this.owner.lookup('service:router');
 
       await render(hbs`<NavigationNarrator />`);
@@ -110,12 +110,10 @@ module('Integration | Component | navigation-narrator', function (hooks) {
       assert.dom('#ember-a11y-refocus-nav-message').isNotFocused();
     });
 
-    test('it does not transition routes if `includeAllQueryParams` is false and there are query params', async function (assert) {
+    test('it transitions routes if `includeAllQueryParams` is true (default) and there are query params', async function (assert) {
       let router = this.owner.lookup('service:router');
 
-      await render(
-        hbs`<NavigationNarrator @includeAllQueryParams={{false}} />`
-      );
+      await render(hbs`<NavigationNarrator />`);
 
       router.trigger(
         'routeDidChange',
@@ -147,27 +145,55 @@ module('Integration | Component | navigation-narrator', function (hooks) {
 
       await settled();
 
-      assert.dom('#ember-a11y-refocus-nav-message').isNotFocused();
+      assert.dom('#ember-a11y-refocus-nav-message').isFocused();
     });
 
-    test('it still transitions routes if `includeAllQueryParams` is false but there are not query params', async function (assert) {
+    test('it does not transition routes if `includeAllQueryParams` is false and there are query params', async function (assert) {
       let router = this.owner.lookup('service:router');
 
       await render(
         hbs`<NavigationNarrator @includeAllQueryParams={{false}} />`
       );
 
-      router.trigger('routeDidChange', new MockTransition());
+      router.trigger(
+        'routeDidChange',
+        new MockTransition({
+          from: new MockRouteInfo({
+            name: 'biscuit',
+            params: { id: 'hobnob' },
+            parent: new MockRouteInfo({
+              name: 'biscuits',
+              queryParams: { region: 'amer' },
+              parent: new MockRouteInfo({
+                name: 'application',
+              }),
+            }),
+          }),
+          to: new MockRouteInfo({
+            name: 'biscuit',
+            params: { id: 'hobnob' },
+            parent: new MockRouteInfo({
+              name: 'biscuits',
+              queryParams: { region: 'apac' },
+              parent: new MockRouteInfo({
+                name: 'application',
+              }),
+            }),
+          }),
+        })
+      );
 
       await settled();
 
-      assert.dom('#ember-a11y-refocus-nav-message').isFocused();
+      assert.dom('#ember-a11y-refocus-nav-message').isNotFocused();
     });
 
-    test('it transitions routes if `includeAllQueryParams` is true (default) and there are query params', async function (assert) {
+    test('it still transitions routes and manages focus if `includeAllQueryParams` is false BUT there are no query params', async function (assert) {
       let router = this.owner.lookup('service:router');
 
-      await render(hbs`<NavigationNarrator />`);
+      await render(
+        hbs`<NavigationNarrator @includeAllQueryParams={{false}} />`
+      );
 
       router.trigger(
         'routeDidChange',
@@ -177,7 +203,6 @@ module('Integration | Component | navigation-narrator', function (hooks) {
             params: { id: 'hobnob' },
             parent: new MockRouteInfo({
               name: 'biscuits',
-              queryParams: { region: 'amer' },
               parent: new MockRouteInfo({
                 name: 'application',
               }),
@@ -188,7 +213,6 @@ module('Integration | Component | navigation-narrator', function (hooks) {
             params: { id: 'hobnob' },
             parent: new MockRouteInfo({
               name: 'biscuits',
-              queryParams: { region: 'apac' },
               parent: new MockRouteInfo({
                 name: 'application',
               }),