Skip to content

Commit

Permalink
Update file uploader code (#5355)
Browse files Browse the repository at this point in the history 
* Move file uploader basic stories to proper folder

* Update file uploader code
  • Loading branch information
@epfeiffe
epfeiffe authored Jan 6, 2025
1 parent fd9d169 commit efde47a
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 10 deletions.
96 changes: 92 additions & 4 deletions src/file-uploader/__tests__/file-uploader.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,10 @@ describe('FileUploader', () => {
onDrop={() => {}}
onDropAccepted={() => {}}
onDropRejected={() => {}}
progressAmount={50}
/>
);
expect(console.error).toHaveBeenCalledTimes(3);
expect(console.error).toHaveBeenCalledTimes(4);
expect(console.error).toHaveBeenNthCalledWith(1, 'onDrop is not a prop for FileUploader.');
expect(console.error).toHaveBeenNthCalledWith(
2,
Expand All @@ -99,6 +100,10 @@ describe('FileUploader', () => {
3,
'onDropRejected is not a prop for FileUploader.'
);
expect(console.error).toHaveBeenNthCalledWith(
4,
'progressAmount is not a prop for FileUploader.'
);
console.error = original;
});

Expand All @@ -120,20 +125,23 @@ describe('FileUploader', () => {
file: mockFileAdded,
id: '1',
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
progressAmount: 20,
status: 'added',
},
{
errorMessage: 'custom error message',
file: mockFileError,
id: '2',
imagePreviewThumbnail: '',
progressAmount: 100,
status: 'error',
},
{
errorMessage: null,
file: mockFileProcessed,
id: '3',
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
progressAmount: 100,
status: 'processed',
},
]}
Expand Down Expand Up @@ -186,13 +194,15 @@ describe('FileUploader', () => {
file: mockAcceptedFile,
id: '1',
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
progressAmount: 100,
status: 'processed',
},
{
errorMessage: null,
file: mockRejectedFile,
id: '1',
imagePreviewThumbnail: '',
progressAmount: 100,
status: 'processed',
},
]);
Expand Down Expand Up @@ -245,6 +255,7 @@ describe('FileUploader', () => {
file: mockFile,
id: '1',
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
progressAmount: 100,
status: 'error',
},
]);
Expand All @@ -270,6 +281,7 @@ describe('FileUploader', () => {
file: mockFile,
id: '1',
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
progressAmount: 100,
status: 'error',
},
]);
Expand All @@ -295,6 +307,7 @@ describe('FileUploader', () => {
file: mockFile,
id: '1',
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
progressAmount: 100,
status: 'error',
},
]);
Expand All @@ -320,6 +333,7 @@ describe('FileUploader', () => {
file: mockFile,
id: '1',
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
progressAmount: 100,
status: 'error',
},
]);
Expand All @@ -345,6 +359,7 @@ describe('FileUploader', () => {
file: mockFile,
id: '1',
imagePreviewThumbnail: '',
progressAmount: 100,
status: 'error',
},
]);
Expand Down Expand Up @@ -373,14 +388,24 @@ describe('FileUploader', () => {
});
await waitFor(() => {
expect(mockProcessFileOnDrop).toHaveBeenCalledTimes(1);
expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile);
expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile, '1', [
{
errorMessage: 'test error',
file: mockFile,
id: '1',
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
progressAmount: 100,
status: 'error',
},
]);
expect(mockSetFileRows).toHaveBeenCalledTimes(3);
expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
{
errorMessage: 'test error',
file: mockFile,
id: '1',
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
progressAmount: 100,
status: 'error',
},
]);
Expand Down Expand Up @@ -409,7 +434,17 @@ describe('FileUploader', () => {
});
await waitFor(() => {
expect(mockProcessFileOnDrop).toHaveBeenCalledTimes(1);
expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile);
expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile, '1', [
{
errorMessage: null,
file: mockFile,
fileInfo: 'test-file-info',
id: '1',
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
progressAmount: 100,
status: 'processed',
},
]);
expect(mockSetFileRows).toHaveBeenCalledTimes(3);
expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
{
Expand All @@ -418,12 +453,48 @@ describe('FileUploader', () => {
fileInfo: 'test-file-info',
id: '1',
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
progressAmount: 100,
status: 'processed',
},
]);
});
});

it('calls setFilesRows with progressAmountStartValue when processFileOnDrop returns with success', async () => {
const mockFile = new File(['(⌐□_□)'], 'test.png', {
type: 'image/png',
});
const mockProcessFileOnDrop = jest.fn((file) =>
Promise.resolve({ errorMessage: null, fileInfo: 'test-file-info' })
);
const mockSetFileRows = jest.fn();
render(
<FileUploader
fileRows={[]}
processFileOnDrop={mockProcessFileOnDrop}
progressAmountStartValue={0}
setFileRows={mockSetFileRows}
/>
);
await act(async () => {
await fireEvent.drop(screen.getByText(locale.contentMessage), {
target: { files: [mockFile] },
});
});
await waitFor(() => {
expect(mockSetFileRows).toHaveBeenNthCalledWith(1, [
{
errorMessage: null,
file: mockFile,
id: '1',
imagePreviewThumbnail: '',
progressAmount: 0,
status: 'added',
},
]);
});
});

it('calls setFilesRows with error when processFileOnDrop returns with undefined error', async () => {
const original = console.error;
console.error = jest.fn();
Expand All @@ -447,7 +518,16 @@ describe('FileUploader', () => {
});
await waitFor(() => {
expect(mockProcessFileOnDrop).toHaveBeenCalledTimes(1);
expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile);
expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile, '1', [
{
errorMessage: 'unknown processing error',
file: mockFile,
id: '1',
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
progressAmount: 100,
status: 'error',
},
]);
expect(console.error).toHaveBeenCalledTimes(1);
expect(console.error).toHaveBeenCalledWith('error with processFileOnDrop', mockError);
expect(mockSetFileRows).toHaveBeenCalledTimes(3);
Expand All @@ -457,6 +537,7 @@ describe('FileUploader', () => {
file: mockFile,
id: '1',
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
progressAmount: 100,
status: 'error',
},
]);
Expand Down Expand Up @@ -494,6 +575,7 @@ describe('FileUploader', () => {
file: mockFile,
id: '1',
imagePreviewThumbnail: '',
progressAmount: 20,
status: 'added',
},
]}
Expand Down Expand Up @@ -527,13 +609,15 @@ describe('FileUploader', () => {
file: mockFileAdded,
id: '1',
imagePreviewThumbnail: '',
progressAmount: 20,
status: 'added',
},
{
errorMessage: null,
file: mockFileProcessed,
id: '2',
imagePreviewThumbnail: '',
progressAmount: 100,
status: 'processed',
},
]}
Expand Down Expand Up @@ -582,6 +666,7 @@ describe('FileUploader', () => {
file: mockFile,
id: '1',
imagePreviewThumbnail: '',
progressAmount: 100,
status: 'error',
},
]);
Expand All @@ -601,6 +686,7 @@ describe('FileUploader', () => {
file: mockFile,
id: '1',
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
progressAmount: 100,
status: 'processed',
},
]}
Expand Down Expand Up @@ -633,13 +719,15 @@ describe('FileUploader', () => {
file: mockDocumentFile,
id: '1',
imagePreviewThumbnail: '',
progressAmount: 100,
status: 'processed',
},
{
errorMessage: null,
file: mockImageFile,
id: '2',
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
progressAmount: 100,
status: 'processed',
},
]}
Expand Down
2 changes: 2 additions & 0 deletions src/file-uploader/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,5 @@ export enum ARIA_LIVE_ELEMENT_ID {
}

export const ARIA_LIVE_TIMEOUT_MS = 5000;
export const PROGRESS_AMOUNT_LOADING = 20;
export const PROGRESS_AMOUNT_LOADING_COMPLETE = 100;
Loading

0 comments on commit efde47a

Please sign in to comment.