feat(test): add AlbumContextMenu component test

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

@@ -1,15 +1,15 @@
-import factory from 'factoria'
 import { Faker } from '@faker-js/faker'
+import { secondsToHis } from '@/utils'
 
 export default (faker: Faker): Album => {
-  const artist = factory<Artist>('artist')
+  const length = faker.datatype.number({ min: 300 })
 
   return {
     type: 'albums',
-    artist_id: artist.id,
-    artist_name: artist.name,
-    song_count: 0,
-    id: faker.datatype.number(),
+    artist_id: faker.datatype.number({ min: 3 }), // avoid Unknown and Various Artist by default
+    artist_name: faker.name.findName(),
+    song_count: faker.datatype.number(30),
+    id: faker.datatype.number({ min: 2 }), // avoid Unknown Album by default
     name: faker.lorem.sentence(),
     cover: faker.image.imageUrl(),
     info: {
@@ -32,8 +32,18 @@ export default (faker: Faker): Album => {
       ],
       url: faker.internet.url()
     },
-    play_count: 0,
-    length: 0,
-    fmt_length: '00:00:00'
+    play_count: faker.datatype.number(),
+    length,
+    fmt_length: secondsToHis(length),
+    created_at: faker.date.past().toISOString()
+  }
+}
+
+export const states: Record<string, Omit<Partial<Album>, 'type'>> = {
+  unknown: {
+    id: 1,
+    name: 'Unknown Album',
+    artist_id: 1,
+    artist_name: 'Unknown Artist'
   }
 }

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

@@ -1,21 +1,38 @@
 import { Faker } from '@faker-js/faker'
+import { secondsToHis } from '@/utils'
 
-export default (faker: Faker): Artist => ({
-  type: 'artists',
-  id: faker.datatype.number(),
-  name: faker.name.findName(),
-  info: {
-    image: faker.image.imageUrl(),
-    bio: {
-      summary: faker.lorem.sentence(),
-      full: faker.lorem.paragraph()
+export default (faker: Faker): Artist => {
+  const length = faker.datatype.number({ min: 300 })
+
+  return {
+    type: 'artists',
+    id: faker.datatype.number({ min: 3 }), // avoid Unknown and Various Artist by default
+    name: faker.name.findName(),
+    info: {
+      image: faker.image.imageUrl(),
+      bio: {
+        summary: faker.lorem.sentence(),
+        full: faker.lorem.paragraph()
+      },
+      url: faker.internet.url()
     },
-    url: faker.internet.url()
+    image: 'foo.jpg',
+    play_count: faker.datatype.number(),
+    album_count: faker.datatype.number({ max: 10 }),
+    song_count: faker.datatype.number({ max: 100 }),
+    length,
+    fmt_length: secondsToHis(length),
+    created_at: faker.date.past().toISOString()
+  }
+}
+
+export const states: Record<string, Omit<Partial<Artist>, 'type'>> = {
+  unknown: {
+    id: 1,
+    name: 'Unknown Artist'
   },
-  image: 'foo.jpg',
-  play_count: 0,
-  album_count: 0,
-  song_count: 0,
-  length: 0,
-  fmt_length: '00:00:00'
-})
+  various: {
+    id: 2,
+    name: 'Various Artists'
+  }
+}

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

@@ -1,17 +1,17 @@
 import factory from 'factoria'
-import artistFactory from './artistFactory'
-import albumFactory from './albumFactory'
-import songFactory from './songFactory'
-import playlistFactory from './playlistFactory'
+import artistFactory, { states as artistStates } from './artistFactory'
+import albumFactory, { states as albumStates } from './albumFactory'
+import songFactory, { states as songStates } from '@/__tests__/factory/songFactory'
+import playlistFactory, { states as playlistStates } from './playlistFactory'
 import userFactory, { states as userStates } from './userFactory'
 import youTubeVideoFactory from './youTubeVideoFactory'
 
 factory
-  .define('artist', faker => artistFactory(faker))
-  .define('album', faker => albumFactory(faker))
-  .define('song', faker => songFactory(faker))
+  .define('artist', faker => artistFactory(faker), artistStates)
+  .define('album', faker => albumFactory(faker), albumStates)
+  .define('song', faker => songFactory(faker), songStates)
   .define('video', faker => youTubeVideoFactory(faker))
-  .define('playlist', faker => playlistFactory(faker))
+  .define('playlist', faker => playlistFactory(faker), playlistStates)
   .define('user', faker => userFactory(faker), userStates)
 
 export default factory

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

@@ -2,9 +2,16 @@ import factory from 'factoria'
 import { Faker } from '@faker-js/faker'
 
 export default (faker: Faker): Playlist => ({
+  type: 'playlists',
   id: faker.datatype.number(),
   name: faker.random.word(),
-  songs: factory<Song>('song', 10),
+  songs: factory<Song[]>('song', 10),
   is_smart: false,
   rules: []
 })
+
+export const states: Record<string, Omit<Partial<Playlist>, 'type'>> = {
+  smart: {
+    is_smart: true
+  }
+}

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

@@ -1,29 +1,35 @@
-import factory from 'factoria'
 import crypto from 'crypto-random-string'
-import { Faker } from '@faker-js/faker'
+import { Faker, faker } from '@faker-js/faker'
 
-export default (faker: Faker): Song => {
-  const artist = factory<Artist>('artist')
-  const album = factory<Album>('album', {
-    artist_id: artist.id
-  })
+const generate = (partOfCompilation = false): Song => {
+  const artistId = faker.datatype.number({ min: 3 })
+  const artistName = faker.name.findName()
 
   return {
     type: 'songs',
-    artist_id: artist.id,
-    album_id: album.id,
-    artist_name: artist.name,
-    album_name: album.name,
-    album_artist_id: album.artist_id,
-    album_artist_name: album.artist_name,
-    album_cover: album.cover,
+    artist_id: artistId,
+    album_id: faker.datatype.number({ min: 2 }), // avoid Unknown Album by default
+    artist_name: artistName,
+    album_name: faker.lorem.sentence(),
+    album_artist_id: partOfCompilation ? artistId + 1 : artistId,
+    album_artist_name: partOfCompilation ? artistName : faker.name.findName(),
+    album_cover: faker.image.imageUrl(),
     id: crypto(32),
     title: faker.lorem.sentence(),
     length: faker.datatype.number(),
     track: faker.datatype.number(),
     disc: faker.datatype.number({ min: 1, max: 2 }),
     lyrics: faker.lorem.paragraph(),
-    play_count: 0,
-    liked: true
+    play_count: faker.datatype.number(),
+    liked: faker.datatype.boolean(),
+    created_at: faker.date.past().toISOString()
   }
 }
+
+export default (faker: Faker): Song => {
+  return generate()
+}
+
+export const states: Record<string, Partial<Song>> = {
+  partOfCompilation: generate(true)
+}

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

@@ -1,6 +1,7 @@
 import { Faker } from '@faker-js/faker'
 
 export default (faker: Faker): User => ({
+  type: 'users',
   id: faker.datatype.number(),
   name: faker.name.findName(),
   email: faker.internet.email(),
@@ -10,8 +11,8 @@ export default (faker: Faker): User => ({
   preferences: {}
 })
 
-export const states = {
+export const states: Record<string, Omit<Partial<User>, 'type'>> = {
   admin: {
-    isAdmin: true
+    is_admin: true
   }
 }

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

@@ -0,0 +1,102 @@
+import { expect, it } from 'vitest'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { eventBus } from '@/utils'
+import { downloadService, playbackService } from '@/services'
+import { commonStore, songStore } from '@/stores'
+import router from '@/router'
+import AlbumContextMenu from './AlbumContextMenu.vue'
+
+let album: Album
+
+new class extends UnitTestCase {
+  private async renderComponent (_album?: Album) {
+    album = _album || factory<Album>('album', {
+      name: 'IV',
+      play_count: 30,
+      song_count: 10,
+      length: 123
+    })
+
+    const rendered = this.render(AlbumContextMenu)
+    eventBus.emit('ALBUM_CONTEXT_MENU_REQUESTED', {}, album)
+    await this.tick(2)
+
+    return rendered
+  }
+
+  protected test () {
+    it('renders', async () => {
+      const { html } = await this.renderComponent()
+      expect(html()).toMatchSnapshot()
+    })
+
+    it('plays all', async () => {
+      const songs = factory<Song[]>('song', 10)
+      const fetchMock = this.mock(songStore, 'fetchForAlbum').mockResolvedValue(songs)
+      const playMock = this.mock(playbackService, 'queueAndPlay')
+
+      const { getByText } = await this.renderComponent()
+      await getByText('Play All').click()
+      await this.tick()
+
+      expect(fetchMock).toHaveBeenCalledWith(album)
+      expect(playMock).toHaveBeenCalledWith(songs)
+    })
+
+    it('shuffles all', async () => {
+      const songs = factory<Song[]>('song', 10)
+      const fetchMock = this.mock(songStore, 'fetchForAlbum').mockResolvedValue(songs)
+      const playMock = this.mock(playbackService, 'queueAndPlay')
+
+      const { getByText } = await this.renderComponent()
+      await getByText('Shuffle All').click()
+      await this.tick()
+
+      expect(fetchMock).toHaveBeenCalledWith(album)
+      expect(playMock).toHaveBeenCalledWith(songs, true)
+    })
+
+    it('downloads', async () => {
+      const mock = this.mock(downloadService, 'fromAlbum')
+
+      const { getByText } = await this.renderComponent()
+      await getByText('Download').click()
+
+      expect(mock).toHaveBeenCalledWith(album)
+    })
+
+    it('does not have an option to download if downloading is disabled', async () => {
+      commonStore.state.allow_download = false
+      const { queryByText } = await this.renderComponent()
+
+      expect(queryByText('Download')).toBeNull()
+    })
+
+    it('goes to album', async () => {
+      const mock = this.mock(router, 'go')
+      const { getByText } = await this.renderComponent()
+
+      await getByText('Go to Album').click()
+
+      expect(mock).toHaveBeenCalledWith(`album/${album.id}`)
+    })
+
+    it('does not have an option to download or go to Unknown Album and Artist', async () => {
+      const { queryByTestId } = await this.renderComponent(factory.states('unknown')<Album>('album'))
+
+      expect(queryByTestId('view-album')).toBeNull()
+      expect(queryByTestId('view-artist')).toBeNull()
+      expect(queryByTestId('download')).toBeNull()
+    })
+
+    it('goes to artist', async () => {
+      const mock = this.mock(router, 'go')
+      const { getByText } = await this.renderComponent()
+
+      await getByText('Go to Artist').click()
+
+      expect(mock).toHaveBeenCalledWith(`artist/${album.artist_id}`)
+    })
+  }
+}

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

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1
+
+exports[`renders 1`] = `
+<nav class="album-menu menu context-menu" style="top: 0px; left: 0px;" tabindex="0" data-testid="album-context-menu">
+  <ul>
+    <li data-testid="play">Play All</li>
+    <li data-testid="shuffle">Shuffle All</li>
+    <li class="separator"></li>
+    <li data-testid="view-album">Go to Album</li>
+    <li data-testid="view-artist">Go to Artist</li>
+    <li class="separator"></li>
+    <li data-testid="download">Download</li>
+  </ul>
+</nav>
+`;

resources/assets/js/types.d.ts

@@ -227,6 +227,7 @@ type SmartPlaylistInputTypes = Record<string, SmartPlaylistOperator[]>
 type PlaylistType = 'playlist' | 'favorites' | 'recently-played'
 
 interface Playlist {
+  type: 'playlists'
   readonly id: number
   name: string
   songs: Song[]
@@ -255,6 +256,7 @@ interface UserPreferences {
 }
 
 interface User {
+  type: 'users'
   id: number
   name: string
   email: string