Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-10 06:34:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(test): add BtnScrollToTop component tests

Browse source
This commit is contained in:
Phan An 2022-05-12 11:29:55 +02:00
parent 4e20d7bf21
commit 6c5db09425
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
6 changed files with 80 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/assets/js/__tests__/components/ui/to-top-button.spec.ts
View file

@ -1,4 +1,4 @@
import Component from '@/components/ui/ScrollToTopButton.vue'
import Component from '../../../components/ui/BtnScrollToTop.vue'
import { $ } from '@/utils'
import { mock } from '@/__tests__/__helpers__'
import { shallow } from '@/__tests__/adapter'

22
resources/assets/js/components/ui/BtnScrollToTop.spec.ts Normal file
View file

@ -0,0 +1,22 @@
import { expect, it } from 'vitest'
import { fireEvent } from '@testing-library/vue'
import { $ } from '@/utils'
import ComponentTestCase from '@/__tests__/ComponentTestCase'
import BtnScrollToTop from './BtnScrollToTop.vue'
new class extends ComponentTestCase {
protected test () {
it('renders', () => {
expect(this.render(BtnScrollToTop).html()).toMatchSnapshot()
})
it('scrolls to top', async () => {
const mock = this.mock($, 'scrollTo')
const { getByTitle } = this.render(BtnScrollToTop)
await fireEvent.click(getByTitle('Scroll to top'))
expect(mock).toHaveBeenCalled()
})
}
}

53
resources/assets/js/components/ui/BtnScrollToTop.vue Normal file
View file

@ -0,0 +1,53 @@
<template>
<Transition name="fade">
<button v-show="showing" ref="el" title="Scroll to top" type="button" @click="scrollToTop">
<i class="fa fa-arrow-circle-up"/> Top
</button>
</Transition>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { $ } from '@/utils'
const el = ref<HTMLElement>()
const showing = ref(false)
const scrollToTop = () => $.scrollTo(el.value?.parentElement!, 0, 500, () => (showing.value = false))
onMounted(() => {
el.value?.parentElement?.addEventListener('scroll', event => {
showing.value = (event.target as HTMLElement).scrollTop > 64
})
})
</script>
<style lang="scss" scoped>
button {
&.fade-enter, &.fade-leave-to {
opacity: 0;
}
position: fixed;
bottom: calc(var(--footer-height-mobile) + 26px);
right: 1.8rem;
z-index: 20;
opacity: 1;
transition: opacity .5s;
border-radius: 9999px;
padding: 8px 16px;
background: rgba(0, 0, 0, .5);
border: 1px solid var(--color-text-primary);
color: var(--color-text-primary);
i {
margin-right: 4px;
}
}
@media screen and (min-width: 415px) {
button {
display: none;
}
}
</style>

60
resources/assets/js/components/ui/ScrollToTopButton.vue
View file

@ -1,60 +0,0 @@
<template>
<transition name="fade">
<div class="to-top-btn-wrapper" v-show="showing" ref="el">
<button @click="scrollToTop" title="Scroll to top">
<i class="fa fa-arrow-circle-up"></i> Top
</button>
</div>
</transition>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { $ } from '@/utils'
const el = ref(null as unknown as HTMLElement)
const showing = ref(false)
const scrollToTop = () => $.scrollTo(el.value.parentElement!, 0, 500, () => (showing.value = false))
onMounted(() => {
el.value.parentElement?.addEventListener('scroll', event => {
showing.value = (event.target as HTMLElement).scrollTop > 64
})
})
</script>
<style lang="scss">
.to-top-btn-wrapper {
position: fixed;
width: 100%;
bottom: calc(var(--footer-height-mobile) + 26px);
left: 0;
text-align: center;
z-index: 20;
opacity: 1;
transition: opacity .5s;
&.fade-enter, &.fade-leave-to {
opacity: 0;
}
button {
border-radius: 18px;
padding: 8px 16px;
background: rgba(0, 0, 0, .5);
border: 1px solid var(--color-text-primary);
color: var(--color-text-primary);
i {
margin-right: 4px;
}
}
}
@media screen and (min-width: 415px) {
.to-top-btn-wrapper {
display: none;
}
}
</style>

3
resources/assets/js/components/ui/__snapshots__/BtnScrollToTop.spec.ts.snap Normal file
View file

@ -0,0 +1,3 @@
// Vitest Snapshot v1
exports[`renders 1`] = `"<transition-stub data-v-e7b6c7f6=\\"\\"><button title=\\"Scroll to top\\" type=\\"button\\" data-v-e7b6c7f6=\\"\\" style=\\"display: none;\\"><i class=\\"fa fa-arrow-circle-up\\" data-v-e7b6c7f6=\\"\\"></i> Top </button></transition-stub>"`;

2
resources/assets/js/composables/useInfiniteScroll.ts
View file

@ -6,7 +6,7 @@ import { defineAsyncComponent, ref } from 'vue'
* the wrapper element: @scroll="scrolling"
*/
export const useInfiniteScroll = (perPage = 30) => {
const ToTopButton = defineAsyncComponent(() => import('@/components/ui/ScrollToTopButton.vue'))
const ToTopButton = defineAsyncComponent(() => import('@/components/ui/BtnScrollToTop.vue'))
const scroller = ref<HTMLElement>()
const displayedItemCount = ref(perPage)