tests for unbind

Author: yyx990803

src/vuefire.js

@@ -140,11 +140,21 @@ function bindAsObject (vm, key, source, cancelCallback) {
  * @param {string} key
  */
 function unbind (vm, key) {
-  var source = vm._firebaseSources[key]
+  var source = vm._firebaseSources && vm._firebaseSources[key]
+  if (!source) {
+    throw new Error(
+      'VueFire: unbind failed: "' + key + '" is not bound to ' +
+      'a Firebase reference.'
+    )
+  }
   var listeners = vm._firebaseListeners[key]
   for (var event in listeners) {
     source.off(event, listeners[event])
   }
+  vm[key] = null
+  vm.$firebaseRefs[key] = null
+  vm._firebaseSources[key] = null
+  vm._firebaseListeners[key] = null
 }
 
 var VueFireMixin = {
@@ -159,8 +169,11 @@ var VueFireMixin = {
     }
   },
   beforeDestroy: function () {
+    if (!this.$firebaseRefs) return
     for (var key in this.$firebaseRefs) {
-      unbind(this, key)
+      if (this.$firebaseRefs[key]) {
+        this.$unbind(key)
+      }
     }
     this.$firebaseRefs = null
     this._firebaseSources = null
@@ -176,13 +189,27 @@ var VueFireMixin = {
 function install (_Vue) {
   Vue = _Vue
   Vue.mixin(VueFireMixin)
+
   // use object-based merge strategy
   var mergeStrats = Vue.config.optionMergeStrategies
   mergeStrats.firebase = mergeStrats.methods
+
   // extend instance methods
-  Vue.prototype.$bind = function (key, source) {
-    bind(this, key, source)
+  Vue.prototype.$bindAsObject = function (key, source, cancelCallback) {
+    bind(this, key, {
+      source: source,
+      asObject: true,
+      cancelCallback: cancelCallback
+    })
   }
+
+  Vue.prototype.$bindAsArray = function (key, source, cancelCallback) {
+    bind(this, key, {
+      source: source,
+      cancelCallback: cancelCallback
+    })
+  }
+
   Vue.prototype.$unbind = function (key) {
     unbind(this, key)
   }

tests/.eslintrc

@@ -3,6 +3,7 @@
     "mocha": true
   },
   "globals": {
-    "expect": true
+    "expect": true,
+    "sinon": true
   }
 }

tests/vuefire.spec.js

@@ -691,4 +691,105 @@ describe('VueFire', function () {
       })
     })
   })
+
+  describe('unbind', function () {
+    it('throws error given unbound key', function () {
+      var vm = new Vue()
+      expect(function () {
+        vm.$unbind('items')
+      }).to.throw(/not bound to a Firebase reference/)
+    })
+
+    it('unbinds the state bound to Firebase as an array', function (done) {
+      var vm = new Vue({
+        firebase: {
+          items: firebaseRef
+        }
+      })
+      firebaseRef.set({
+        first: { index: 0 },
+        second: { index: 1 },
+        third: { index: 2 }
+      }, function () {
+        vm.$unbind('items')
+        expect(vm.items).to.be.null
+        expect(vm.$firebaseRefs.items).to.be.null
+        expect(vm._firebaseSources.items).to.be.null
+        expect(vm._firebaseListeners.items).to.be.null
+        done()
+      })
+    })
+
+    it('unbinds the state bound to Firebase as an object', function (done) {
+      var vm = new Vue({
+        firebase: {
+          items: {
+            source: firebaseRef,
+            asObject: true
+          }
+        }
+      })
+      firebaseRef.set({
+        first: { index: 0 },
+        second: { index: 1 },
+        third: { index: 2 }
+      }, function () {
+        vm.$unbind('items')
+        expect(vm.items).to.be.null
+        expect(vm.$firebaseRefs.items).to.be.null
+        expect(vm._firebaseSources.items).to.be.null
+        expect(vm._firebaseListeners.items).to.be.null
+        done()
+      })
+    })
+
+    it('unbinds all bound state when the component unmounts', function (done) {
+      var vm = new Vue({
+        firebase: {
+          item0: firebaseRef,
+          item1: {
+            source: firebaseRef,
+            asObject: true
+          }
+        }
+      })
+      sinon.spy(vm, '$unbind')
+      firebaseRef.set({
+        first: { index: 0 },
+        second: { index: 1 },
+        third: { index: 2 }
+      }, function () {
+        vm.$destroy()
+        expect(vm.$unbind).to.have.been.calledTwice
+        expect(vm.item0).to.be.null
+        expect(vm.item1).to.be.null
+        done()
+      })
+    })
+
+    it('handles already unbound state when the component unmounts', function (done) {
+      var vm = new Vue({
+        firebase: {
+          item0: firebaseRef,
+          item1: {
+            source: firebaseRef,
+            asObject: true
+          }
+        }
+      })
+      sinon.spy(vm, '$unbind')
+      firebaseRef.set({
+        first: { index: 0 },
+        second: { index: 1 },
+        third: { index: 2 }
+      }, function () {
+        vm.$unbind('item0')
+        vm.$destroy()
+        expect(vm.$unbind).to.have.been.calledTwice
+        expect(vm.item0).to.be.null
+        expect(vm.item1).to.be.null
+        done()
+      })
+    })
+  })
 })