tests for new prop- syntax

src/compiler/compile.js

@@ -587,6 +587,7 @@ function compileDirectives (attrs, options) {
     } else
 
     // should not see props here
+    /* istanbul ignore if */
     if (process.env.NODE_ENV !== 'production' && propRE.test(name)) {
       _.warn(
         name + '="' + value + '" is not compiled. The prop is either not declared ' +

test/unit/specs/compiler/compile_spec.js

@@ -289,6 +289,46 @@ if (_.inBrowser) {
       expect(vm._data.withDataPrefix).toBe(1)
     })
 
+    it('new prop syntax', function () {
+      var bindingModes = Vue.config._propBindingModes
+      var props = [
+        { name: 'testNormal' },
+        { name: 'testLiteral' },
+        { name: 'testTwoWay' },
+        { name: 'twoWayWarn' },
+        { name: 'testOneTime' }
+      ]
+      el.setAttribute('prop-test-normal', 'a')
+      el.setAttribute('prop-test-literal', '1')
+      el.setAttribute('prop-test-two-way', '@a')
+      el.setAttribute('prop-two-way-warn', '@a + 1')
+      el.setAttribute('prop-test-one-time', '*a')
+      compiler.compileAndLinkProps(vm, el, props)
+      expect(vm._bindDir.calls.count()).toBe(3) // skip literal and one time
+      // literal
+      expect(vm.testLiteral).toBe('from parent: 1')
+      expect(vm._data.testLiteral).toBe('from parent: 1')
+      // one time
+      expect(vm.testOneTime).toBe('from parent: a')
+      expect(vm._data.testOneTime).toBe('from parent: a')
+      // normal
+      var args = vm._bindDir.calls.argsFor(0)
+      expect(args[0]).toBe('prop')
+      expect(args[1]).toBe(null)
+      expect(args[2].path).toBe('testNormal')
+      expect(args[2].parentPath).toBe('a')
+      expect(args[2].mode).toBe(bindingModes.ONE_WAY)
+      // two way
+      args = vm._bindDir.calls.argsFor(1)
+      expect(args[0]).toBe('prop')
+      expect(args[1]).toBe(null)
+      expect(args[2].path).toBe('testTwoWay')
+      expect(args[2].parentPath).toBe('a')
+      expect(args[2].mode).toBe(bindingModes.TWO_WAY)
+      // two way warn
+      expect(hasWarned(_, 'non-settable parent path')).toBe(true)
+    })
+
     it('props on root instance', function () {
       // temporarily remove vm.$parent
       var context = vm._context

test/unit/specs/directives/component_spec.js

@@ -378,7 +378,7 @@ if (_.inBrowser) {
         data: {
           view: 'view-a'
         },
-        template: '<component is="{{view}}" v-transition="test" transition-mode="in-out"></component>',
+        template: '<component is="{{view}}" transition="test" transition-mode="in-out"></component>',
         components: {
           'view-a': { template: 'AAA' },
           'view-b': { template: 'BBB' }
@@ -422,7 +422,7 @@ if (_.inBrowser) {
         data: {
           view: 'view-a'
         },
-        template: '<component is="{{view}}" v-transition="test" transition-mode="out-in"></component>',
+        template: '<component is="{{view}}" transition="test" transition-mode="out-in"></component>',
         components: {
           'view-a': { template: 'AAA' },
           'view-b': { template: 'BBB' }

test/unit/specs/directives/for/for_spec.js

@@ -594,7 +594,7 @@ if (_.inBrowser) {
       document.body.appendChild(el)
       var vm = new Vue({
         el: el,
-        template: '<div v-for="item in items" v-transition="test">{{item.a}}</div>',
+        template: '<div v-for="item in items" transition="test">{{item.a}}</div>',
         data: {
           items: [{a: 1}, {a: 2}, {a: 3}]
         },

test/unit/specs/directives/for/for_stagger_spec.js

@@ -18,7 +18,7 @@ describe('v-for staggering transitions', function () {
   it('as attribute', function (done) {
     var vm = new Vue({
       el: el,
-      template: '<div v-for="item in list" v-transition="stagger" stagger="' + delayAmount + '">{{item.a}}</div>',
+      template: '<div v-for="item in list" transition="stagger" stagger="' + delayAmount + '">{{item.a}}</div>',
       data: {
         list: []
       },
@@ -39,7 +39,7 @@ describe('v-for staggering transitions', function () {
   it('as hook', function (done) {
     var vm = new Vue({
       el: el,
-      template: '<div v-for="item in list" v-transition="stagger">{{item.a}}</div>',
+      template: '<div v-for="item in list" transition="stagger">{{item.a}}</div>',
       data: {
         list: []
       },
@@ -63,7 +63,7 @@ describe('v-for staggering transitions', function () {
   it('remove while staggered', function (done) {
     var vm = new Vue({
       el: el,
-      template: '<div v-for="item in list" v-transition="stagger" stagger="' + delayAmount + '">{{item.a}}</div>',
+      template: '<div v-for="item in list" transition="stagger" stagger="' + delayAmount + '">{{item.a}}</div>',
       data: {
         list: []
       },
@@ -94,7 +94,7 @@ describe('v-for staggering transitions', function () {
   it('reorder while staggered', function (done) {
     var vm = new Vue({
       el: el,
-      template: '<div v-for="item in list" v-transition="stagger" stagger="' + delayAmount + '">{{item.a}}</div>',
+      template: '<div v-for="item in list" transition="stagger" stagger="' + delayAmount + '">{{item.a}}</div>',
       data: {
         list: []
       },

test/unit/specs/directives/transition_spec.js

@@ -3,7 +3,7 @@ var Vue = _.Vue
 var def = require('../../../../src/directives/transition')
 
 if (_.inBrowser) {
-  describe('v-transition', function () {
+  describe('transition', function () {
 
     it('should instantiate a transition object with correct args', function () {
       var fns = {}
@@ -59,7 +59,7 @@ if (_.inBrowser) {
       }
       var vm = new Vue({
         el: el,
-        template: '<div v-show="show" v-transition="{{trans}}"></div>',
+        template: '<div v-show="show" transition="{{trans}}"></div>',
         data: {
           show: true,
           trans: 'a'

test/unit/specs/stagger_transition_spec.js

@@ -18,7 +18,7 @@ describe('Staggering Transitions', function () {
   it('as attribute', function (done) {
     var vm = new Vue({
       el: el,
-      template: '<div v-repeat="list" v-transition="stagger" stagger="' + delayAmount + '">{{a}}</div>',
+      template: '<div v-repeat="list" transition="stagger" stagger="' + delayAmount + '">{{a}}</div>',
       data: {
         list: []
       },
@@ -39,7 +39,7 @@ describe('Staggering Transitions', function () {
   it('as hook', function (done) {
     var vm = new Vue({
       el: el,
-      template: '<div v-repeat="list" v-transition="stagger">{{a}}</div>',
+      template: '<div v-repeat="list" transition="stagger">{{a}}</div>',
       data: {
         list: []
       },
@@ -63,7 +63,7 @@ describe('Staggering Transitions', function () {
   it('remove while staggered', function (done) {
     var vm = new Vue({
       el: el,
-      template: '<div v-repeat="list" v-transition="stagger" stagger="' + delayAmount + '">{{a}}</div>',
+      template: '<div v-repeat="list" transition="stagger" stagger="' + delayAmount + '">{{a}}</div>',
       data: {
         list: []
       },
@@ -94,7 +94,7 @@ describe('Staggering Transitions', function () {
   it('reorder while staggered', function (done) {
     var vm = new Vue({
       el: el,
-      template: '<div v-repeat="list" v-transition="stagger" stagger="' + delayAmount + '">{{a}}</div>',
+      template: '<div v-repeat="list" transition="stagger" stagger="' + delayAmount + '">{{a}}</div>',
       data: {
         list: []
       },