feat(test): add AllSongsScreen tests

resources/assets/js/components/screens/AllSongsScreen.spec.ts

@@ -0,0 +1,53 @@
+import { expect, it } from 'vitest'
+import factory from '@/__tests__/factory'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import AllSongsScreen from './AllSongsScreen.vue'
+import { commonStore, queueStore, songStore } from '@/stores'
+import { fireEvent, waitFor } from '@testing-library/vue'
+import { eventBus } from '@/utils'
+import { playbackService } from '@/services'
+import router from '@/router'
+
+new class extends UnitTestCase {
+  private async renderComponent () {
+    commonStore.state.song_count = 420
+    commonStore.state.song_length = 123_456
+    songStore.state.songs = factory<Song[]>('song', 20)
+    const fetchMock = this.mock(songStore, 'fetch').mockResolvedValue(2)
+
+    const rendered = this.render(AllSongsScreen, {
+      global: {
+        stubs: {
+          SongList: this.stub('song-list')
+        }
+      }
+    })
+
+    eventBus.emit('LOAD_MAIN_CONTENT', 'Songs')
+
+    await waitFor(() => expect(fetchMock).toHaveBeenCalledWith('title', 'asc', 1))
+    return rendered
+  }
+
+  protected test () {
+    it('renders', async () => {
+      const { html } = await this.renderComponent()
+      await waitFor(() => expect(html()).toMatchSnapshot())
+    })
+
+    it('shuffles', async () => {
+      const queueMock = this.mock(queueStore, 'fetchRandom')
+      const playMock = this.mock(playbackService, 'playFirstInQueue')
+      const goMock = this.mock(router, 'go')
+      const { getByTitle } = await this.renderComponent()
+
+      await fireEvent.click(getByTitle('Shuffle all songs'))
+
+      await waitFor(() => {
+        expect(queueMock).toHaveBeenCalled()
+        expect(playMock).toHaveBeenCalled()
+        expect(goMock).toHaveBeenCalledWith('queue')
+      })
+    })
+  }
+}

resources/assets/js/components/screens/AllSongsScreen.vue

@@ -11,7 +11,7 @@
 
       <template v-slot:controls>
         <SongListControls
-          v-if="songs.length && (!isPhone || showingControls)"
+          v-if="totalSongCount && (!isPhone || showingControls)"
           @playAll="playAll"
           @playSelected="playSelected"
         />
@@ -82,7 +82,7 @@ const playAll = async (shuffle: boolean) => {
   }
 
   await playbackService.playFirstInQueue()
-  await router.go('/queue')
+  await router.go('queue')
 }
 
 eventBus.on('LOAD_MAIN_CONTENT', async (view: MainViewName) => {

resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap

@@ -0,0 +1,29 @@
+// Vitest Snapshot v1
+
+exports[`renders 1`] = `
+<section id="songsWrapper">
+  <header class="screen-header">
+    <div class="thumbnail-wrapper"></div>
+    <div class="heading-wrapper">
+      <h1> All Songs
+        <!--v-if-->
+      </h1><span class="meta text-secondary"><span>420 songs</span><span>34:17:36</span></span>
+    </div>
+    <div class="song-list-controls" data-testid="song-list-controls" data-v-cee28c08=""><span class="btn-group" uppercased="" data-v-cee28c08=""><button type="button" class="btn-shuffle-all" data-testid="btn-shuffle-all" orange="" title="Shuffle all songs" data-v-27deb898="" data-v-cee28c08=""><i class="fa fa-random" data-v-cee28c08=""></i> All </button><!--v-if--><!--v-if--><!--v-if--><!--v-if--></span>
+      <div class="add-to" data-testid="add-to-menu" tabindex="0" data-v-0351ff38="" data-v-cee28c08="" style="display: none;">
+        <section class="existing-playlists" data-v-0351ff38="">
+          <p data-v-0351ff38="">Add 0 songs to</p>
+          <ul data-v-0351ff38="">
+            <li data-testid="queue" tabindex="0" data-v-0351ff38="">Queue</li>
+            <li class="favorites" data-testid="add-to-favorites" tabindex="0" data-v-0351ff38=""> Favorites </li>
+          </ul>
+        </section>
+        <section class="new-playlist" data-testid="new-playlist" data-v-0351ff38="">
+          <p data-v-0351ff38="">or create a new playlist</p>
+          <form class="form-save form-simple form-new-playlist" data-v-0351ff38=""><input data-testid="new-playlist-name" placeholder="Playlist name" required="" type="text" data-v-0351ff38=""><button type="submit" title="Save" data-v-27deb898="" data-v-0351ff38="">⏎</button></form>
+        </section>
+      </div>
+    </div>
+  </header><br data-testid="song-list">
+</section>
+`;