fix(test): ArtistInfo tests

resources/assets/js/__tests__/factory/artistInfoFactory.ts

@@ -0,0 +1,10 @@
+import { Faker } from '@faker-js/faker'
+
+export default (faker: Faker): ArtistInfo => ({
+  image: faker.image.imageUrl(),
+  bio: {
+    summary: faker.lorem.sentence(),
+    full: faker.lorem.sentences(4)
+  },
+  url: faker.internet.url()
+})

resources/assets/js/__tests__/factory/index.ts

@@ -1,15 +1,17 @@
 import factory from 'factoria'
 import artistFactory, { states as artistStates } from './artistFactory'
-import albumFactory, { states as albumStates } from './albumFactory'
 import songFactory, { states as songStates } from '@/__tests__/factory/songFactory'
-import albumTrackFactory from '@/__tests__/factory/albumTrackFactory'
-import albumInfoFactory from '@/__tests__/factory/albumInfoFactory'
+import albumFactory, { states as albumStates } from './albumFactory'
 import playlistFactory, { states as playlistStates } from './playlistFactory'
 import userFactory, { states as userStates } from './userFactory'
+import albumTrackFactory from '@/__tests__/factory/albumTrackFactory'
+import albumInfoFactory from '@/__tests__/factory/albumInfoFactory'
+import artistInfoFactory from '@/__tests__/factory/artistInfoFactory'
 import youTubeVideoFactory from './youTubeVideoFactory'
 
 factory
   .define('artist', faker => artistFactory(faker), artistStates)
+  .define('artist-info', faker => artistInfoFactory(faker))
   .define('album', faker => albumFactory(faker), albumStates)
   .define('album-track', faker => albumTrackFactory(faker))
   .define('album-info', faker => albumInfoFactory(faker))

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

@@ -1,11 +1,11 @@
 import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import AlbumInfo from './AlbumInfo.vue'
 import { mediaInfoService } from '@/services/mediaInfoService'
 import { commonStore, songStore } from '@/stores'
 import { fireEvent } from '@testing-library/vue'
 import { playbackService } from '@/services'
+import AlbumInfoComponent from './AlbumInfo.vue'
 
 let album: Album
 
@@ -20,7 +20,7 @@ new class extends UnitTestCase {
     album = factory<Album>('album', { name: 'IV' })
     const fetchMock = this.mock(mediaInfoService, 'fetchForAlbum').mockResolvedValue(info)
 
-    const rendered = this.render(AlbumInfo, {
+    const rendered = this.render(AlbumInfoComponent, {
       props: {
         album,
         mode

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

@@ -1,42 +1,76 @@
 import { expect, it } from 'vitest'
-import { fireEvent } from '@testing-library/vue'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import ArtistInfo from './ArtistInfo.vue'
-import ArtistThumbnail from '@/components/ui/AlbumArtistThumbnail.vue'
+import { mediaInfoService } from '@/services/mediaInfoService'
+import { commonStore, songStore } from '@/stores'
+import { fireEvent } from '@testing-library/vue'
+import { playbackService } from '@/services'
+import ArtistInfoComponent from './ArtistInfo.vue'
+
+let artist: Album
 
 new class extends UnitTestCase {
+  private async renderComponent (mode: MediaInfoDisplayMode = 'aside', info?: ArtistInfo) {
+    commonStore.state.use_last_fm = true
+
+    if (info === undefined) {
+      info = factory<ArtistInfo>('artist-info')
+    }
+
+    artist = factory<Artist>('artist', { name: 'Led Zeppelin' })
+    const fetchMock = this.mock(mediaInfoService, 'fetchForArtist').mockResolvedValue(info)
+
+    const rendered = this.render(ArtistInfoComponent, {
+      props: {
+        artist,
+        mode
+      }
+    })
+
+    await this.tick(1)
+    expect(fetchMock).toHaveBeenCalledWith(artist)
+
+    return rendered
+  }
+
   protected test () {
-    it.each([['sidebar'], ['full']])('renders in %s mode', async (mode: string) => {
-      const { getByTestId } = this.render(ArtistInfo, {
-        props: {
-          mode,
-          artist: factory<Artist>('artist')
-        },
-        global: {
-          stubs: {
-            ArtistThumbnail
-          }
-        }
-      })
+    it.each<[MediaInfoDisplayMode]>([['aside'], ['full']])('renders in %s mode', async (mode) => {
+      const { getByTestId } = await this.renderComponent(mode)
 
       getByTestId('album-artist-thumbnail')
 
-      const element = getByTestId('artist-info')
-      expect(element.classList.contains(mode)).toBe(true)
+      expect(getByTestId('artist-info').classList.contains(mode)).toBe(true)
     })
 
-    it('triggers showing full wiki', async () => {
-      const artist = factory<Artist>('artist')
+    it('triggers showing full bio for aside mode', async () => {
+      const { queryByTestId } = await this.renderComponent('aside')
+      expect(queryByTestId('full')).toBeNull()
 
-      const { getByText } = this.render(ArtistInfo, {
-        props: {
-          artist
-        }
-      })
+      await fireEvent.click(queryByTestId('more-btn'))
 
-      await fireEvent.click(getByText('Full Bio'))
-      getByText(artist.info!.bio!.full)
+      expect(queryByTestId('summary')).toBeNull()
+      expect(queryByTestId('full')).not.toBeNull()
+    })
+
+    it('shows full bio for full mode', async () => {
+      const { queryByTestId } = await this.renderComponent('full')
+
+      expect(queryByTestId('full')).not.toBeNull()
+      expect(queryByTestId('summary')).toBeNull()
+      expect(queryByTestId('more-btn')).toBeNull()
+    })
+
+    it('plays', async () => {
+      const songs = factory<Song[]>('song', 3)
+      const fetchMock = this.mock(songStore, 'fetchForArtist').mockResolvedValue(songs)
+      const playMock = this.mock(playbackService, 'queueAndPlay')
+      const { getByTitle } = await this.renderComponent()
+
+      await fireEvent.click(getByTitle('Play all songs by Led Zeppelin'))
+      await this.tick(2)
+
+      expect(fetchMock).toHaveBeenCalledWith(artist)
+      expect(playMock).toHaveBeenCalledWith(songs)
     })
   }
 }

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

@@ -12,10 +12,10 @@
 
       <template v-if="info">
         <div v-if="info.bio?.summary" class="bio">
-          <div v-if="showSummary" class="summary" v-html="info.bio.summary"/>
-          <div v-if="showFull" class="full" v-html="info.bio.full"/>
+          <div v-if="showSummary" class="summary" data-testid="summary" v-html="info.bio.summary"/>
+          <div v-if="showFull" class="full" data-testid="full" v-html="info.bio.full"/>
 
-          <button v-show="showSummary" class="more" data-testid="more-btn" @click.prevent="showingFullBio = true">
+          <button v-if="showSummary" class="more" data-testid="more-btn" @click.prevent="showingFullBio = true">
             Full Bio
           </button>
         </div>