fix(test): AlbumArtistThumbnail tests

resources/assets/js/components/ui/AlbumArtistThumbnail.spec.ts

@@ -1,6 +1,10 @@
+import { orderBy } from 'lodash'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
+import { fireEvent, waitFor } from '@testing-library/vue'
+import { queueStore, songStore } from '@/stores'
+import { playbackService } from '@/services'
 import Thumbnail from './AlbumArtistThumbnail.vue'
 
 let album: Album
@@ -43,19 +47,59 @@ new class extends UnitTestCase {
     })
 
     it('plays album', async () => {
-      throw 'Unimplemented'
+      const songs = factory<Song[]>('song', 10)
+      const fetchMock = this.mock(songStore, 'fetchForAlbum').mockResolvedValue(songs)
+      const playMock = this.mock(playbackService, 'queueAndPlay')
+      const { getByRole } = this.renderForAlbum()
+
+      await fireEvent.click(getByRole('button'))
+
+      await waitFor(() => {
+        expect(fetchMock).toHaveBeenCalledWith(album)
+        expect(playMock).toHaveBeenCalledWith(songs)
+      })
     })
 
     it('queues album', async () => {
-      throw 'Unimplemented'
+      const songs = factory<Song[]>('song', 10)
+      const fetchMock = this.mock(songStore, 'fetchForAlbum').mockResolvedValue(songs)
+      const queueMock = this.mock(queueStore, 'queue')
+      const { getByRole } = this.renderForAlbum()
+
+      await fireEvent.click(getByRole('button'), { altKey: true })
+
+      await waitFor(() => {
+        expect(fetchMock).toHaveBeenCalledWith(album)
+        expect(queueMock).toHaveBeenCalledWith(orderBy(songs, ['disc', 'track']))
+      })
     })
 
     it('plays artist', async () => {
-      throw 'Unimplemented'
+      const songs = factory<Song[]>('song', 10)
+      const fetchMock = this.mock(songStore, 'fetchForArtist').mockResolvedValue(songs)
+      const playMock = this.mock(playbackService, 'queueAndPlay')
+      const { getByRole } = this.renderForArtist()
+
+      await fireEvent.click(getByRole('button'))
+
+      await waitFor(() => {
+        expect(fetchMock).toHaveBeenCalledWith(artist)
+        expect(playMock).toHaveBeenCalledWith(songs)
+      })
     })
 
     it('queues artist', async () => {
-      throw 'Unimplemented'
+      const songs = factory<Song[]>('song', 10)
+      const fetchMock = this.mock(songStore, 'fetchForArtist').mockResolvedValue(songs)
+      const queueMock = this.mock(queueStore, 'queue')
+      const { getByRole } = this.renderForArtist()
+
+      await fireEvent.click(getByRole('button'), { altKey: true })
+
+      await waitFor(() => {
+        expect(fetchMock).toHaveBeenCalledWith(artist)
+        expect(queueMock).toHaveBeenCalledWith(orderBy(songs, ['album_id', 'disc', 'track']))
+      })
     })
   }
 }

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

@@ -1,7 +1,7 @@
 <template>
   <span
     :class="{ droppable }"
-    :style="{ backgroundImage: `url(${image}), url(${defaultCover})` }"
+    :style="backgroundStyle"
     class="cover"
     data-testid="album-artist-thumbnail"
   >
@@ -40,20 +40,16 @@ const user = toRef(userStore.state, 'current')
 const forAlbum = computed(() => entity.value.type === 'albums')
 const sortFields = computed(() => forAlbum.value ? ['disc', 'track'] : ['album_id', 'disc', 'track'])
 
-const image = computed(() => {
-  if (forAlbum.value) {
-    return (entity.value as Album).cover ? (entity.value as Album).cover : defaultCover
+const backgroundStyle = computed(() => {
+  const image = forAlbum.value
+    ? (entity.value as Album).cover || defaultCover
+    : (entity.value as Artist).image || defaultCover
+
+  return {
+    backgroundImage: `url(${image}), url(${defaultCover})`
   }
-
-  return getArtistImage(entity.value as Artist)
 })
 
-const getArtistImage = (artist: Artist) => {
-  artist.image = artist.image ?? defaultCover
-
-  return artist.image
-}
-
 const buttonLabel = computed(() => forAlbum.value
   ? `Play all songs in the album ${entity.value.name}`
   : `Play all songs by ${entity.value.name}`

resources/assets/js/components/ui/__snapshots__/AlbumArtistThumbnail.spec.ts.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1
 
-exports[`renders for album 1`] = `<span class="cover" style="background-image: url(https://localhost/album.jpg);" data-testid="album-artist-thumbnail" data-v-901ba52c=""><a class="control control-play font-size-0" href="" role="button" data-v-901ba52c="">Play all songs in the album IV</a></span>`;
+exports[`renders for album 1`] = `<span class="cover" data-testid="album-artist-thumbnail" data-v-901ba52c=""><a class="control control-play" href="" role="button" data-v-901ba52c=""><span class="hidden" data-v-901ba52c="">Play all songs in the album IV</span><span class="icon" data-v-901ba52c=""></span></a></span>`;
 
-exports[`renders for artist 1`] = `<span class="cover" style="background-image: url(https://localhost/blimp.jpg);" data-testid="album-artist-thumbnail" data-v-901ba52c=""><a class="control control-play font-size-0" href="" role="button" data-v-901ba52c="">Play all songs by the artist Led Zeppelin</a></span>`;
+exports[`renders for artist 1`] = `<span class="cover" data-testid="album-artist-thumbnail" data-v-901ba52c=""><a class="control control-play" href="" role="button" data-v-901ba52c=""><span class="hidden" data-v-901ba52c="">Play all songs by Led Zeppelin</span><span class="icon" data-v-901ba52c=""></span></a></span>`;