feat(test): add AlbumArtOverlay component tests

resources/assets/js/__tests__/ComponentTestCase.ts

@@ -2,7 +2,6 @@ import deepmerge from 'deepmerge'
 import isMobile from 'ismobilejs'
 import { cleanup, render, RenderOptions } from '@testing-library/vue'
 import { afterEach, beforeEach, vi } from 'vitest'
-import { noop } from '@/utils'
 import { clickaway, droppable, focus } from '@/directives'
 import { defineComponent, nextTick } from 'vue'
 import { commonStore } from '@/stores'
@@ -35,8 +34,13 @@ export default abstract class ComponentTestCase {
     })
   }
 
-  protected mock<T, M extends Methods<Required<T>>> (obj: T, methodName: M, implementation: any = noop) {
-    const mock = vi.fn().mockImplementation(implementation instanceof Function ? implementation : () => implementation)
+  protected mock<T, M extends Methods<Required<T>>> (obj: T, methodName: M, implementation?: any) {
+    const mock = vi.fn()
+
+    if (implementation !== undefined) {
+      mock.mockImplementation(implementation instanceof Function ? implementation : () => implementation)
+    }
+
     this.backupMethods.set([obj, methodName], obj[methodName])
 
     // @ts-ignore

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

@@ -0,0 +1,43 @@
+import { expect, it } from 'vitest'
+import { albumStore } from '@/stores'
+import factory from '@/__tests__/factory'
+import ComponentTestCase from '@/__tests__/ComponentTestCase'
+import AlbumArtOverlay from './AlbumArtOverlay.vue'
+
+let album: Album
+
+new class extends ComponentTestCase {
+  private renderComponent () {
+    album = factory<Album>('album')
+
+    return this.render(AlbumArtOverlay, {
+      props: {
+        album
+      }
+    })
+  }
+
+  protected test () {
+    it('fetches and displays the album thumbnail', async () => {
+      const mock = this.mock(albumStore, 'getThumbnail', new Promise(resolve => 'https://localhost/thumb.jpg'))
+
+      const { html } = this.renderComponent()
+      await this.tick(2)
+
+      expect(mock).toHaveBeenCalledWith(album)
+      expect(html()).toMatchSnapshot()
+    })
+
+    it('displays nothing if fetching fails', async () => {
+      const mock = this.mock(albumStore, 'getThumbnail', () => {
+        throw new Error()
+      })
+
+      const { html } = this.renderComponent()
+      await this.tick(2)
+
+      expect(mock).toHaveBeenCalledWith(album)
+      expect(html()).toMatchSnapshot()
+    })
+  }
+}

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

@@ -0,0 +1,5 @@
+// Vitest Snapshot v1
+
+exports[`displays nothing if fetching fails 1`] = `"<div style=\\"background-image: none;\\" data-testid=\\"album-art-overlay\\" data-v-75d06710=\\"\\"></div>"`;
+
+exports[`fetches and displays the album thumbnail 1`] = `"<div style=\\"background-image: none;\\" data-testid=\\"album-art-overlay\\" data-v-75d06710=\\"\\"></div>"`;