mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
Write unit test for TabNavigator.vue
This commit is contained in:
Wolfgang Huß
parent
7ffd8c59cb
commit
1f8fdb78fd
@ -1,38 +1,42 @@
|
|||||||
import { config, mount } from '@vue/test-utils'
|
import { config, mount } from '@vue/test-utils'
|
||||||
import Vuex from 'vuex'
|
import TabNavigation from './TabNavigation'
|
||||||
import SearchResults from './SearchResults'
|
|
||||||
import helpers from '~/storybook/helpers'
|
|
||||||
|
|
||||||
helpers.init()
|
|
||||||
|
|
||||||
const localVue = global.localVue
|
const localVue = global.localVue
|
||||||
|
|
||||||
localVue.directive('scrollTo', jest.fn())
|
|
||||||
|
|
||||||
config.stubs['client-only'] = '<span><slot /></span>'
|
config.stubs['client-only'] = '<span><slot /></span>'
|
||||||
config.stubs['nuxt-link'] = '<span><slot /></span>'
|
|
||||||
|
|
||||||
describe('SearchResults', () => {
|
describe('TabNavigation', () => {
|
||||||
let mocks, getters, propsData, wrapper
|
let mocks, propsData, wrapper
|
||||||
const Wrapper = () => {
|
const Wrapper = () => {
|
||||||
const store = new Vuex.Store({
|
return mount(TabNavigation, { mocks, localVue, propsData })
|
||||||
getters,
|
|
||||||
})
|
|
||||||
return mount(SearchResults, { mocks, localVue, propsData, store })
|
|
||||||
}
|
}
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
mocks = {
|
mocks = {
|
||||||
$t: jest.fn(),
|
$t: jest.fn(),
|
||||||
}
|
}
|
||||||
getters = {
|
|
||||||
'auth/user': () => {
|
|
||||||
return { id: 'u343', name: 'Matt' }
|
|
||||||
},
|
|
||||||
'auth/isModerator': () => false,
|
|
||||||
}
|
|
||||||
propsData = {
|
propsData = {
|
||||||
pageSize: 12,
|
tabs: [
|
||||||
|
{
|
||||||
|
type: 'Post',
|
||||||
|
title: 'Post',
|
||||||
|
count: 12,
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'User',
|
||||||
|
title: 'User',
|
||||||
|
count: 9,
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'Hashtag',
|
||||||
|
title: 'Hashtag',
|
||||||
|
count: 0,
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
activeTab: 'Post',
|
||||||
}
|
}
|
||||||
wrapper = Wrapper()
|
wrapper = Wrapper()
|
||||||
})
|
})
|
||||||
@ -42,52 +46,36 @@ describe('SearchResults', () => {
|
|||||||
expect(wrapper.find('.tab-navigation').exists()).toBe(true)
|
expect(wrapper.find('.tab-navigation').exists()).toBe(true)
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('searchResults', () => {
|
describe('displays', () => {
|
||||||
describe('contains no results', () => {
|
// we couldn't get it running with "jest.runAllTimers()" and so we used "setTimeout"
|
||||||
it('renders hc-empty component', () => {
|
// time is a bit more then 3000 milisec see "webapp/components/CountTo.vue"
|
||||||
expect(wrapper.find('.hc-empty').exists()).toBe(true)
|
const counterTimeout = 3000 + 10
|
||||||
})
|
|
||||||
|
it('shows a total of 17 results', () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(wrapper.find('.total-search-results').text()).toContain('17')
|
||||||
|
}, counterTimeout)
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('result contains 25 posts, 8 users and 0 hashtags', () => {
|
it('shows tab with 12 posts', () => {
|
||||||
// we couldn't get it running with "jest.runAllTimers()" and so we used "setTimeout"
|
setTimeout(() => {
|
||||||
// time is a bit more then 3000 milisec see "webapp/components/CountTo.vue"
|
expect(wrapper.find('[data-test="Post-tab"]').text()).toContain('12')
|
||||||
const counterTimeout = 3000 + 10
|
}, counterTimeout)
|
||||||
|
})
|
||||||
|
|
||||||
beforeEach(async () => {
|
it('shows tab with 9 users', () => {
|
||||||
wrapper.setData({
|
setTimeout(() => {
|
||||||
posts: helpers.fakePost(12),
|
expect(wrapper.find('[data-test="User-tab"]').text()).toContain('9')
|
||||||
postCount: 25,
|
}, counterTimeout)
|
||||||
users: helpers.fakeUser(8),
|
})
|
||||||
userCount: 8,
|
|
||||||
activeTab: 'Post',
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
it('shows a total of 33 results', () => {
|
it('shows tab with 0 hashtags', () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect(wrapper.find('.total-search-results').text()).toContain('33')
|
expect(wrapper.find('[data-test="Hashtag-tab"]').text()).toContain('0')
|
||||||
}, counterTimeout)
|
}, counterTimeout)
|
||||||
})
|
})
|
||||||
|
|
||||||
it('shows tab with 25 posts found', () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(wrapper.find('[data-test="Post-tab"]').text()).toContain('25')
|
|
||||||
}, counterTimeout)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('shows tab with 8 users found', () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(wrapper.find('[data-test="User-tab"]').text()).toContain('8')
|
|
||||||
}, counterTimeout)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('shows tab with 0 hashtags found', () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
expect(wrapper.find('[data-test="Hashtag-tab"]').text()).toContain('0')
|
|
||||||
}, counterTimeout)
|
|
||||||
})
|
|
||||||
|
|
||||||
|
describe('basic props setting', () => {
|
||||||
it('has post tab as active tab', () => {
|
it('has post tab as active tab', () => {
|
||||||
expect(wrapper.find('[data-test="Post-tab"]').classes('--active')).toBe(true)
|
expect(wrapper.find('[data-test="Post-tab"]').classes('--active')).toBe(true)
|
||||||
})
|
})
|
||||||
@ -99,140 +87,18 @@ describe('SearchResults', () => {
|
|||||||
it('has hashtag tab disabled', () => {
|
it('has hashtag tab disabled', () => {
|
||||||
expect(wrapper.find('[data-test="Hashtag-tab"]').classes('--disabled')).toBe(true)
|
expect(wrapper.find('[data-test="Hashtag-tab"]').classes('--disabled')).toBe(true)
|
||||||
})
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
it('displays 12 (pageSize) posts', () => {
|
describe('interactions', () => {
|
||||||
expect(wrapper.findAll('.post-teaser')).toHaveLength(12)
|
it('emits "switch-tab" with "User" after clicking on user tab', () => {
|
||||||
})
|
wrapper.find('[data-test="User-tab-click"]').trigger('click')
|
||||||
|
expect(wrapper.emitted('switch-tab')).toEqual([['User']])
|
||||||
|
})
|
||||||
|
|
||||||
it('has post tab inactive after emitting switch-tab', async () => {
|
it('emits no "switch-tab" after clicking on inactiv hashtag tab', () => {
|
||||||
wrapper.find('.tab-navigation').vm.$emit('switch-tab', 'User') // emits direct from tab component to search results
|
wrapper.find('[data-test="Hashtag-tab-click"]').trigger('click')
|
||||||
await wrapper.vm.$nextTick()
|
expect(wrapper.emitted('switch-tab')).toBeFalsy()
|
||||||
await expect(wrapper.find('[data-test="Post-tab"]').classes('--active')).toBe(false)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('has post tab inactive after clicking on user tab', async () => {
|
|
||||||
wrapper.find('[data-test="User-tab-click"]').trigger('click')
|
|
||||||
await wrapper.vm.$nextTick()
|
|
||||||
await expect(wrapper.find('[data-test="Post-tab"]').classes('--active')).toBe(false)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('has user tab active after clicking on user tab', async () => {
|
|
||||||
wrapper.find('[data-test="User-tab-click"]').trigger('click')
|
|
||||||
await wrapper.vm.$nextTick()
|
|
||||||
await expect(wrapper.find('[data-test="User-tab"]').classes('--active')).toBe(true)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('displays 8 users after clicking on user tab', async () => {
|
|
||||||
wrapper.find('[data-test="User-tab-click"]').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('[data-test="User-tab-click"]').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('deactivates previous page button for the 25 posts', () => {
|
|
||||||
const previousButton = wrapper.find('[data-test="previous-button"]')
|
|
||||||
expect(previousButton.attributes().disabled).toEqual('disabled')
|
|
||||||
})
|
|
||||||
|
|
||||||
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('deactivates next page button when next-button is clicked twice', async () => {
|
|
||||||
const nextButton = wrapper.find('[data-test="next-button"]')
|
|
||||||
nextButton.trigger('click')
|
|
||||||
nextButton.trigger('click')
|
|
||||||
await wrapper.vm.$nextTick()
|
|
||||||
expect(nextButton.attributes().disabled).toEqual('disabled')
|
|
||||||
})
|
|
||||||
|
|
||||||
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 })
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user