diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js index 3f9384d27..199d6ab18 100644 --- a/webapp/components/ContributionForm/ContributionForm.spec.js +++ b/webapp/components/ContributionForm/ContributionForm.spec.js @@ -6,6 +6,9 @@ import PostMutations from '~/graphql/PostMutations.js' import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect' import Filters from '~/plugins/vue-filters' import TeaserImage from '~/components/TeaserImage/TeaserImage' +import MutationObserver from 'mutation-observer' + +global.MutationObserver = MutationObserver const localVue = createLocalVue() diff --git a/webapp/components/Editor/Editor.spec.js b/webapp/components/Editor/Editor.spec.js index d457609bd..866b96aba 100644 --- a/webapp/components/Editor/Editor.spec.js +++ b/webapp/components/Editor/Editor.spec.js @@ -1,8 +1,10 @@ import { mount, createLocalVue } from '@vue/test-utils' import Editor from './Editor' import Vuex from 'vuex' - import Styleguide from '@human-connection/styleguide' +import MutationObserver from 'mutation-observer' + +global.MutationObserver = MutationObserver const localVue = createLocalVue() localVue.use(Vuex) diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js index 6fc4c3704..202e089e5 100644 --- a/webapp/components/FilterPosts/FilterPosts.spec.js +++ b/webapp/components/FilterPosts/FilterPosts.spec.js @@ -4,8 +4,7 @@ import Styleguide from '@human-connection/styleguide' import Vuex from 'vuex' import FilterPosts from './FilterPosts.vue' import FilterPostsMenuItem from './FilterPostsMenuItems.vue' -import { mutations } from '~/store/posts' - +import { mutations, getters } from '~/store/posts' const localVue = createLocalVue() localVue.use(Styleguide) @@ -51,13 +50,21 @@ describe('FilterPosts.vue', () => { describe('mount', () => { const store = new Vuex.Store({ + state: { + filteredByCategories: false, + filteredByUsersFollowed: false, + }, mutations: { 'posts/SET_POSTS': mutations.SET_POSTS, + 'posts/SET_FILTERED_BY_CATEGORIES': mutations.SET_FILTERED_BY_CATEGORIES, + 'posts/SET_FILTERED_BY_FOLLOWERS': mutations.SET_FILTERED_BY_FOLLOWERS, }, getters: { 'auth/user': () => { return { id: 'u34' } }, + 'posts/filteredByCategories': getters.filteredByCategories, + 'posts/filteredByUsersFollowed': getters.filteredByUsersFollowed, }, }) const Wrapper = () => { @@ -65,6 +72,7 @@ describe('FilterPosts.vue', () => { } beforeEach(() => { + store.state.filteredByUsersFollowed = false wrapper = Wrapper() menuToggle = wrapper.findAll('a').at(0) menuToggle.trigger('click') @@ -137,8 +145,11 @@ describe('FilterPosts.vue', () => { }) describe('click "filter-by-followed-authors-only" button', () => { - it('calls the filterPost query', () => { + beforeEach(() => { wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click') + }) + + it('calls the filterPost query', () => { expect(mocks.$apollo.query).toHaveBeenCalledWith( expect.objectContaining({ variables: { @@ -150,9 +161,8 @@ describe('FilterPosts.vue', () => { ) }) - it('toggles filterBubble.author property', async () => { - await wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click') - await wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click') + it('toggles filterBubble.author property', () => { + wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click') expect(mocks.$apollo.query).toHaveBeenCalledWith( expect.objectContaining({ variables: { @@ -165,7 +175,6 @@ describe('FilterPosts.vue', () => { }) it("sets the button's class to primary when clicked", async () => { - await wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click') expect( wrapper.find({ name: 'filter-by-followed-authors-only' }).classes('ds-button-primary'), ).toBe(true) diff --git a/webapp/components/FilterPosts/FilterPostsMenuItems.vue b/webapp/components/FilterPosts/FilterPostsMenuItems.vue index ffecf21a2..f3c930317 100644 --- a/webapp/components/FilterPosts/FilterPostsMenuItems.vue +++ b/webapp/components/FilterPosts/FilterPostsMenuItems.vue @@ -109,14 +109,14 @@ export default { }, computed: { ...mapGetters({ - filteredByUsersFollowed: 'default/filteredByUsersFollowed', - filteredByCategories: 'default/filteredByCategories', + filteredByUsersFollowed: 'posts/filteredByUsersFollowed', + filteredByCategories: 'posts/filteredByCategories', }), }, methods: { ...mapMutations({ - setFilteredByFollowers: 'default/SET_FILTERED_BY_FOLLOWERS', - setFilteredByCategories: 'default/SET_FILTERED_BY_CATEGORIES', + setFilteredByFollowers: 'posts/SET_FILTERED_BY_FOLLOWERS', + setFilteredByCategories: 'posts/SET_FILTERED_BY_CATEGORIES', }), isActive(id) { const index = this.selectedCategoryIds.indexOf(id) @@ -136,7 +136,7 @@ export default { this.selectedCategoryIds.push(id) } } - this.setFilteredByCategories(this.selectedCategoryIds.length) + this.setFilteredByCategories(!!this.selectedCategoryIds.length) this.toggleFilter() }, toggleOnlyFollowed() { @@ -155,8 +155,6 @@ export default { categories_some: { id_in: this.selectedCategoryIds }, } : { author: this.usersFollowedFilter } - } else { - this.filter = {} } this.$emit('filterPosts', this.filter) }, diff --git a/webapp/components/comments/CommentForm/spec.js b/webapp/components/comments/CommentForm/spec.js index 8420c97ba..2d212c91d 100644 --- a/webapp/components/comments/CommentForm/spec.js +++ b/webapp/components/comments/CommentForm/spec.js @@ -2,6 +2,9 @@ import { mount, createLocalVue } from '@vue/test-utils' import CommentForm from './index.vue' import Styleguide from '@human-connection/styleguide' import Vuex from 'vuex' +import MutationObserver from 'mutation-observer' + +global.MutationObserver = MutationObserver const localVue = createLocalVue() localVue.use(Vuex) diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue index df4378c1a..764eaff1d 100644 --- a/webapp/layouts/default.vue +++ b/webapp/layouts/default.vue @@ -232,7 +232,7 @@ export default { fetchPosts: 'posts/fetchPosts', }), ...mapMutations({ - setFilteredByFollowers: 'default/SET_FILTERED_BY_FOLLOWERS', + setFilteredByFollowers: 'posts/SET_FILTERED_BY_FOLLOWERS', }), goToPost(item) { this.$nextTick(() => { diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue index 65ce62f2e..12d50ad8f 100644 --- a/webapp/pages/index.vue +++ b/webapp/pages/index.vue @@ -123,8 +123,8 @@ export default { ...mapMutations({ setPosts: 'posts/SET_POSTS', toggleShowFilterPostsDropdown: 'default/SET_SHOW_FILTER_POSTS_DROPDOWN', - setFilteredByUserFollowed: 'default/SET_FILTERED_BY_FOLLOWERS', - setFilteredByCategories: 'default/SET_FILTERED_BY_CATEGORIES', + setFilteredByUserFollowed: 'posts/SET_FILTERED_BY_FOLLOWERS', + setFilteredByCategories: 'posts/SET_FILTERED_BY_CATEGORIES', }), changeFilterBubble(filter) { if (this.hashtag) { diff --git a/webapp/store/default.js b/webapp/store/default.js index 40226bf6b..7af564910 100644 --- a/webapp/store/default.js +++ b/webapp/store/default.js @@ -1,8 +1,6 @@ export const state = () => { return { showFilterPostsDropdown: false, - filteredByUsersFollowed: false, - filteredByCategories: false, } } @@ -10,22 +8,10 @@ export const getters = { showFilterPostsDropdown(state) { return state.showFilterPostsDropdown || false }, - filteredByUsersFollowed(state) { - return state.filteredByUsersFollowed || false - }, - filteredByCategories(state) { - return state.filteredByCategories || false - }, } export const mutations = { SET_SHOW_FILTER_POSTS_DROPDOWN(state, boolean) { state.showFilterPostsDropdown = boolean || null }, - SET_FILTERED_BY_FOLLOWERS(state, boolean) { - state.filteredByUsersFollowed = boolean || null - }, - SET_FILTERED_BY_CATEGORIES(state, boolean) { - state.filteredByCategories = boolean || null - }, } diff --git a/webapp/store/posts.js b/webapp/store/posts.js index 025a620f2..636d1c314 100644 --- a/webapp/store/posts.js +++ b/webapp/store/posts.js @@ -3,6 +3,8 @@ import gql from 'graphql-tag' export const state = () => { return { posts: [], + filteredByUsersFollowed: false, + filteredByCategories: false, } } @@ -10,12 +12,24 @@ export const mutations = { SET_POSTS(state, posts) { state.posts = posts || null }, + SET_FILTERED_BY_FOLLOWERS(state, boolean) { + state.filteredByUsersFollowed = boolean || null + }, + SET_FILTERED_BY_CATEGORIES(state, boolean) { + state.filteredByCategories = boolean || null + }, } export const getters = { posts(state) { return state.posts || [] }, + filteredByUsersFollowed(state) { + return state.filteredByUsersFollowed || false + }, + filteredByCategories(state) { + return state.filteredByCategories || false + }, } export const actions = {