fix(test): FooterMiddlePane tests

This commit is contained in:
Phan An 2022-07-10 16:19:11 +02:00
parent 2fc5568f9e
commit cbd8b4e67a
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
3 changed files with 17 additions and 10 deletions

View file

@ -1,4 +1,11 @@
import vueSnapshotSerializer from 'jest-serializer-vue'
import { expect } from 'vitest'
import { expect, vi } from 'vitest'
expect.addSnapshotSerializer(vueSnapshotSerializer)
global.ResizeObserver = global.ResizeObserver ||
vi.fn().mockImplementation(() => ({
disconnect: vi.fn(),
observe: vi.fn(),
unobserve: vi.fn()
}))

View file

@ -5,18 +5,18 @@ import FooterMiddlePane from './FooterMiddlePane.vue'
new class extends UnitTestCase {
protected test () {
it('renders without a song', () => {
expect(this.render(FooterMiddlePane).html()).toMatchSnapshot()
})
it('renders without a song', () => expect(this.render(FooterMiddlePane).html()).toMatchSnapshot())
it('renders with a song', () => {
const song = factory<Song>('song', {
title: 'Fahrstuhl to Heaven'
})
expect(this.render(FooterMiddlePane, {
props: {
song
song: factory<Song>('song', {
title: 'Fahrstuhl to Heaven',
artist_name: 'Led Zeppelin',
artist_id: 3,
album_name: 'Led Zeppelin IV',
album_id: 4
})
}
}).html()).toMatchSnapshot()
})

View file

@ -4,7 +4,7 @@ exports[`renders with a song 1`] = `
<div class="middle-pane" data-testid="footer-middle-pane">
<div id="progressPane" class="progress">
<h3 class="title">Fahrstuhl to Heaven</h3>
<p class="meta"><a href="/#!/artist/104" class="artist">Led Zeppelin</a> <a href="/#!/album/42" class="album">IV</a></p>
<p class="meta"><a href="/#!/artist/3" class="artist">Led Zeppelin</a> <a href="/#!/album/4" class="album">Led Zeppelin IV</a></p>
<div class="plyr"><audio controls="" crossorigin="anonymous"></audio></div>
</div>
</div>