test(storage): add tests

Author: posva

Diff for: src/storage/index.ts

@@ -56,14 +56,16 @@ export function useStorageUrl(
     url.value
   ) as string
   const promise = ref<Promise<string | null>>(Promise.resolve(null))
+  // TODO: pending and error states?
   let removePendingPromise = noop
 
   function refresh() {
     const storageSource = unref(storageRef)
     if (storageSource) {
-      promise.value = getDownloadURL(storageSource).then(
-        (downloadUrl) => (url.value = downloadUrl)
-      )
+      promise.value = getDownloadURL(storageSource)
+        .then((downloadUrl) => (url.value = downloadUrl))
+        // TODO: refactor with error states
+        .catch(() => null)
     } else {
       promise.value = Promise.resolve((url.value = null))
     }
@@ -117,9 +119,10 @@ export function useStorageMetadata(
   function refresh() {
     const storageSource = unref(storageRef)
     if (storageSource) {
-      promise.value = getMetadata(storageSource).then(
-        (data) => (metadata.value = data)
-      )
+      promise.value = getMetadata(storageSource)
+        .then((data) => (metadata.value = data))
+        // TODO: refactor with error states
+        .catch(() => null)
     } else {
       promise.value = Promise.resolve((metadata.value = null))
     }
@@ -215,19 +218,19 @@ export function useStorageObject(
         snapshot.value = newSnapshot
       })
 
-      newTask.then((finalSnapshot) => {
-        uploadTask.value = null
-        unsub()
-        metadata.value = finalSnapshot.metadata
-        // get the new download URL
-        refreshUrl()
-      })
-
-      newTask.catch((err) => {
-        unsub()
-        uploadTask.value = null
-        uploadError.value = err
-      })
+      return newTask
+        .then((finalSnapshot) => {
+          metadata.value = finalSnapshot.metadata
+          // get the new download URL
+          refreshUrl()
+        })
+        .catch((err) => {
+          uploadError.value = err
+        })
+        .finally(() => {
+          unsub()
+          uploadTask.value = null
+        })
     }
   }
 

Diff for: storage.rules

@@ -1,6 +1,9 @@
 rules_version = '2';
 service firebase.storage {
   match /b/{bucket}/o {
+    match /tests/{allPaths=**} {
+      allow read, write: if true;
+    }
     match /{allPaths=**} {
       allow read, write: if false;
     }

Diff for: tests/storage/index.spec.ts

@@ -0,0 +1,81 @@
+import { mount } from '@vue/test-utils'
+import { it, describe, expect } from 'vitest'
+import { uploadString } from 'firebase/storage'
+import { nextTick, ref } from 'vue'
+import {
+  useStorage,
+  useStorageMetadata,
+  useStorageObject,
+  useStorageUrl,
+} from '../../src'
+import { setupStorageRefs } from '../utils'
+
+describe('Storage', () => {
+  const { storageRef } = setupStorageRefs()
+
+  it('generates a URL', async () => {
+    const objectRef = storageRef('my-url.jpg')
+    await uploadString(objectRef, 'test', 'raw')
+    const wrapper = mount({
+      template: 'no',
+      setup() {
+        const { url, promise } = useStorageUrl(objectRef)
+
+        return { url, promise }
+      },
+    })
+
+    await wrapper.vm.promise
+
+    expect(wrapper.vm.url).toBeTypeOf('string')
+    expect(wrapper.vm.url).toMatch(/my-url\.jpg/)
+  })
+
+  it('generates the metadata', async () => {
+    const objectRef = storageRef('my-url.jpg')
+    await uploadString(objectRef, 'test', 'raw')
+    const wrapper = mount({
+      template: 'no',
+      setup() {
+        const { metadata, promise } = useStorageMetadata(objectRef)
+
+        return { metadata, promise }
+      },
+    })
+
+    await wrapper.vm.promise
+
+    expect(wrapper.vm.metadata).toBeTypeOf('object')
+    expect(wrapper.vm.metadata).toMatchObject({
+      name: 'my-url.jpg',
+    })
+  })
+
+  it('can create upload tasks', async () => {
+    const objectRef = storageRef('my-url.jpg')
+    await uploadString(objectRef, 'test', 'raw')
+    const wrapper = mount({
+      template: 'no',
+      setup() {
+        const { uploadTask, upload, uploadProgress } =
+          useStorageObject(objectRef)
+
+        return { uploadTask, upload, uploadProgress }
+      },
+    })
+
+    await nextTick()
+
+    expect(wrapper.vm.uploadTask).toBeFalsy()
+    expect(wrapper.vm.uploadProgress).toBe(null)
+
+    // add a task
+    const p = wrapper.vm.upload(new Uint8Array([0x48, 0x65]))
+    expect(wrapper.vm.uploadTask).toBeTruthy()
+    expect(wrapper.vm.uploadProgress).toBeTypeOf('number')
+
+    await p
+    expect(wrapper.vm.uploadTask).toBeFalsy()
+    expect(wrapper.vm.uploadProgress).toBe(1) // 100%
+  })
+})

Diff for: tests/utils.ts

@@ -30,21 +30,59 @@ import {
   SetOptions,
   WithFieldValue,
 } from 'firebase/firestore'
+import {
+  connectStorageEmulator,
+  getStorage,
+  ref as storageRef,
+  StorageReference,
+  deleteObject,
+  listAll,
+} from 'firebase/storage'
 import { afterAll, beforeAll } from 'vitest'
 import { nextTick } from 'vue'
 import { isCollectionRef, isDocumentRef } from '../src/shared'
 
-export const firebaseApp = initializeApp({ projectId: 'vue-fire-store' })
+export const firebaseApp = initializeApp({
+  projectId: 'vue-fire-store',
+  storageBucket: 'vue-fire-store.appspot.com',
+})
 export const firestore = getFirestore(firebaseApp)
 export const database = getDatabase(firebaseApp)
+export const storage = getStorage(firebaseApp)
 
 connectFirestoreEmulator(firestore, 'localhost', 8080)
 connectDatabaseEmulator(database, 'localhost', 8081)
+connectStorageEmulator(storage, 'localhost', 9199)
 
 let _id = 0
 
+// Storage
+export function setupStorageRefs() {
+  const bucket = `tests/${Date.now()}-${_id++}/`
+  function _storageRef(
+    storageRefOrPath?: string | StorageReference,
+    path?: string
+  ): StorageReference {
+    const _storage =
+      (typeof storageRefOrPath === 'string' ? storage : storageRefOrPath) ||
+      storage
+    const _path =
+      (typeof storageRefOrPath === 'string' ? storageRefOrPath : path) ||
+      `test/${_id++}.jpg`
+    return storageRef(_storage, bucket + _path)
+  }
+
+  afterAll(async () => {
+    const list = await listAll(storageRef(storage, bucket))
+    await Promise.all(list.items.map((item) => deleteObject(item)))
+  })
+
+  return { storageRef: _storageRef }
+}
+
 // Firestore
-export function setupFirestoreRefs() {
+// TODO: use the id in all tests to try if it makes them more stable
+export function setupFirestoreRefs(id?: string) {
   const testId = _id++
   const testsCollection = collection(firestore, `__tests`)
   const itemRef = doc(testsCollection)
@@ -65,9 +103,11 @@ export function setupFirestoreRefs() {
       deleteDoc(itemRef),
       ...[...docsToClean].map((doc) => deleteDoc(doc)),
     ])
+
     await Promise.all(
       [...collectionsToClean].map((collection) => clearCollection(collection))
     )
+
     await clearCollection(forDocRefs)
     // must be done after the cleanup of its docs
     await deleteDoc(forCollectionRefs)