tests on functionality

assets/src/dashboard/components/fileUpload/index.js

@@ -153,7 +153,7 @@ function disableDefaults(e) {
   e.stopPropagation();
 }
 
-const FileUploadForm = ({
+const FileUpload = ({
   id,
   label,
   handleDelete,
@@ -233,13 +233,15 @@ const FileUploadForm = ({
       onDragEnter={handleDrag}
       onDragLeave={handleDrag}
       onDragOver={disableDefaults}
+      data-testid="file-upload-drop-area"
     >
       {hasUploadedContent ? (
-        <UploadedContentContainer>
+        <UploadedContentContainer data-testid="file-upload-content-container">
           {uploadedContent.map((file, idx) => (
             <UploadedContent key={idx}>
               {Boolean(handleDelete) && (
                 <DeleteButton
+                  data-testid={`file-upload-delete-button_${idx}`}
                   onClick={() => onDeleteFile(idx, file)}
                   aria-label={sprintf(
                     /* translators: %s is the file name to delete */
@@ -281,7 +283,7 @@ const FileUploadForm = ({
   );
 };
 
-FileUploadForm.propTypes = {
+FileUpload.propTypes = {
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   label: PropTypes.string.isRequired,
   handleDelete: PropTypes.func,
@@ -296,4 +298,4 @@ FileUploadForm.propTypes = {
   emptyDragHelperText: PropTypes.string,
 };
 
-export default FileUploadForm;
+export default FileUpload;

assets/src/dashboard/components/fileUpload/stories/index.js

@@ -25,15 +25,15 @@ import { action } from '@storybook/addon-actions';
 /**
  * Internal dependencies
  */
-import FileUploadForm from '../';
+import FileUpload from '../';
 import { getResourceFromLocalFile } from '../../../utils';
 
 const Container = styled.div`
   width: 600px;
 `;
 export default {
-  title: 'Dashboard/Components/FileUploadForm',
-  component: FileUploadForm,
+  title: 'Dashboard/Components/FileUpload',
+  component: FileUpload,
 };
 
 export const _default = () => {
@@ -70,15 +70,15 @@ export const _default = () => {
 
   return (
     <Container>
-      <FileUploadForm
+      <FileUpload
         acceptableFormats={['.jpg', '.jpeg', '.png', '.gif']}
         handleSubmit={formatFiles}
         handleDelete={deleteUploadedContent}
         id={'898989'}
         label={text('label', 'Upload')}
         isMultiple={boolean('isMultiple', true)}
         isFileNameVisible={boolean('isFileNameVisible', false)}
-        ariaLabel={'click to upload a file'}
+        ariaLabel={'Click to upload a file'}
         uploadedContent={uploadedContent}
         emptyDragHelperText={text(
           'emptyDragHelperText',

assets/src/dashboard/components/fileUpload/test/fileUpload.js

@@ -13,3 +13,114 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+/**
+ * External dependencies
+ */
+import { fireEvent, createEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { renderWithTheme } from '../../../testUtils/';
+import FileUpload from '../';
+
+describe('FileUpload', () => {
+  it('should render empty upload component by default', () => {
+    const { queryAllByTestId } = renderWithTheme(
+      <FileUpload
+        handleSubmit={jest.fn}
+        handleDelete={jest.fn}
+        id={'898989'}
+        label="Upload"
+        ariaLabel="Click to upload a file"
+        uploadedContent={[]}
+      />
+    );
+    expect(queryAllByTestId('file-upload-content-container')).toHaveLength(0);
+  });
+
+  it('should trigger handleSubmit when file is added through input', () => {
+    const handleSubmitMock = jest.fn();
+
+    const { getByTestId } = renderWithTheme(
+      <FileUpload
+        handleSubmit={handleSubmitMock}
+        handleDelete={jest.fn}
+        id={'898989'}
+        label="Upload"
+        ariaLabel="Click to upload a file"
+        uploadedContent={[]}
+      />
+    );
+
+    const UploadInput = getByTestId('upload-file-input');
+    expect(UploadInput).toBeDefined();
+    fireEvent.click(UploadInput);
+    fireEvent.change(UploadInput, { target: { files: {} } });
+    expect(handleSubmitMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should trigger handleSubmit when file is dropped in container', () => {
+    const handleSubmitMock = jest.fn();
+
+    const mockFile = new File([''], 'mockfile.png', {
+      type: 'image/png',
+    });
+    const { getByTestId } = renderWithTheme(
+      <FileUpload
+        handleSubmit={handleSubmitMock}
+        handleDelete={jest.fn}
+        id={'898989'}
+        label="Upload"
+        ariaLabel="Click to upload a file"
+        uploadedContent={[]}
+      />
+    );
+
+    const DropArea = getByTestId('file-upload-drop-area');
+    expect(DropArea).toBeDefined();
+
+    const dropEvent = createEvent.drop(DropArea);
+    const fileList = [mockFile];
+
+    Object.defineProperty(dropEvent, 'dataTransfer', {
+      value: {
+        files: {
+          item: (itemIndex) => fileList[itemIndex],
+          length: fileList.length,
+        },
+      },
+    });
+
+    fireEvent(DropArea, dropEvent);
+
+    expect(handleSubmitMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should trigger handleDelete when delete button is clicked on an uploaded file', () => {
+    const handleDeleteMock = jest.fn();
+
+    const { getByTestId } = renderWithTheme(
+      <FileUpload
+        handleSubmit={jest.fn}
+        handleDelete={handleDeleteMock}
+        id={'898989'}
+        label="Upload"
+        ariaLabel="Click to upload a file"
+        uploadedContent={[
+          {
+            src: 'source-that-displays-an-image',
+            title: 'mockfile.png',
+            alt: 'mockfile.png',
+          },
+        ]}
+      />
+    );
+
+    const DeleteFileButton = getByTestId('file-upload-delete-button_0');
+    expect(DeleteFileButton).toBeDefined();
+    fireEvent.click(DeleteFileButton);
+    expect(handleDeleteMock).toHaveBeenCalledTimes(1);
+  });
+});