import { expect, it } from 'vitest' import factory from '@/__tests__/factory' import UnitTestCase from '@/__tests__/UnitTestCase' import SongContextMenu from './SongContextMenu.vue' import { alerts, arrayify, eventBus } from '@/utils' import { fireEvent } from '@testing-library/vue' import router from '@/router' import { downloadService, playbackService } from '@/services' import { favoriteStore, playlistStore, queueStore } from '@/stores' let songs: Song[] new class extends UnitTestCase { protected beforeEach () { super.beforeEach(() => queueStore.clear()) } private async renderComponent (_songs?: Song | Song[]) { songs = arrayify(_songs || factory('song', 5)) const rendered = this.render(SongContextMenu) eventBus.emit('SONG_CONTEXT_MENU_REQUESTED', { pageX: 420, pageY: 69 }, songs) await this.tick(2) return rendered } private fillQueue () { queueStore.state.songs = factory('song', 5) queueStore.state.current = queueStore.state.songs[0] } protected test () { it('quques and plays', async () => { const queueMock = this.mock(queueStore, 'queueIfNotQueued') const playMock = this.mock(playbackService, 'play') const song = factory('song', { playback_state: 'Stopped' }) const { getByText } = await this.renderComponent(song) await fireEvent.click(getByText('Play')) expect(queueMock).toHaveBeenCalledWith(song) expect(playMock).toHaveBeenCalledWith(song) }) it('pauses playback', async () => { const pauseMock = this.mock(playbackService, 'pause') const { getByText } = await this.renderComponent(factory('song', { playback_state: 'Playing' })) await fireEvent.click(getByText('Pause')) expect(pauseMock).toHaveBeenCalled() }) it('resumes playback', async () => { const resumeMock = this.mock(playbackService, 'resume') const { getByText } = await this.renderComponent(factory('song', { playback_state: 'Paused' })) await fireEvent.click(getByText('Play')) expect(resumeMock).toHaveBeenCalled() }) it('goes to album details screen', async () => { const goMock = this.mock(router, 'go') const { getByText } = await this.renderComponent(factory('song')) await fireEvent.click(getByText('Go to Album')) expect(goMock).toHaveBeenCalledWith(`album/${songs[0].album_id}`) }) it('goes to artist details screen', async () => { const goMock = this.mock(router, 'go') const { getByText } = await this.renderComponent(factory('song')) await fireEvent.click(getByText('Go to Artist')) expect(goMock).toHaveBeenCalledWith(`artist/${songs[0].artist_id}`) }) it('downloads', async () => { const downloadMock = this.mock(downloadService, 'fromSongs') const { getByText } = await this.renderComponent() await fireEvent.click(getByText('Download')) expect(downloadMock).toHaveBeenCalledWith(songs) }) it('queues', async () => { const queueMock = this.mock(queueStore, 'queue') const { getByText } = await this.renderComponent() await fireEvent.click(getByText('Queue')) expect(queueMock).toHaveBeenCalledWith(songs) }) it('queues after current song', async () => { this.fillQueue() const queueMock = this.mock(queueStore, 'queueAfterCurrent') const { getByText } = await this.renderComponent() await fireEvent.click(getByText('After Current Song')) expect(queueMock).toHaveBeenCalledWith(songs) }) it('queues to bottom', async () => { this.fillQueue() const queueMock = this.mock(queueStore, 'queue') const { getByText } = await this.renderComponent() await fireEvent.click(getByText('Bottom of Queue')) expect(queueMock).toHaveBeenCalledWith(songs) }) it('queues to top', async () => { this.fillQueue() const queueMock = this.mock(queueStore, 'queueToTop') const { getByText } = await this.renderComponent() await fireEvent.click(getByText('Top of Queue')) expect(queueMock).toHaveBeenCalledWith(songs) }) it('adds to favorite', async () => { const likeMock = this.mock(favoriteStore, 'like') const { getByText } = await this.renderComponent() await fireEvent.click(getByText('Favorites')) expect(likeMock).toHaveBeenCalledWith(songs) }) it('lists and adds to existing playlist', async () => { playlistStore.state.playlists = factory('playlist', 3) const addMock = this.mock(playlistStore, 'addSongs') this.mock(alerts, 'success') const { queryByText, getByText } = await this.renderComponent() playlistStore.state.playlists.forEach(playlist => queryByText(playlist.name)) await fireEvent.click(getByText(playlistStore.state.playlists[0].name)) expect(addMock).toHaveBeenCalledWith(playlistStore.state.playlists[0], songs) }) it('does not list smart playlists', async () => { playlistStore.state.playlists = factory('playlist', 3) playlistStore.state.playlists.push(factory.states('smart')('playlist', { name: 'My Smart Playlist' })) const { queryByText } = await this.renderComponent() expect(queryByText('My Smart Playlist')).toBeNull() }) it('allows edit songs if current user is admin', async () => { const { getByText } = await this.actingAsAdmin().renderComponent() // mock after render to ensure that the component is mounted properly const emitMock = this.mock(eventBus, 'emit') await fireEvent.click(getByText('Edit')) expect(emitMock).toHaveBeenCalledWith('MODAL_SHOW_EDIT_SONG_FORM', songs) }) it('does not allow edit songs if current user is not admin', async () => { const { queryByText } = await this.actingAs().renderComponent() expect(queryByText('Edit')).toBeNull() }) it('has an option to copy shareable URL', async () => { const { getByText } = await this.renderComponent(factory('song')) getByText('Copy Shareable URL') }) } }