koel/resources/assets/js/components/layout/main-wrapper/ExtraPanel.spec.ts

61 lines
1.7 KiB
TypeScript

import { beforeEach, expect, it } from 'vitest'
import { cleanup, fireEvent } from '@testing-library/vue'
import { mockHelper, render, stub } from '@/__tests__/__helpers__'
import factory from '@/__tests__/factory'
import { commonStore } from '@/stores'
import { songInfoService } from '@/services'
import { eventBus } from '@/utils'
import ExtraPanel from './ExtraPanel.vue'
const renderComponent = () => {
return render(ExtraPanel, {
props: {
song: factory<Song>('song')
},
global: {
stubs: {
LyricsPane: stub(),
AlbumInfo: stub(),
ArtistInfo: stub(),
YouTubeVideoList: stub()
}
}
})
}
beforeEach(() => {
cleanup()
mockHelper.restoreAllMocks()
})
it('has a YouTube tab if using YouTube ', () => {
commonStore.state.useYouTube = true
const { getByTestId } = renderComponent()
getByTestId('extra-tab-youtube')
})
it('does not have a YouTube tab if not using YouTube', async () => {
commonStore.state.useYouTube = false
const { queryByTestId } = renderComponent()
expect(await queryByTestId('extra-tab-youtube')).toBeNull()
})
it.each([['extra-tab-lyrics'], ['extra-tab-album'], ['extra-tab-artist']])('switches to "%s" tab', async (testId) => {
const { getByTestId, container } = renderComponent()
await fireEvent.click(getByTestId(testId))
expect(container.querySelector('[aria-selected=true]')).toBe(getByTestId(testId))
})
it('fetches song info when a new song is played', () => {
renderComponent()
const song = factory<Song>('song')
const mock = mockHelper.mock(songInfoService, 'fetch', song)
eventBus.emit('SONG_STARTED', song)
expect(mock).toHaveBeenCalledWith(song)
})