feat(test): add FavoritesScreen tests

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

@@ -0,0 +1,39 @@
+import { waitFor } from '@testing-library/vue'
+import { expect, it } from 'vitest'
+import factory from '@/__tests__/factory'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import { favoriteStore } from '@/stores'
+import FavoritesScreen from './FavoritesScreen.vue'
+import { eventBus } from '@/utils'
+
+new class extends UnitTestCase {
+  private async renderComponent () {
+    const fetchMock = this.mock(favoriteStore, 'fetch')
+    const rendered = this.render(FavoritesScreen)
+
+    eventBus.emit('LOAD_MAIN_CONTENT', 'Favorites')
+    await waitFor(() => expect(fetchMock).toHaveBeenCalled())
+
+    return rendered
+  }
+
+  protected test () {
+    it('renders a list of favorites', async () => {
+      favoriteStore.state.songs = factory<Song[]>('song', 13)
+      const { queryByTestId } = await this.renderComponent()
+
+      await waitFor(() => {
+        expect(queryByTestId('screen-empty-state')).toBeNull()
+        expect(queryByTestId('song-list')).not.toBeNull()
+      })
+    })
+
+    it('shows empty state', async () => {
+      favoriteStore.state.songs = []
+      const { queryByTestId } = await this.renderComponent()
+
+      expect(queryByTestId('screen-empty-state')).not.toBeNull()
+      expect(queryByTestId('song-list')).toBeNull()
+    })
+  }
+}

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

@@ -30,14 +30,14 @@
     </ScreenHeader>
 
     <SongList
-      v-show="songs.length"
+      v-if="songs.length"
       ref="songList"
       @press:delete="removeSelected"
       @press:enter="onPressEnter"
       @sort="sort"
     />
 
-    <ScreenEmptyState v-show="!songs.length">
+    <ScreenEmptyState v-else>
       <template v-slot:icon>
         <i class="fa fa-frown-o"></i>
       </template>