diff --git a/addon/components/category-nav/category.hbs b/addon/components/category-nav/category.hbs
index cc780be0..f395a2fe 100644
--- a/addon/components/category-nav/category.hbs
+++ b/addon/components/category-nav/category.hbs
@@ -15,7 +15,10 @@
{{set-style color=@category.color}}
/>
-
diff --git a/addon/components/category-nav/category.js b/addon/components/category-nav/category.js
index 71aff1c1..e372ee0c 100644
--- a/addon/components/category-nav/category.js
+++ b/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,
},
});
}
diff --git a/addon/components/document-list-item.hbs b/addon/components/document-list-item.hbs
index 778805d7..c25b42e0 100644
--- a/addon/components/document-list-item.hbs
+++ b/addon/components/document-list-item.hbs
@@ -1,6 +1,7 @@
diff --git a/addon/components/tag-filter.hbs b/addon/components/tag-filter.hbs
index 40756151..b770d508 100644
--- a/addon/components/tag-filter.hbs
+++ b/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}}
diff --git a/addon/routes/application.js b/addon/routes/application.js
index 7fcf48aa..177b34f1 100644
--- a/addon/routes/application.js
+++ b/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();
- }
}
}
diff --git a/tests/acceptance/documents-test.js b/tests/acceptance/documents-test.js
index 67cf44b1..ca1c918f 100644
--- a/tests/acceptance/documents-test.js
+++ b/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"
+ );
+ });
});