diff --git a/resources/assets/js/components/screens/AlbumScreen.spec.ts b/resources/assets/js/components/screens/AlbumScreen.spec.ts index a91b4486..f6a90873 100644 --- a/resources/assets/js/components/screens/AlbumScreen.spec.ts +++ b/resources/assets/js/components/screens/AlbumScreen.spec.ts @@ -1,16 +1,24 @@ -import { waitFor } from '@testing-library/vue' +import { fireEvent, waitFor } from '@testing-library/vue' import { expect, it } from 'vitest' import factory from '@/__tests__/factory' import UnitTestCase from '@/__tests__/UnitTestCase' +import { albumStore, commonStore, songStore } from '@/stores' +import CloseModalBtn from '@/components/ui/BtnCloseModal.vue' import AlbumScreen from './AlbumScreen.vue' -import { commonStore, songStore } from '@/stores' +import { downloadService } from '@/services' +import router from '@/router' +import { eventBus } from '@/utils' + +let album: Album new class extends UnitTestCase { protected async renderComponent () { commonStore.state.use_last_fm = true - const album = factory('album', { + album = factory('album', { + id: 42, name: 'Led Zeppelin IV', + artist_id: 123, artist_name: 'Led Zeppelin', song_count: 10, length: 1_603 @@ -22,6 +30,13 @@ new class extends UnitTestCase { const rendered = this.render(AlbumScreen, { props: { album + }, + global: { + stubs: { + CloseModalBtn, + AlbumInfo: this.stub('album-info'), + SongList: this.stub('song-list') + } } }) @@ -32,8 +47,41 @@ new class extends UnitTestCase { protected test () { it('renders', async () => { - const { getAllByTestId, getByText } = await this.renderComponent() - getByText(/10 songs.+26:43$/) + const { html } = await this.renderComponent() + expect(html()).toMatchSnapshot() + }) + + it('shows and hides info', async () => { + const { getByTitle, getByTestId, queryByTestId } = await this.renderComponent() + expect(queryByTestId('album-info')).toBeNull() + + await fireEvent.click(getByTitle('View album information')) + expect(queryByTestId('album-info')).not.toBeNull() + + await fireEvent.click(getByTestId('close-modal-btn')) + expect(queryByTestId('album-info')).toBeNull() + }) + + it('downloads', async () => { + const downloadMock = this.mock(downloadService, 'fromAlbum') + const { getByText } = await this.renderComponent() + + await fireEvent.click(getByText('Download All')) + + expect(downloadMock).toHaveBeenCalledWith(album) + }) + + it('goes back to list if album is deleted', async () => { + const goMock = this.mock(router, 'go') + const byIdMock = this.mock(albumStore, 'byId', null) + await this.renderComponent() + + eventBus.emit('SONGS_UPDATED') + + await waitFor(() => { + expect(byIdMock).toHaveBeenCalledWith(album.id) + expect(goMock).toHaveBeenCalledWith('albums') + }) }) } } diff --git a/resources/assets/js/components/screens/AlbumScreen.vue b/resources/assets/js/components/screens/AlbumScreen.vue index 2ad40a65..6243aaf6 100644 --- a/resources/assets/js/components/screens/AlbumScreen.vue +++ b/resources/assets/js/components/screens/AlbumScreen.vue @@ -13,7 +13,7 @@ {{ album.artist_name }} {{ pluralize(album.song_count, 'song') }} {{ secondsToHis(album.length) }} - Info + Info +
+ +
+

Led Zeppelin IV + +

Led Zeppelin10 songs26:43Info Download All +
+

+ + +`;