feat: upload limit test

Author: ChengShi-1

src/sections/shared/file-uploader/FileUploader.tsx

@@ -1,5 +1,6 @@
 import { File as FileModel } from '@/files/domain/models/File'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
+import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
 import { ReplaceFileReferrer } from '@/sections/replace-file/ReplaceFile'
 import { FileUploaderProvider } from './context/FileUploaderContext'
 import { useGetFixityAlgorithm } from './useGetFixityAlgorithm'
@@ -15,6 +16,7 @@ type FileUploaderProps =
       operationType: OperationType.REPLACE_FILE
       originalFile: FileModel
       referrer?: ReplaceFileReferrer
+      fetchUploadLimits?: (datasetId: string) => Promise<DatasetUploadLimits>
     }
   | {
       fileRepository: FileRepository
@@ -23,6 +25,7 @@ type FileUploaderProps =
       operationType: OperationType.ADD_FILES_TO_DATASET
       originalFile?: never
       referrer?: never
+      fetchUploadLimits?: (datasetId: string) => Promise<DatasetUploadLimits>
     }
 
 export type StorageType = 'S3'
@@ -41,7 +44,8 @@ export const FileUploader = ({
   storageType,
   operationType,
   originalFile,
-  referrer
+  referrer,
+  fetchUploadLimits
 }: FileUploaderProps) => {
   const { fixityAlgorithm, isLoadingFixityAlgorithm } = useGetFixityAlgorithm(fileRepository)
 
@@ -68,6 +72,7 @@ export const FileUploader = ({
       <FileUploaderPanel
         fileRepository={fileRepository}
         datasetPersistentId={datasetPersistentId}
+        fetchUploadLimits={fetchUploadLimits}
         referrer={referrer}
       />
     </FileUploaderProvider>

src/sections/shared/file-uploader/FileUploaderPanel.tsx

@@ -12,17 +12,20 @@ import { useFileUploaderContext } from './context/FileUploaderContext'
 import FileUploadInput from './file-upload-input/FileUploadInput'
 import { UploadedFilesList } from './uploaded-files-list/UploadedFilesList'
 import { ConfirmLeaveModal } from './confirm-leave-modal/ConfirmLeaveModal'
+import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
 
 interface FileUploaderPanelProps {
   fileRepository: FileRepository
   datasetPersistentId: string
   referrer?: ReplaceFileReferrer
+  fetchUploadLimits?: (datasetId: string) => Promise<DatasetUploadLimits>
 }
 
 const FileUploaderPanel = ({
   fileRepository,
   datasetPersistentId,
-  referrer
+  referrer,
+  fetchUploadLimits
 }: FileUploaderPanelProps) => {
   const { t } = useTranslation('shared')
   const navigate = useNavigate()
@@ -101,7 +104,11 @@ const FileUploaderPanel = ({
 
   return (
     <Stack gap={4}>
-      <FileUploadInput fileRepository={fileRepository} datasetPersistentId={datasetPersistentId} />
+      <FileUploadInput
+        fileRepository={fileRepository}
+        datasetPersistentId={datasetPersistentId}
+        fetchUploadLimits={fetchUploadLimits}
+      />
 
       {uploadedFiles.length > 0 && (
         <UploadedFilesList

src/sections/shared/file-uploader/file-upload-input/FileUploadInput.tsx

@@ -8,6 +8,7 @@ import cn from 'classnames'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
 import MimeTypeDisplay from '@/files/domain/models/FileTypeToFriendlyTypeMap'
 import { uploadFile } from '@/files/domain/useCases/uploadFile'
+import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
 import { useFileUploaderContext } from '../context/FileUploaderContext'
 import { FileUploadState, FileUploadStatus } from '../context/fileUploaderReducer'
 import { OperationType } from '../FileUploader'
@@ -19,14 +20,19 @@ import { useUploadLimit } from './useUploadLimit'
 type FileUploadInputProps = {
   fileRepository: FileRepository
   datasetPersistentId: string
+  fetchUploadLimits?: (datasetId: string) => Promise<DatasetUploadLimits>
 }
 
 const limit = 6
 const semaphore = new Semaphore(limit)
 
 const maxFilesPerUpload = 1000
 
-const FileUploadInput = ({ fileRepository, datasetPersistentId }: FileUploadInputProps) => {
+const FileUploadInput = ({
+  fileRepository,
+  datasetPersistentId,
+  fetchUploadLimits
+}: FileUploadInputProps) => {
   const {
     fileUploaderState,
     addFile,
@@ -47,7 +53,7 @@ const FileUploadInput = ({ fileRepository, datasetPersistentId }: FileUploadInpu
   const inputRef = useRef<HTMLInputElement>(null)
 
   const [isDragging, setIsDragging] = useState(false)
-  const { uploadLimit } = useUploadLimit(datasetPersistentId)
+  const { uploadLimit } = useUploadLimit(datasetPersistentId, fetchUploadLimits)
 
   const totalFiles = Object.keys(fileUploaderState.files).length
 

src/sections/shared/file-uploader/file-upload-input/useUploadLimit.ts

@@ -2,24 +2,28 @@ import { useCallback, useEffect, useState } from 'react'
 import { ReadError } from '@iqss/dataverse-client-javascript'
 import { FileSize, FileSizeUnit } from '@/files/domain/models/FileMetadata'
 import { getDatasetUploadLimits } from '@/dataset/domain/useCases/getDatasetUploadLimits'
+import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
 import { JSDataverseReadErrorHandler } from '@/shared/helpers/JSDataverseReadErrorHandler'
 
 interface UploadLimit {
   maxFilesAvailableToUploadFormatted?: string
   storageQuotaRemainingFormatted?: string
 }
 
-export function useUploadLimit(datasetPersistentId: string) {
+export function useUploadLimit(
+  datasetPersistentId: string,
+  fetchUploadLimits: (datasetId: string) => Promise<DatasetUploadLimits> = getDatasetUploadLimits
+) {
   const [uploadLimit, setUploadLimit] = useState<UploadLimit>({})
   const [isLoadingUploadLimits, setIsLoadingUploadLimits] = useState<boolean>(true)
   const [errorUploadLimits, setErrorUploadLimits] = useState<string | null>(null)
 
-  const fetchUploadLimits = useCallback(async () => {
+  const fetchUploadLimitsCallback = useCallback(async () => {
     setIsLoadingUploadLimits(true)
     setErrorUploadLimits(null)
 
     try {
-      const limits = await getDatasetUploadLimits(datasetPersistentId)
+      const limits = await fetchUploadLimits(datasetPersistentId)
 
       if (Object.keys(limits).length === 0) {
         setUploadLimit({})
@@ -50,16 +54,16 @@ export function useUploadLimit(datasetPersistentId: string) {
     } finally {
       setIsLoadingUploadLimits(false)
     }
-  }, [datasetPersistentId])
+  }, [datasetPersistentId, fetchUploadLimits])
 
   useEffect(() => {
-    void fetchUploadLimits()
-  }, [fetchUploadLimits])
+    void fetchUploadLimitsCallback()
+  }, [fetchUploadLimitsCallback])
 
   return {
     uploadLimit,
     isLoadingUploadLimits,
     errorUploadLimits,
-    fetchUploadLimits
+    fetchUploadLimits: fetchUploadLimitsCallback
   }
 }

tests/component/sections/shared/file-uploader/FileUploadInputUploadLimits.spec.tsx

@@ -1007,4 +1007,62 @@ describe('FileUploader', () => {
       })
     })
   })
+
+  describe.only('upload limits UI', () => {
+    it('shows both upload limit messages when both limits are present', () => {
+      const fetchUploadLimits = cy.stub().resolves({
+        numberOfFilesRemaining: 20,
+        storageQuotaRemaining: 1048576
+      })
+
+      cy.customMount(
+        <FileUploader
+          fileRepository={fileMockRepository}
+          datasetPersistentId=":latest"
+          storageType="S3"
+          operationType={OperationType.ADD_FILES_TO_DATASET}
+          fetchUploadLimits={fetchUploadLimits}
+        />
+      )
+
+      cy.findByText(/Maximum of 20 files available to upload./i).should('exist')
+      cy.findByText(/Storage quota: 1 MB remaining./i).should('exist')
+    })
+
+    it('shows only the available limit message when one limit is missing', () => {
+      const fetchUploadLimits = cy.stub().resolves({
+        numberOfFilesRemaining: 5
+      })
+
+      cy.customMount(
+        <FileUploader
+          fileRepository={fileMockRepository}
+          datasetPersistentId=":latest"
+          storageType="S3"
+          operationType={OperationType.ADD_FILES_TO_DATASET}
+          fetchUploadLimits={fetchUploadLimits}
+        />
+      )
+
+      cy.findByText(/Maximum of 5 files available to upload./i).should('exist')
+      cy.findByText(/Storage quota:/i).should('not.exist')
+    })
+
+    it('does not show limits message when limits are not present', () => {
+      const fetchUploadLimits = cy.stub().resolves({})
+
+      cy.customMount(
+        <FileUploader
+          fileRepository={fileMockRepository}
+          datasetPersistentId=":latest"
+          storageType="S3"
+          operationType={OperationType.ADD_FILES_TO_DATASET}
+          fetchUploadLimits={fetchUploadLimits}
+        />
+      )
+
+      cy.findByText(/Maximum of \d+ files available to upload./i).should('not.exist')
+      cy.findByText(/Storage quota:/i).should('not.exist')
+    })
+  })
 })

tests/component/sections/shared/file-uploader/FileUploader.spec.tsx

@@ -1,39 +1,36 @@
-import { renderHook, waitFor } from '@testing-library/react'
+import { act, renderHook, waitFor } from '@testing-library/react'
 import { useUploadLimit } from '@/sections/shared/file-uploader/file-upload-input/useUploadLimit'
-import * as uploadLimitsUseCase from '@/dataset/domain/useCases/getDatasetUploadLimits'
 
 const DATASET_PERSISTENT_ID = 'doi:10.5072/FK2/8YOKQI'
 
 describe('useUploadLimit', () => {
-  let getDatasetUploadLimitsStub: sinon.SinonStub
-
-  beforeEach(() => {
-    getDatasetUploadLimitsStub = cy.stub(uploadLimitsUseCase, 'getDatasetUploadLimits')
-  })
-
-  afterEach(() => {
-    getDatasetUploadLimitsStub.restore()
-  })
-
   it('formats upload limit values when limits are present', async () => {
-    getDatasetUploadLimitsStub.resolves({
+    const fetchUploadLimits = cy.stub().resolves({
       numberOfFilesRemaining: 1200,
       storageQuotaRemaining: 1048576
     })
 
-    const { result } = renderHook(() => useUploadLimit(DATASET_PERSISTENT_ID))
+    const { result } = renderHook(() => useUploadLimit(DATASET_PERSISTENT_ID, fetchUploadLimits))
 
-    await waitFor(() => {
-      expect(result.current.isLoadingUploadLimits).to.equal(false)
-      expect(result.current.uploadLimit.maxFilesAvailableToUploadFormatted).to.equal('1,200')
-      expect(result.current.uploadLimit.storageQuotaRemainingFormatted).to.equal('1 MB')
+    await act(() => {
+      expect(result.current.isLoadingUploadLimits).to.deep.equal(true)
+      return expect(result.current.uploadLimit).to.deep.equal({})
+    })
+
+    await act(() => {
+      expect(result.current.isLoadingUploadLimits).to.deep.equal(false)
+
+      return expect(result.current.uploadLimit).to.deep.equal({
+        maxFilesAvailableToUploadFormatted: '1,200',
+        storageQuotaRemainingFormatted: '1 MB'
+      })
     })
   })
 
   it('returns empty uploadLimit when no limits are present', async () => {
-    getDatasetUploadLimitsStub.resolves({})
+    const fetchUploadLimits = cy.stub().resolves({})
 
-    const { result } = renderHook(() => useUploadLimit(DATASET_PERSISTENT_ID))
+    const { result } = renderHook(() => useUploadLimit(DATASET_PERSISTENT_ID, fetchUploadLimits))
 
     await waitFor(() => {
       expect(result.current.isLoadingUploadLimits).to.equal(false)