tests for prop assertions

Author: yyx990803

src/compiler/compile.js

@@ -481,7 +481,7 @@ function compileProps (el, attrs, propDescriptors) {
       props.push(prop)
     } else if (assertions && assertions.required) {
       _.warn(
-        'Required prop missing: ' + name
+        'Missing required prop: ' + name
       )
     }
   }

src/directives/prop.js

@@ -1,3 +1,4 @@
+var _ = require('../util')
 var Watcher = require('../watcher')
 var bindingModes = require('../config')._propBindingModes
 
@@ -24,7 +25,9 @@ module.exports = {
         if (!locked) {
           locked = true
           // all props have been initialized already
-          child[childKey] = val
+          if (_.assertProp(prop, val)) {
+            child[childKey] = val
+          }
           locked = false
         }
       },
@@ -34,7 +37,10 @@ module.exports = {
     // set the child initial value first, before setting
     // up the child watcher to avoid triggering it
     // immediately.
-    child.$set(childKey, this.parentWatcher.value)
+    var value = this.parentWatcher.value
+    if (_.assertProp(prop, value)) {
+      child.$set(childKey, value)
+    }
 
     // only setup two-way binding if this is not a one-way
     // binding.

src/util/misc.js

@@ -43,7 +43,8 @@ exports.assertProp = function (prop, value) {
     _.warn(
       'Invalid prop: type check failed for ' +
       prop.path + '="' + prop.raw + '".' +
-      (expectedType ? ' Expected ' + expectedType + '.' : '')
+      ' Expected ' + formatType(expectedType) +
+      ', got ' + formatValue(value) + '.'
     )
     return false
   }
@@ -60,6 +61,16 @@ exports.assertProp = function (prop, value) {
   return true
 }
 
+function formatType (val) {
+  return val
+    ? val.charAt(0).toUpperCase() + val.slice(1)
+    : 'custom type'
+}
+
+function formatValue (val) {
+  return Object.prototype.toString.call(val).slice(8, -1)
+}
+
 /**
  * Check if an element is a component, if yes return its
  * component id.

test/unit/lib/util.js

@@ -3,6 +3,15 @@ var scope = typeof window === 'undefined'
   : window
 
 scope.hasWarned = function (_, msg) {
-  var args = _.warn.calls.argsFor(0)
-  return !!(args[0] && args[0].indexOf(msg) > -1)
-}
+  var count = _.warn.calls.count()
+  while (count--) {
+    var args = _.warn.calls.argsFor(count)
+    if (args.some(containsMsg)) {
+      return true
+    }
+  }
+
+  function containsMsg (arg) {
+    return arg.indexOf(msg) > -1
+  }
+}

test/unit/specs/directives/prop_spec.js

@@ -226,5 +226,123 @@ if (_.inBrowser) {
       expect(el.innerHTML).toBe('<p>AAA</p><p>DDD</p>')
     })
 
+    describe('assertions', function () {
+
+      function makeInstance (value, type, validator) {
+        return new Vue({
+          el: document.createElement('div'),
+          template: '<test prop="{{val}}"></test>',
+          data: {
+            val: value
+          },
+          components: {
+            test: {
+              props: [
+                {
+                  name: 'prop',
+                  type: type,
+                  validator: validator
+                }
+              ]
+            }
+          }
+        })
+      }
+
+      it('string', function () {
+        makeInstance('hello', String)
+        expect(_.warn).not.toHaveBeenCalled()
+        makeInstance(123, String)
+        expect(hasWarned(_, 'Expected String')).toBe(true)
+      })
+
+      it('number', function () {
+        makeInstance(123, Number)
+        expect(_.warn).not.toHaveBeenCalled()
+        makeInstance('123', Number)
+        expect(hasWarned(_, 'Expected Number')).toBe(true)
+      })
+
+      it('boolean', function () {
+        makeInstance(true, Boolean)
+        expect(_.warn).not.toHaveBeenCalled()
+        makeInstance('123', Boolean)
+        expect(hasWarned(_, 'Expected Boolean')).toBe(true)
+      })
+
+      it('function', function () {
+        makeInstance(function () {}, Function)
+        expect(_.warn).not.toHaveBeenCalled()
+        makeInstance(123, Function)
+        expect(hasWarned(_, 'Expected Function')).toBe(true)
+      })
+
+      it('object', function () {
+        makeInstance({}, Object)
+        expect(_.warn).not.toHaveBeenCalled()
+        makeInstance([], Object)
+        expect(hasWarned(_, 'Expected Object')).toBe(true)
+      })
+
+      it('array', function () {
+        makeInstance([], Array)
+        expect(_.warn).not.toHaveBeenCalled()
+        makeInstance({}, Array)
+        expect(hasWarned(_, 'Expected Array')).toBe(true)
+      })
+
+      it('custom constructor', function () {
+        function Class () {}
+        makeInstance(new Class(), Class)
+        expect(_.warn).not.toHaveBeenCalled()
+        makeInstance({}, Class)
+        expect(hasWarned(_, 'Expected custom type')).toBe(true)
+      })
+
+      it('custom validator', function () {
+        makeInstance(123, null, function (v) {
+          return v === 123
+        })
+        expect(_.warn).not.toHaveBeenCalled()
+        makeInstance(123, null, function (v) {
+          return v === 234
+        })
+        expect(hasWarned(_, 'custom validator check failed')).toBe(true)
+      })
+
+      it('type check + custom validator', function () {
+        makeInstance(123, Number, function (v) {
+          return v === 123
+        })
+        expect(_.warn).not.toHaveBeenCalled()
+        makeInstance(123, Number, function (v) {
+          return v === 234
+        })
+        expect(hasWarned(_, 'custom validator check failed')).toBe(true)
+        makeInstance(123, String, function (v) {
+          return v === 123
+        })
+        expect(hasWarned(_, 'Expected String')).toBe(true)
+      })
+
+      it('required', function () {
+        var vm = new Vue({
+          el: document.createElement('div'),
+          template: '<test></test>',
+          components: {
+            test: {
+              props: [
+                {
+                  name: 'prop',
+                  required: true
+                }
+              ]
+            }
+          }
+        })
+        expect(hasWarned(_, 'Missing required prop')).toBe(true)
+      })
+
+    })
   })
 }