feat(test): add AlbumScreen tests

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', {
+    album = factory<Album>('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()
+      const { html } = await this.renderComponent()
-      getByText(/10 songs.+26:43$/)
+      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')
+      })
     })
   }
 }

resources/assets/js/components/screens/AlbumScreen.vue

@@ -13,7 +13,7 @@
         <span class="nope" v-else>{{ album.artist_name }}</span>
         <span>{{ pluralize(album.song_count, 'song') }}</span>
         <span>{{ secondsToHis(album.length) }}</span>
-        <a v-if="useLastfm" class="info" href title="View album's extra information" @click.prevent="showInfo">Info</a>
+        <a v-if="useLastfm" class="info" href title="View album information" @click.prevent="showInfo">Info</a>
 
         <a
           v-if="allowDownload"

resources/assets/js/components/screens/__snapshots__/AlbumScreen.spec.ts.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1
+
+exports[`renders 1`] = `
+<section id="albumWrapper" data-v-748fe44c="">
+  <header class="screen-header" data-v-748fe44c="">
+    <div class="thumbnail-wrapper non-empty"><span class="cover" data-testid="album-artist-thumbnail" data-v-901ba52c="" data-v-748fe44c=""><a class="control control-play font-size-0" href="" role="button" data-v-901ba52c="">Play all songs in the album Led Zeppelin IV</a></span></div>
+    <div class="heading-wrapper">
+      <h1>Led Zeppelin IV
+        <!--v-if-->
+      </h1><span class="meta text-secondary"><a href="#!/artist/123" class="artist" data-v-748fe44c="">Led Zeppelin</a><span data-v-748fe44c="">10 songs</span><span data-v-748fe44c="">26:43</span><a class="info" href="" title="View album information" data-v-748fe44c="">Info</a><a class="download" href="" role="button" title="Download all songs in album" data-v-748fe44c=""> Download All </a></span>
+    </div>
+  </header><br data-testid="song-list" data-v-748fe44c="">
+  <!--v-if-->
+</section>
+`;