2022-05-09 09:59:31 +00:00
|
|
|
import deepmerge from 'deepmerge'
|
|
|
|
import isMobile from 'ismobilejs'
|
|
|
|
import { cleanup, render, RenderOptions } from '@testing-library/vue'
|
2022-05-09 12:25:19 +00:00
|
|
|
import { afterEach, beforeEach, vi } from 'vitest'
|
2022-05-09 09:59:31 +00:00
|
|
|
import { noop } from '@/utils'
|
|
|
|
import { clickaway, droppable, focus } from '@/directives'
|
|
|
|
import { defineComponent, nextTick } from 'vue'
|
|
|
|
import { commonStore } from '@/stores'
|
|
|
|
|
|
|
|
declare type Methods<T> = { [K in keyof T]: T[K] extends Closure ? K : never; }[keyof T] & (string | symbol);
|
|
|
|
|
|
|
|
export default abstract class ComponentTestCase {
|
2022-05-09 12:25:19 +00:00
|
|
|
private backupMethods = new Map()
|
|
|
|
|
2022-05-09 09:59:31 +00:00
|
|
|
public constructor () {
|
|
|
|
this.beforeEach()
|
|
|
|
this.afterEach()
|
|
|
|
this.test()
|
|
|
|
}
|
|
|
|
|
|
|
|
protected beforeEach (cb?: Closure) {
|
|
|
|
beforeEach(() => {
|
|
|
|
commonStore.state.allowDownload = true
|
|
|
|
commonStore.state.useiTunes = true
|
|
|
|
cb && cb()
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
protected afterEach (cb?: Closure) {
|
|
|
|
afterEach(() => {
|
|
|
|
cleanup()
|
2022-05-09 12:25:19 +00:00
|
|
|
this.restoreAllMocks()
|
2022-05-09 09:59:31 +00:00
|
|
|
isMobile.any = false
|
|
|
|
cb && cb()
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2022-05-09 12:25:19 +00:00
|
|
|
protected mock<T, M extends Methods<Required<T>>> (obj: T, methodName: M, implementation: any = noop) {
|
|
|
|
const mock = vi.fn().mockImplementation(implementation instanceof Function ? implementation : () => implementation)
|
|
|
|
this.backupMethods.set([obj, methodName], obj[methodName])
|
|
|
|
|
|
|
|
// @ts-ignore
|
|
|
|
obj[methodName] = mock
|
|
|
|
|
|
|
|
return mock
|
|
|
|
}
|
|
|
|
|
|
|
|
protected restoreAllMocks () {
|
|
|
|
this.backupMethods.forEach((fn, [obj, methodName]) => (obj[methodName] = fn))
|
|
|
|
this.backupMethods = new Map()
|
|
|
|
}
|
2022-05-09 09:59:31 +00:00
|
|
|
|
|
|
|
protected render (component: any, options: RenderOptions = {}) {
|
|
|
|
return render(component, deepmerge({
|
|
|
|
global: {
|
|
|
|
directives: {
|
|
|
|
'koel-clickaway': clickaway,
|
|
|
|
'koel-focus': focus,
|
|
|
|
'koel-droppable': droppable
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, options))
|
|
|
|
}
|
|
|
|
|
|
|
|
protected stub (testId = 'stub') {
|
|
|
|
return defineComponent({
|
|
|
|
template: `<br data-testid="${testId}"/>`
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
protected async tick (count = 1) {
|
|
|
|
for (let i = 0; i < count; ++i) {
|
|
|
|
await nextTick()
|
|
|
|
}
|
|
|
|
}
|
2022-05-09 12:25:19 +00:00
|
|
|
|
|
|
|
protected abstract test ()
|
2022-05-09 09:59:31 +00:00
|
|
|
}
|