test: test for options API
This commit is contained in:
Evan You
parent
7cd33587ba
commit
13298bc4fa
@ -1,17 +1,344 @@
|
||||
import {
|
||||
h,
|
||||
nodeOps,
|
||||
render,
|
||||
serializeInner,
|
||||
triggerEvent,
|
||||
TestElement,
|
||||
nextTick,
|
||||
renderToString,
|
||||
ref
|
||||
} from '@vue/runtime-test'
|
||||
|
||||
describe('api: options', () => {
|
||||
test('data', () => {})
|
||||
test('data', async () => {
|
||||
const Comp = {
|
||||
data() {
|
||||
return {
|
||||
foo: 1
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
onClick: () => {
|
||||
this.foo++
|
||||
}
|
||||
},
|
||||
this.foo
|
||||
)
|
||||
}
|
||||
}
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>1</div>`)
|
||||
|
||||
test('computed', () => {})
|
||||
triggerEvent(root.children[0] as TestElement, 'click')
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<div>2</div>`)
|
||||
})
|
||||
|
||||
test('methods', () => {})
|
||||
test('computed', async () => {
|
||||
const Comp = {
|
||||
data() {
|
||||
return {
|
||||
foo: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
bar() {
|
||||
return this.foo + 1
|
||||
},
|
||||
baz() {
|
||||
return this.bar + 1
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
onClick: () => {
|
||||
this.foo++
|
||||
}
|
||||
},
|
||||
this.bar + this.baz
|
||||
)
|
||||
}
|
||||
}
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>5</div>`)
|
||||
|
||||
test('watch', () => {})
|
||||
triggerEvent(root.children[0] as TestElement, 'click')
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<div>7</div>`)
|
||||
})
|
||||
|
||||
test('provide/inject', () => {})
|
||||
test('methods', async () => {
|
||||
const Comp = {
|
||||
data() {
|
||||
return {
|
||||
foo: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
inc() {
|
||||
this.foo++
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
onClick: this.inc
|
||||
},
|
||||
this.foo
|
||||
)
|
||||
}
|
||||
}
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>1</div>`)
|
||||
|
||||
test('mixins', () => {})
|
||||
triggerEvent(root.children[0] as TestElement, 'click')
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<div>2</div>`)
|
||||
})
|
||||
|
||||
test('extends', () => {})
|
||||
test('watch', async () => {
|
||||
function returnThis() {
|
||||
return this
|
||||
}
|
||||
const spyA = jest.fn(returnThis)
|
||||
const spyB = jest.fn(returnThis)
|
||||
const spyC = jest.fn(returnThis)
|
||||
|
||||
let ctx: any
|
||||
const Comp = {
|
||||
data() {
|
||||
return {
|
||||
foo: 1,
|
||||
bar: 2,
|
||||
baz: {
|
||||
qux: 3
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// string method name
|
||||
foo: 'onFooChange',
|
||||
// direct function
|
||||
bar: spyB,
|
||||
baz: {
|
||||
handler: spyC,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onFooChange: spyA
|
||||
},
|
||||
render() {
|
||||
ctx = this
|
||||
}
|
||||
}
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
|
||||
function assertCall(spy: jest.Mock, callIndex: number, args: any[]) {
|
||||
expect(spy.mock.calls[callIndex].slice(0, 2)).toMatchObject(args)
|
||||
}
|
||||
|
||||
assertCall(spyA, 0, [1, undefined])
|
||||
assertCall(spyB, 0, [2, undefined])
|
||||
assertCall(spyC, 0, [{ qux: 3 }, undefined])
|
||||
expect(spyA).toHaveReturnedWith(ctx)
|
||||
expect(spyB).toHaveReturnedWith(ctx)
|
||||
expect(spyC).toHaveReturnedWith(ctx)
|
||||
|
||||
ctx.foo++
|
||||
await nextTick()
|
||||
expect(spyA).toHaveBeenCalledTimes(2)
|
||||
assertCall(spyA, 1, [2, 1])
|
||||
|
||||
ctx.bar++
|
||||
await nextTick()
|
||||
expect(spyB).toHaveBeenCalledTimes(2)
|
||||
assertCall(spyB, 1, [3, 2])
|
||||
|
||||
ctx.baz.qux++
|
||||
await nextTick()
|
||||
expect(spyC).toHaveBeenCalledTimes(2)
|
||||
// new and old objects have same identity
|
||||
assertCall(spyC, 1, [{ qux: 4 }, { qux: 4 }])
|
||||
})
|
||||
|
||||
test('provide/inject', () => {
|
||||
const Root = {
|
||||
data() {
|
||||
return {
|
||||
a: 1
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
a: this.a
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return [h(ChildA), h(ChildB), h(ChildC), h(ChildD)]
|
||||
}
|
||||
}
|
||||
const ChildA = {
|
||||
inject: ['a'],
|
||||
render() {
|
||||
return this.a
|
||||
}
|
||||
}
|
||||
const ChildB = {
|
||||
// object alias
|
||||
inject: { b: 'a' },
|
||||
render() {
|
||||
return this.b
|
||||
}
|
||||
}
|
||||
const ChildC = {
|
||||
inject: {
|
||||
b: {
|
||||
from: 'a'
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return this.b
|
||||
}
|
||||
}
|
||||
const ChildD = {
|
||||
inject: {
|
||||
b: {
|
||||
from: 'c',
|
||||
default: 2
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return this.b
|
||||
}
|
||||
}
|
||||
|
||||
expect(renderToString(h(Root))).toBe(`<!---->1112<!---->`)
|
||||
})
|
||||
|
||||
test('lifecycle', () => {})
|
||||
|
||||
test('mixins', () => {
|
||||
const calls: string[] = []
|
||||
const mixinA = {
|
||||
data() {
|
||||
return {
|
||||
a: 1
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
calls.push('mixinA')
|
||||
}
|
||||
}
|
||||
const mixinB = {
|
||||
data() {
|
||||
return {
|
||||
b: 2
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
calls.push('mixinB')
|
||||
}
|
||||
}
|
||||
const Comp = {
|
||||
mixins: [mixinA, mixinB],
|
||||
data() {
|
||||
return {
|
||||
c: 3
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
calls.push('comp')
|
||||
},
|
||||
render() {
|
||||
return `${this.a}${this.b}${this.c}`
|
||||
}
|
||||
}
|
||||
|
||||
expect(renderToString(h(Comp))).toBe(`123`)
|
||||
expect(calls).toEqual(['mixinA', 'mixinB', 'comp'])
|
||||
})
|
||||
|
||||
test('extends', () => {
|
||||
const calls: string[] = []
|
||||
const Base = {
|
||||
data() {
|
||||
return {
|
||||
a: 1
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
calls.push('base')
|
||||
}
|
||||
}
|
||||
const Comp = {
|
||||
extends: Base,
|
||||
data() {
|
||||
return {
|
||||
b: 2
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
calls.push('comp')
|
||||
},
|
||||
render() {
|
||||
return `${this.a}${this.b}`
|
||||
}
|
||||
}
|
||||
|
||||
expect(renderToString(h(Comp))).toBe(`12`)
|
||||
expect(calls).toEqual(['base', 'comp'])
|
||||
})
|
||||
|
||||
test('accessing setup() state from options', async () => {
|
||||
const Comp = {
|
||||
setup() {
|
||||
return {
|
||||
count: ref(0)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
plusOne: this.count + 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
plusTwo() {
|
||||
return this.count + 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
inc() {
|
||||
this.count++
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
onClick: this.inc
|
||||
},
|
||||
`${this.count},${this.plusOne},${this.plusTwo}`
|
||||
)
|
||||
}
|
||||
}
|
||||
const root = nodeOps.createElement('div')
|
||||
render(h(Comp), root)
|
||||
expect(serializeInner(root)).toBe(`<div>0,1,2</div>`)
|
||||
|
||||
triggerEvent(root.children[0] as TestElement, 'click')
|
||||
await nextTick()
|
||||
expect(serializeInner(root)).toBe(`<div>1,1,3</div>`)
|
||||
})
|
||||
})
|
||||
|
||||
@ -28,7 +28,7 @@ import {
|
||||
onBeforeUnmount,
|
||||
onUnmounted
|
||||
} from './apiLifecycle'
|
||||
import { DebuggerEvent } from '@vue/reactivity'
|
||||
import { DebuggerEvent, reactive } from '@vue/reactivity'
|
||||
import { warn } from './warning'
|
||||
|
||||
// TODO legacy component definition also supports constructors with .options
|
||||
@ -83,7 +83,7 @@ export function applyOptions(
|
||||
asMixin: boolean = false
|
||||
) {
|
||||
const data =
|
||||
instance.data === EMPTY_OBJ ? (instance.data = {}) : instance.data
|
||||
instance.data === EMPTY_OBJ ? (instance.data = reactive({})) : instance.data
|
||||
const ctx = instance.renderProxy as any
|
||||
const {
|
||||
// composition
|
||||
@ -135,7 +135,13 @@ export function applyOptions(
|
||||
}
|
||||
if (computedOptions) {
|
||||
for (const key in computedOptions) {
|
||||
data[key] = computed(computedOptions[key] as any)
|
||||
const opt = computedOptions[key]
|
||||
data[key] = isFunction(opt)
|
||||
? computed(opt.bind(ctx))
|
||||
: computed({
|
||||
get: opt.get.bind(ctx),
|
||||
set: opt.set.bind(ctx)
|
||||
})
|
||||
}
|
||||
}
|
||||
if (methods) {
|
||||
@ -148,9 +154,9 @@ export function applyOptions(
|
||||
const raw = watchOptions[key]
|
||||
const getter = () => ctx[key]
|
||||
if (isString(raw)) {
|
||||
const handler = data[key]
|
||||
const handler = data[raw]
|
||||
if (isFunction(handler)) {
|
||||
watch(getter, handler.bind(ctx))
|
||||
watch(getter, handler as any)
|
||||
} else if (__DEV__) {
|
||||
// TODO warn invalid watch handler path
|
||||
}
|
||||
|
||||
@ -337,7 +337,7 @@ export function setupStatefulComponent(instance: ComponentInstance) {
|
||||
// setup returned bindings.
|
||||
// assuming a render function compiled from template is present.
|
||||
if (isObject(setupResult)) {
|
||||
instance.data = setupResult
|
||||
instance.data = reactive(setupResult)
|
||||
} else if (__DEV__ && setupResult !== undefined) {
|
||||
warn(
|
||||
`setup() should return an object. Received: ${
|
||||
@ -360,7 +360,9 @@ export function setupStatefulComponent(instance: ComponentInstance) {
|
||||
if (__FEATURE_OPTIONS__) {
|
||||
applyOptions(instance, Component)
|
||||
}
|
||||
instance.data = reactive(instance.data === EMPTY_OBJ ? {} : instance.data)
|
||||
if (instance.data === EMPTY_OBJ) {
|
||||
instance.data = reactive({})
|
||||
}
|
||||
currentInstance = null
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user