tests for attribute interpolation

Author: yyx990803

src/directives/public/bind.js

@@ -45,9 +45,11 @@ module.exports = {
           'in valid native attributes. "' + attr + '" ' +
           'is not a valid attribute on <' + this.el.tagName.toLowerCase() + '>.'
         )
+        this.el.removeAttribute(attr)
         this.invalid = true
       }
 
+      /* istanbul ignore if */
       if (process.env.NODE_ENV !== 'production') {
         var raw = attr + '="' + this.descriptor.raw + '": '
         // warn src
@@ -71,7 +73,9 @@ module.exports = {
   },
 
   update: function (value) {
-    if (this.invalid) return
+    if (this.invalid) {
+      return
+    }
     var attr = this.arg
     if (inputProps[attr] && attr in this.el) {
       if (!this.valueRemoved) {

test/unit/specs/compiler/compile_spec.js

@@ -469,5 +469,48 @@ if (_.inBrowser) {
       expect(el.innerHTML).toBe('<test test="1">{{a}}</test>')
     })
 
+    it('attribute interpolation', function (done) {
+      var vm = new Vue({
+        el: el,
+        template: '<div id="{{a}}" class="b {{c}} d"></div>',
+        data: {
+          a: 'aaa',
+          c: 'ccc'
+        }
+      })
+      expect(el.innerHTML).toBe('<div id="aaa" class="b ccc d"></div>')
+      vm.a = 'aa'
+      vm.c = 'cc'
+      _.nextTick(function () {
+        expect(el.innerHTML).toBe('<div id="aa" class="b cc d"></div>')
+        done()
+      })
+    })
+
+    it('attribute interpolation: special cases', function () {
+      new Vue({
+        el: el,
+        template: '<label for="{{a}}" data-test="{{b}}"></label><form accept-charset="{{c}}"></form>',
+        data: {
+          a: 'aaa',
+          b: 'bbb',
+          c: 'UTF-8'
+        }
+      })
+      expect(el.innerHTML).toBe('<label for="aaa" data-test="bbb"></label><form accept-charset="UTF-8"></form>')
+    })
+
+    it('attribute interpolation: warn invalid', function () {
+      new Vue({
+        el: el,
+        template: '<div hello="{{a}}"></div>',
+        data: {
+          a: '123'
+        }
+      })
+      expect(el.innerHTML).toBe('<div></div>')
+      expect(hasWarned(_, 'attribute interpolation is allowed only in valid native attributes')).toBe(true)
+    })
+
   })
 }