test: add artist unit tests

resources/assets/js/components/album/AlbumCard.spec.ts

@@ -1,10 +1,10 @@
-import AlbumCard from './AlbumCard.vue'
 import { cleanup, fireEvent } from '@testing-library/vue'
 import { beforeEach, expect, it, vi } from 'vitest'
 import { commonStore } from '@/stores'
 import { downloadService, playbackService } from '@/services'
 import { mockHelper, render } from '@/__tests__/__helpers__'
 import factory from '@/__tests__/factory'
+import AlbumCard from './AlbumCard.vue'
 
 let album: Album
 
@@ -29,7 +29,7 @@ it('renders', () => {
   })
 
   expect(getByTestId('name').innerText).equal('IV')
-  getByText(/^10 songs • .+ 0 plays$/)
+  getByText(/^10 songs.+0 plays$/)
   getByTestId('shuffle-album')
   getByTestId('download-album')
 })

resources/assets/js/components/artist/ArtistCard.spec.ts

@@ -0,0 +1,63 @@
+import { mockHelper, render } from '@/__tests__/__helpers__'
+import { cleanup, fireEvent } from '@testing-library/vue'
+import { beforeEach, expect, it, vi } from 'vitest'
+import factory from '@/__tests__/factory'
+import { commonStore } from '@/stores'
+import ArtistCard from './ArtistCard.vue'
+import { downloadService, playbackService } from '@/services'
+
+let artist: Artist
+
+beforeEach(() => {
+  vi.restoreAllMocks()
+  mockHelper.restoreAllMocks()
+  cleanup()
+
+  artist = factory<Artist>('artist', {
+    id: 3, // make sure it's not "Various Artists"
+    name: 'Led Zeppelin',
+    albums: factory<Album>('album', 4),
+    songs: factory<Song>('song', 16)
+  })
+
+  commonStore.state.allowDownload = true
+})
+
+it('renders', () => {
+  const { getByText, getByTestId } = render(ArtistCard, {
+    props: {
+      artist
+    }
+  })
+
+  expect(getByTestId('name').innerText).equal('Led Zeppelin')
+  getByText(/^4 albums\s+•\s+16 songs.+0 plays$/)
+  getByTestId('shuffle-artist')
+  getByTestId('download-artist')
+})
+
+it('downloads', async () => {
+  const mock = mockHelper.mock(downloadService, 'fromArtist')
+
+  const { getByTestId } = render(ArtistCard, {
+    props: {
+      artist
+    }
+  })
+
+  await fireEvent.click(getByTestId('download-artist'))
+  expect(mock).toHaveBeenCalledTimes(1)
+})
+
+it('shuffles', async () => {
+  const mock = mockHelper.mock(playbackService, 'playAllByArtist')
+
+  const { getByTestId } = render(ArtistCard, {
+    props: {
+      artist
+    }
+  })
+
+  await fireEvent.click(getByTestId('shuffle-artist'))
+  expect(mock).toHaveBeenCalled()
+})

resources/assets/js/components/artist/ArtistCard.vue

@@ -4,7 +4,7 @@
     :class="layout"
     :title="artist.name"
     class="item"
-    data-test="artist-card"
+    data-testid="artist-card"
     draggable="true"
     tabindex="0"
     @dblclick="shuffle"
@@ -12,12 +12,12 @@
     @contextmenu.prevent="requestContextMenu"
   >
     <span class="thumbnail-wrapper">
-      <ArtistThumbnail :entity="artist"/>
+      <ArtistThumbnail :entity="artist" />
     </span>
 
     <footer>
       <div class="info">
-        <a class="name" :href="`#!/artist/${artist.id}`">{{ artist.name }}</a>
+        <a class="name" :href="`#!/artist/${artist.id}`" data-testid="name">{{ artist.name }}</a>
       </div>
       <p class="meta">
         <span class="left">
@@ -25,6 +25,8 @@
           •
           {{ pluralize(artist.songs.length, 'song') }}
           •
+          {{ duration }}
+          •
           {{ pluralize(artist.playCount, 'play') }}
         </span>
         <span class="right">
@@ -33,9 +35,10 @@
             class="shuffle-artist"
             href
             role="button"
+            data-testid="shuffle-artist"
             @click.prevent="shuffle"
           >
-            <i class="fa fa-random"></i>
+            <i class="fa fa-random" />
           </a>
           <a
             v-if="allowDownload"
@@ -43,9 +46,10 @@
             class="download-artist"
             href
             role="button"
+            data-testid="download-artist"
             @click.prevent="download"
           >
-            <i class="fa fa-download"></i>
+            <i class="fa fa-download" />
           </a>
         </span>
       </p>
@@ -56,16 +60,17 @@
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, toRef, toRefs } from 'vue'
 import { eventBus, pluralize, startDragging } from '@/utils'
-import { artistStore, commonStore } from '@/stores'
+import { artistStore, commonStore, songStore } from '@/stores'
 import { downloadService, playbackService } from '@/services'
 
 const ArtistThumbnail = defineAsyncComponent(() => import('@/components/ui/AlbumArtistThumbnail.vue'))
 
-const props = withDefaults(defineProps<{ artist: Artist, layout: ArtistAlbumCardLayout }>(), { layout: 'full' })
+const props = withDefaults(defineProps<{ artist: Artist, layout?: ArtistAlbumCardLayout }>(), { layout: 'full' })
 const { artist, layout } = toRefs(props)
 
 const allowDownload = toRef(commonStore.state, 'allowDownload')
 
+const duration = computed(() => songStore.getFormattedLength(artist.value.songs))
 const showing = computed(() => artist.value.songs.length && !artistStore.isVariousArtists(artist.value))
 
 const shuffle = () => playbackService.playAllByArtist(artist.value, true /* shuffled */)