diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js index 1f0ee920d..14ebed3c5 100644 --- a/webapp/components/FilterPosts/FilterPosts.spec.js +++ b/webapp/components/FilterPosts/FilterPosts.spec.js @@ -3,6 +3,9 @@ import VTooltip from 'v-tooltip' import Styleguide from '@human-connection/styleguide' import Vuex from 'vuex' import FilterPosts from './FilterPosts.vue' +import locales from '~/locales' +import orderBy from 'lodash/orderBy' + const localVue = createLocalVue() localVue.use(Styleguide) @@ -12,6 +15,8 @@ localVue.use(Vuex) let mutations let getters +const languages = orderBy(locales, 'name') + describe('FilterPosts.vue', () => { let mocks let propsData @@ -20,6 +25,8 @@ describe('FilterPosts.vue', () => { let environmentAndNatureButton let democracyAndPoliticsButton let happyEmotionButton + let englishButton + let spanishButton beforeEach(() => { mocks = { @@ -54,6 +61,8 @@ describe('FilterPosts.vue', () => { 'posts/RESET_CATEGORIES': jest.fn(), 'posts/TOGGLE_CATEGORY': jest.fn(), 'posts/TOGGLE_EMOTION': jest.fn(), + 'posts/TOGGLE_LANGUAGE': jest.fn(), + 'posts/RESET_LANGUAGES': jest.fn(), } getters = { 'posts/isActive': () => false, @@ -64,6 +73,7 @@ describe('FilterPosts.vue', () => { 'posts/filteredCategoryIds': jest.fn(() => []), 'posts/filteredByUsersFollowed': jest.fn(), 'posts/filteredByEmotions': jest.fn(() => []), + 'posts/filteredLanguagesCodes': jest.fn(() => []), } const openFilterPosts = () => { const store = new Vuex.Store({ mutations, getters }) @@ -97,6 +107,15 @@ describe('FilterPosts.vue', () => { expect(mutations['posts/TOGGLE_CATEGORY']).toHaveBeenCalledWith({}, 'cat4') }) + it('calls TOGGLE_LANGUAGE when clicked', () => { + const wrapper = openFilterPosts() + englishButton = wrapper + .findAll('button.language-buttons') + .at(languages.findIndex(l => l.code === 'en')) + englishButton.trigger('click') + expect(mutations['posts/TOGGLE_LANGUAGE']).toHaveBeenCalledWith({}, 'en') + }) + it('sets category button attribute `primary` when corresponding category is filtered', () => { getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9']) const wrapper = openFilterPosts() @@ -104,6 +123,15 @@ describe('FilterPosts.vue', () => { expect(democracyAndPoliticsButton.attributes().class).toContain('ds-button-primary') }) + it('sets language button attribute `primary` when corresponding language is filtered', () => { + getters['posts/filteredLanguagesCodes'] = jest.fn(() => ['es']) + const wrapper = openFilterPosts() + spanishButton = wrapper + .findAll('button.language-buttons') + .at(languages.findIndex(l => l.code === 'es')) + expect(spanishButton.attributes().class).toContain('ds-button-primary') + }) + it('sets "filter-by-followed-authors-only" button attribute `primary`', () => { getters['posts/filteredByUsersFollowed'] = jest.fn(() => true) const wrapper = openFilterPosts() diff --git a/webapp/components/FilterPosts/LanguageFilterMenuItems.vue b/webapp/components/FilterPosts/LanguageFilterMenuItems.vue index 5bfb931cb..e6af51a82 100644 --- a/webapp/components/FilterPosts/LanguageFilterMenuItems.vue +++ b/webapp/components/FilterPosts/LanguageFilterMenuItems.vue @@ -33,6 +33,7 @@