koel/resources/assets/js/components/ui/FooterPlayButton.spec.ts
2024-07-06 17:45:01 +02:00

130 lines
4.3 KiB
TypeScript

import Router from '@/router'
import factory from '@/__tests__/factory'
import { ref } from 'vue'
import { expect, it } from 'vitest'
import UnitTestCase from '@/__tests__/UnitTestCase'
import { playbackService } from '@/services'
import { screen, waitFor } from '@testing-library/vue'
import { CurrentSongKey } from '@/symbols'
import { commonStore, favoriteStore, queueStore, recentlyPlayedStore, songStore } from '@/stores'
import FooterPlayButton from './FooterPlayButton.vue'
new class extends UnitTestCase {
protected test () {
it('toggles the playback of current song', async () => {
const toggleMock = this.mock(playbackService, 'toggle')
this.renderComponent(factory<Song>('song'))
await this.user.click(screen.getByRole('button'))
expect(toggleMock).toHaveBeenCalled()
})
it.each<[ScreenName, MethodOf<typeof songStore>, string | number]>([
['Album', 'fetchForAlbum', 42],
['Artist', 'fetchForArtist', 42],
['Playlist', 'fetchForPlaylist', '71d8cd40-20d4-4b17-b460-d30fe5bb7b66']
])('initiates playback for %s screen', async (screenName, fetchMethod, id) => {
commonStore.state.song_count = 10
const songs = factory<Song>('song', 3)
const fetchMock = this.mock(songStore, fetchMethod).mockResolvedValue(songs)
const playMock = this.mock(playbackService, 'queueAndPlay')
const goMock = this.mock(Router, 'go')
await this.router.activateRoute({
screen: screenName,
path: '_'
}, { id: String(id) })
this.renderComponent()
await this.user.click(screen.getByRole('button'))
await waitFor(() => {
expect(fetchMock).toHaveBeenCalledWith(id)
expect(playMock).toHaveBeenCalledWith(songs)
expect(goMock).toHaveBeenCalledWith('queue')
})
})
it.each<[
ScreenName,
typeof favoriteStore | typeof recentlyPlayedStore,
MethodOf<typeof favoriteStore | typeof recentlyPlayedStore>
]>([
['Favorites', favoriteStore, 'fetch'],
['RecentlyPlayed', recentlyPlayedStore, 'fetch']
])('initiates playback for %s screen', async (screenName, store, fetchMethod) => {
commonStore.state.song_count = 10
const songs = factory<Song>('song', 3)
const fetchMock = this.mock(store, fetchMethod).mockResolvedValue(songs)
const playMock = this.mock(playbackService, 'queueAndPlay')
const goMock = this.mock(Router, 'go')
await this.router.activateRoute({
screen: screenName,
path: '_'
})
this.renderComponent()
await this.user.click(screen.getByRole('button'))
await waitFor(() => {
expect(fetchMock).toHaveBeenCalled()
expect(playMock).toHaveBeenCalledWith(songs)
expect(goMock).toHaveBeenCalledWith('queue')
})
})
it.each<[ScreenName]>([['Queue'], ['Songs'], ['Albums']])('initiates playback %s screen', async screenName => {
commonStore.state.song_count = 10
const songs = factory<Song>('song', 3)
const fetchMock = this.mock(queueStore, 'fetchRandom').mockResolvedValue(songs)
const playMock = this.mock(playbackService, 'queueAndPlay')
const goMock = this.mock(Router, 'go')
await this.router.activateRoute({
screen: screenName,
path: '_'
})
this.renderComponent()
await this.user.click(screen.getByRole('button'))
await waitFor(() => {
expect(fetchMock).toHaveBeenCalled()
expect(playMock).toHaveBeenCalledWith(songs)
expect(goMock).toHaveBeenCalledWith('queue')
})
})
it('does nothing if there are no songs', async () => {
commonStore.state.song_count = 0
const playMock = this.mock(playbackService, 'queueAndPlay')
const goMock = this.mock(Router, 'go')
await this.router.activateRoute({
screen: 'Songs',
path: '_'
})
this.renderComponent()
await this.user.click(screen.getByRole('button'))
await waitFor(() => {
expect(playMock).not.toHaveBeenCalled()
expect(goMock).not.toHaveBeenCalled()
})
})
}
private renderComponent (currentSong: Song | null = null) {
return this.render(FooterPlayButton, {
global: {
provide: {
[<symbol>CurrentSongKey]: ref(currentSong)
}
}
})
}
}