feat(test): add RecentlyPlayed tests

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

@@ -27,7 +27,7 @@ new class extends UnitTestCase {
       },
       global: {
         stubs: {
-          'TrackList': this.stub()
+          TrackList: this.stub()
         }
       }
     })

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

@@ -1,12 +1,12 @@
 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'
+import AllSongsScreen from './AllSongsScreen.vue'
 
 new class extends UnitTestCase {
   private async renderComponent () {

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

@@ -2,9 +2,9 @@ import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import { artistStore, preferenceStore } from '@/stores'
-import ArtistListScreen from './ArtistListScreen.vue'
 import { eventBus } from '@/utils'
 import { fireEvent, waitFor } from '@testing-library/vue'
+import ArtistListScreen from './ArtistListScreen.vue'
 
 new class extends UnitTestCase {
   protected beforeEach () {

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

@@ -2,9 +2,9 @@ import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import { commonStore, queueStore } from '@/stores'
-import QueueScreen from './QueueScreen.vue'
 import { fireEvent, waitFor } from '@testing-library/vue'
 import { playbackService } from '@/services'
+import QueueScreen from './QueueScreen.vue'
 
 new class extends UnitTestCase {
   private renderComponent (songs: Song[]) {

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

@@ -0,0 +1,44 @@
+import { expect, it } from 'vitest'
+import factory from '@/__tests__/factory'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import { recentlyPlayedStore } from '@/stores'
+import { eventBus } from '@/utils'
+import { waitFor } from '@testing-library/vue'
+import RecentlyPlayedScreen from './RecentlyPlayedScreen.vue'
+
+new class extends UnitTestCase {
+  private async renderComponent (songs: Song[]) {
+    recentlyPlayedStore.state.songs = songs
+    const fetchMock = this.mock(recentlyPlayedStore, 'fetch')
+
+    const rendered = this.render(RecentlyPlayedScreen, {
+      global: {
+        stubs: {
+          SongList: this.stub('song-list')
+        }
+      }
+    })
+
+    eventBus.emit('LOAD_MAIN_CONTENT', 'RecentlyPlayed')
+
+    await waitFor(() => expect(fetchMock).toHaveBeenCalled())
+
+    return rendered
+  }
+
+  protected test () {
+    it('displays the songs', async () => {
+      const { queryByTestId } = await this.renderComponent(factory<Song[]>('song', 3))
+
+      expect(queryByTestId('song-list')).toBeTruthy()
+      expect(queryByTestId('screen-empty-state')).toBeNull()
+    })
+
+    it('displays the empty state', async () => {
+      const { queryByTestId } = await this.renderComponent([])
+
+      expect(queryByTestId('song-list')).toBeNull()
+      expect(queryByTestId('screen-empty-state')).toBeTruthy()
+    })
+  }
+}

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

@@ -65,11 +65,3 @@ eventBus.on({
   }
 })
 </script>
-
-<style lang="scss">
-#recentlyPlayedWrapper {
-  .none {
-    padding: 16px 24px;
-  }
-}
-</style>