feat(test): add ArtistScreen tests

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

@@ -3,11 +3,11 @@ 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 { downloadService } from '@/services'
 import router from '@/router'
 import { eventBus } from '@/utils'
+import CloseModalBtn from '@/components/ui/BtnCloseModal.vue'
+import AlbumScreen from './AlbumScreen.vue'
 
 let album: Album
 

resources/assets/js/components/screens/ArtistScreen.spec.ts

@@ -0,0 +1,86 @@
+import { fireEvent, waitFor } from '@testing-library/vue'
+import { expect, it } from 'vitest'
+import factory from '@/__tests__/factory'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import { artistStore, commonStore, songStore } from '@/stores'
+import { downloadService } from '@/services'
+import router from '@/router'
+import { eventBus } from '@/utils'
+import CloseModalBtn from '@/components/ui/BtnCloseModal.vue'
+import ArtistScreen from './ArtistScreen.vue'
+
+let artist: Artist
+
+new class extends UnitTestCase {
+  protected async renderComponent () {
+    commonStore.state.use_last_fm = true
+
+    artist = factory<Artist>('artist', {
+      id: 42,
+      name: 'Led Zeppelin',
+      album_count: 12,
+      song_count: 53,
+      length: 40_603
+    })
+
+    const songs = factory<Song[]>('song', 13)
+    const fetchSongsMock = this.mock(songStore, 'fetchForArtist').mockResolvedValue(songs)
+
+    const rendered = this.render(ArtistScreen, {
+      props: {
+        artist
+      },
+      global: {
+        stubs: {
+          CloseModalBtn,
+          ArtistInfo: this.stub('artist-info'),
+          SongList: this.stub('song-list')
+        }
+      }
+    })
+
+    await waitFor(() => expect(fetchSongsMock).toHaveBeenCalledWith(artist))
+
+    return rendered
+  }
+
+  protected test () {
+    it('renders', async () => {
+      const { html } = await this.renderComponent()
+      expect(html()).toMatchSnapshot()
+    })
+
+    it('shows and hides info', async () => {
+      const { getByTitle, getByTestId, queryByTestId } = await this.renderComponent()
+      expect(queryByTestId('artist-info')).toBeNull()
+
+      await fireEvent.click(getByTitle('View artist information'))
+      expect(queryByTestId('artist-info')).not.toBeNull()
+
+      await fireEvent.click(getByTestId('close-modal-btn'))
+      expect(queryByTestId('artist-info')).toBeNull()
+    })
+
+    it('downloads', async () => {
+      const downloadMock = this.mock(downloadService, 'fromArtist')
+      const { getByText } = await this.renderComponent()
+
+      await fireEvent.click(getByText('Download All'))
+
+      expect(downloadMock).toHaveBeenCalledWith(artist)
+    })
+
+    it('goes back to list if artist is deleted', async () => {
+      const goMock = this.mock(router, 'go')
+      const byIdMock = this.mock(artistStore, 'byId', null)
+      await this.renderComponent()
+
+      eventBus.emit('SONGS_UPDATED')
+
+      await waitFor(() => {
+        expect(byIdMock).toHaveBeenCalledWith(artist.id)
+        expect(goMock).toHaveBeenCalledWith('artists')
+      })
+    })
+  }
+}

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

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

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

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1
+
+exports[`renders 1`] = `
+<section id="artistWrapper" data-v-dceda15c="">
+  <header class="screen-header" data-v-dceda15c="">
+    <div class="thumbnail-wrapper non-empty"><span class="cover" data-testid="album-artist-thumbnail" data-v-901ba52c="" data-v-dceda15c=""><a class="control control-play font-size-0" href="" role="button" data-v-901ba52c="">Play all songs by Led Zeppelin</a></span></div>
+    <div class="heading-wrapper">
+      <h1>Led Zeppelin
+        <!--v-if-->
+      </h1><span class="meta text-secondary"><span data-v-dceda15c="">12 albums</span><span data-v-dceda15c="">53 songs</span><span data-v-dceda15c="">11:16:43</span><a class="info" href="" title="View artist information" data-v-dceda15c="">Info</a><a class="download" href="" role="button" title="Download all songs by this artist" data-v-dceda15c=""> Download All </a></span>
+    </div>
+  </header><br data-testid="song-list" data-v-dceda15c="">
+  <!--v-if-->
+</section>
+`;

resources/assets/js/components/ui/AlbumArtistThumbnail.vue

@@ -55,7 +55,7 @@ const getArtistImage = (artist: Artist) => {
 
 const buttonLabel = computed(() => forAlbum.value
   ? `Play all songs in the album ${entity.value.name}`
-  : `Play all songs by the artist ${entity.value.name}`
+  : `Play all songs by ${entity.value.name}`
 )
 
 const { isAdmin: allowsUpload } = useAuthorization()