Merge pull request #1701 from henninghalvsb1/fix-broken-delete-functi…

…onality-in-ffe-file-upload fix(ffe-file-upload-react): fikse sletting av opplastede filer
SpareBank1 · Nov 6, 2023 · 6eb3fbb · 6eb3fbb
2 parents 1e12f82 + 8db3c7f
commit 6eb3fbb
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/packages/ffe-file-upload-react/src/FileUpload.js b/packages/ffe-file-upload-react/src/FileUpload.js
@@ -43,7 +43,7 @@ class FileUpload extends React.Component {
     }
 
     onFileDeleted(event) {
-        this.props.onFileDeleted(this.props.files[event.target.id]);
+        this.props.onFileDeleted(this.props.files[event.currentTarget.id]);
     }
 
     render() {

diff --git a/packages/ffe-file-upload-react/src/FileUpload.spec.js b/packages/ffe-file-upload-react/src/FileUpload.spec.js
@@ -48,7 +48,7 @@ describe('<FileUpload/>', () => {
         });
 
         it('should extract and return files when user finishes selecting files', () => {
-            component.find('#file-upload').simulate('change', {
+            component.find('input#file-upload').simulate('change', {
                 target: {
                     files: {
                         filename: {
@@ -60,5 +60,35 @@ describe('<FileUpload/>', () => {
 
             expect(onFilesSelected.calledOnce).toBe(true);
         });
+
+        it('should remove file from files when delete button is clicked', () => {
+            // Component needs to be mounted for this test because we must render children.
+            component = mount(
+                <FileUpload
+                    id="file-upload"
+                    label="label"
+                    title="title"
+                    infoText="infoText"
+                    uploadTitle="uploadTitle"
+                    uploadMicroText="uploadMicroText"
+                    uploadSubText="uploadSubText"
+                    files={{
+                        fileToDelete: {
+                            name: 'fileToDelete',
+                        },
+                    }}
+                    onFilesSelected={onFilesSelected}
+                    onFileDeleted={onFileDeleted}
+                    onFilesDropped={onFilesDropped}
+                />,
+            );
+            // Do click on span inside button with event listener instead of actual button to catch nested clicks.
+            component
+                .find('.ffe-file-upload__file-item-delete-button-text')
+                .simulate('click');
+            expect(onFileDeleted.calledWith({ name: 'fileToDelete' })).toBe(
+                true,
+            );
+        });
     });
 });