fix: bindFirestoreRef not reacting to getter (#1496)

* fix: bindFirestoreRef not reacting to getter * fix: checking if references typeof is function * test: list/collection can be bound to getter

Author: ralacerda

src/database/useDatabaseRef.ts

@@ -134,7 +134,7 @@ export function _useDatabaseRef(
  }
 
  let stopWatcher = noop
- if (isRef(reference)) {
+ if (isRef(reference) || typeof reference === 'function') {
  stopWatcher = watch(reference, bindDatabaseRef)
  }
  bindDatabaseRef()

src/firestore/useFirestoreRef.ts

@@ -164,7 +164,7 @@ export function _useFirestoreRef(
  }
 
  let stopWatcher = noop
- if (isRef(docOrCollectionRef)) {
+ if (isRef(docOrCollectionRef) || typeof docOrCollectionRef === 'function') {
  stopWatcher = watch(docOrCollectionRef, bindFirestoreRef)
  }
 

src/storage/index.ts

@@ -75,7 +75,7 @@ export function useStorageFileUrl(
  }
 
  refresh()
- if (isRef(storageRef)) {
+ if (isRef(storageRef) || typeof storageRef === 'function') {
  watch(storageRef, refresh)
  }
 
@@ -255,7 +255,7 @@ export function useStorageFile(
  return Promise.all([refreshUrl(), refreshMetadata()])
  }
 
- if (isRef(storageRef)) {
+ if (isRef(storageRef) || typeof storageRef === 'function') {
  watch(storageRef, (storageSource) => {
  if (!storageSource) {
  if (uploadTask.value) {

tests/database/list.spec.ts

@@ -287,6 +287,33 @@ describe('Database lists', () => {
  expect(data.value).toContainEqual({ text: 'task 3' })
  })
 
+ it('can be bound to a getter', async () => {
+ const listA = databaseRef()
+ const listB = databaseRef()
+ await push(listA, { text: 'task 1' })
+ await push(listA, { text: 'task 2' })
+ await push(listB, { text: 'task 3' })
+ await push(listA, { text: 'task 4' })
+ const showFinished = ref(true)
+
+ const { wrapper, data, promise } = factory({
+ ref: () => (showFinished.value ? listA : listB),
+ })
+
+ await promise.value
+ expect(data.value).toHaveLength(3)
+ expect(data.value).toContainEqual({ text: 'task 1' })
+ expect(data.value).toContainEqual({ text: 'task 2' })
+ expect(data.value).toContainEqual({ text: 'task 4' })
+
+ showFinished.value = false
+ await nextTick()
+ await promise.value
+ await nextTick()
+ expect(data.value).toHaveLength(1)
+ expect(data.value).toContainEqual({ text: 'task 3' })
+ })
+
  it('reorders items in the array', async () => {
  const listRef = databaseRef()
  const orderedListRef = query(listRef, orderByChild('n'))

tests/firestore/collection.spec.ts

@@ -74,7 +74,7 @@ describe(
 
  function factoryQuery<
  AppModelType = DocumentData,
- DbModelType extends DocumentData = DocumentData
+ DbModelType extends DocumentData = DocumentData,
  >({
  options,
  ref,
@@ -358,8 +358,8 @@ describe(
  showFinished.value
  ? finishedListRef
  : showFinished.value === false
- ? unfinishedListRef
- : null
+  ? unfinishedListRef
+  : null
  )
  await addDoc(listRef, { text: 'task 1', finished: false })
  await addDoc(listRef, { text: 'task 2', finished: false })
@@ -398,6 +398,31 @@ describe(
  expect(data.value).toContainEqual({ text: 'task 3', finished: true })
  })
 
+ it('can be bound to a getter', async () => {
+ const listCollectionRef = collection<{ name: string }>(
+ 'populatedCollection'
+ )
+ const collectionName = ref('populatedCollection')
+
+ const { wrapper, promise } = factory({
+ ref: () => collection(collectionName.value),
+ })
+
+ await promise.value
+ await addDoc(listCollectionRef, { name: 'a' })
+ await addDoc(listCollectionRef, { name: 'b' })
+
+ expect(wrapper.vm.list).toHaveLength(2)
+ expect(wrapper.vm.list).toContainEqual({ name: 'a' })
+ expect(wrapper.vm.list).toContainEqual({ name: 'b' })
+
+ collectionName.value = 'emptyCollection'
+ await nextTick()
+ await promise.value
+ await nextTick()
+ expect(wrapper.vm.list).toHaveLength(0)
+ })
+
  it('can be bound to a null ref', async () => {
  const { showFinished, listToDisplay } = await createFilteredLists()
  showFinished.value = null