ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactored SearchResults.spec.js to new tab component

Browse Source
This commit is contained in:
Wolfgang Huß 2021-01-21 11:36:39 +01:00
parent 16c3d2ab87
commit 830eb1010c
3 changed files with 41 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
webapp/components/_new/features/SearchResults/SearchResults.spec.js
View File

@ -57,6 +57,10 @@ describe('SearchResults', () => {
// Wolle beforeEach(jest.useFakeTimers)
describe('result contains 25 posts, 8 users and 0 hashtags', () => {
// we couldn't get it running with "jest.runAllTimers()" and so we used "setTimeout"
// time is a bit more then 3000 milisec see "webapp/components/CountTo.vue"
const counterTimeout = 3000 + 10
beforeEach(async () => {
wrapper.setData({
posts: helpers.fakePost(12),
@ -69,56 +73,68 @@ describe('SearchResults', () => {
})
it('shows a total of 33 results', () => {
setTimeout(() => {
expect(wrapper.find('.total-search-results').text()).toContain('33')
}, counterTimeout)
})
it('shows tab with 25 posts found', () => {
const postTab = wrapper.find('[data-test="Post-tab"]')
// console.log('postTab: ', postTab.html())
// console.log('wrapper: ', wrapper)
// Wolle jest.runAllTimers()
expect(postTab.text()).toContain('25')
setTimeout(() => {
expect(wrapper.find('[data-test="Post-tab"]').text()).toContain('25')
}, counterTimeout)
})
it('shows tab with 8 users found', () => {
const userTab = wrapper.find('[data-test="User-tab"]')
expect(userTab.text()).toContain('8')
setTimeout(() => {
expect(wrapper.find('[data-test="User-tab"]').text()).toContain('8')
}, counterTimeout)
})
it('shows tab with 0 hashtags found', () => {
expect(wrapper.find('.Hashtag-tab').text()).toContain('0')
setTimeout(() => {
expect(wrapper.find('[data-test="Hashtag-tab"]').text()).toContain('0')
}, counterTimeout)
})
it('has post tab as active tab', () => {
expect(wrapper.find('.Post-tab').classes('--active')).toBe(true)
expect(wrapper.find('[data-test="Post-tab"]').classes('--active')).toBe(true)
})
it('has user tab inactive', () => {
expect(wrapper.find('.User-tab').classes('--active')).toBe(false)
expect(wrapper.find('[data-test="User-tab"]').classes('--active')).toBe(false)
})
it('has hashtag tab disabled', () => {
expect(wrapper.find('.Hashtag-tab').classes('--disabled')).toBe(true)
expect(wrapper.find('[data-test="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')
it('has post tab inactive after emitting switch-tab', async () => {
wrapper.find('.tab-navigation').vm.$emit('switch-tab', 'User') // emits direct from tab component to search results
await wrapper.vm.$nextTick()
await expect(wrapper.find('.Post-tab').classes('--active')).toBe(false)
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('.User-tab').trigger('click')
wrapper.find('[data-test="User-tab-click"]').trigger('click')
await wrapper.vm.$nextTick()
await expect(wrapper.find('.User-tab').classes('--active')).toBe(true)
await expect(wrapper.find('[data-test="User-tab"]').classes('--active')).toBe(true)
})
it('displays 8 users after clicking on user tab', async () => {
wrapper.find('.User-tab').trigger('click')
wrapper.find('[data-test="User-tab-click"]').trigger('click')
await wrapper.vm.$nextTick()
await expect(wrapper.findAll('.user-teaser')).toHaveLength(8)
})
@ -128,7 +144,7 @@ describe('SearchResults', () => {
})
it('shows no pagination buttons for users', async () => {
wrapper.find('.User-tab').trigger('click')
wrapper.find('[data-test="User-tab-click"]').trigger('click')
await wrapper.vm.$nextTick()
await expect(wrapper.find('.pagination-buttons').exists()).toBe(false)
})

6
webapp/components/_new/features/SearchResults/SearchResults.vue
View File

@ -295,9 +295,9 @@ export default {
this.userPage = 0
this.hashtagPage = 0
},
switchTab(tab) {
if (this.activeTab !== tab) {
this.activeTab = tab
switchTab(tabType) {
if (this.activeTab !== tabType) {
this.activeTab = tabType
}
},
previousResults() {

10
webapp/components/_new/generic/TabNavigation/NewTabNavigation.vue
View File

@ -19,8 +19,8 @@
</ds-space>
</li>
</ul> -->
<!-- Wolle <ds-grid-item class="profile-top-navigation" :row-span="3" column-span="fullWidth"> -->
<ds-grid-item class="profile-top-navigation" :row-span="tabs.length" column-span="fullWidth">
<!-- Wolle <ds-grid-item class="tab-navigation" :row-span="3" column-span="fullWidth"> -->
<ds-grid-item class="tab-navigation" :row-span="tabs.length" column-span="fullWidth">
<base-card class="ds-tab-nav">
<ul class="Tabs">
<li
@ -32,8 +32,10 @@
activeTab === tab.type && '--active',
tab.disabled && '--disabled',
]"
:data-test="tab.type + '-tab'"
>
<a @click="switchTab(tab)">
<!-- Wolle <a :class="[tab.type + '-tab']" @click="switchTab(tab)"> -->
<a :data-test="tab.type + '-tab-click'" @click="switchTab(tab)">
<ds-space margin="small">
<!-- Wolle translate -->
<!-- <client-only placeholder="Loading..."> -->
@ -149,7 +151,7 @@ export default {
}
}
}
.profile-top-navigation {
.tab-navigation {
position: sticky;
top: 53px;
z-index: 2;