test: test for options API

packages/runtime-core/__tests__/apiOptions.spec.ts

@@ -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>`)
+  })
 })

packages/runtime-core/src/apiOptions.ts

@@ -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
         }

packages/runtime-core/src/component.ts

@@ -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
 }