fix(test): FooterMiddlePane tests

resources/assets/js/__tests__/setup.ts

@@ -1,4 +1,11 @@
 import vueSnapshotSerializer from 'jest-serializer-vue'
-import { expect } from 'vitest'
+import { expect, vi } from 'vitest'
 
 expect.addSnapshotSerializer(vueSnapshotSerializer)
+
+global.ResizeObserver = global.ResizeObserver ||
+  vi.fn().mockImplementation(() => ({
+    disconnect: vi.fn(),
+    observe: vi.fn(),
+    unobserve: vi.fn()
+  }))

resources/assets/js/components/layout/app-footer/FooterMiddlePane.spec.ts

@@ -5,18 +5,18 @@ import FooterMiddlePane from './FooterMiddlePane.vue'
 
 new class extends UnitTestCase {
   protected test () {
-    it('renders without a song', () => {
+    it('renders without a song', () => expect(this.render(FooterMiddlePane).html()).toMatchSnapshot())
-      expect(this.render(FooterMiddlePane).html()).toMatchSnapshot()
-    })
 
     it('renders with a song', () => {
-      const song = factory<Song>('song', {
-        title: 'Fahrstuhl to Heaven'
-      })
-
       expect(this.render(FooterMiddlePane, {
         props: {
-          song
+          song: factory<Song>('song', {
+            title: 'Fahrstuhl to Heaven',
+            artist_name: 'Led Zeppelin',
+            artist_id: 3,
+            album_name: 'Led Zeppelin IV',
+            album_id: 4
+          })
         }
       }).html()).toMatchSnapshot()
     })

resources/assets/js/components/layout/app-footer/__snapshots__/FooterMiddlePane.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`renders with a song 1`] = `
 <div class="middle-pane" data-testid="footer-middle-pane">
   <div id="progressPane" class="progress">
     <h3 class="title">Fahrstuhl to Heaven</h3>
-    <p class="meta"><a href="/#!/artist/104" class="artist">Led Zeppelin</a> – <a href="/#!/album/42" class="album">IV</a></p>
+    <p class="meta"><a href="/#!/artist/3" class="artist">Led Zeppelin</a> – <a href="/#!/album/4" class="album">Led Zeppelin IV</a></p>
     <div class="plyr"><audio controls="" crossorigin="anonymous"></audio></div>
   </div>
 </div>