tests: additional data-test selectors which will make testing much ea…

…sier in the future

fix: clear tag selection on category change but not document selection change
tests: add two tests covering the aforementioned tag selection issues

addon/components/category-nav/category.hbs

@@ -15,7 +15,10 @@
           {{set-style color=@category.color}}
         />
       </div>
-      <div data-test-name>
+      <div
+        data-test-name
+        data-test-category-id={{@category.id}}
+      >
         {{@category.name}}
       </div>
     </div>

addon/components/category-nav/category.js

@@ -1,3 +1,4 @@
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
@@ -6,13 +7,20 @@ export default class CategoryNavCategoryComponent extends Component {
   @service documents;
   @service router;
 
+  get controllerInstance() {
+    const applicationInstance = getOwner(this);
+    return applicationInstance.lookup("controller:application");
+  }
+
   @action loadCategory() {
     this.documents.clearDocumentSelection();
+    this.controllerInstance.resetTagFilter();
     this.router.transitionTo({
       queryParams: {
         category: this.args.category.id,
         search: undefined,
         document: undefined,
+        tags: undefined,
       },
     });
   }

addon/components/document-list-item.hbs

@@ -1,6 +1,7 @@
 <tr
   class={{if @isSelected "document-list-item-selected" "document-list-item"}}
   data-test-document-list-item
+  data-test-document-list-item-id={{@document.id}}
   role="button"
   {{on "click" (fn @onClickDocument @document)}}
 >

addon/components/tag-filter.hbs

@@ -11,6 +11,8 @@
         if (includes tag.id this.selectedTagsArray) "uk-background-secondary"
       }}"
       {{on "click" (fn this.toggleTag tag)}}
+      data-test-tag
+      data-test-tag-id={{tag.id}}
     >
       {{tag.name}}
     </button>

addon/routes/application.js

@@ -1,4 +1,3 @@
-import { getOwner } from "@ember/application";
 import Route from "@ember/routing/route";
 import { inject as service } from "@ember/service";
 
@@ -15,27 +14,10 @@ export default class ApplicationRoute extends Route {
 
   @service config;
 
-  get controllerInstance() {
-    const applicationInstance = getOwner(this);
-    return applicationInstance.lookup("controller:application");
-  }
-
   model() {}
 
   afterModel(model, transition) {
     this.config.alexandriaQueryParams = transition.to.parent.params;
     this.config.activeGroup = transition.to.queryParams.activeGroup;
-
-    /* If we change the category we need to reset the tags 
-    otherwise the user might end up with no documents and 
-    no ability to reset the filter unless they go back to 
-    the previous category and deselect the filter before navigating 
-    to the new category */
-    if (
-      transition.to?.queryParams?.category !==
-      transition.from?.queryParams?.category
-    ) {
-      this.controllerInstance.resetTagFilter();
-    }
   }
 }

tests/acceptance/documents-test.js

@@ -265,4 +265,75 @@ module("Acceptance | documents", function (hooks) {
       .dom("[data-test-document-list-item].document-list-item-selected")
       .doesNotExist();
   });
+
+  test("changing the category clears the tag selection", async function (assert) {
+    assert.expect(5);
+
+    await this.server.createList("document", 3);
+    const tag = await this.server.create("tag");
+    const category = await this.server.create("category");
+
+    await visit("/");
+
+    assert
+      .dom(`[data-test-tag-id="${tag.id}"]`)
+      .doesNotHaveClass(
+        "uk-background-secondary",
+        "the tag does not have the selected class"
+      );
+
+    await click(`[data-test-tag-id="${tag.id}"]`);
+
+    assert
+      .dom(`[data-test-tag-id="${tag.id}"]`)
+      .hasClass(
+        "uk-background-secondary",
+        "the tag does has the selected class"
+      );
+    assert.equal(
+      currentURL(),
+      `/?tags=${tag.id}`,
+      "tag has been selected and is present in the URL"
+    );
+
+    await click(`[data-test-category-id="${category.id}"]`);
+
+    assert.equal(
+      currentURL(),
+      `/?category=${category.id}`,
+      "the category has been set and the tags queryParam has been cleared"
+    );
+    assert
+      .dom(`[data-test-tag-id="${tag.id}"]`)
+      .doesNotHaveClass(
+        "uk-background-secondary",
+        "the tag does not have the selected class"
+      );
+  });
+
+  test("selecting a document does not clear the tag selection", async function (assert) {
+    assert.expect(2);
+
+    const documents = await this.server.createList("document", 2);
+    const tag = await this.server.create("tag");
+
+    await visit("/");
+    await click(`[data-test-tag-id="${tag.id}"]`);
+
+    assert
+      .dom(`[data-test-tag-id="${tag.id}"]`)
+      .hasClass(
+        "uk-background-secondary",
+        "the tag does has the selected class"
+      );
+
+    await click(`[data-test-document-list-item-id="${documents[0].id}"]`);
+
+    assert
+      .dom(`[data-test-tag-id="${tag.id}"]`)
+      .hasClass(
+        "uk-background-secondary",
+        "the tag still has the selected class"
+      );
+  });
 });