Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-28 06:50:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(test): MainContent tests

Browse source
This commit is contained in:
Phan An 2022-07-10 16:33:33 +02:00
parent e6b2d98290
commit 3b0d5217d8
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
2 changed files with 11 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
resources/assets/js/components/layout/main-wrapper/MainContent.spec.ts
View file

@ -1,3 +1,4 @@
import { waitFor } from '@testing-library/vue'
import { expect, it } from 'vitest' import { expect, it } from 'vitest'
import factory from '@/__tests__/factory' import factory from '@/__tests__/factory'
import { eventBus } from '@/utils' import { eventBus } from '@/utils'
@ -5,12 +6,11 @@ import { albumStore, preferenceStore } from '@/stores'
import UnitTestCase from '@/__tests__/UnitTestCase' import UnitTestCase from '@/__tests__/UnitTestCase'
import MainContent from '@/components/layout/main-wrapper/MainContent.vue' import MainContent from '@/components/layout/main-wrapper/MainContent.vue'
import AlbumArtOverlay from '@/components/ui/AlbumArtOverlay.vue' import AlbumArtOverlay from '@/components/ui/AlbumArtOverlay.vue'
import Visualizer from '@/components/ui/Visualizer.vue'
new class extends UnitTestCase { new class extends UnitTestCase {
protected test () { protected test () {
it('has a translucent overlay per album', async () => { it('has a translucent overlay per album', async () => {
this.mock(albumStore, 'fetchThumbnail', 'https://foo/bar.jpg') this.mock(albumStore, 'fetchThumbnail').mockResolvedValue('https://foo/bar.jpg')
const { getByTestId } = this.render(MainContent, { const { getByTestId } = this.render(MainContent, {
global: { global: {
@ -21,9 +21,8 @@ new class extends UnitTestCase {
}) })
eventBus.emit('SONG_STARTED', factory<Song>('song')) eventBus.emit('SONG_STARTED', factory<Song>('song'))
await this.tick(2) // re-render and fetch album thumbnail
getByTestId('album-art-overlay') await waitFor(() => getByTestId('album-art-overlay'))
}) })
it('does not have a translucent over if configured not so', async () => { it('does not have a translucent over if configured not so', async () => {
@ -38,27 +37,24 @@ new class extends UnitTestCase {
}) })
eventBus.emit('SONG_STARTED', factory<Song>('song')) eventBus.emit('SONG_STARTED', factory<Song>('song'))
await this.tick(2) // re-render and fetch album thumbnail
expect(await queryByTestId('album-art-overlay')).toBeNull() await waitFor(() => expect(queryByTestId('album-art-overlay')).toBeNull())
}) })
it('toggles visualizer', async () => { it('toggles visualizer', async () => {
const { getByTestId, queryByTestId } = this.render(MainContent, { const { getByTestId, queryByTestId } = this.render(MainContent, {
global: { global: {
stubs: { stubs: {
Visualizer Visualizer: this.stub('visualizer')
} }
} }
}) })
eventBus.emit('TOGGLE_VISUALIZER') eventBus.emit('TOGGLE_VISUALIZER')
await this.tick() await waitFor(() => getByTestId('visualizer'))
getByTestId('visualizer')
eventBus.emit('TOGGLE_VISUALIZER') eventBus.emit('TOGGLE_VISUALIZER')
await this.tick() await waitFor(() => expect(queryByTestId('visualizer')).toBeNull())
expect(await queryByTestId('visualizer')).toBeNull()
}) })
} }
} }

7
resources/assets/js/components/layout/main-wrapper/MainContent.vue
View file

@ -34,6 +34,7 @@ import { defineAsyncComponent, ref, toRef } from 'vue'
import { eventBus } from '@/utils' import { eventBus } from '@/utils'
import { preferenceStore } from '@/stores' import { preferenceStore } from '@/stores'
import { useThirdPartyServices } from '@/composables' import { useThirdPartyServices } from '@/composables'
import HomeScreen from '@/components/screens/HomeScreen.vue' import HomeScreen from '@/components/screens/HomeScreen.vue'
import QueueScreen from '@/components/screens/QueueScreen.vue' import QueueScreen from '@/components/screens/QueueScreen.vue'
import AlbumListScreen from '@/components/screens/AlbumListScreen.vue' import AlbumListScreen from '@/components/screens/AlbumListScreen.vue'
@ -41,8 +42,10 @@ import ArtistListScreen from '@/components/screens/ArtistListScreen.vue'
import AllSongsScreen from '@/components/screens/AllSongsScreen.vue' import AllSongsScreen from '@/components/screens/AllSongsScreen.vue'
import PlaylistScreen from '@/components/screens/PlaylistScreen.vue' import PlaylistScreen from '@/components/screens/PlaylistScreen.vue'
import FavoritesScreen from '@/components/screens/FavoritesScreen.vue' import FavoritesScreen from '@/components/screens/FavoritesScreen.vue'
import RecentlyPlayedScreen from '@/components/screens/RecentlyPlayedScreen.vue'
import UploadScreen from '@/components/screens/UploadScreen.vue'
import SearchExcerptsScreen from '@/components/screens/search/SearchExcerptsScreen.vue'
const RecentlyPlayedScreen = defineAsyncComponent(() => import('@/components/screens/RecentlyPlayedScreen.vue'))
const UserListScreen = defineAsyncComponent(() => import('@/components/screens/UserListScreen.vue')) const UserListScreen = defineAsyncComponent(() => import('@/components/screens/UserListScreen.vue'))
const AlbumArtOverlay = defineAsyncComponent(() => import('@/components/ui/AlbumArtOverlay.vue')) const AlbumArtOverlay = defineAsyncComponent(() => import('@/components/ui/AlbumArtOverlay.vue'))
const AlbumScreen = defineAsyncComponent(() => import('@/components/screens/AlbumScreen.vue')) const AlbumScreen = defineAsyncComponent(() => import('@/components/screens/AlbumScreen.vue'))
@ -50,8 +53,6 @@ const ArtistScreen = defineAsyncComponent(() => import('@/components/screens/Art
const SettingsScreen = defineAsyncComponent(() => import('@/components/screens/SettingsScreen.vue')) const SettingsScreen = defineAsyncComponent(() => import('@/components/screens/SettingsScreen.vue'))
const ProfileScreen = defineAsyncComponent(() => import('@/components/screens/ProfileScreen.vue')) const ProfileScreen = defineAsyncComponent(() => import('@/components/screens/ProfileScreen.vue'))
const YoutubeScreen = defineAsyncComponent(() => import('@/components/screens/YouTubeScreen.vue')) const YoutubeScreen = defineAsyncComponent(() => import('@/components/screens/YouTubeScreen.vue'))
const UploadScreen = defineAsyncComponent(() => import('@/components/screens/UploadScreen.vue'))
const SearchExcerptsScreen = defineAsyncComponent(() => import('@/components/screens/search/SearchExcerptsScreen.vue'))
const SearchSongResultsScreen = defineAsyncComponent(() => import('@/components/screens/search/SearchSongResultsScreen.vue')) const SearchSongResultsScreen = defineAsyncComponent(() => import('@/components/screens/search/SearchSongResultsScreen.vue'))
const Visualizer = defineAsyncComponent(() => import('@/components/ui/Visualizer.vue')) const Visualizer = defineAsyncComponent(() => import('@/components/ui/Visualizer.vue'))