test: add FooterMiddlePane unit tests

This commit is contained in:
Phan An 2022-05-05 16:56:31 +02:00
parent 4db8362c79
commit 4e2351c85e
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
4 changed files with 69 additions and 15 deletions

View file

@ -0,0 +1,34 @@
import { beforeEach, expect, it } from 'vitest'
import { render } from '@/__tests__/__helpers__'
import FooterMiddlePane from './FooterMiddlePane.vue'
import factory from '@/__tests__/factory'
import { cleanup } from '@testing-library/vue'
beforeEach(() => cleanup())
it('renders without a song', () => {
expect(render(FooterMiddlePane).html()).toMatchSnapshot()
})
it('renders with a song', () => {
const album = factory<Album>('album', {
id: 42,
name: 'IV',
artist: factory<Artist>('artist', {
id: 104,
name: 'Led Zeppelin'
})
})
const song = factory<Song>('song', {
album,
title: 'Fahrstühl to Heaven',
artist: album.artist
})
expect(render(FooterMiddlePane, {
props: {
song
}
}).html()).toMatchSnapshot()
})

View file

@ -1,16 +1,16 @@
<template>
<div class="middle-pane" data-testid="footer-middle-pane">
<div class="progress" id="progressPane">
<div id="progressPane" class="progress">
<template v-if="song">
<h3 class="title">{{ song.title }}</h3>
<p class="meta">
<a class="artist" :href="`/#!/artist/${song.artist.id}`">{{ song.artist.name }}</a>
<a class="album" :href="`/#!/album/${song.album.id}`">{{ song.album.name }}</a>
<a :href="`/#!/artist/${song.artist.id}`" class="artist">{{ song.artist.name }}</a>
<a :href="`/#!/album/${song.album.id}`" class="album">{{ song.album.name }}</a>
</p>
</template>
<div class="plyr">
<audio crossorigin="anonymous" controls></audio>
<audio controls crossorigin="anonymous"></audio>
</div>
</div>
</div>
@ -19,7 +19,7 @@
<script lang="ts" setup>
import { toRefs } from 'vue'
const props = defineProps<{ song: Song }>()
const props = defineProps<{ song?: Song }>()
const { song } = toRefs(props)
</script>

View file

@ -1,47 +1,47 @@
<template>
<div class="side player-controls">
<i
@click.prevent="playPrev"
class="prev fa fa-step-backward control"
data-testid="play-prev-btn"
role="button"
tabindex="0"
title="Play previous song"
data-testid="play-prev-btn"
@click.prevent="playPrev"
/>
<span class="album-thumb-wrapper">
<span :style="{ backgroundImage: `url('${cover}')` }" class="album-thumb"></span>
<span
@click.prevent="toggle"
v-if="shouldShowPlayButton"
class="play"
data-testid="play-btn"
role="button"
tabindex="0"
title="Play or resume"
data-testid="play-btn"
v-if="shouldShowPlayButton"
@click.prevent="toggle"
>
<i class="fa fa-play"></i>
</span>
<span
@click.prevent="toggle"
v-else
class="pause"
data-testid="pause-btn"
role="button"
tabindex="0"
title="Pause"
data-testid="pause-btn"
v-else
@click.prevent="toggle"
>
<i class="fa fa-pause"></i>
</span>
</span>
<i
@click.prevent="playNext"
class="next fa fa-step-forward control"
data-testid="play-next-btn"
role="button"
tabindex="0"
title="Play next song"
data-testid="play-next-btn"
@click.prevent="playNext"
/>
</div>
</template>

View file

@ -0,0 +1,20 @@
// Vitest Snapshot v1
exports[`renders with a song 1`] = `
"<div class=\\"middle-pane\\" data-testid=\\"footer-middle-pane\\">
<div id=\\"progressPane\\" class=\\"progress\\">
<h3 class=\\"title\\">Fahrstühl to Heaven</h3>
<p class=\\"meta\\"><a href=\\"/#!/artist/104\\" class=\\"artist\\">Led Zeppelin</a> <a href=\\"/#!/album/42\\" class=\\"album\\">IV</a></p>
<div class=\\"plyr\\"><audio controls=\\"\\" crossorigin=\\"anonymous\\"></audio></div>
</div>
</div>"
`;
exports[`renders without a song 1`] = `
"<div class=\\"middle-pane\\" data-testid=\\"footer-middle-pane\\">
<div id=\\"progressPane\\" class=\\"progress\\">
<!--v-if-->
<div class=\\"plyr\\"><audio controls=\\"\\" crossorigin=\\"anonymous\\"></audio></div>
</div>
</div>"
`;