IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Document loading spinner implementation with test

Browse Source 
Because it's slightly odd how I avoid a duplicate loading spinner, I
 thought this is a good target for a test.
This commit is contained in:
Robert Schäfer 2019-06-11 18:41:32 +02:00
parent d1364e4aed
commit 5eaac8b077
2 changed files with 43 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
webapp/pages/profile/_id/_slug.spec.js
View File

@ -42,6 +42,7 @@ describe('ProfileSlug', () => {
error: jest.fn(),
},
$apollo: {
loading: false,
mutate: jest.fn().mockResolvedValue(),
},
}
@ -138,6 +139,32 @@ describe('ProfileSlug', () => {
contentExcerpt: 'This is my content',
}
describe('currently no posts available (e.g. after tab switching)', () => {
beforeEach(() => {
wrapper.setData({
Post: null,
})
})
it('displays no "load more" button', () => {
expect(wrapper.find('.load-more').exists()).toBe(false)
})
describe('apollo client in `loading` state', () => {
beforeEach(() => {
wrapper.vm.$apollo.loading = true
})
it('never displays more than one loading spinner', () => {
expect(wrapper.findAll('.ds-spinner')).toHaveLength(1)
})
it('displays a loading spinner below the posts list', () => {
expect(wrapper.find('.user-profile-posts-list .ds-spinner').exists()).toBe(true)
})
})
})
describe('pagination returned less posts than available', () => {
beforeEach(() => {
const posts = [1, 2, 3, 4, 5].map(id => {
@ -152,6 +179,20 @@ describe('ProfileSlug', () => {
it('displays a "load more" button', () => {
expect(wrapper.find('.load-more').exists()).toBe(true)
})
describe('apollo client in `loading` state', () => {
beforeEach(() => {
wrapper.vm.$apollo.loading = true
})
it('never displays more than one loading spinner', () => {
expect(wrapper.findAll('.ds-spinner')).toHaveLength(1)
})
it('displays a loading spinner below the posts list', () => {
expect(wrapper.find('.load-more .ds-spinner').exists()).toBe(true)
})
})
})
describe('pagination returned as many posts as available', () => {

8
webapp/pages/profile/_id/_slug.vue
View File

@ -144,7 +144,7 @@
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
<ds-flex :width="{ base: '100%' }" gutter="small">
<ds-flex class="user-profile-posts-list" :width="{ base: '100%' }" gutter="small">
<ds-flex-item class="profile-top-navigation">
<ds-card class="ds-tab-nav">
<ul class="Tabs">
@ -220,11 +220,7 @@
</ds-flex-item>
</template>
</ds-flex>
<hc-load-more
v-if="Post && hasMore"
:loading="$apollo.loading"
@click="showMoreContributions"
/>
<hc-load-more v-if="hasMore" :loading="$apollo.loading" @click="showMoreContributions" />
</ds-flex-item>
</ds-flex>
</div>