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
vuejs · Feb 23, 2024 · e459dd1 · e459dd1
1 parent 69706b2
commit e459dd1
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 7 deletions.
diff --git a/src/database/useDatabaseRef.ts b/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()

diff --git a/src/firestore/useFirestoreRef.ts b/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)
   }
 

diff --git a/src/storage/index.ts b/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) {

diff --git a/tests/database/list.spec.ts b/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'))

diff --git a/tests/firestore/collection.spec.ts b/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