diff --git a/webapp/pages/index.spec.js b/webapp/pages/index.spec.js index baf091d47..7b01bafc9 100644 --- a/webapp/pages/index.spec.js +++ b/webapp/pages/index.spec.js @@ -20,6 +20,8 @@ describe('PostIndex', () => { beforeEach(() => { mutations = { 'posts/TOGGLE_ORDER': jest.fn(), + 'posts/RESET_CATEGORIES': jest.fn(), + 'posts/TOGGLE_CATEGORY': jest.fn(), } store = new Vuex.Store({ getters: { @@ -93,6 +95,23 @@ describe('PostIndex', () => { wrapper.find(HashtagsFilter).vm.$emit('clearSearch') expect(wrapper.vm.hashtag).toBeNull() }) + + describe('category filter', () => { + beforeEach(() => { + mocks.$route.query = { + categoryId: 'cat3', + } + wrapper = Wrapper() + }) + + it('resets the category filter', () => { + expect(mutations['posts/RESET_CATEGORIES']).toBeCalled() + }) + + it('sets the category', () => { + expect(mutations['posts/TOGGLE_CATEGORY']).toBeCalledWith({}, 'cat3') + }) + }) }) describe('mount', () => { diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue index 8b06341eb..aacdc4344 100644 --- a/webapp/pages/index.vue +++ b/webapp/pages/index.vue @@ -61,7 +61,7 @@ import HcEmpty from '~/components/Empty/Empty' import PostTeaser from '~/components/PostTeaser/PostTeaser.vue' import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue' import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue' -import { mapGetters } from 'vuex' +import { mapGetters, mapMutations } from 'vuex' import { DonationsQuery } from '~/graphql/Donations' import { filterPosts } from '~/graphql/PostQuery.js' import UpdateQuery from '~/components/utils/UpdateQuery' @@ -108,9 +108,22 @@ export default { hasResults() { return this.$apollo.loading || (this.posts && this.posts.length > 0) }, + categoryId() { + return this.$route.query && this.$route.query.categoryId ? this.$route.query.categoryId : null + }, }, watchQuery: ['hashtag'], + mounted() { + if (this.categoryId) { + this.resetCategories() + this.toggleCategory(this.categoryId) + } + }, methods: { + ...mapMutations({ + resetCategories: 'posts/RESET_CATEGORIES', + toggleCategory: 'posts/TOGGLE_CATEGORY', + }), clearSearch() { this.$router.push({ path: '/' }) this.hashtag = null