mirror of
https://github.com/koel/koel
synced 2024-11-24 13:13:05 +00:00
test: add FooterMiddlePane unit tests
This commit is contained in:
parent
4db8362c79
commit
4e2351c85e
4 changed files with 69 additions and 15 deletions
|
@ -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()
|
||||
})
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>"
|
||||
`;
|
Loading…
Reference in a new issue