feat(test): add home component tests

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

@@ -14,7 +14,7 @@
       </div>
 
       <MostPlayedArtists/>
-      <MostPlayedAlbum/>
+      <MostPlayedAlbums/>
 
       <ToTopButton/>
     </div>
@@ -34,7 +34,7 @@ import RecentlyPlayedSongs from '@/components/screens/home/RecentlyPlayedSongs.v
 import RecentlyAddedAlbums from '@/components/screens/home/RecentlyAddedAlbums.vue'
 import RecentlyAddedSongs from '@/components/screens/home/RecentlyAddedSongs.vue'
 import MostPlayedArtists from '@/components/screens/home/MostPlayedArtists.vue'
-import MostPlayedAlbum from '@/components/screens/home/MostPlayedAlbum.vue'
+import MostPlayedAlbums from '@/components/screens/home/MostPlayedAlbums.vue'
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 
 const { ToTopButton, scrolling } = useInfiniteScroll(() => noop())

resources/assets/js/components/screens/home/MostPlayedAlbums.spec.ts

@@ -0,0 +1,14 @@
+import { expect, it } from 'vitest'
+import { overviewStore } from '@/stores'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import MostPlayedAlbums from './MostPlayedAlbums.vue'
+
+new class extends UnitTestCase {
+  protected test () {
+    it('displays the albums', () => {
+      overviewStore.state.mostPlayedAlbums = factory<Album[]>('album', 6)
+      expect(this.render(MostPlayedAlbums).getAllByTestId('album-card')).toHaveLength(6)
+    })
+  }
+}

resources/assets/js/components/screens/home/MostPlayedArtists.spec.ts

@@ -0,0 +1,14 @@
+import { expect, it } from 'vitest'
+import { overviewStore } from '@/stores'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import MostPlayedArtists from './MostPlayedArtists.vue'
+
+new class extends UnitTestCase {
+  protected test () {
+    it('displays the artists', () => {
+      overviewStore.state.mostPlayedArtists = factory<Artist[]>('artist', 6)
+      expect(this.render(MostPlayedArtists).getAllByTestId('artist-card')).toHaveLength(6)
+    })
+  }
+}

resources/assets/js/components/screens/home/MostPlayedSongs.spec.ts

@@ -0,0 +1,14 @@
+import { expect, it } from 'vitest'
+import { overviewStore } from '@/stores'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import MostPlayedSongs from './MostPlayedSongs.vue'
+
+new class extends UnitTestCase {
+  protected test () {
+    it('displays the songs', () => {
+      overviewStore.state.mostPlayedSongs = factory<Song[]>('song', 6)
+      expect(this.render(MostPlayedSongs).getAllByTestId('song-card')).toHaveLength(6)
+    })
+  }
+}

resources/assets/js/components/screens/home/RecentlyAddedAlbums.spec.ts

@@ -0,0 +1,14 @@
+import { expect, it } from 'vitest'
+import { overviewStore } from '@/stores'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import RecentlyAddedAlbums from './RecentlyAddedAlbums.vue'
+
+new class extends UnitTestCase {
+  protected test () {
+    it('displays the albums', () => {
+      overviewStore.state.recentlyAddedAlbums = factory<Album[]>('album', 6)
+      expect(this.render(RecentlyAddedAlbums).getAllByTestId('album-card')).toHaveLength(6)
+    })
+  }
+}

resources/assets/js/components/screens/home/RecentlyAddedSongs.spec.ts

@@ -0,0 +1,14 @@
+import { expect, it } from 'vitest'
+import { overviewStore } from '@/stores'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import RecentlyAddedSongs from './RecentlyAddedSongs.vue'
+
+new class extends UnitTestCase {
+  protected test () {
+    it('displays the songs', () => {
+      overviewStore.state.recentlyAddedSongs = factory<Song[]>('song', 6)
+      expect(this.render(RecentlyAddedSongs).getAllByTestId('song-card')).toHaveLength(6)
+    })
+  }
+}

resources/assets/js/components/screens/home/RecentlyPlayedSongs.spec.ts

@@ -0,0 +1,25 @@
+import { expect, it } from 'vitest'
+import { recentlyPlayedStore } from '@/stores'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import RecentlyPlayedSongs from './RecentlyPlayedSongs.vue'
+import { fireEvent } from '@testing-library/vue'
+import router from '@/router'
+
+new class extends UnitTestCase {
+  protected test () {
+    it('displays the songs', () => {
+      recentlyPlayedStore.excerptState.songs = factory<Song[]>('song', 6)
+      expect(this.render(RecentlyPlayedSongs).getAllByTestId('song-card')).toHaveLength(6)
+    })
+
+    it('goes to dedicated screen', async () => {
+      const mock = this.mock(router, 'go')
+      const { getByTestId } = this.render(RecentlyPlayedSongs)
+
+      await fireEvent.click(getByTestId('home-view-all-recently-played-btn'))
+
+      expect(mock).toHaveBeenCalledWith('recently-played')
+    })
+  }
+}