specs added for SearchResults component.

General use of v-if instead of v-show. Why render a not displayed component?
Helper added to fake posts.

webapp/components/_new/features/SearchResults/SearchResults.spec.js

@@ -1,12 +1,12 @@
 import { config, mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import SearchResults from './SearchResults'
-
 import helpers from '~/storybook/helpers'
 
 helpers.init()
 
 const localVue = global.localVue
+
 localVue.directive('scrollTo', jest.fn())
 
 config.stubs['client-only'] = '<span><slot /></span>'
@@ -31,7 +31,9 @@ describe('SearchResults', () => {
       },
       'auth/isModerator': () => false,
     }
-    propsData = {}
+    propsData = {
+      pageSize: 12,
+    }
     wrapper = Wrapper()
   })
 
@@ -47,55 +49,171 @@ describe('SearchResults', () => {
         })
       })
 
-      describe('contains users less as 25 results', () => {
+      describe('result contains 25 posts, 8 users and 0 hashtags', () => {
         beforeEach(() => {
-          wrapper.setData({ users: helpers.fakeUser(1), userCount: 1, activeTab: 'User' })
-        })
-
-        it('show NOT pagination', () => {
-          expect(wrapper.find('.pagination-buttons').attributes().style).toBe('display: none;')
-        })
-
-        describe('contains users more as 25 results', () => {
-          beforeEach(() => {
-            wrapper.setData({ users: helpers.fakeUser(52), userCount: 52, activeTab: 'User' })
-          })
-
-          it('show pagination', () => {
-            expect(wrapper.find('.pagination-buttons').attributes().style).toBe('')
-          })
-
-          it('renders user-list pagination', () => {
-            expect(wrapper.find('.user-list').exists()).toBe(true)
-          })
+          wrapper.setData({
+            posts: helpers.fakePost(12),
+            postCount: 25,
+            users: helpers.fakeUser(8),
+            userCount: 8,
+            activeTab: 'Post',
           })
         })
 
-      /*
-        describe('contains posts', () => {
-          beforeEach(() => {
-            console.log
-            wrapper.setData({ posts: [post], activeTab: 'Post' })
+        it('shows a total of 33 results', () => {
+          expect(wrapper.find('.total-search-results').text()).toContain('33')
         })
 
-          it('renders post-teaser component', () => {
-            expect(wrapper.find('.post-teaser').exists()).toBe(true)
-          })
-        })
-      */
-
-      /*
-        describe('switchTab', () => {
-          beforeEach(() => {
-            wrapper.setData({ posts: [post], users: [user], activeTab: 'Post' })
-            wrapper.find('.tab-navigation').vm.$emit('switchTab', 'User')
+        it('shows tab with 25 posts found', () => {
+          expect(wrapper.find('.Post-tab').text()).toContain('25')
         })
 
-          it('switches activeTab when event is emitted', () => {
-            expect(wrapper.find('.user-list').exists()).toBe(true)
+        it('shows tab with 8 users found', () => {
+          expect(wrapper.find('.User-tab').text()).toContain('8')
+        })
+
+        it('shows tab with 0 hashtags found', () => {
+          expect(wrapper.find('.Hashtag-tab').text()).toContain('0')
+        })
+
+        it('has post tab as active tab', () => {
+          expect(wrapper.find('.Post-tab').classes('--active')).toBe(true)
+        })
+
+        it('has user tab inactive', () => {
+          expect(wrapper.find('.User-tab').classes('--active')).toBe(false)
+        })
+
+        it('has hashtag tab disabled', () => {
+          expect(wrapper.find('.Hashtag-tab').classes('--disabled')).toBe(true)
+        })
+
+        it('displays 12 (pageSize) posts', () => {
+          expect(wrapper.findAll('.post-teaser')).toHaveLength(12)
+        })
+
+        it('has post tab inactive after clicking on user tab', async () => {
+          wrapper.find('.User-tab').trigger('click')
+          await wrapper.vm.$nextTick()
+          await expect(wrapper.find('.Post-tab').classes('--active')).toBe(false)
+        })
+
+        it('has user tab active after clicking on user tab', async () => {
+          wrapper.find('.User-tab').trigger('click')
+          await wrapper.vm.$nextTick()
+          await expect(wrapper.find('.User-tab').classes('--active')).toBe(true)
+        })
+
+        it('displays 8 users after clicking on user tab', async () => {
+          wrapper.find('.User-tab').trigger('click')
+          await wrapper.vm.$nextTick()
+          await expect(wrapper.findAll('.user-teaser')).toHaveLength(8)
+        })
+
+        it('shows the pagination buttons for posts', () => {
+          expect(wrapper.find('.pagination-buttons').exists()).toBe(true)
+        })
+
+        it('shows no pagination buttons for users', async () => {
+          wrapper.find('.User-tab').trigger('click')
+          await wrapper.vm.$nextTick()
+          await expect(wrapper.find('.pagination-buttons').exists()).toBe(false)
+        })
+
+        it('displays page 1 of 3 for the 25 posts', () => {
+          expect(wrapper.find('.pagination-pageCount').text().replace(/\s+/g, ' ')).toContain(
+            '1 / 3',
+          )
+        })
+
+        it('displays the next page button for the 25 posts', () => {
+          expect(wrapper.find('.next-button').exists()).toBe(true)
+        })
+
+        it('displays no previous page button for the 25 posts', () => {
+          expect(wrapper.find('.previous-button').exists()).toBe(false)
+        })
+
+        it('displays page 2 / 3 when next-button is clicked', async () => {
+          wrapper.find('.next-button').trigger('click')
+          await wrapper.vm.$nextTick()
+          await expect(wrapper.find('.pagination-pageCount').text().replace(/\s+/g, ' ')).toContain(
+            '2 / 3',
+          )
+        })
+
+        it('sets apollo searchPosts offset to 12 when next-button is clicked', async () => {
+          wrapper.find('.next-button').trigger('click')
+          await wrapper.vm.$nextTick()
+          await expect(
+            wrapper.vm.$options.apollo.searchPosts.variables.bind(wrapper.vm)(),
+          ).toMatchObject({ query: undefined, firstPosts: 12, postsOffset: 12 })
+        })
+
+        it('displays the next page button when next-button is clicked', async () => {
+          wrapper.find('.next-button').trigger('click')
+          await wrapper.vm.$nextTick()
+          await expect(wrapper.find('.next-button').exists()).toBe(true)
+        })
+
+        it('displays the previous page button when next-button is clicked', async () => {
+          wrapper.find('.next-button').trigger('click')
+          await wrapper.vm.$nextTick()
+          await expect(wrapper.find('.previous-button').exists()).toBe(true)
+        })
+
+        it('displays page 3 / 3 when next-button is clicked twice', async () => {
+          wrapper.find('.next-button').trigger('click')
+          wrapper.find('.next-button').trigger('click')
+          await wrapper.vm.$nextTick()
+          await expect(wrapper.find('.pagination-pageCount').text().replace(/\s+/g, ' ')).toContain(
+            '3 / 3',
+          )
+        })
+
+        it('sets apollo searchPosts offset to 24 when next-button is clicked twice', async () => {
+          wrapper.find('.next-button').trigger('click')
+          wrapper.find('.next-button').trigger('click')
+          await wrapper.vm.$nextTick()
+          await expect(
+            wrapper.vm.$options.apollo.searchPosts.variables.bind(wrapper.vm)(),
+          ).toMatchObject({ query: undefined, firstPosts: 12, postsOffset: 24 })
+        })
+
+        it('displays no next page button when next-button is clicked twice', async () => {
+          wrapper.find('.next-button').trigger('click')
+          wrapper.find('.next-button').trigger('click')
+          await wrapper.vm.$nextTick()
+          await expect(wrapper.find('.next-button').exists()).toBe(false)
+        })
+
+        it('displays the previous page button when next-button is clicked twice', async () => {
+          wrapper.find('.next-button').trigger('click')
+          wrapper.find('.next-button').trigger('click')
+          await wrapper.vm.$nextTick()
+          await expect(wrapper.find('.previous-button').exists()).toBe(true)
+        })
+
+        it('displays page 1 / 3 when previous-button is clicked after next-button', async () => {
+          wrapper.find('.next-button').trigger('click')
+          await wrapper.vm.$nextTick()
+          wrapper.find('.previous-button').trigger('click')
+          await wrapper.vm.$nextTick()
+          await expect(wrapper.find('.pagination-pageCount').text().replace(/\s+/g, ' ')).toContain(
+            '1 / 3',
+          )
+        })
+
+        it('sets apollo searchPosts offset to 0 when previous-button is clicked after next-button', async () => {
+          wrapper.find('.next-button').trigger('click')
+          await wrapper.vm.$nextTick()
+          wrapper.find('.previous-button').trigger('click')
+          await wrapper.vm.$nextTick()
+          await expect(
+            wrapper.vm.$options.apollo.searchPosts.variables.bind(wrapper.vm)(),
+          ).toMatchObject({ query: undefined, firstPosts: 12, postsOffset: 0 })
         })
       })
-      */
     })
   })
 })

webapp/components/_new/features/SearchResults/SearchResults.vue

@@ -2,7 +2,7 @@
   <div id="search-results" class="search-results">
     <div>
       <ds-section>
-        <ds-text class="search-results">
+        <ds-text class="total-search-results">
           <strong>{{ searchCount }}</strong>
           {{ $t('search.results', {}, searchCount) }}
         </ds-text>
@@ -20,7 +20,7 @@
       />
       <template>
         <pagination-buttons
-          v-show="activeResourceCount > pageSize"
+          v-if="activeResourceCount > pageSize"
           :hasMoreResults="hasMoreResults"
           :hasPreviousResult="hasPreviousResult"
           :activePage="activePage"
@@ -52,7 +52,7 @@
         </ul>
 
         <pagination-buttons
-          v-show="activeResourceCount > pageSize"
+          v-if="activeResourceCount > pageSize"
           :hasMoreResults="hasMoreResults"
           :hasPreviousResult="hasPreviousResult"
           :activePage="activePage"

webapp/components/_new/generic/PaginationButtons/PaginationButtons.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="pagination-buttons">
     <base-button
-      v-show="hasPreviousResult"
+      v-if="hasPreviousResult"
       @click="$emit('back')"
       :disabled="!hasPreviousResult"
       icon="arrow-left"
       circle
-      data-test="previous-button"
+      class="previous-button"
     />
 
     <span class="pagination-pageCount">
@@ -15,12 +15,12 @@
     </span>
 
     <base-button
-      v-show="hasMoreResults"
+      v-if="hasMoreResults"
       @click="$emit('next')"
       :disabled="!hasMoreResults"
       icon="arrow-right"
       circle
-      data-test="next-button"
+      class="next-button"
       v-scroll-to="'#search-results'"
     />
   </div>

webapp/components/_new/generic/TabNavigation/TabNavigation.vue

@@ -3,7 +3,12 @@
     <li
       v-for="tab in tabs"
       :key="tab.type"
-      :class="[activeTab === tab.type && '--active', tab.disabled && '--disabled', 'tab']"
+      :class="[
+        activeTab === tab.type && '--active',
+        tab.disabled && '--disabled',
+        'tab',
+        tab.type + '-tab',
+      ]"
       role="button"
       @click="$emit('switchTab', tab.type)"
     >

webapp/storybook/helpers.js

@@ -70,6 +70,20 @@ const helpers = {
       }
     })
   },
+  fakePost(n) {
+    return new Array(n || 1).fill(0).map(() => {
+      const title = faker.lorem.words()
+      const content = faker.lorem.paragraph()
+      return {
+        id: faker.random.uuid(),
+        title,
+        content,
+        slug: faker.lorem.slug(title),
+        shoutedCount: faker.random.number(),
+        commentsCount: faker.random.number(),
+      }
+    })
+  },
 }
 
 export default helpers