test: add more complete test for componentProxy (#174)

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

@@ -1,40 +1,132 @@
-import { createApp, nodeOps, mockWarn } from '@vue/runtime-test'
+import {
+  createApp,
+  getCurrentInstance,
+  nodeOps,
+  mockWarn
+} from '@vue/runtime-test'
+import { ComponentInternalInstance } from '../src/component'
 
-const createTestInstance = (props?: any) => {
-  const component = {
-    render() {}
-  }
-  const root = nodeOps.createElement('div')
-  return createApp().mount(component, root, props)
-}
+describe('component: proxy', () => {
+  mockWarn()
 
-describe('component proxy', () => {
-  describe('warnings', () => {
-    mockWarn()
+  it('data', () => {
+    const app = createApp()
+    let instance: ComponentInternalInstance
+    let instanceProxy: any
+    const Comp = {
+      data() {
+        return {
+          foo: 1
+        }
+      },
+      mounted() {
+        instance = getCurrentInstance()!
+        instanceProxy = this
+      },
+      render() {
+        return null
+      }
+    }
+    app.mount(Comp, nodeOps.createElement('div'))
+    expect(instanceProxy.foo).toBe(1)
+    instanceProxy.foo = 2
+    expect(instance!.data.foo).toBe(2)
+  })
 
-    test('Attempting to mutate public property', () => {
-      const app = createTestInstance()
+  it('renderContext', () => {
+    const app = createApp()
+    let instance: ComponentInternalInstance
+    let instanceProxy: any
+    const Comp = {
+      setup() {
+        return {
+          foo: 1
+        }
+      },
+      mounted() {
+        instance = getCurrentInstance()!
+        instanceProxy = this
+      },
+      render() {
+        return null
+      }
+    }
+    app.mount(Comp, nodeOps.createElement('div'))
+    expect(instanceProxy.foo).toBe(1)
+    instanceProxy.foo = 2
+    expect(instance!.renderContext.foo).toBe(2)
+  })
 
-      try {
-        app.$props = { foo: 'bar' }
-      } catch {
-        expect(
-          'Attempting to mutate public property "$props". ' +
-            'Properties starting with $ are reserved and readonly.'
-        ).toHaveBeenWarned()
+  it('propsProxy', () => {
+    const app = createApp()
+    let instance: ComponentInternalInstance
+    let instanceProxy: any
+    const Comp = {
+      props: {
+        foo: {
+          type: Number,
+          default: 1
+        }
+      },
+      setup() {
+        return () => null
+      },
+      mounted() {
+        instance = getCurrentInstance()!
+        instanceProxy = this
       }
-    })
+    }
+    app.mount(Comp, nodeOps.createElement('div'))
+    expect(instanceProxy.foo).toBe(1)
+    expect(instance!.propsProxy!.foo).toBe(1)
+    expect(() => (instanceProxy.foo = 2)).toThrow(TypeError)
+    expect(`Attempting to mutate prop "foo"`).toHaveBeenWarned()
+  })
 
-    test('Attempting to mutate prop', () => {
-      const app = createTestInstance({ foo: 'foo' })
+  it('methods', () => {
+    const app = createApp()
+    let instance: ComponentInternalInstance
+    let instanceProxy: any
+    const Comp = {
+      setup() {
+        return () => null
+      },
+      mounted() {
+        instance = getCurrentInstance()!
+        instanceProxy = this
+      }
+    }
+    app.mount(Comp, nodeOps.createElement('div'))
+    expect(instanceProxy.$data).toBe(instance!.data)
+    expect(instanceProxy.$props).toBe(instance!.propsProxy)
+    expect(instanceProxy.$attrs).toBe(instance!.attrs)
+    expect(instanceProxy.$slots).toBe(instance!.slots)
+    expect(instanceProxy.$refs).toBe(instance!.refs)
+    expect(instanceProxy.$parent).toBe(instance!.parent)
+    expect(instanceProxy.$root).toBe(instance!.root)
+    expect(instanceProxy.$emit).toBe(instance!.emit)
+    expect(instanceProxy.$el).toBe(instance!.vnode.el)
+    expect(instanceProxy.$options).toBe(instance!.type)
+    expect(() => (instanceProxy.$data = {})).toThrow(TypeError)
+    expect(`Attempting to mutate public property "$data"`).toHaveBeenWarned()
+  })
 
-      try {
-        app.foo = 'bar'
-      } catch {
-        expect(
-          'Attempting to mutate prop "foo". Props are readonly.'
-        ).toHaveBeenWarned()
+  it('user', async () => {
+    const app = createApp()
+    let instance: ComponentInternalInstance
+    let instanceProxy: any
+    const Comp = {
+      setup() {
+        return () => null
+      },
+      mounted() {
+        instance = getCurrentInstance()!
+        instanceProxy = this
       }
-    })
+    }
+    app.mount(Comp, nodeOps.createElement('div'))
+    instanceProxy.foo = 1
+    expect(instanceProxy.foo).toBe(1)
+    expect(instance!.user.foo).toBe(1)
   })
 })