From 48e8a0bd671b9fffa04bab0ac45cb0279e7897f5 Mon Sep 17 00:00:00 2001 From: Stephan Hug Date: Wed, 24 Nov 2021 17:59:19 +0100 Subject: [PATCH] tests: additional data-test selectors which will make testing much easier 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 | 5 +- addon/components/category-nav/category.js | 8 +++ addon/components/document-list-item.hbs | 1 + addon/components/tag-filter.hbs | 2 + addon/routes/application.js | 18 ------ tests/acceptance/documents-test.js | 71 ++++++++++++++++++++++ 6 files changed, 86 insertions(+), 19 deletions(-) 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}} /> -
+
{{@category.name}}
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" + ); + }); });