feat(test): add ThumbnailStack tests

This commit is contained in:
Phan An 2022-07-22 16:35:30 +02:00
parent f9f21ce654
commit 956964aa28
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
2 changed files with 42 additions and 2 deletions

View file

@ -0,0 +1,36 @@
import { expect, it } from 'vitest'
import UnitTestCase from '@/__tests__/UnitTestCase'
import ThumbnailStack from './ThumbnailStack.vue'
new class extends UnitTestCase {
protected test () {
it('displays 4 thumbnails at most', () => {
const { getAllByTestId } = this.render(ThumbnailStack, {
props: {
thumbnails: [
'https://via.placeholder.com/150',
'https://via.placeholder.com/150?foo',
'https://via.placeholder.com/150?bar',
'https://via.placeholder.com/150?baz',
'https://via.placeholder.com/150?qux'
]
}
})
expect(getAllByTestId('thumbnail')).toHaveLength(4)
})
it('displays the first thumbnail if less than 4 are provided', () => {
const { getAllByTestId } = this.render(ThumbnailStack, {
props: {
thumbnails: [
'https://via.placeholder.com/150',
'https://via.placeholder.com/150?foo'
]
}
})
expect(getAllByTestId('thumbnail')).toHaveLength(1)
})
}
}

View file

@ -1,6 +1,10 @@
<template>
<div class="thumbnail-stack" :class="layout" :style="{ backgroundImage: `url(${defaultCover})` }">
<span v-for="thumbnail in displayedThumbnails" :style="{ backgroundImage: `url(${thumbnail}`}"/>
<span
v-for="thumbnail in displayedThumbnails"
:style="{ backgroundImage: `url(${thumbnail}`}"
data-testid="thumbnail"
/>
</div>
</template>
@ -18,7 +22,7 @@ const displayedThumbnails = computed(() => {
: (thumbnails.value.length < 4 ? [thumbnails.value[0]] : take(thumbnails.value, 4)).map(url => url || defaultCover)
})
const layout = computed<'mono' | 'tiles'>(() => displayedThumbnails.value.length < 4 ? 'mono' : 'tiles')
const layout = computed<'single' | 'tiles'>(() => displayedThumbnails.value.length < 4 ? 'single' : 'tiles')
</script>
<style lang="scss" scoped>