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) // Wolle beforeEach(jest.useFakeTimers)
describe('result contains 25 posts, 8 users and 0 hashtags', () => { 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 () => { beforeEach(async () => {
wrapper.setData({ wrapper.setData({
posts: helpers.fakePost(12), posts: helpers.fakePost(12),
@ -69,56 +73,68 @@ describe('SearchResults', () => {
}) })
it('shows a total of 33 results', () => { it('shows a total of 33 results', () => {
setTimeout(() => {
expect(wrapper.find('.total-search-results').text()).toContain('33') expect(wrapper.find('.total-search-results').text()).toContain('33')
}, counterTimeout)
}) })
it('shows tab with 25 posts found', () => { it('shows tab with 25 posts found', () => {
const postTab = wrapper.find('[data-test="Post-tab"]')
// console.log('postTab: ', postTab.html()) // console.log('postTab: ', postTab.html())
// console.log('wrapper: ', wrapper) // console.log('wrapper: ', wrapper)
// Wolle jest.runAllTimers() // 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', () => { it('shows tab with 8 users found', () => {
const userTab = wrapper.find('[data-test="User-tab"]') setTimeout(() => {
expect(userTab.text()).toContain('8') expect(wrapper.find('[data-test="User-tab"]').text()).toContain('8')
}, counterTimeout)
}) })
it('shows tab with 0 hashtags found', () => { 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', () => { 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', () => { 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', () => { 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', () => { it('displays 12 (pageSize) posts', () => {
expect(wrapper.findAll('.post-teaser')).toHaveLength(12) expect(wrapper.findAll('.post-teaser')).toHaveLength(12)
}) })
it('has post tab inactive after clicking on user tab', async () => { it('has post tab inactive after emitting switch-tab', async () => {
wrapper.find('.User-tab').trigger('click') wrapper.find('.tab-navigation').vm.$emit('switch-tab', 'User') // emits direct from tab component to search results
await wrapper.vm.$nextTick() 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 () => { 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 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 () => { 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 wrapper.vm.$nextTick()
await expect(wrapper.findAll('.user-teaser')).toHaveLength(8) await expect(wrapper.findAll('.user-teaser')).toHaveLength(8)
}) })
@ -128,7 +144,7 @@ describe('SearchResults', () => {
}) })
it('shows no pagination buttons for users', async () => { 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 wrapper.vm.$nextTick()
await expect(wrapper.find('.pagination-buttons').exists()).toBe(false) 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.userPage = 0
this.hashtagPage = 0 this.hashtagPage = 0
}, },
switchTab(tab) { switchTab(tabType) {
if (this.activeTab !== tab) { if (this.activeTab !== tabType) {
this.activeTab = tab this.activeTab = tabType
} }
}, },
previousResults() { previousResults() {

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

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