vue3-yuanma/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts

133 lines
3.4 KiB
TypeScript
Raw Normal View History

2020-11-26 23:01:36 +08:00
import {
ComponentInternalInstance,
2020-11-26 23:01:36 +08:00
defineComponent,
getCurrentInstance,
2020-11-26 23:01:36 +08:00
h,
nodeOps,
onMounted,
2020-11-26 23:01:36 +08:00
render,
SetupContext,
Suspense
2020-11-26 23:01:36 +08:00
} from '@vue/runtime-test'
2021-06-23 22:31:32 +08:00
import {
defineEmits,
defineProps,
2021-06-27 09:11:57 +08:00
defineExpose,
withDefaults,
2021-06-23 22:31:32 +08:00
useAttrs,
2021-06-27 09:11:57 +08:00
useSlots,
mergeDefaults,
withAsyncContext
2021-06-23 22:31:32 +08:00
} from '../src/apiSetupHelpers'
2020-11-26 23:01:36 +08:00
describe('SFC <script setup> helpers', () => {
test('should warn runtime usage', () => {
defineProps()
expect(`defineProps() is a compiler-hint`).toHaveBeenWarned()
defineEmits()
expect(`defineEmits() is a compiler-hint`).toHaveBeenWarned()
2021-06-27 09:11:57 +08:00
defineExpose()
expect(`defineExpose() is a compiler-hint`).toHaveBeenWarned()
withDefaults({}, {})
expect(`withDefaults() is a compiler-hint`).toHaveBeenWarned()
2020-11-26 23:01:36 +08:00
})
2021-06-23 22:31:32 +08:00
test('useSlots / useAttrs (no args)', () => {
let slots: SetupContext['slots'] | undefined
let attrs: SetupContext['attrs'] | undefined
2020-11-26 23:01:36 +08:00
const Comp = {
setup() {
2021-06-23 22:31:32 +08:00
slots = useSlots()
attrs = useAttrs()
2020-11-26 23:01:36 +08:00
return () => {}
}
}
2021-06-23 22:31:32 +08:00
const passedAttrs = { id: 'foo' }
const passedSlots = {
default: () => {},
x: () => {}
}
render(h(Comp, passedAttrs, passedSlots), nodeOps.createElement('div'))
expect(typeof slots!.default).toBe('function')
expect(typeof slots!.x).toBe('function')
expect(attrs).toMatchObject(passedAttrs)
2020-11-26 23:01:36 +08:00
})
2021-06-23 22:31:32 +08:00
test('useSlots / useAttrs (with args)', () => {
let slots: SetupContext['slots'] | undefined
let attrs: SetupContext['attrs'] | undefined
2020-11-26 23:01:36 +08:00
let ctx: SetupContext | undefined
const Comp = defineComponent({
2021-06-23 22:31:32 +08:00
setup(_, _ctx) {
slots = useSlots()
attrs = useAttrs()
ctx = _ctx
2020-11-26 23:01:36 +08:00
return () => {}
}
})
render(h(Comp), nodeOps.createElement('div'))
2021-06-23 22:31:32 +08:00
expect(slots).toBe(ctx!.slots)
expect(attrs).toBe(ctx!.attrs)
2020-11-26 23:01:36 +08:00
})
2021-06-27 09:11:57 +08:00
test('mergeDefaults', () => {
const merged = mergeDefaults(
{
foo: null,
bar: { type: String, required: false }
},
{
foo: 1,
bar: 'baz'
}
)
expect(merged).toMatchObject({
foo: { default: 1 },
bar: { type: String, required: false, default: 'baz' }
})
mergeDefaults({}, { foo: 1 })
expect(
`props default key "foo" has no corresponding declaration`
).toHaveBeenWarned()
})
test('withAsyncContext', async () => {
const spy = jest.fn()
let beforeInstance: ComponentInternalInstance | null = null
let afterInstance: ComponentInternalInstance | null = null
let resolve: (msg: string) => void
const Comp = defineComponent({
async setup() {
beforeInstance = getCurrentInstance()
const msg = await withAsyncContext(
new Promise(r => {
resolve = r
})
)
// register the lifecycle after an await statement
onMounted(spy)
afterInstance = getCurrentInstance()
return () => msg
}
})
const root = nodeOps.createElement('div')
render(h(() => h(Suspense, () => h(Comp))), root)
expect(spy).not.toHaveBeenCalled()
resolve!('hello')
// wait a macro task tick for all micro ticks to resolve
await new Promise(r => setTimeout(r))
// mount hook should have been called
expect(spy).toHaveBeenCalled()
// should retain same instance before/after the await call
expect(beforeInstance).toBe(afterInstance)
})
2020-11-26 23:01:36 +08:00
})