Write and fix tests for order by in filter menu

webapp/components/FilterMenu/FilterMenu.spec.js

@@ -12,6 +12,7 @@ describe('FilterMenu.vue', () => {
 
   const getters = {
     'posts/isActive': () => false,
+    'posts/orderBy': () => 'createdAt_desc',
   }
 
   const stubs = {

webapp/components/FilterMenu/FilterMenu.vue

@@ -17,7 +17,7 @@
       </div>
       <div class="filter-menu-options">
         <h2 class="title">{{ $t('filter-menu.order-by') }}</h2>
-        <order-by-Filter />
+        <order-by-filter />
       </div>
     </template>
   </dropdown>

webapp/components/FilterMenu/FollowingFilter.vue

@@ -18,6 +18,7 @@ import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
 import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 
 export default {
+  name: 'FollowingFilter',
   components: {
     FilterMenuSection,
     LabeledButton,

webapp/components/FilterMenu/OrderByFilter.spec.js

@@ -0,0 +1,91 @@
+import { mount } from '@vue/test-utils'
+import Vuex from 'vuex'
+import OrderByFilter from './OrderByFilter'
+
+const localVue = global.localVue
+
+let wrapper
+
+describe('OrderByFilter', () => {
+  const mutations = {
+    'posts/TOGGLE_ORDER': jest.fn(),
+  }
+  const getters = {
+    'posts/orderBy': () => 'createdAt_desc',
+  }
+
+  const mocks = {
+    $t: jest.fn((string) => string),
+  }
+
+  const Wrapper = () => {
+    const store = new Vuex.Store({ mutations, getters })
+    const wrapper = mount(OrderByFilter, { mocks, localVue, store })
+    return wrapper
+  }
+
+  beforeEach(() => {
+    wrapper = Wrapper()
+  })
+
+  describe('mount', () => {
+    describe('if ordered by newest', () => {
+      it('sets "newest-button" attribute `filled`', () => {
+        expect(
+          wrapper
+            .find('.order-by-filter .filter-list [data-test="newest-button"] .base-button')
+            .classes('--filled'),
+        ).toBe(true)
+      })
+
+      it('don\'t sets "oldest-button" attribute `filled`', () => {
+        expect(
+          wrapper
+            .find('.order-by-filter .filter-list [data-test="oldest-button"] .base-button')
+            .classes('--filled'),
+        ).toBe(false)
+      })
+    })
+
+    describe('if ordered by oldest', () => {
+      beforeEach(() => {
+        getters['posts/orderBy'] = jest.fn(() => 'createdAt_asc')
+        wrapper = Wrapper()
+      })
+
+      it('don\'t sets "newest-button" attribute `filled`', () => {
+        expect(
+          wrapper
+            .find('.order-by-filter .filter-list [data-test="newest-button"] .base-button')
+            .classes('--filled'),
+        ).toBe(false)
+      })
+
+      it('sets "oldest-button" attribute `filled`', () => {
+        expect(
+          wrapper
+            .find('.order-by-filter .filter-list [data-test="oldest-button"] .base-button')
+            .classes('--filled'),
+        ).toBe(true)
+      })
+    })
+
+    describe('click "newest-button"', () => {
+      it('calls TOGGLE_ORDER with "createdAt_desc"', () => {
+        wrapper
+          .find('.order-by-filter .filter-list [data-test="newest-button"] .base-button')
+          .trigger('click')
+        expect(mutations['posts/TOGGLE_ORDER']).toHaveBeenCalledWith({}, 'createdAt_desc')
+      })
+    })
+
+    describe('click "oldest-button"', () => {
+      it('calls TOGGLE_ORDER with "createdAt_asc"', () => {
+        wrapper
+          .find('.order-by-filter .filter-list [data-test="oldest-button"] .base-button')
+          .trigger('click')
+        expect(mutations['posts/TOGGLE_ORDER']).toHaveBeenCalledWith({}, 'createdAt_asc')
+      })
+    })
+  })
+})

webapp/components/FilterMenu/OrderByFilter.vue

@@ -1,5 +1,5 @@
 <template>
-  <filter-menu-section :divider="false" class="order-by-Filter">
+  <filter-menu-section :divider="false" class="order-by-filter">
     <template #filter-list>
       <li class="item">
         <labeled-button
@@ -8,6 +8,7 @@
           :filled="orderBy === 'createdAt_desc'"
           :title="$t('filter-menu.order.newest.hint')"
           @click="toggleOrder('createdAt_desc')"
+          data-test="newest-button"
         />
       </li>
       <li class="item">
@@ -17,6 +18,7 @@
           :filled="orderBy === 'createdAt_asc'"
           :title="$t('filter-menu.order.oldest.hint')"
           @click="toggleOrder('createdAt_asc')"
+          data-test="oldest-button"
         />
       </li>
     </template>