fix: add warnings (#82)

* fix: add warnings

- invalid watch handler path
- attempting to mutate readonly computed value
- attempt of mutating public property
- attempt of mutating prop

* fix: more descriptive warnings + details

* fix: test apiOptions warnings

* fix: update warning in componentProxy

* fix: update warnings in componentProxy & apiOptions

* fix: update warning in componentProxy

* fix: implemented tests for componentProxy

* fix: remove comment + small refactor

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

@@ -8,7 +8,8 @@ import {
   nextTick,
   renderToString,
   ref,
-  createComponent
+  createComponent,
+  mockWarn
 } from '@vue/runtime-test'
 
 describe('api: options', () => {
@@ -505,4 +506,37 @@ describe('api: options', () => {
     await nextTick()
     expect(serializeInner(root)).toBe(`<div>1,1,3</div>`)
   })
+
+  describe('warnings', () => {
+    mockWarn()
+
+    test('Expected a function as watch handler', () => {
+      const Comp = {
+        watch: {
+          foo: 'notExistingMethod'
+        },
+        render() {}
+      }
+
+      const root = nodeOps.createElement('div')
+      render(h(Comp), root)
+
+      expect(
+        'Invalid watch handler specified by key "notExistingMethod"'
+      ).toHaveBeenWarned()
+    })
+
+    test('Invalid watch option', () => {
+      const Comp = {
+        watch: { foo: true },
+        render() {}
+      }
+
+      const root = nodeOps.createElement('div')
+      // @ts-ignore
+      render(h(Comp), root)
+
+      expect('Invalid watch option: "foo"').toHaveBeenWarned()
+    })
+  })
 })

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

@@ -0,0 +1,40 @@
+import { createApp, nodeOps, mockWarn } from '@vue/runtime-test'
+
+const createTestInstance = (props?: any) => {
+  const component = {
+    render() {}
+  }
+  const root = nodeOps.createElement('div')
+  return createApp().mount(component, root, props)
+}
+
+describe('component proxy', () => {
+  describe('warnings', () => {
+    mockWarn()
+
+    test('Attempting to mutate public property', () => {
+      const app = createTestInstance()
+
+      try {
+        app.$props = { foo: 'bar' }
+      } catch {
+        expect(
+          'Attempting to mutate public property "$props". ' +
+            'Properties starting with $ are reserved and readonly.'
+        ).toHaveBeenWarned()
+      }
+    })
+
+    test('Attempting to mutate prop', () => {
+      const app = createTestInstance({ foo: 'foo' })
+
+      try {
+        app.foo = 'bar'
+      } catch {
+        expect(
+          'Attempting to mutate prop "foo". Props are readonly.'
+        ).toHaveBeenWarned()
+      }
+    })
+  })
+})