Tests Added For Language Filter Of Posts

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()

webapp/components/FilterPosts/LanguageFilterMenuItems.vue

@@ -33,6 +33,7 @@
         <ds-flex class="languages-menu">
           <ds-flex-item width="100%" class="language-menu-item">
             <ds-button
+              class="language-buttons"
               icon="flag"
               :primary="filteredLanguagesCodes.includes(language.code)"
               @click.stop.prevent="toggleLanguage(language.code)"