Skip to content

Commit efde47a

Browse files
epfeiffeepfeiffe
authored
Update file uploader code (#5355)
* Move file uploader basic stories to proper folder * Update file uploader code
1 parent fd9d169 commit efde47a

File tree

4 files changed

+129
-10
lines changed

4 files changed

+129
-10
lines changed

‎src/file-uploader/__tests__/file-uploader.test.tsx

+92-4
Original file line numberDiff line numberDiff line change
@@ -87,9 +87,10 @@ describe('FileUploader', () => {
8787
onDrop={() => {}}
8888
onDropAccepted={() => {}}
8989
onDropRejected={() => {}}
90+
progressAmount={50}
9091
/>
9192
);
92-
expect(console.error).toHaveBeenCalledTimes(3);
93+
expect(console.error).toHaveBeenCalledTimes(4);
9394
expect(console.error).toHaveBeenNthCalledWith(1, 'onDrop is not a prop for FileUploader.');
9495
expect(console.error).toHaveBeenNthCalledWith(
9596
2,
@@ -99,6 +100,10 @@ describe('FileUploader', () => {
99100
3,
100101
'onDropRejected is not a prop for FileUploader.'
101102
);
103+
expect(console.error).toHaveBeenNthCalledWith(
104+
4,
105+
'progressAmount is not a prop for FileUploader.'
106+
);
102107
console.error = original;
103108
});
104109

@@ -120,20 +125,23 @@ describe('FileUploader', () => {
120125
file: mockFileAdded,
121126
id: '1',
122127
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
128+
progressAmount: 20,
123129
status: 'added',
124130
},
125131
{
126132
errorMessage: 'custom error message',
127133
file: mockFileError,
128134
id: '2',
129135
imagePreviewThumbnail: '',
136+
progressAmount: 100,
130137
status: 'error',
131138
},
132139
{
133140
errorMessage: null,
134141
file: mockFileProcessed,
135142
id: '3',
136143
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
144+
progressAmount: 100,
137145
status: 'processed',
138146
},
139147
]}
@@ -186,13 +194,15 @@ describe('FileUploader', () => {
186194
file: mockAcceptedFile,
187195
id: '1',
188196
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
197+
progressAmount: 100,
189198
status: 'processed',
190199
},
191200
{
192201
errorMessage: null,
193202
file: mockRejectedFile,
194203
id: '1',
195204
imagePreviewThumbnail: '',
205+
progressAmount: 100,
196206
status: 'processed',
197207
},
198208
]);
@@ -245,6 +255,7 @@ describe('FileUploader', () => {
245255
file: mockFile,
246256
id: '1',
247257
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
258+
progressAmount: 100,
248259
status: 'error',
249260
},
250261
]);
@@ -270,6 +281,7 @@ describe('FileUploader', () => {
270281
file: mockFile,
271282
id: '1',
272283
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
284+
progressAmount: 100,
273285
status: 'error',
274286
},
275287
]);
@@ -295,6 +307,7 @@ describe('FileUploader', () => {
295307
file: mockFile,
296308
id: '1',
297309
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
310+
progressAmount: 100,
298311
status: 'error',
299312
},
300313
]);
@@ -320,6 +333,7 @@ describe('FileUploader', () => {
320333
file: mockFile,
321334
id: '1',
322335
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
336+
progressAmount: 100,
323337
status: 'error',
324338
},
325339
]);
@@ -345,6 +359,7 @@ describe('FileUploader', () => {
345359
file: mockFile,
346360
id: '1',
347361
imagePreviewThumbnail: '',
362+
progressAmount: 100,
348363
status: 'error',
349364
},
350365
]);
@@ -373,14 +388,24 @@ describe('FileUploader', () => {
373388
});
374389
await waitFor(() => {
375390
expect(mockProcessFileOnDrop).toHaveBeenCalledTimes(1);
376-
expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile);
391+
expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile, '1', [
392+
{
393+
errorMessage: 'test error',
394+
file: mockFile,
395+
id: '1',
396+
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
397+
progressAmount: 100,
398+
status: 'error',
399+
},
400+
]);
377401
expect(mockSetFileRows).toHaveBeenCalledTimes(3);
378402
expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
379403
{
380404
errorMessage: 'test error',
381405
file: mockFile,
382406
id: '1',
383407
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
408+
progressAmount: 100,
384409
status: 'error',
385410
},
386411
]);
@@ -409,7 +434,17 @@ describe('FileUploader', () => {
409434
});
410435
await waitFor(() => {
411436
expect(mockProcessFileOnDrop).toHaveBeenCalledTimes(1);
412-
expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile);
437+
expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile, '1', [
438+
{
439+
errorMessage: null,
440+
file: mockFile,
441+
fileInfo: 'test-file-info',
442+
id: '1',
443+
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
444+
progressAmount: 100,
445+
status: 'processed',
446+
},
447+
]);
413448
expect(mockSetFileRows).toHaveBeenCalledTimes(3);
414449
expect(mockSetFileRows).toHaveBeenNthCalledWith(3, [
415450
{
@@ -418,12 +453,48 @@ describe('FileUploader', () => {
418453
fileInfo: 'test-file-info',
419454
id: '1',
420455
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
456+
progressAmount: 100,
421457
status: 'processed',
422458
},
423459
]);
424460
});
425461
});
426462

463+
it('calls setFilesRows with progressAmountStartValue when processFileOnDrop returns with success', async () => {
464+
const mockFile = new File(['(⌐□_□)'], 'test.png', {
465+
type: 'image/png',
466+
});
467+
const mockProcessFileOnDrop = jest.fn((file) =>
468+
Promise.resolve({ errorMessage: null, fileInfo: 'test-file-info' })
469+
);
470+
const mockSetFileRows = jest.fn();
471+
render(
472+
<FileUploader
473+
fileRows={[]}
474+
processFileOnDrop={mockProcessFileOnDrop}
475+
progressAmountStartValue={0}
476+
setFileRows={mockSetFileRows}
477+
/>
478+
);
479+
await act(async () => {
480+
await fireEvent.drop(screen.getByText(locale.contentMessage), {
481+
target: { files: [mockFile] },
482+
});
483+
});
484+
await waitFor(() => {
485+
expect(mockSetFileRows).toHaveBeenNthCalledWith(1, [
486+
{
487+
errorMessage: null,
488+
file: mockFile,
489+
id: '1',
490+
imagePreviewThumbnail: '',
491+
progressAmount: 0,
492+
status: 'added',
493+
},
494+
]);
495+
});
496+
});
497+
427498
it('calls setFilesRows with error when processFileOnDrop returns with undefined error', async () => {
428499
const original = console.error;
429500
console.error = jest.fn();
@@ -447,7 +518,16 @@ describe('FileUploader', () => {
447518
});
448519
await waitFor(() => {
449520
expect(mockProcessFileOnDrop).toHaveBeenCalledTimes(1);
450-
expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile);
521+
expect(mockProcessFileOnDrop).toHaveBeenCalledWith(mockFile, '1', [
522+
{
523+
errorMessage: 'unknown processing error',
524+
file: mockFile,
525+
id: '1',
526+
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
527+
progressAmount: 100,
528+
status: 'error',
529+
},
530+
]);
451531
expect(console.error).toHaveBeenCalledTimes(1);
452532
expect(console.error).toHaveBeenCalledWith('error with processFileOnDrop', mockError);
453533
expect(mockSetFileRows).toHaveBeenCalledTimes(3);
@@ -457,6 +537,7 @@ describe('FileUploader', () => {
457537
file: mockFile,
458538
id: '1',
459539
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
540+
progressAmount: 100,
460541
status: 'error',
461542
},
462543
]);
@@ -494,6 +575,7 @@ describe('FileUploader', () => {
494575
file: mockFile,
495576
id: '1',
496577
imagePreviewThumbnail: '',
578+
progressAmount: 20,
497579
status: 'added',
498580
},
499581
]}
@@ -527,13 +609,15 @@ describe('FileUploader', () => {
527609
file: mockFileAdded,
528610
id: '1',
529611
imagePreviewThumbnail: '',
612+
progressAmount: 20,
530613
status: 'added',
531614
},
532615
{
533616
errorMessage: null,
534617
file: mockFileProcessed,
535618
id: '2',
536619
imagePreviewThumbnail: '',
620+
progressAmount: 100,
537621
status: 'processed',
538622
},
539623
]}
@@ -582,6 +666,7 @@ describe('FileUploader', () => {
582666
file: mockFile,
583667
id: '1',
584668
imagePreviewThumbnail: '',
669+
progressAmount: 100,
585670
status: 'error',
586671
},
587672
]);
@@ -601,6 +686,7 @@ describe('FileUploader', () => {
601686
file: mockFile,
602687
id: '1',
603688
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
689+
progressAmount: 100,
604690
status: 'processed',
605691
},
606692
]}
@@ -633,13 +719,15 @@ describe('FileUploader', () => {
633719
file: mockDocumentFile,
634720
id: '1',
635721
imagePreviewThumbnail: '',
722+
progressAmount: 100,
636723
status: 'processed',
637724
},
638725
{
639726
errorMessage: null,
640727
file: mockImageFile,
641728
id: '2',
642729
imagePreviewThumbnail: 'data:image/png;base64,KOKMkOKWoV/ilqEp',
730+
progressAmount: 100,
643731
status: 'processed',
644732
},
645733
]}

‎src/file-uploader/constants.ts

+2
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,5 @@ export enum ARIA_LIVE_ELEMENT_ID {
2626
}
2727

2828
export const ARIA_LIVE_TIMEOUT_MS = 5000;
29+
export const PROGRESS_AMOUNT_LOADING = 20;
30+
export const PROGRESS_AMOUNT_LOADING_COMPLETE = 100;

0 commit comments

Comments
 (0)