mirror of
https://github.com/koel/koel
synced 2025-02-17 22:08:28 +00:00
feat (test): add YouTubeVideoList component tests
This commit is contained in:
Phan An
parent
c73122fe5a
commit
7ddd0f9c09
6 changed files with 57 additions and 94 deletions
|
|
@ -1,3 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`components/ui/ContextMenuBase renders 1`] = ``;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`components/ui/volume renders properly 1`] = `<span id="volume" class="volume control"><i role="button" tabindex="0" title="Mute" class="fa fa-volume-up mute"></i> <input id="volumeRange" max="10" step="0.1" title="Volume" type="range" class="plyr__volume"></span>`;
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
import Component from '@/components/ui/ContextMenuBase.vue'
|
||||
import { mount } from '@/__tests__/adapter'
|
||||
|
||||
declare const global: any
|
||||
|
||||
describe('components/ui/ContextMenuBase', () => {
|
||||
afterEach(() => {
|
||||
jest.resetModules()
|
||||
jest.clearAllMocks()
|
||||
})
|
||||
|
||||
it('renders', () => {
|
||||
expect(mount(Component)).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('renders extra CSS classes', async () => {
|
||||
const wrapper = mount(Component, {
|
||||
propsData: {
|
||||
extraClass: 'foo'
|
||||
}
|
||||
})
|
||||
await (wrapper.vm as any).open(0, 0)
|
||||
expect(wrapper.find('.menu').hasClass('foo')).toBe(true)
|
||||
})
|
||||
|
||||
it('opens', () => {
|
||||
const wrapper = mount(Component)
|
||||
;(wrapper.vm as any).open(42, 128)
|
||||
expect(wrapper.find('.menu').element.style.top).toBe('42px')
|
||||
expect(wrapper.find('.menu').element.style.left).toBe('128px')
|
||||
expect(global.getComputedStyle(wrapper.find('.menu').element).display).toBe('block')
|
||||
})
|
||||
|
||||
it('closes', async () => {
|
||||
const wrapper = mount(Component)
|
||||
await (wrapper.vm as any).open(42, 128)
|
||||
;(wrapper.vm as any).close()
|
||||
expect(wrapper.html()).toBeUndefined()
|
||||
})
|
||||
})
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
import Component from '@/components/ui/YouTubeVideoList.vue'
|
||||
import { youTubeService } from '@/services'
|
||||
import factory from '@/__tests__/factory'
|
||||
import { mock } from '@/__tests__/__helpers__'
|
||||
import { mount } from '@/__tests__/adapter'
|
||||
|
||||
describe('components/ui/youtube', () => {
|
||||
let song: Song
|
||||
beforeEach(() => {
|
||||
song = factory<Song>('song', {
|
||||
youtube: {
|
||||
items: factory<YouTubeVideo>('video', 5),
|
||||
nextPageToken: 'f00'
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
jest.resetModules()
|
||||
jest.clearAllMocks()
|
||||
})
|
||||
|
||||
it('displays a list of videos', async () => {
|
||||
const wrapper = mount(Component, {
|
||||
propsData: { song }
|
||||
})
|
||||
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.findAll('a.video')).toHaveLength(5)
|
||||
})
|
||||
|
||||
it('loads more videos on demand', async () => {
|
||||
const wrapper = mount(Component, {
|
||||
propsData: { song }
|
||||
})
|
||||
|
||||
const searchStub = mock(youTubeService, 'searchVideosRelatedToSong').mockReturnValue(Promise.resolve({
|
||||
nextPageToken: 'bar',
|
||||
items: factory<YouTubeVideo>('video', 5)
|
||||
}))
|
||||
|
||||
await wrapper.vm.$nextTick()
|
||||
wrapper.click('button.more')
|
||||
expect(searchStub).toHaveBeenCalledWith(song, 'f00')
|
||||
})
|
||||
})
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { expect, it } from 'vitest'
|
||||
import ComponentTestCase from '@/__tests__/ComponentTestCase'
|
||||
import YouTubeVideoItem from './YouTubeVideoItem.vue'
|
||||
import { fireEvent } from '@testing-library/vue'
|
||||
import { youTubeService } from '@/services'
|
||||
import ComponentTestCase from '@/__tests__/ComponentTestCase'
|
||||
import YouTubeVideoItem from './YouTubeVideoItem.vue'
|
||||
|
||||
let video: YouTubeVideo
|
||||
|
||||
|
|
|
|||
55
resources/assets/js/components/ui/YouTubeVideoList.spec.ts
Normal file
55
resources/assets/js/components/ui/YouTubeVideoList.spec.ts
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import { expect, it } from 'vitest'
|
||||
import factory from '@/__tests__/factory'
|
||||
import ComponentTestCase from '@/__tests__/ComponentTestCase'
|
||||
import YouTubeVideoList from './YouTubeVideoList.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
|
||||
|
||||
new class extends ComponentTestCase {
|
||||
private renderComponent () {
|
||||
song = factory<Song>('song', {
|
||||
youtube: {
|
||||
items: factory<YouTubeVideo>('video', 5),
|
||||
nextPageToken: 'f00'
|
||||
}
|
||||
})
|
||||
|
||||
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('loads more videos', async () => {
|
||||
const mock = this.mock(youTubeService, 'searchVideosRelatedToSong').mockResolvedValue({
|
||||
nextPageToken: 'b4r',
|
||||
items: factory<YouTubeVideo>('video', 5)
|
||||
})
|
||||
|
||||
const { getAllByTestId, getByTestId } = this.renderComponent()
|
||||
|
||||
await fireEvent.click(getByTestId('youtube-search-more-btn'))
|
||||
|
||||
expect(mock).toHaveBeenCalledWith(song, 'f00')
|
||||
|
||||
await this.tick()
|
||||
expect(getAllByTestId('youtube-search-result').length).toBe(10)
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue