fix(test): AlbumTrackListItem tests

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

@@ -5,50 +5,52 @@ import { queueStore, songStore } from '@/stores'
 import { playbackService } from '@/services'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import AlbumTrackListItem from './AlbumTrackListItem.vue'
-
-let song: Song
-
-const track = {
-  title: 'Fahrstuhl to Heaven',
-  length: '42'
-}
-
-const album = factory<Album>('album', { id: 42 })
+import { SongsKey } from '@/symbols'
+import { ref } from 'vue'
 
 new class extends UnitTestCase {
-  protected beforeEach () {
-    super.beforeEach(() => (song = factory<Song>('song')))
+  private renderComponent (matchedSong?: Song) {
+    const songsToMatchAgainst = factory<Song[]>('song', 10)
+    const album = factory<Album>('album')
+
+    const track = factory<AlbumTrack>('album-track', {
+      title: 'Fahrstuhl to Heaven',
+      length: 280
+    })
+
+    const matchMock = this.mock(songStore, 'match', matchedSong)
+
+    const rendered = this.render(AlbumTrackListItem, {
+      props: {
+        album,
+        track
+      },
+      global: {
+        provide: {
+          [SongsKey]: [ref(songsToMatchAgainst)]
+        }
+      }
+    })
+
+    expect(matchMock).toHaveBeenCalledWith('Fahrstuhl to Heaven', songsToMatchAgainst)
+
+    return rendered
   }
 
   protected test () {
-    it('renders', () => {
-      const { html } = this.render(AlbumTrackListItem, {
-        props: {
-          album,
-          track
-        }
-      })
-
-      expect(html()).toMatchSnapshot()
-    })
+    it('renders', () => expect(this.renderComponent().html()).toMatchSnapshot())
 
     it('plays', async () => {
-      const matchMock = this.mock(songStore, 'match', song)
+      const matchedSong = factory<Song>('song')
       const queueMock = this.mock(queueStore, 'queueIfNotQueued')
       const playMock = this.mock(playbackService, 'play')
 
-      const { getByTitle } = this.render(AlbumTrackListItem, {
-        props: {
-          album,
-          track
-        }
-      })
+      const { getByTitle } = this.renderComponent(matchedSong)
 
       await fireEvent.click(getByTitle('Click to play'))
 
-      expect(matchMock).toHaveBeenCalled()
-      expect(queueMock).toHaveBeenNthCalledWith(1, song)
-      expect(playMock).toHaveBeenNthCalledWith(1, song)
+      expect(queueMock).toHaveBeenNthCalledWith(1, matchedSong)
+      expect(playMock).toHaveBeenNthCalledWith(1, matchedSong)
     })
   }
 }

resources/assets/js/components/album/__snapshots__/AlbumTrackListItem.spec.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1
+
+exports[`renders 1`] = `
+<div class="track-list-item" title="" tabindex="0" data-v-d8ad5538=""><span class="title" data-v-d8ad5538="">Fahrstuhl to Heaven</span>
+  <!----><span class="length" data-v-d8ad5538="">04:40</span>
+</div>
+`;