feat(test): add SongCard component tests

cypress/integration/home.spec.ts

@@ -27,7 +27,7 @@ context('Home Screen', () => {
   it('a song item can be played', () => {
     cy.$mockPlayback()
 
-    cy.get('.top-song-list li:first-child [data-test=song-card]').within(() => {
+    cy.get('.top-song-list li:first-child [data-testid=song-card]').within(() => {
       cy.get('a.control').invoke('show').click()
     }).should('have.class', 'playing')
     cy.$assertPlaying()

cypress/integration/searching.spec.ts

@@ -17,7 +17,7 @@ context('Searching', () => {
     cy.get('@searchInput').type('foo')
 
     cy.get('#searchExcerptsWrapper').within(() => {
-      cy.$findInTestId('song-excerpts [data-test=song-card]').should('have.length', 6)
+      cy.$findInTestId('song-excerpts [data-testid=song-card]').should('have.length', 6)
       cy.$findInTestId('artist-excerpts [data-test=artist-card]').should('have.length', 1)
       cy.$findInTestId('album-excerpts [data-test=album-card]').should('have.length', 3)
     })

resources/assets/js/__tests__/components/song/card.spec.ts

@@ -1,60 +0,0 @@
-import Component from '@/components/song/SongCard.vue'
-import factory from '@/__tests__/factory'
-import { queueStore } from '@/stores'
-import { playbackService } from '@/services'
-import { mock } from '@/__tests__/__helpers__'
-import { Wrapper, shallow } from '@/__tests__/adapter'
-import FunctionPropertyNames = jest.FunctionPropertyNames
-
-describe('components/song/SongCard', () => {
-  let propsData, song: Song, wrapper: Wrapper
-
-  beforeEach(() => {
-    song = factory<Song>('song', {
-      artist: factory<Artist>('artist', {
-        id: 42,
-        name: 'Foo Fighter'
-      }),
-      playCount: 10,
-      playbackState: 'Stopped',
-      title: 'Foo bar'
-    })
-
-    propsData = {
-      song,
-      topPlayCount: 42
-    }
-
-    wrapper = shallow(Component, { propsData })
-  })
-
-  afterEach(() => {
-    jest.resetModules()
-    jest.clearAllMocks()
-  })
-
-  it.each([[true, false], [false, true]])('queuing and playing behavior', (shouldQueue, queued) => {
-    const containsStub = mock(queueStore, 'contains', queued)
-    const queueStub = mock(queueStore, 'queueAfterCurrent')
-    const playStub = mock(playbackService, 'play')
-    wrapper.dblclick('[data-test=song-card]')
-    expect(containsStub).toHaveBeenCalledWith(song)
-    if (queued) {
-      expect(queueStub).not.toHaveBeenCalled()
-    } else {
-      expect(queueStub).toHaveBeenCalledWith(song)
-    }
-    expect(playStub).toHaveBeenCalledWith(song)
-  })
-
-  it.each<[PlaybackState, FunctionPropertyNames<typeof playbackService>]>([
-    ['Stopped', 'play'],
-    ['Playing', 'pause'],
-    ['Paused', 'resume']
-  ])('if state is currently "%s", %s', (state, action) => {
-    const m = mock(playbackService, action)
-    song.playbackState = state
-    wrapper.click('.cover .control')
-    expect(m).toHaveBeenCalled()
-  })
-})

resources/assets/js/components/song/SongCard.spec.ts

@@ -0,0 +1,56 @@
+import factory from '@/__tests__/factory'
+import { queueStore } from '@/stores'
+import { playbackService } from '@/services'
+import { expect, it } from 'vitest'
+import { fireEvent } from '@testing-library/vue'
+import ComponentTestCase from '@/__tests__/ComponentTestCase'
+import SongCard from './SongCard.vue'
+
+let song: Song
+
+new class extends ComponentTestCase {
+  private renderComponent (playbackState: PlaybackState = 'Stopped') {
+    song = factory<Song>('song', {
+      playbackState,
+      artist: factory<Artist>('artist', {
+        id: 42,
+        name: 'Foo Fighter'
+      }),
+      playCount: 10,
+      title: 'Foo bar'
+    })
+
+    return this.render(SongCard, {
+      props: {
+        song,
+        topPlayCount: 42
+      }
+    })
+  }
+
+  protected test () {
+    it('queues and plays', async () => {
+      const queueMock = this.mock(queueStore, 'queueIfNotQueued')
+      const playMock = this.mock(playbackService, 'play')
+      const { getByTestId } = this.renderComponent()
+
+      await fireEvent.dblClick(getByTestId('song-card'))
+
+      expect(queueMock).toHaveBeenCalledWith(song)
+      expect(playMock).toHaveBeenCalledWith(song)
+    })
+
+    it.each<[PlaybackState, MethodOf<typeof playbackService>]>([
+      ['Stopped', 'play'],
+      ['Playing', 'pause'],
+      ['Paused', 'resume']
+    ])('if state is currently "%s", %ss', async (state: PlaybackState, method: MethodOf<typeof playbackService>) => {
+      const mock = this.mock(playbackService, method)
+      const { getByTestId } = this.renderComponent(state)
+
+      await fireEvent.click(getByTestId('play-control'))
+
+      expect(mock).toHaveBeenCalled()
+    })
+  }
+}

resources/assets/js/components/song/SongCard.vue

@@ -1,7 +1,7 @@
 <template>
   <article
     :class="{ playing: song.playbackState === 'Playing' || song.playbackState === 'Paused' }"
-    data-test="song-card"
+    data-testid="song-card"
     draggable="true"
     tabindex="0"
     @dragstart="dragStart"
@@ -9,7 +9,7 @@
     @dblclick.prevent="play"
   >
     <span :style="{ backgroundImage: `url(${song.album.cover})` }" class="cover">
-      <a class="control" @click.prevent="changeSongState">
+      <a class="control" @click.prevent="changeSongState" data-testid="play-control">
         <i v-if="song.playbackState !== 'Playing'" class="fa fa-play"/>
         <i class="fa fa-pause" v-else/>
       </a>