feat(bind): manual bind with $bind

Author: posva

src/index.js

@@ -44,7 +44,7 @@ function bindDocument ({
 
   const unbind = document.onSnapshot((doc) => {
     // TODO test doc.exist
-    console.log('doc data', doc)
+    // console.log('doc data', doc)
     const [data, refs] = extractRefs(createSnapshot(doc))
     vm[key] = data
     return
@@ -66,29 +66,41 @@ function bindDocument ({
   }
 }
 
+function bind ({ vm, key, ref }) {
+  if (ref.add) {
+    bindCollection({
+      vm,
+      key,
+      collection: ref,
+    })
+  } else {
+    bindDocument({
+      vm,
+      key,
+      document: ref,
+    })
+  }
+}
+
 function install (Vue, options) {
   Vue.mixin({
     created () {
       const { firestore } = this.$options
       if (!firestore) return
       Object.keys(firestore).forEach(key => {
-        const ref = firestore[key]
-        if (ref.add) {
-          bindCollection({
-            vm: this,
-            key,
-            collection: ref,
-          })
-        } else {
-          bindDocument({
-            vm: this,
-            key,
-            document: ref,
-          })
-        }
+        this.$bind(key, firestore[key])
       })
     }
   })
+
+  // TODO test if $bind exist and warns
+  Vue.prototype.$bind = function (key, ref) {
+    bind({
+      vm: this,
+      key,
+      ref,
+    })
+  }
 }
 
 export default install

test/bind.js

@@ -0,0 +1,41 @@
+import test from 'ava'
+import Vuefire from '../src'
+import {
+  createSnapshot
+} from '../src/utils'
+import {
+  db,
+  tick,
+  Vue
+} from './helpers'
+
+Vue.use(Vuefire)
+
+test.beforeEach(async t => {
+  t.context.collection = db.collection()
+  t.context.document = t.context.collection.doc()
+  t.context.vm = new Vue({
+    render (h) {
+      return h('ul', this.items && this.items.map(
+        item => h('li', [item])
+      ))
+    },
+    // purposely set items as null
+    // but it's a good practice to set it to an empty array
+    data: () => ({
+      items: null,
+      item: null,
+    }),
+  }).$mount()
+  await tick()
+})
+
+test('manually binds a collection', async t => {
+  const vm = t.context.vm
+  const collection = t.context.collection
+  t.deepEqual(vm.items, null)
+  await vm.$bind('items', collection)
+  t.deepEqual(vm.items, [])
+  await collection.add({ text: 'foo' })
+  t.deepEqual(vm.items, [{ text: 'foo' }])
+})