vue3-yuanma/packages/vue-compat/__tests__/componentFunctional.spec.ts
2021-07-19 18:24:18 -04:00

63 lines
1.5 KiB
TypeScript

import Vue from '@vue/compat'
import {
DeprecationTypes,
deprecationData,
toggleDeprecationWarning
} from '../../runtime-core/src/compat/compatConfig'
beforeEach(() => {
toggleDeprecationWarning(true)
Vue.configureCompat({
MODE: 2,
GLOBAL_MOUNT: 'suppress-warning'
})
})
afterEach(() => {
toggleDeprecationWarning(false)
Vue.configureCompat({ MODE: 3 })
})
test('COMPONENT_FUNCTIONAL', async () => {
const func = {
name: 'Func',
functional: true,
props: {
x: String
},
inject: ['foo'],
render: (h: any, { data, props, injections, slots }: any) => {
return h('div', { id: props.x, class: data.class }, [
h('div', { class: 'inject' }, injections.foo),
h('div', { class: 'slot' }, slots().default)
])
}
}
const vm = new Vue({
provide() {
return {
foo: 123
}
},
components: {
func
},
template: `<func class="foo" x="foo">hello</func>`
}).$mount()
expect(vm.$el.id).toBe('foo')
expect(vm.$el.className).toBe('foo')
expect(vm.$el.querySelector('.inject').textContent).toBe('123')
expect(vm.$el.querySelector('.slot').textContent).toBe('hello')
expect(vm.$el.outerHTML).toMatchInlineSnapshot(
`"<div id=\\"foo\\" class=\\"foo\\"><div class=\\"inject\\">123</div><div class=\\"slot\\">hello</div></div>"`
)
expect(
(
deprecationData[DeprecationTypes.COMPONENT_FUNCTIONAL].message as Function
)(func)
).toHaveBeenWarned()
})