mirror of
https://github.com/koel/koel
synced 2024-09-20 14:21:55 +00:00
fix(test): fix YouTubeVideoList tests
This commit is contained in:
Phan An
parent
956964aa28
commit
d15d5570dc
4 changed files with 45 additions and 39 deletions
|
|
@ -1,50 +1,48 @@
|
|||
import { expect, it } from 'vitest'
|
||||
import factory from '@/__tests__/factory'
|
||||
import UnitTestCase from '@/__tests__/UnitTestCase'
|
||||
import YouTubeVideoList from './YouTubeVideoList.vue'
|
||||
import { youTubeService } from '@/services'
|
||||
import { fireEvent, waitFor } from '@testing-library/vue'
|
||||
import Btn from '@/components/ui/Btn.vue'
|
||||
import YouTubeVideo from '@/components/ui/YouTubeVideoItem.vue'
|
||||
import { youTubeService } from '@/services'
|
||||
import { fireEvent } from '@testing-library/vue'
|
||||
|
||||
let song: Song
|
||||
import YouTubeVideoList from './YouTubeVideoList.vue'
|
||||
|
||||
new class extends UnitTestCase {
|
||||
private renderComponent () {
|
||||
song = factory<Song>('song')
|
||||
|
||||
return this.render(YouTubeVideoList, {
|
||||
props: {
|
||||
song
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
Btn,
|
||||
YouTubeVideo
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
protected test () {
|
||||
it('displays a list of videos', () => {
|
||||
expect(this.renderComponent().getAllByTestId('youtube-search-result').length).toBe(5)
|
||||
})
|
||||
it('functions', async () => {
|
||||
const song = factory<Song>('song')
|
||||
|
||||
it('loads more videos', async () => {
|
||||
const mock = this.mock(youTubeService, 'searchVideosBySong').mockResolvedValue({
|
||||
nextPageToken: 'b4r',
|
||||
items: factory<YouTubeVideo>('video', 5)
|
||||
const searchMock = this.mock(youTubeService, 'searchVideosBySong').mockResolvedValueOnce({
|
||||
nextPageToken: 'foo',
|
||||
items: factory<YouTubeVideo[]>('video', 5)
|
||||
}).mockResolvedValueOnce({
|
||||
nextPageToken: 'bar',
|
||||
items: factory<YouTubeVideo[]>('video', 3)
|
||||
})
|
||||
|
||||
const { getAllByTestId, getByTestId } = this.renderComponent()
|
||||
const { getAllByTestId, getByRole } = this.render(YouTubeVideoList, {
|
||||
props: {
|
||||
song
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
Btn,
|
||||
YouTubeVideo
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await fireEvent.click(getByTestId('youtube-search-more-btn'))
|
||||
await waitFor(() => {
|
||||
expect(searchMock).toHaveBeenNthCalledWith(1, song, '')
|
||||
expect(getAllByTestId('youtube-video')).toHaveLength(5)
|
||||
})
|
||||
|
||||
expect(mock).toHaveBeenCalledWith(song, 'f00')
|
||||
await fireEvent.click(getByRole('button', { name: 'Load More' }))
|
||||
|
||||
await this.tick()
|
||||
expect(getAllByTestId('youtube-search-result').length).toBe(10)
|
||||
await waitFor(() => {
|
||||
expect(searchMock).toHaveBeenNthCalledWith(2, song, 'foo')
|
||||
expect(getAllByTestId('youtube-video')).toHaveLength(8)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@
|
|||
<div class="youtube-extra-wrapper">
|
||||
<template v-if="videos.length">
|
||||
<ul>
|
||||
<li v-for="video in videos" :key="video.id.videoId">
|
||||
<li v-for="video in videos" :key="video.id.videoId" data-testid="youtube-video">
|
||||
<YouTubeVideo :video="video"/>
|
||||
</li>
|
||||
</ul>
|
||||
<Btn v-if="!loading" class="more" data-testid="youtube-search-more-btn" @click.prevent="loadMore">Load More</Btn>
|
||||
<Btn v-if="!loading" class="more" @click.prevent="loadMore">Load More</Btn>
|
||||
</template>
|
||||
|
||||
<p class="nope" v-show="loading">Loading…</p>
|
||||
<p class="nope" v-if="loading">Loading…</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
// Vitest Snapshot v1
|
||||
|
||||
exports[`renders list mode 1`] = `<span class="view-modes" data-v-0c4113b0=""><label class="thumbnails" data-testid="view-mode-thumbnail" title="View as thumbnails" data-v-0c4113b0=""><input class="hidden" name="view-mode" type="radio" value="thumbnails" data-v-0c4113b0=""><i class="fa fa-th-large" data-v-0c4113b0=""></i><span class="hidden" data-v-0c4113b0="">View as thumbnails</span></label><label class="active list" data-testid="view-mode-list" title="View as list" data-v-0c4113b0=""><input class="hidden" name="view-mode" type="radio" value="list" data-v-0c4113b0=""><i class="fa fa-list" data-v-0c4113b0=""></i><span class="hidden" data-v-0c4113b0="">View as list</span></label></span>`;
|
||||
exports[`renders list mode 1`] = `
|
||||
<span class="view-modes" data-v-0c4113b0=""><label class="thumbnails" data-testid="view-mode-thumbnail" title="View as thumbnails" data-v-0c4113b0=""><input class="hidden" name="view-mode" type="radio" value="thumbnails" data-v-0c4113b0=""><svg class="svg-inline--fa fa-microsoft" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="microsoft" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-v-0c4113b0=""><path class="" fill="currentColor" d="M0 32h214.6v214.6H0V32zm233.4 0H448v214.6H233.4V32zM0 265.4h214.6V480H0V265.4zm233.4 0H448V480H233.4V265.4z"></path></svg><span class="hidden" data-v-0c4113b0="">View as thumbnails</span></label><label class="active list" data-testid="view-mode-list" title="View as list" data-v-0c4113b0=""><input class="hidden" name="view-mode" type="radio" value="list" data-v-0c4113b0=""><svg class="svg-inline--fa fa-list" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="list" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-v-0c4113b0="">
|
||||
<path class="" fill="currentColor" d="M88 48C101.3 48 112 58.75 112 72V120C112 133.3 101.3 144 88 144H40C26.75 144 16 133.3 16 120V72C16 58.75 26.75 48 40 48H88zM480 64C497.7 64 512 78.33 512 96C512 113.7 497.7 128 480 128H192C174.3 128 160 113.7 160 96C160 78.33 174.3 64 192 64H480zM480 224C497.7 224 512 238.3 512 256C512 273.7 497.7 288 480 288H192C174.3 288 160 273.7 160 256C160 238.3 174.3 224 192 224H480zM480 384C497.7 384 512 398.3 512 416C512 433.7 497.7 448 480 448H192C174.3 448 160 433.7 160 416C160 398.3 174.3 384 192 384H480zM16 232C16 218.7 26.75 208 40 208H88C101.3 208 112 218.7 112 232V280C112 293.3 101.3 304 88 304H40C26.75 304 16 293.3 16 280V232zM88 368C101.3 368 112 378.7 112 392V440C112 453.3 101.3 464 88 464H40C26.75 464 16 453.3 16 440V392C16 378.7 26.75 368 40 368H88z"></path>
|
||||
</svg><span class="hidden" data-v-0c4113b0="">View as list</span></label></span>
|
||||
`;
|
||||
|
||||
exports[`renders thumbnails mode 1`] = `<span class="view-modes" data-v-0c4113b0=""><label class="active thumbnails" data-testid="view-mode-thumbnail" title="View as thumbnails" data-v-0c4113b0=""><input class="hidden" name="view-mode" type="radio" value="thumbnails" data-v-0c4113b0=""><i class="fa fa-th-large" data-v-0c4113b0=""></i><span class="hidden" data-v-0c4113b0="">View as thumbnails</span></label><label class="list" data-testid="view-mode-list" title="View as list" data-v-0c4113b0=""><input class="hidden" name="view-mode" type="radio" value="list" data-v-0c4113b0=""><i class="fa fa-list" data-v-0c4113b0=""></i><span class="hidden" data-v-0c4113b0="">View as list</span></label></span>`;
|
||||
exports[`renders thumbnails mode 1`] = `
|
||||
<span class="view-modes" data-v-0c4113b0=""><label class="active thumbnails" data-testid="view-mode-thumbnail" title="View as thumbnails" data-v-0c4113b0=""><input class="hidden" name="view-mode" type="radio" value="thumbnails" data-v-0c4113b0=""><svg class="svg-inline--fa fa-microsoft" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="microsoft" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-v-0c4113b0=""><path class="" fill="currentColor" d="M0 32h214.6v214.6H0V32zm233.4 0H448v214.6H233.4V32zM0 265.4h214.6V480H0V265.4zm233.4 0H448V480H233.4V265.4z"></path></svg><span class="hidden" data-v-0c4113b0="">View as thumbnails</span></label><label class="list" data-testid="view-mode-list" title="View as list" data-v-0c4113b0=""><input class="hidden" name="view-mode" type="radio" value="list" data-v-0c4113b0=""><svg class="svg-inline--fa fa-list" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="list" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-v-0c4113b0="">
|
||||
<path class="" fill="currentColor" d="M88 48C101.3 48 112 58.75 112 72V120C112 133.3 101.3 144 88 144H40C26.75 144 16 133.3 16 120V72C16 58.75 26.75 48 40 48H88zM480 64C497.7 64 512 78.33 512 96C512 113.7 497.7 128 480 128H192C174.3 128 160 113.7 160 96C160 78.33 174.3 64 192 64H480zM480 224C497.7 224 512 238.3 512 256C512 273.7 497.7 288 480 288H192C174.3 288 160 273.7 160 256C160 238.3 174.3 224 192 224H480zM480 384C497.7 384 512 398.3 512 416C512 433.7 497.7 448 480 448H192C174.3 448 160 433.7 160 416C160 398.3 174.3 384 192 384H480zM16 232C16 218.7 26.75 208 40 208H88C101.3 208 112 218.7 112 232V280C112 293.3 101.3 304 88 304H40C26.75 304 16 293.3 16 280V232zM88 368C101.3 368 112 378.7 112 392V440C112 453.3 101.3 464 88 464H40C26.75 464 16 453.3 16 440V392C16 378.7 26.75 368 40 368H88z"></path>
|
||||
</svg><span class="hidden" data-v-0c4113b0="">View as list</span></label></span>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import router from '@/router'
|
|||
|
||||
interface YouTubeSearchResult {
|
||||
nextPageToken: string
|
||||
items: Record<string, any>[]
|
||||
items: YouTubeVideo[]
|
||||
}
|
||||
|
||||
export const youTubeService = {
|
||||
|
|
|
|||
Loading…
Reference in a new issue