From a30ae12d657a58841d0268cd6697a87da0d9f90f Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Tue, 12 May 2020 18:30:26 +0200 Subject: [PATCH] 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. --- .../SearchResults/SearchResults.spec.js | 202 ++++++++++++++---- .../features/SearchResults/SearchResults.vue | 6 +- .../PaginationButtons/PaginationButtons.vue | 8 +- .../generic/TabNavigation/TabNavigation.vue | 7 +- webapp/storybook/helpers.js | 14 ++ 5 files changed, 187 insertions(+), 50 deletions(-) diff --git a/webapp/components/_new/features/SearchResults/SearchResults.spec.js b/webapp/components/_new/features/SearchResults/SearchResults.spec.js index 875d930ca..7a8e8bfd6 100644 --- a/webapp/components/_new/features/SearchResults/SearchResults.spec.js +++ b/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'] = '' @@ -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' }) + wrapper.setData({ + posts: helpers.fakePost(12), + postCount: 25, + users: helpers.fakeUser(8), + userCount: 8, + activeTab: 'Post', + }) }) - it('show NOT pagination', () => { - expect(wrapper.find('.pagination-buttons').attributes().style).toBe('display: none;') + it('shows a total of 33 results', () => { + expect(wrapper.find('.total-search-results').text()).toContain('33') }) - describe('contains users more as 25 results', () => { - beforeEach(() => { - wrapper.setData({ users: helpers.fakeUser(52), userCount: 52, activeTab: 'User' }) - }) + it('shows tab with 25 posts found', () => { + expect(wrapper.find('.Post-tab').text()).toContain('25') + }) - it('show pagination', () => { - expect(wrapper.find('.pagination-buttons').attributes().style).toBe('') - }) + it('shows tab with 8 users found', () => { + expect(wrapper.find('.User-tab').text()).toContain('8') + }) - it('renders user-list pagination', () => { - expect(wrapper.find('.user-list').exists()).toBe(true) - }) + 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 }) }) }) - - /* - describe('contains posts', () => { - beforeEach(() => { - console.log - wrapper.setData({ posts: [post], activeTab: 'Post' }) - }) - - 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('switches activeTab when event is emitted', () => { - expect(wrapper.find('.user-list').exists()).toBe(true) - }) - }) - */ }) }) }) diff --git a/webapp/components/_new/features/SearchResults/SearchResults.vue b/webapp/components/_new/features/SearchResults/SearchResults.vue index 6867d5035..6f5683c8d 100644 --- a/webapp/components/_new/features/SearchResults/SearchResults.vue +++ b/webapp/components/_new/features/SearchResults/SearchResults.vue @@ -2,7 +2,7 @@
- + {{ searchCount }} {{ $t('search.results', {}, searchCount) }} @@ -20,7 +20,7 @@ />