From bb183b12113fa79d48a75fdbfe6ce13a3181da0e Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Fri, 20 Mar 2020 17:26:06 +0100
Subject: [PATCH] refactor: Extract FollowingFilter to its own spec

---
 .../FilterMenu/FollowingFilter.spec.js        | 50 +++++++++++++++++++
 .../components/FilterMenu/FollowingFilter.vue |  1 -
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 webapp/components/FilterMenu/FollowingFilter.spec.js

diff --git a/webapp/components/FilterMenu/FollowingFilter.spec.js b/webapp/components/FilterMenu/FollowingFilter.spec.js
new file mode 100644
index 000000000..1547e1d86
--- /dev/null
+++ b/webapp/components/FilterMenu/FollowingFilter.spec.js
@@ -0,0 +1,50 @@
+import { mount } from '@vue/test-utils'
+import Vuex from 'vuex'
+import FollowingFilter from './FollowingFilter'
+
+const localVue = global.localVue
+
+let wrapper
+
+describe('FollowingFilter', () => {
+  const mutations = {
+    'posts/TOGGLE_FILTER_BY_FOLLOWED': jest.fn(),
+  }
+  const getters = {
+    'auth/user': () => {
+      return { id: 'u34' }
+    },
+    'posts/filteredByUsersFollowed': jest.fn(),
+  }
+
+  const mocks = {
+    $t: jest.fn(string => string),
+  }
+
+  const Wrapper = () => {
+    const store = new Vuex.Store({ mutations, getters })
+    const wrapper = mount(FollowingFilter, { mocks, localVue, store })
+    return wrapper
+  }
+
+  beforeEach(() => {
+    wrapper = Wrapper()
+  })
+
+  describe('mount', () => {
+    it('sets "filter-by-followed" button attribute `filled`', () => {
+      getters['posts/filteredByUsersFollowed'] = jest.fn(() => true)
+      const wrapper = Wrapper()
+      expect(
+        wrapper.find('.following-filter > .labeled-button > .base-button').classes('--filled'),
+      ).toBe(true)
+    })
+
+    describe('click "filter-by-followed" button', () => {
+      it('calls TOGGLE_FILTER_BY_FOLLOWED', () => {
+        wrapper.find('.following-filter > .labeled-button > .base-button').trigger('click')
+        expect(mutations['posts/TOGGLE_FILTER_BY_FOLLOWED']).toHaveBeenCalledWith({}, 'u34')
+      })
+    })
+  })
+})
diff --git a/webapp/components/FilterMenu/FollowingFilter.vue b/webapp/components/FilterMenu/FollowingFilter.vue
index 6ce6511e0..c3425ce90 100644
--- a/webapp/components/FilterMenu/FollowingFilter.vue
+++ b/webapp/components/FilterMenu/FollowingFilter.vue
@@ -1,7 +1,6 @@
 <template>
   <section class="following-filter">
     <labeled-button
-      data-test="filter-by-followed"
       :filled="filteredByUsersFollowed"
       icon="user-plus"
       :label="$t('filter-menu.following')"