feat(#105): added test cases for AddImageButton

src/images/AddImageButton.jsx

@@ -5,24 +5,19 @@ import uuid from 'uuid';
 import styled from 'styled-components';
 import Dropzone from 'react-dropzone'
 
-// import { Box, Heading, Image } from 'grommet';
 import { Add } from 'grommet-icons';
 
 import AddImageMessage from './AddImageMessage';
 
 import Button from '../ui/form/Button';
-// import ButtonGroup from '../ui/form/ButtonGroup';
-// import ViewMessage from '../ui/ViewMessage';
-// import {
-//   getImageCreationDateTime,
-//   getFormattedFileSize,
-// } from '../util/util';
 
 import { addImage } from '../redux/images';
 import { addImageIsLoading } from '../redux/images/selectors';
 
 import { Colors, MediaSize } from '../styles';
 
+const maxFileSize = 6000000;
+
 const StyledAddImageButton = styled(Button)`
   border-radius: 50%;
   width: 44px;
@@ -39,64 +34,6 @@ const StyledAddImageButton = styled(Button)`
   }
 `;
 
-// const StyledImageWrapper = styled(Box)`
-//   flex-grow: 1;
-//   flex-shrink: 1;
-//   margin: 1rem 0;
-
-//   @media (min-width: ${MediaSize.Tablet}) {
-//     flex-direction: row;
-//   }
-// `;
-
-// const StyledImage = styled(Image)`
-//   width: 100%;
-//   height: auto;
-//   max-height: 40vw;
-//   flex-shrink: 0;
-//   flex-grow: 0;
-//   overflow: inherit;
-//   margin-bottom: 1rem;
-
-//   @media (min-width: ${MediaSize.Tablet}) {
-//     width: 60%;
-//     height: auto;
-//     margin-right: 2rem;
-//     margin-bottom: 0 0 1rem;
-//   }
-// `;
-
-// const StyledImageAttributes = styled(Box)`
-//   flex-direction: row;
-//   flex-wrap: wrap;
-//   justify-content: space-between;
-//   align-items: flex-start;
-//   align-content: start;
-
-//   @media (min-width: ${MediaSize.Tablet}) {
-//     flex-direction: column;
-//     justify-content: flex-start;
-//   }
-
-//   div {
-//     box-sizing: border-box;
-//     flex-shrink: 1;
-//     flex-grow: 1;
-//     padding: 0.25rem;
-//     width: 49%;
-
-//     @media (min-width: ${MediaSize.Tablet}) {
-//       width: auto;
-//       flex-shrink: 0;
-//       flex-grow: 0;
-//     }
-//   }
-
-//   strong {
-//     margin-right: 0.25rem;
-//   }
-// `;
-
 const initialState = {
   showMessage: false,
   image: null,
@@ -127,28 +64,33 @@ const AddImageButton = ({
     }
   }
 
+  /* instanbul ignore-next */
   const handleUploadImage = (files) => {
-    // only supports single files
+    /* instanbul ignore-next */
     if (files.length > 0) {
+      /* instanbul ignore-next */
       files.forEach((file) => {
         const { size } = file;
-        // if (size > 6000000) {
-        if (size > 1000000) {
+        if (size > maxFileSize) {
           // image is to big
           setState({
             showMessage: true,
             image: file,
           });
-          console.log(file);
         } else {
           // upload
+          /* instanbul ignore-next */
           const id = uuid.v4();
+          /* instanbul ignore-next */
           addImage({ file, id });
 
           // reset form
+          /* instanbul ignore-next */
           handleResetForm();
 
+          /* instanbul ignore-next */
           if (afterOnClick) {
+            /* instanbul ignore-next */
             afterOnClick();
           }
         }
@@ -157,7 +99,6 @@ const AddImageButton = ({
   };
 
   const { showMessage, image } = state;
-  console.log(state);
   return (
     <Fragment>
       <AddImageMessage
@@ -166,42 +107,6 @@ const AddImageButton = ({
         onHandleResetForm={handleResetForm}
         onHandleOpenImageDialog={handleOpenImageDialog}
       />
-      {/* <ViewMessage show={showMessage}>
-        <Heading level="2">Image is too big</Heading>
-        <Box>
-        <p>Hey it seems your image to big for being uploaded. We only allow uploading images up to <strong>6 MB</strong>, please choose a different image.</p>
-          {image  && (
-            <StyledImageWrapper>
-              <StyledImage
-                src={URL.createObjectURL(image)}
-                fit="cover"
-              />
-              <StyledImageAttributes>
-                <div>
-                  <strong>Size: </strong>
-                  <span style={{ color: Colors.Red.Default }}>{getFormattedFileSize(image.size)} MB</span>
-                </div>
-                <div><strong>Name: </strong>{image.name}</div>
-                <div><strong>Created: </strong>{getImageCreationDateTime(image.lastModified)}</div>
-                <div><strong>Type: </strong>{image.type}</div>
-              </StyledImageAttributes>
-            </StyledImageWrapper>
-          )}
-          <ButtonGroup>
-            <Button
-              type="button"
-              buttonStyle="link"
-              onClick={handleResetForm}
-            >Cancel</Button>
-            <Button
-              type="button"
-              buttonStyle="primary"
-              style={{ marginLeft: '1rem' }}
-              onClick={handleOpenImageDialog}
-            >Change image</Button>
-          </ButtonGroup>
-        </Box>
-      </ViewMessage> */}
       <Dropzone
         onDrop={handleUploadImage}
         ref={uploadRef}
@@ -248,9 +153,7 @@ export const __testables__ = {
   mapDispatchToProps,
   AddImageButton,
   StyledAddImageButton,
-  // StyledImage,
-  // StyledImageAttributes,
-  // StyledImageWrapper,
+  maxFileSize,
 };
 
 export default connect(select, mapDispatchToProps)(AddImageButton);