fix: bindFirestoreRef not reacting to getter (#1496)

ralacerda · web-flow · commit e459dd18ad7b · 2024-02-23T08:55:52.000+01:00
* fix: bindFirestoreRef not reacting to getter

* fix: checking if references typeof is function

* test: list/collection can be bound to getter
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

Original file line number	Diff line number	Diff line change
`@@ -134,7 +134,7 @@ export function _useDatabaseRef(`
`134`	`134`	`}`
`135`	`135`
`136`	`136`	`let stopWatcher = noop`
`137`		`- if (isRef(reference)) {`
	`137`	`+ if (isRef(reference) \|\| typeof reference === 'function') {`
`138`	`138`	`stopWatcher = watch(reference, bindDatabaseRef)`
`139`	`139`	`}`
`140`	`140`	`bindDatabaseRef()`
Original file line number	Diff line number	Diff line change
`@@ -164,7 +164,7 @@ export function _useFirestoreRef(`
`164`	`164`	`}`
`165`	`165`
`166`	`166`	`let stopWatcher = noop`
`167`		`- if (isRef(docOrCollectionRef)) {`
	`167`	`+ if (isRef(docOrCollectionRef) \|\| typeof docOrCollectionRef === 'function') {`
`168`	`168`	`stopWatcher = watch(docOrCollectionRef, bindFirestoreRef)`
`169`	`169`	`}`
`170`	`170`
Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,7 @@ export function useStorageFileUrl(`
`75`	`75`	`}`
`76`	`76`
`77`	`77`	`refresh()`
`78`		`- if (isRef(storageRef)) {`
	`78`	`+ if (isRef(storageRef) \|\| typeof storageRef === 'function') {`
`79`	`79`	`watch(storageRef, refresh)`
`80`	`80`	`}`
`81`	`81`
`@@ -255,7 +255,7 @@ export function useStorageFile(`
`255`	`255`	`return Promise.all([refreshUrl(), refreshMetadata()])`
`256`	`256`	`}`
`257`	`257`
`258`		`- if (isRef(storageRef)) {`
	`258`	`+ if (isRef(storageRef) \|\| typeof storageRef === 'function') {`
`259`	`259`	`watch(storageRef, (storageSource) => {`
`260`	`260`	`if (!storageSource) {`
`261`	`261`	`if (uploadTask.value) {`