refactor(rtdb): expose bind and unbind

Author: posva

__tests__/vuefire/rtdb/bind.spec.ts

@@ -1,159 +1,170 @@
-import { rtdbPlugin } from '../../src'
-import { Vue, tick, MockFirebase } from '@posva/vuefire-test-helpers'
-
-Vue.use(rtdbPlugin)
+import { mount } from '@vue/test-utils'
+import { rtdbPlugin } from '../../../src'
+import { tick, MockFirebase } from '../../src'
 
 describe('RTDB: manual bind', () => {
-  async function createVm() {
+  async function factory() {
     const source = new MockFirebase().child('data')
-    const vm = new Vue({
-      // purposely set items as null
-      // but it's a good practice to set it to an empty array
-      data: () => ({
-        items: [],
-        item: null,
-      }),
-    })
+    const wrapper = mount(
+      {
+        template: 'no',
+        // purposely set items as null
+        // but it's a good practice to set it to an empty array
+        data: () => ({
+          items: [],
+          item: null,
+        }),
+      },
+      {
+        global: {
+          plugins: [rtdbPlugin],
+        },
+      }
+    )
+
     await tick()
 
-    return { vm, source }
+    return { wrapper, source }
   }
 
   it('manually binds as an array', async () => {
-    const { vm, source } = await createVm()
-    expect(vm.items).toEqual([])
-    const promise = vm.$rtdbBind('items', source)
-    expect(vm.items).toEqual([])
+    const { wrapper, source } = await factory()
+    expect(wrapper.vm.items).toEqual([])
+    const promise = wrapper.vm.$rtdbBind('items', source)
+    expect(wrapper.vm.items).toEqual([])
     source.push({ text: 'foo' })
     source.flush()
     await promise
-    expect(vm.items).toEqual([{ text: 'foo' }])
+    expect(wrapper.vm.items).toEqual([{ text: 'foo' }])
   })
 
   it('removes children in arrays', async () => {
-    const { vm, source } = await createVm()
+    const { wrapper, source } = await factory()
     source.autoFlush()
     source.push({ name: 'one' })
     source.push({ name: 'two' })
 
-    await vm.$rtdbBind('items', source)
-    source.child(vm.items[1]['.key']).remove()
-    expect(vm.items).toEqual([{ name: 'one' }])
+    await wrapper.vm.$rtdbBind('items', source)
+    source.child(wrapper.vm.items[1]['.key']).remove()
+    expect(wrapper.vm.items).toEqual([{ name: 'one' }])
   })
 
   it('returs a promise', async () => {
-    const { vm, source } = await createVm()
-    expect(vm.$rtdbBind('items', source) instanceof Promise).toBe(true)
-    expect(vm.$rtdbBind('item', source) instanceof Promise).toBe(true)
+    const { wrapper, source } = await factory()
+    expect(wrapper.vm.$rtdbBind('items', source) instanceof Promise).toBe(true)
+    expect(wrapper.vm.$rtdbBind('item', source) instanceof Promise).toBe(true)
   })
 
   it('manually binds as an object', async () => {
-    const { vm, source } = await createVm()
-    expect(vm.item).toEqual(null)
-    const promise = vm.$rtdbBind('item', source)
-    expect(vm.item).toEqual(null)
+    const { wrapper, source } = await factory()
+    expect(wrapper.vm.item).toEqual(null)
+    const promise = wrapper.vm.$rtdbBind('item', source)
+    expect(wrapper.vm.item).toEqual(null)
     source.set({ text: 'foo' })
     source.flush()
     await promise
-    expect(vm.item).toEqual({ text: 'foo' })
+    expect(wrapper.vm.item).toEqual({ text: 'foo' })
   })
 
   it('unbinds when overriting existing bindings', async () => {
-    const { vm, source } = await createVm()
+    const { wrapper, source } = await factory()
     source.autoFlush()
     source.set({ name: 'foo' })
-    await vm.$rtdbBind('item', source)
-    expect(vm.item).toEqual({ name: 'foo' })
+    await wrapper.vm.$rtdbBind('item', source)
+    expect(wrapper.vm.item).toEqual({ name: 'foo' })
     const other = new MockFirebase().child('other')
     other.autoFlush()
     other.set({ name: 'bar' })
-    await vm.$rtdbBind('item', other)
-    expect(vm.item).toEqual({ name: 'bar' })
+    await wrapper.vm.$rtdbBind('item', other)
+    expect(wrapper.vm.item).toEqual({ name: 'bar' })
 
     source.set({ name: 'new foo' })
-    expect(vm.item).toEqual({ name: 'bar' })
+    expect(wrapper.vm.item).toEqual({ name: 'bar' })
   })
 
   it('manually unbinds a ref', async () => {
-    const { vm, source } = await createVm()
+    const { wrapper, source } = await factory()
     source.autoFlush()
     source.set({ name: 'foo' })
-    await vm.$rtdbBind('item', source)
-    expect(vm.item).toEqual({ name: 'foo' })
-    vm.$rtdbUnbind('item')
+    await wrapper.vm.$rtdbBind('item', source)
+    expect(wrapper.vm.item).toEqual({ name: 'foo' })
+    wrapper.vm.$rtdbUnbind('item')
     source.set({ name: 'bar' })
-    expect(vm.item).toEqual(null)
+    expect(wrapper.vm.item).toEqual(null)
   })
 
   it('can customize the reset option through $rtdbBind', async () => {
-    const { vm, source } = await createVm()
+    const { wrapper, source } = await factory()
     const otherSource = new MockFirebase().child('data2')
     source.set({ name: 'foo' })
     otherSource.set({ name: 'bar' })
-    let p = vm.$rtdbBind('item', source)
+    let p = wrapper.vm.$rtdbBind('item', source)
     source.flush()
     await p
-    p = vm.$rtdbBind('item', otherSource, { reset: false })
-    expect(vm.item).toEqual({ name: 'foo' })
+    p = wrapper.vm.$rtdbBind('item', otherSource, { reset: false })
+    expect(wrapper.vm.item).toEqual({ name: 'foo' })
     otherSource.flush()
     await p
-    expect(vm.item).toEqual({ name: 'bar' })
+    expect(wrapper.vm.item).toEqual({ name: 'bar' })
     // should not apply last used option
-    p = vm.$rtdbBind('item', source)
-    expect(vm.item).toEqual(null)
+    p = wrapper.vm.$rtdbBind('item', source)
+    expect(wrapper.vm.item).toEqual(null)
     source.flush()
   })
 
   it('can customize the reset option through $rtdbUnbind', async () => {
-    const { vm, source } = await createVm()
+    const { wrapper, source } = await factory()
     source.autoFlush()
     source.set({ name: 'foo' })
     const otherSource = new MockFirebase().child('data2')
     otherSource.set({ name: 'bar' })
     otherSource.autoFlush()
-    await vm.$rtdbBind('item', source)
-    expect(vm.item).toEqual({ name: 'foo' })
-    vm.$rtdbUnbind('item', false)
-    expect(vm.item).toEqual({ name: 'foo' })
+    await wrapper.vm.$rtdbBind('item', source)
+    expect(wrapper.vm.item).toEqual({ name: 'foo' })
+    wrapper.vm.$rtdbUnbind('item', false)
+    expect(wrapper.vm.item).toEqual({ name: 'foo' })
     // should not apply the option to the next unbind call
-    await vm.$rtdbBind('item', otherSource, { reset: false })
-    expect(vm.item).toEqual({ name: 'bar' })
-    vm.$rtdbUnbind('item')
-    expect(vm.item).toEqual(null)
+    await wrapper.vm.$rtdbBind('item', otherSource, { reset: false })
+    expect(wrapper.vm.item).toEqual({ name: 'bar' })
+    wrapper.vm.$rtdbUnbind('item')
+    expect(wrapper.vm.item).toEqual(null)
   })
 
   it('do not reset if wait: true', async () => {
-    const { vm, source } = await createVm()
+    const { wrapper, source } = await factory()
     const otherSource = new MockFirebase().child('data2')
 
     // source.autoFlush()
-    let p = vm.$rtdbBind('items', source)
+    let p = wrapper.vm.$rtdbBind('items', source)
     source.push({ name: 'foo' })
     source.flush()
     await p
-    p = vm.$rtdbBind('items', otherSource, { wait: true, reset: true })
-    expect(vm.items).toEqual([{ name: 'foo' }])
+    p = wrapper.vm.$rtdbBind('items', otherSource, { wait: true, reset: true })
+    expect(wrapper.vm.items).toEqual([{ name: 'foo' }])
     otherSource.push({ name: 'bar' })
     otherSource.flush()
     await p
-    expect(vm.items).toEqual([{ name: 'bar' }])
+    expect(wrapper.vm.items).toEqual([{ name: 'bar' }])
   })
 
   it('wait + reset can be overriden with a function', async () => {
-    const { vm, source } = await createVm()
+    const { wrapper, source } = await factory()
     const otherSource = new MockFirebase().child('data2')
 
     // source.autoFlush()
-    let p = vm.$rtdbBind('items', source)
+    let p = wrapper.vm.$rtdbBind('items', source)
     source.push({ name: 'foo' })
     source.flush()
     await p
     // using an array is important as we use that to choose between bindAsObject and bindAsArray
-    p = vm.$rtdbBind('items', otherSource, { wait: true, reset: () => ['foo'] })
-    expect(vm.items).toEqual(['foo'])
+    p = wrapper.vm.$rtdbBind('items', otherSource, {
+      wait: true,
+      reset: () => ['foo'],
+    })
+    expect(wrapper.vm.items).toEqual(['foo'])
     otherSource.push({ name: 'bar' })
     otherSource.flush()
     await p
-    expect(vm.items).toEqual([{ name: 'bar' }])
+    expect(wrapper.vm.items).toEqual([{ name: 'bar' }])
   })
 })

src/vuefire/index.ts

@@ -1,5 +1,4 @@
-// TODO: add binds
-// export { rtdbPlugin } from './rtdb'
+export { rtdbPlugin, bind as rtdbBind, unbind as rtdbUnbind } from './rtdb'
 export {
   firestorePlugin,
   bind as firestoreBind,