fix tests and refactor Paginate component

webapp/assets/_new/styles/tokens.scss

@@ -240,6 +240,13 @@ $size-height-xlarge: 60px;
 $size-height-footer: 64px;
 $size-tappable-square: 44px;
 
+/**
+ * @tokens Size Width
+ * @presenter Spacing
+ */
+
+$size-width-paginate: 100px;
+
 /**
  * @tokens Size Avatar
  * @presenter Spacing
@@ -259,7 +266,7 @@ $size-avatar-x-large: 114px;
  $size-button-small: 26px;
 
 /**
- * @tokens Size Buttons
+ * @tokens Size Icons
  * @presenter Spacing
  */
 

webapp/components/FilterPosts/GeneralFilterMenuItems.vue

@@ -10,7 +10,7 @@
         class="follow-filter"
       >
         <base-button
-          name="filter-by-followed-authors-only"
+          data-test="filter-by-followed"
           icon="user-plus"
           circle
           :filled="filteredByUsersFollowed"

webapp/components/Paginate/Paginate.spec.js

@@ -5,35 +5,31 @@ import Paginate from './Paginate'
 const localVue = global.localVue
 
 describe('Paginate.vue', () => {
-  let propsData, wrapper, nextButton, backButton
-
-  beforeEach(() => {
-    propsData = {}
-  })
+  let propsData = {}
+  let wrapper
+  let nextButton
+  let backButton
 
   const Wrapper = () => {
     return mount(Paginate, { propsData, localVue })
   }
-  describe('mount', () => {
-    beforeEach(() => {
-      wrapper = Wrapper()
-    })
 
+  describe('mount', () => {
     describe('next button', () => {
       beforeEach(() => {
         propsData.hasNext = true
         wrapper = Wrapper()
-        nextButton = wrapper.findAll('.base-button').at(0)
+        nextButton = wrapper.find('[data-test="next-button"]')
       })
 
       it('is disabled by default', () => {
         propsData = {}
         wrapper = Wrapper()
-        nextButton = wrapper.findAll('.base-button').at(0)
+        nextButton = wrapper.find('[data-test="next-button"]')
         expect(nextButton.attributes().disabled).toEqual('disabled')
       })
 
-      it('is not disabled if hasNext is true', () => {
+      it('is enabled if hasNext is true', () => {
         expect(nextButton.attributes().disabled).toBeUndefined()
       })
 
@@ -47,17 +43,17 @@ describe('Paginate.vue', () => {
       beforeEach(() => {
         propsData.hasPrevious = true
         wrapper = Wrapper()
-        backButton = wrapper.findAll('.base-button').at(1)
+        backButton = wrapper.find('[data-test="previous-button"]')
       })
 
       it('is disabled by default', () => {
         propsData = {}
         wrapper = Wrapper()
-        backButton = wrapper.findAll('.base-button').at(1)
+        backButton = wrapper.find('[data-test="previous-button"]')
         expect(backButton.attributes().disabled).toEqual('disabled')
       })
 
-      it('is not disabled if hasPrevious is true', () => {
+      it('is enabled if hasPrevious is true', () => {
         expect(backButton.attributes().disabled).toBeUndefined()
       })
 

webapp/components/Paginate/Paginate.vue

@@ -1,22 +1,32 @@
 <template>
   <div class="paginate">
-    <base-button @click="back" :disabled="!hasPrevious" icon="arrow-left" circle />
-    <base-button @click="next" :disabled="!hasNext" icon="arrow-right" circle />
+    <base-button
+      @click="$emit('back')"
+      :disabled="!hasPrevious"
+      icon="arrow-left"
+      circle
+      data-test="previous-button"
+    />
+    <base-button
+      @click="$emit('next')"
+      :disabled="!hasNext"
+      icon="arrow-right"
+      circle
+      data-test="next-button"
+    />
   </div>
 </template>
 
 <script>
 export default {
   props: {
-    hasNext: { type: Boolean, default: false },
-    hasPrevious: { type: Boolean, default: false },
-  },
-  methods: {
-    back() {
-      this.$emit('back')
+    hasNext: {
+      type: Boolean,
+      default: false,
     },
-    next() {
-      this.$emit('next')
+    hasPrevious: {
+      type: Boolean,
+      default: false,
     },
   },
 }
@@ -26,7 +36,7 @@ export default {
 .paginate {
   display: flex;
   justify-content: space-around;
-  width: 100px;
+  width: $size-width-paginate;
   margin: $space-x-small auto;
 }
 </style>