refactor: Extract LanguagesFilter to its own spec

webapp/components/FilterMenu/LanguagesFilter.spec.js

@@ -0,0 +1,72 @@
+import { mount } from '@vue/test-utils'
+import Vuex from 'vuex'
+import locales from '~/locales'
+import orderBy from 'lodash/orderBy'
+import LanguagesFilter from './LanguagesFilter'
+const localVue = global.localVue
+
+let wrapper, englishButton, spanishButton
+
+const languages = orderBy(locales, 'name')
+
+describe('LanguagesFilter.vue', () => {
+  const mutations = {
+    'posts/TOGGLE_LANGUAGE': jest.fn(),
+    'posts/RESET_LANGUAGES': jest.fn(),
+  }
+  const getters = {
+    'posts/filteredLanguageCodes': jest.fn(() => []),
+  }
+
+  const mocks = {
+    $t: jest.fn(string => string),
+  }
+
+  const Wrapper = () => {
+    const store = new Vuex.Store({ mutations, getters })
+    return mount(LanguagesFilter, { mocks, localVue, store })
+  }
+
+  beforeEach(() => {
+    wrapper = Wrapper()
+  })
+
+  describe('mount', () => {
+    it('starts with all categories button active', () => {
+      const allLanguagesButton = wrapper.find('.languages-filter > .labeled-button > .base-button')
+      expect(allLanguagesButton.attributes().class).toContain('--filled')
+    })
+
+    it('sets language button attribute `filled` when corresponding language is filtered', () => {
+      getters['posts/filteredLanguageCodes'] = jest.fn(() => ['es'])
+      const wrapper = Wrapper()
+      spanishButton = wrapper
+        .findAll('.languages-filter > .languages-list .base-button')
+        .at(languages.findIndex(l => l.code === 'es'))
+      expect(spanishButton.attributes().class).toContain('--filled')
+    })
+
+    describe('click on an "language-button" button', () => {
+      it('calls TOGGLE_LANGUAGE when clicked', () => {
+        const wrapper = Wrapper()
+        englishButton = wrapper
+          .findAll('.languages-filter > .languages-list .base-button')
+          .at(languages.findIndex(l => l.code === 'en'))
+        englishButton.trigger('click')
+        expect(mutations['posts/TOGGLE_LANGUAGE']).toHaveBeenCalledWith({}, 'en')
+      })
+    })
+
+    describe('clears filter', () => {
+      it('when all button is clicked', async () => {
+        getters['posts/filteredLanguageCodes'] = jest.fn(() => ['en'])
+        wrapper = await Wrapper()
+        const allLanguagesButton = wrapper.find(
+          '.languages-filter > .labeled-button > .base-button',
+        )
+        allLanguagesButton.trigger('click')
+        expect(mutations['posts/RESET_LANGUAGES']).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+})

webapp/components/FilterMenu/LanguagesFilter.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="language-filter">
+  <section class="languages-filter">
     <h4 class="title">{{ $t('filter-menu.languages') }}</h4>
     <labeled-button
       :filled="!filteredLanguageCodes.length"
@@ -50,7 +50,7 @@ export default {
 }
 </script>
 <style lang="scss">
-.language-filter {
+.languages-filter {
   display: flex;
   flex-wrap: wrap;
   margin-top: $space-small;
@@ -58,7 +58,6 @@ export default {
   > .title {
     width: 100%;
     margin: $space-small 0;
-
   }
 
   > .labeled-button {
@@ -84,12 +83,18 @@ export default {
     }
   }
   @media only screen and (max-width: 630px) {
-    width: 100%;
-
     > .title {
       text-align: center;
     }
 
+    > .languages-list {
+      justify-content: center;
+
+      > .menu-item {
+        margin: $space-small 12px;
+      }
+    }
+
     .labeled-button {
       width: 100%;
       margin: $space-x-small 0;
@@ -102,5 +107,4 @@ export default {
     }
   }
 }
-
 </style>