fix(test): broken tests after skeleton addition

resources/assets/js/components/layout/app-footer/__snapshots__/FooterExtraControls.spec.ts.snap

@@ -3,9 +3,7 @@
 exports[`renders 1`] = `
 <div class="other-controls" data-testid="other-controls" data-v-add48cbe="">
   <div class="wrapper" data-v-add48cbe="">
-    <!--v-if--><button data-testid="toggle-visualizer-btn" title="Click for a marvelous visualizer!" type="button" data-v-add48cbe="">
-      <div class="bars" data-testid="soundbars" data-v-d983e410="" data-v-add48cbe=""><img alt="Sound bars" height="13" src="undefined/resources/assets/img/bars.gif" data-v-d983e410=""></div>
-    </button><button title="Like Fahrstuhl to Heaven by Led Zeppelin" class="text-secondary like" data-testid="like-btn" data-v-5d366bb1="" data-v-add48cbe=""><br data-testid="btn-like-unliked" icon="[object Object]" data-v-5d366bb1=""></button><button class="active control text-uppercase" data-testid="toggle-extra-panel-btn" title="View song information" type="button" data-v-add48cbe=""> Info </button><a class="queue control" href="#!/queue" data-v-add48cbe=""><br data-testid="icon" icon="[object Object]" data-v-add48cbe=""></a><br data-testid="RepeatModeSwitch" data-v-add48cbe=""><br data-testid="Volume" data-v-add48cbe="">
+    <!--v-if--><button class="control" data-testid="toggle-visualizer-btn" title="Show/hide the visualizer" type="button" data-v-add48cbe=""><br data-testid="icon" icon="[object Object]" data-v-add48cbe=""></button><button title="Like Fahrstuhl to Heaven by Led Zeppelin" class="text-secondary like" data-testid="like-btn" data-v-5d366bb1="" data-v-add48cbe=""><br data-testid="btn-like-unliked" icon="[object Object]" data-v-5d366bb1=""></button><button class="active control text-uppercase" data-testid="toggle-extra-panel-btn" title="View song information" type="button" data-v-add48cbe=""> Info </button><a class="queue control" href="#!/queue" data-v-add48cbe=""><br data-testid="icon" icon="[object Object]" data-v-add48cbe=""></a><br data-testid="RepeatModeSwitch" data-v-add48cbe=""><br data-testid="Volume" data-v-add48cbe="">
   </div>
 </div>
 `;

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

@@ -24,12 +24,14 @@ new class extends UnitTestCase {
       length: 1_603
     })
 
+    const resolveAlbumMock = this.mock(albumStore, 'resolve').mockResolvedValue(album)
+
     const songs = factory<Song[]>('song', 13)
     const fetchSongsMock = this.mock(songStore, 'fetchForAlbum').mockResolvedValue(songs)
 
     const rendered = this.render(AlbumScreen, {
       props: {
-        album
+        album: 42
       },
       global: {
         stubs: {
@@ -40,7 +42,12 @@ new class extends UnitTestCase {
       }
     })
 
-    await waitFor(() => expect(fetchSongsMock).toHaveBeenCalledWith(album))
+    await waitFor(() => {
+      expect(resolveAlbumMock).toHaveBeenCalledWith(album.id)
+      expect(fetchSongsMock).toHaveBeenCalledWith(album.id)
+    })
+
+    await this.tick(2)
 
     return rendered
   }
@@ -52,7 +59,7 @@ new class extends UnitTestCase {
     })
 
     it('shows and hides info', async () => {
-      const { getByTitle, getByTestId, queryByTestId } = await this.renderComponent()
+      const { getByTitle, getByTestId, queryByTestId, html } = await this.renderComponent()
       expect(queryByTestId('album-info')).toBeNull()
 
       await fireEvent.click(getByTitle('View album information'))

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

@@ -23,12 +23,14 @@ new class extends UnitTestCase {
       length: 40_603
     })
 
+    const resolveArtistMock = this.mock(artistStore, 'resolve').mockResolvedValue(artist)
+
     const songs = factory<Song[]>('song', 13)
     const fetchSongsMock = this.mock(songStore, 'fetchForArtist').mockResolvedValue(songs)
 
     const rendered = this.render(ArtistScreen, {
       props: {
-        artist
+        artist: 42
       },
       global: {
         stubs: {
@@ -39,7 +41,12 @@ new class extends UnitTestCase {
       }
     })
 
-    await waitFor(() => expect(fetchSongsMock).toHaveBeenCalledWith(artist))
+    await waitFor(() => {
+      expect(resolveArtistMock).toHaveBeenCalledWith(artist.id)
+      expect(fetchSongsMock).toHaveBeenCalledWith(artist.id)
+    })
+
+    await this.tick(2)
 
     return rendered
   }

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

@@ -2,15 +2,31 @@
 
 exports[`renders 1`] = `
 <section id="albumWrapper" data-v-748fe44c="">
-  <header class="screen-header collapsed" data-v-748fe44c="">
-    <div class="thumbnail-wrapper"><span class="cover" data-testid="album-artist-thumbnail" data-v-901ba52c="" data-v-748fe44c=""><a class="control control-play" href="" role="button" data-v-901ba52c=""><span class="hidden" data-v-901ba52c="">Play all songs in the album Led Zeppelin IV</span><span class="icon" data-v-901ba52c=""></span></a></span></div>
-    <div class="right">
+  <!--v-if-->
+  <header class="screen-header expanded" data-v-748fe44c="">
+    <aside class="thumbnail-wrapper"><span class="cover" data-testid="album-artist-thumbnail" data-v-901ba52c="" data-v-748fe44c=""><a class="control control-play" href="" role="button" data-v-901ba52c=""><span class="hidden" data-v-901ba52c="">Play all songs in the album Led Zeppelin IV</span><span class="icon" data-v-901ba52c=""></span></a></span></aside>
+    <main>
       <div class="heading-wrapper">
         <h1 class="name">Led Zeppelin IV
           <!--v-if-->
         </h1><span class="meta text-secondary"><a href="#!/artist/123" class="artist" data-v-748fe44c="">Led Zeppelin</a><span data-v-748fe44c="">10 songs</span><span data-v-748fe44c="">26:43</span><a class="info" href="" title="View album information" data-v-748fe44c="">Info</a><a class="download" href="" role="button" title="Download all songs in album" data-v-748fe44c=""> Download All </a></span>
       </div>
-    </div>
+      <div class="song-list-controls" data-testid="song-list-controls" data-v-cee28c08="" data-v-748fe44c=""><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=""><br data-testid="icon" icon="[object Object]" data-v-cee28c08=""> 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>
+    </main>
   </header><br data-testid="song-list" data-v-748fe44c="">
   <!--v-if-->
 </section>

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

@@ -127,3 +127,35 @@ exports[`renders 4`] = `
   </header><br data-testid="song-list">
 </section>
 `;
+
+exports[`renders 5`] = `
+<section id="songsWrapper">
+  <header class="screen-header expanded">
+    <aside class="thumbnail-wrapper">
+      <div class="thumbnail-stack single" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-v-2978c570=""><span data-testid="thumbnail" data-v-2978c570=""></span></div>
+    </aside>
+    <main>
+      <div class="heading-wrapper">
+        <h1 class="name"> 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=""><br data-testid="icon" icon="[object Object]" data-v-cee28c08=""> 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>
+    </main>
+  </header><br data-testid="song-list">
+</section>
+`;

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

@@ -2,15 +2,31 @@
 
 exports[`renders 1`] = `
 <section id="artistWrapper" data-v-dceda15c="">
-  <header class="screen-header collapsed" data-v-dceda15c="">
-    <div class="thumbnail-wrapper"><span class="cover" data-testid="album-artist-thumbnail" data-v-901ba52c="" data-v-dceda15c=""><a class="control control-play" href="" role="button" data-v-901ba52c=""><span class="hidden" data-v-901ba52c="">Play all songs by Led Zeppelin</span><span class="icon" data-v-901ba52c=""></span></a></span></div>
-    <div class="right">
+  <!--v-if-->
+  <header class="screen-header expanded" data-v-dceda15c="">
+    <aside class="thumbnail-wrapper"><span class="cover" data-testid="album-artist-thumbnail" data-v-901ba52c="" data-v-dceda15c=""><a class="control control-play" href="" role="button" data-v-901ba52c=""><span class="hidden" data-v-901ba52c="">Play all songs by Led Zeppelin</span><span class="icon" data-v-901ba52c=""></span></a></span></aside>
+    <main>
       <div class="heading-wrapper">
         <h1 class="name">Led Zeppelin
           <!--v-if-->
         </h1><span class="meta text-secondary"><span data-v-dceda15c="">12 albums</span><span data-v-dceda15c="">53 songs</span><span data-v-dceda15c="">11:16:43</span><a class="info" href="" title="View artist information" data-v-dceda15c="">Info</a><a class="download" href="" role="button" title="Download all songs by this artist" data-v-dceda15c=""> Download All </a></span>
       </div>
-    </div>
+      <div class="song-list-controls" data-testid="song-list-controls" data-v-cee28c08="" data-v-dceda15c=""><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=""><br data-testid="icon" icon="[object Object]" data-v-cee28c08=""> 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>
+    </main>
   </header><br data-testid="song-list" data-v-dceda15c="">
   <!--v-if-->
 </section>

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

@@ -3,12 +3,12 @@
 exports[`renders 1`] = `
 <section id="settingsWrapper">
   <header class="screen-header expanded">
-    <div class="thumbnail-wrapper"></div>
-    <div class="right">
+    <aside class="thumbnail-wrapper"></aside>
+    <main>
       <div class="heading-wrapper">
         <h1 class="name">Settings</h1><span class="meta text-secondary"></span>
       </div>
-    </div>
+    </main>
   </header>
   <form class="main-scroll-wrap">
     <div class="form-row"><label for="inputSettingsPath">Media Path</label>

resources/assets/js/components/screens/home/MostPlayedAlbums.vue

@@ -24,7 +24,7 @@ import { overviewStore } from '@/stores'
 import AlbumCard from '@/components/album/AlbumCard.vue'
 import AlbumCardSkeleton from '@/components/ui/skeletons/ArtistAlbumCardSkeleton.vue'
 
-const props = withDefaults(defineProps<{ loading: boolean }>(), { loading: false })
+const props = withDefaults(defineProps<{ loading?: boolean }>(), { loading: false })
 const { loading } = toRefs(props)
 
 const albums = toRef(overviewStore.state, 'mostPlayedAlbums')

resources/assets/js/components/screens/home/MostPlayedArtists.vue

@@ -24,7 +24,7 @@ import { overviewStore } from '@/stores'
 import ArtistCard from '@/components/artist/ArtistCard.vue'
 import ArtistCardSkeleton from '@/components/ui/skeletons/ArtistAlbumCardSkeleton.vue'
 
-const props = withDefaults(defineProps<{ loading: boolean }>(), { loading: false })
+const props = withDefaults(defineProps<{ loading?: boolean }>(), { loading: false })
 const { loading } = toRefs(props)
 
 const artists = toRef(overviewStore.state, 'mostPlayedArtists')

resources/assets/js/components/screens/home/MostPlayedSongs.vue

@@ -23,7 +23,7 @@ import { overviewStore } from '@/stores'
 import SongCard from '@/components/song/SongCard.vue'
 import SongCardSkeleton from '@/components/ui/skeletons/SongCardSkeleton.vue'
 
-const props = withDefaults(defineProps<{ loading: boolean }>(), { loading: false })
+const props = withDefaults(defineProps<{ loading?: boolean }>(), { loading: false })
 const { loading } = toRefs(props)
 
 const songs = toRef(overviewStore.state, 'mostPlayedSongs')

resources/assets/js/components/screens/home/RecentlyAddedAlbums.vue

@@ -24,7 +24,7 @@ import { overviewStore } from '@/stores'
 import AlbumCard from '@/components/album/AlbumCard.vue'
 import AlbumCardSkeleton from '@/components/ui/skeletons/ArtistAlbumCardSkeleton.vue'
 
-const props = withDefaults(defineProps<{ loading: boolean }>(), { loading: false })
+const props = withDefaults(defineProps<{ loading?: boolean }>(), { loading: false })
 const { loading } = toRefs(props)
 
 const albums = toRef(overviewStore.state, 'recentlyAddedAlbums')

resources/assets/js/components/screens/home/RecentlyAddedSongs.vue

@@ -23,7 +23,7 @@ import { overviewStore } from '@/stores'
 import SongCard from '@/components/song/SongCard.vue'
 import SongCardSkeleton from '@/components/ui/skeletons/SongCardSkeleton.vue'
 
-const props = withDefaults(defineProps<{ loading: boolean }>(), { loading: false })
+const props = withDefaults(defineProps<{ loading?: boolean }>(), { loading: false })
 const { loading } = toRefs(props)
 
 const songs = toRef(overviewStore.state, 'recentlyAddedSongs')

resources/assets/js/components/screens/home/RecentlyPlayedSongs.vue

@@ -39,7 +39,7 @@ import Btn from '@/components/ui/Btn.vue'
 import SongCard from '@/components/song/SongCard.vue'
 import SongCardSkeleton from '@/components/ui/skeletons/SongCardSkeleton.vue'
 
-const props = withDefaults(defineProps<{ loading: boolean }>(), { loading: false })
+const props = withDefaults(defineProps<{ loading?: boolean }>(), { loading: false })
 const { loading } = toRefs(props)
 
 const songs = toRef(recentlyPlayedStore.excerptState, 'songs')

resources/assets/js/components/ui/__snapshots__/BtnCloseModal.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<button data-testid="close-modal-btn" type="button" data-v-8e854c66=""><br data-testid="icon" icon="[object Object]" data-v-8e854c66=""></button>`;
+exports[`renders 1`] = `<button data-testid="close-modal-btn" title="Dismiss" type="button" data-v-8e854c66=""><br data-testid="icon" icon="[object Object]" data-v-8e854c66=""></button>`;

resources/assets/js/components/ui/__snapshots__/Overlay.spec.ts.snap

@@ -26,8 +26,7 @@ exports[`renders info type 1`] = `
 
 exports[`renders loading type 1`] = `
 <div id="overlay" class="loading overlay" data-testid="overlay">
-  <div class="display">
-    <div class="bars" data-testid="soundbars" data-v-d983e410=""><img alt="Sound bars" height="13" src="undefined/resources/assets/img/bars.gif" data-v-d983e410=""></div>
+  <div class="display"><i data-v-4fa15baa=""><span data-v-4fa15baa=""></span><span data-v-4fa15baa=""></span><span data-v-4fa15baa=""></span></i>
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->

resources/assets/js/components/ui/__snapshots__/ScreenHeader.spec.ts.snap

@@ -2,12 +2,12 @@
 
 exports[`renders 1`] = `
 <header class="screen-header expanded">
-  <div class="thumbnail-wrapper"><img src="https://placekitten.com/200/300"></div>
-  <div class="right">
+  <aside class="thumbnail-wrapper"><img src="https://placekitten.com/200/300"></aside>
+  <main>
     <div class="heading-wrapper">
       <h1 class="name">This Header</h1><span class="meta text-secondary"><p>Some meta</p></span>
     </div>
     <nav>Some controls</nav>
-  </div>
+  </main>
 </header>
 `;