Toggle a button for "friends" or "all"

I decided not to have a radio button, becase we have only two states
anyway.

webapp/components/FilterMenu/FilterMenu.spec.js

@@ -0,0 +1,54 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import FilterMenu from './FilterMenu.vue'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+describe('FilterMenu.vue', () => {
+  let wrapper
+  let mocks
+
+  const createWrapper = mountMethod => {
+    return mountMethod(FilterMenu, {
+      mocks,
+      localVue,
+    })
+  }
+
+  beforeEach(() => {
+    mocks = { $t: () => {} }
+  })
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = createWrapper(mount)
+    })
+
+    it('renders a card', () => {
+      expect(wrapper.is('.ds-card')).toBe(true)
+    })
+
+    describe('click "filter-by-followed-authors-only" button', () => {
+      it('emits filterBubble object', () => {
+        wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
+        expect(wrapper.emitted('changeFilterBubble')).toBeTruthy()
+      })
+
+      it('toggles filterBubble.author.followed property', () => {
+        wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
+        expect(wrapper.emitted('changeFilterBubble')[0]).toEqual([{ author: 'followed' }])
+        wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
+        expect(wrapper.emitted('changeFilterBubble')[1]).toEqual([{ author: 'all' }])
+      })
+
+      it('makes button primary', () => {
+        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)
+      })
+    })
+  })
+})

webapp/components/FilterMenu/FilterMenu.vue

@@ -1,12 +1,10 @@
 <template>
   <ds-card>
-    <ds-radio
+    <ds-button
-      v-model="filter"
+      name="filter-by-followed-authors-only"
-      buttons
+      icon="plus"
-      label="Filter"
+      :primary="onlyFollowed"
-      label-prop="text"
+      @click="toggleOnlyFollowed"
-      @input="handleInput"
-      :options="options"
     />
   </ds-card>
 </template>
@@ -17,21 +15,20 @@ export default {
     // We have to fix styleguide here. It uses .includes wich will always be
     // false for arrays of objects.
     return {
-      filter: { value: 'all', text: this.$t('filter-menu.options.all') },
+      filterBubble: {
+        author: 'all',
+      },
     }
   },
   computed: {
-    options() {
+    onlyFollowed() {
-      return [
+      return this.filterBubble.author === 'followed'
-        { value: 'friends', text: this.$t('filter-menu.options.friends') },
-        { value: 'friends-of-a-friend', text: this.$t('filter-menu.options.friends-of-a-friend') },
-        { value: 'all', text: this.$t('filter-menu.options.all') },
-      ]
     },
   },
   methods: {
-    handleInput(e) {
+    toggleOnlyFollowed() {
-      // console.log('handleInput', e)
+      this.filterBubble.author = this.onlyFollowed ? 'all' : 'followed'
+      this.$emit('changeFilterBubble', this.filterBubble)
     },
   },
 }