fix unit tests for attr, class, style & el

src/directives/internal/el.js

@@ -5,6 +5,9 @@ module.exports = {
   priority: 1500,
 
   update: function (id) {
+    if (this.id) {
+      this.unbind()
+    }
     this.id = id
     var refs = (this._scope || this.vm).$$
     if (refs.hasOwnProperty(id)) {
@@ -16,7 +19,7 @@ module.exports = {
 
   unbind: function () {
     var refs = (this._scope || this.vm).$$
-    if (refs[this.id] !== this.el) {
+    if (refs[this.id] === this.el) {
       refs[this.id] = null
     }
   }

src/directives/internal/style.js

@@ -8,6 +8,8 @@ var propCache = {}
 
 module.exports = {
 
+  deep: true,
+
   update: function (value) {
     if (typeof value === 'object') {
       this.objectHandler(value)

test/unit/specs/directives/internal/attr_spec.js

@@ -2,7 +2,7 @@ var _ = require('../../../../../src/util')
 var def = require('../../../../../src/directives/internal/attr')
 
 if (_.inBrowser) {
-  describe('attr', function () {
+  describe('bind-attr', function () {
 
     var el, dir
     beforeEach(function () {
@@ -12,7 +12,9 @@ if (_.inBrowser) {
     })
 
     it('normal attr', function () {
-      dir.arg = 'test'
+      dir.descriptor = {
+        arg: 'test'
+      }
 
       dir.update('ok')
       expect(el.getAttribute('test')).toBe('ok')
@@ -28,13 +30,17 @@ if (_.inBrowser) {
 
     it('should set property for input value', function () {
       dir.el = document.createElement('input')
-      dir.arg = 'value'
+      dir.descriptor = {
+        arg: 'value'
+      }
       dir.update('what')
       expect(dir.el.hasAttribute('value')).toBe(false)
       expect(dir.el.value).toBe('what')
       dir.el = document.createElement('input')
       dir.el.type = 'checkbox'
-      dir.arg = 'checked'
+      dir.descriptor = {
+        arg: 'checked'
+      }
       expect(dir.el.checked).toBe(false)
       dir.update(true)
       expect(dir.el.checked).toBe(true)
@@ -42,8 +48,9 @@ if (_.inBrowser) {
 
     it('xlink', function () {
       var xlinkNS = 'http://www.w3.org/1999/xlink'
-      dir.arg = 'xlink:special'
-
+      dir.descriptor = {
+        arg: 'xlink:special'
+      }
       dir.update('ok')
       expect(el.getAttributeNS(xlinkNS, 'special')).toBe('ok')
       dir.update('again')

test/unit/specs/directives/internal/class_spec.js

@@ -9,19 +9,7 @@ if (_.inBrowser) {
       el = document.createElement('div')
     })
 
-    it('with className', function () {
-      el.className = 'haha'
-      var dir = _.extend({
-        el: el,
-        arg: 'test'
-      }, def)
-      dir.update(true)
-      expect(el.className).toBe('haha test')
-      dir.update(false)
-      expect(el.className).toBe('haha')
-    })
-
-    it('without className', function () {
+    it('plain string', function () {
       el.className = 'haha'
       var dir = _.extend({ el: el }, def)
       dir.update('test')

test/unit/specs/directives/internal/el_spec.js

@@ -32,7 +32,7 @@ if (_.inBrowser) {
       })
     })
 
-    it('bind-el', function () {
+    it('bind-el', function (done) {
       var vm = new Vue({
         el: el,
         data: {
@@ -42,7 +42,13 @@ if (_.inBrowser) {
       })
       expect(vm.$$.test).toBeTruthy()
       expect(vm.$$.test.id).toBe('test')
-      expect(_.log).toHaveBeenCalled()
+      vm.id = 'changed'
+      _.nextTick(function () {
+        expect(vm.$$.test).toBeNull()
+        expect(vm.$$.changed).toBeTruthy()
+        expect(vm.$$.changed.id).toBe('test')
+        done()
+      })
     })
 
     it('inside v-for', function () {

test/unit/specs/directives/internal/style_spec.js

@@ -27,69 +27,69 @@ if (_.inBrowser) {
       _.extend(dir, def)
     })
 
-    it('normal with arg', function () {
-      dir.arg = 'color'
-      dir.update('red')
-      expect(el.style.color).toBe('red')
-    })
-
-    it('normal no arg', function () {
+    it('plain CSS string', function () {
       dir.update('color:red;')
       expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;')
     })
 
     it('!important', function () {
-      dir.arg = 'color'
-      dir.update('red !important;')
+      dir.update({
+        color: 'red !important;'
+      })
       expect(el.style.getPropertyPriority('color')).toBe('important')
     })
 
     it('camel case', function () {
-      dir.arg = 'marginLeft'
-      dir.update('30px')
+      dir.update({
+        marginLeft: '30px'
+      })
       expect(el.style.marginLeft).toBe('30px')
     })
 
     it('remove on falsy value', function () {
       el.style.color = 'red'
-      dir.arg = 'color'
-      dir.update(null)
+      dir.update({
+        color: null
+      })
       expect(el.style.color).toBe('')
     })
 
     it('ignore unsupported property', function () {
-      dir.arg = 'unsupported'
-      dir.update('test')
+      dir.update({
+        unsupported: 'test'
+      })
       expect(el.style.unsupported).not.toBe('test')
     })
 
     it('auto prefixing', function () {
       var prop = checkPrefixedProp('transform')
-      dir.arg = 'transform'
       var val = 'scale(0.5)'
-      dir.update(val)
+      dir.update({
+        transform: val
+      })
       expect(el.style[prop]).toBe(val)
     })
 
-    it('update with object', function () {
+    it('object with multiple fields', function () {
       el.style.padding = '10px'
-      dir.update({color: 'red', marginRight: '30px'})
+
+      dir.update({
+        color: 'red',
+        marginRight: '30px'
+      })
       expect(el.style.getPropertyValue('color')).toBe('red')
       expect(el.style.getPropertyValue('margin-right')).toBe('30px')
       expect(el.style.getPropertyValue('padding')).toBe('10px')
-      dir.update({color: 'blue', padding: null })
+
+      dir.update({
+        color: 'blue',
+        padding: null
+      })
       expect(el.style.getPropertyValue('color')).toBe('blue')
       expect(el.style.getPropertyValue('margin-right')).toBeFalsy()
       expect(el.style.getPropertyValue('padding')).toBeFalsy()
     })
 
-    it('update with object and auto prefix', function () {
-      var prop = checkPrefixedProp('transform')
-      var val = 'scale(0.5)'
-      dir.update({transform: val})
-      expect(el.style[prop]).toBe(val)
-    })
-
     it('updates object deep', function (done) {
       el.setAttribute('bind-style', 'divStyling')
       var vm = new Vue({