Feature/cld 236 camera image upload component (#52)

src/components/CamaraImageInput/__tests__/__snapshots__/index.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CameraImageInput should match a snapshot 1`] = `
+<Component
+  id="test"
+  inputProps={
+    Object {
+      "capture": "camera",
+    }
+  }
+  labelText="test"
+  name="test"
+/>
+`;

src/components/CamaraImageInput/__tests__/index.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import { FileInputProps } from '../../FileInput'
+import { CameraImageInput } from '../index'
+import toJson from 'enzyme-to-json'
+
+const props: FileInputProps = {
+  name: 'test',
+  id: 'test',
+  labelText: 'test'
+}
+
+describe('CameraImageInput', () => {
+  it('should match a snapshot', () => {
+    expect(toJson(shallow(<CameraImageInput {...props} />))).toMatchSnapshot()
+  })
+
+  afterEach(() => {
+    jest.resetAllMocks()
+  })
+})

src/components/CamaraImageInput/camera-image-input.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { CameraImageInput } from '.'
+import { Form, Formik } from 'formik'
+
+storiesOf('form/CameraImageInput', module).add('Camera Image Input', () => (
+  <section className="section">
+    <Formik
+      initialValues={{ imageInput: '' }}
+      onSubmit={values => {
+        action('Form Values' + values)
+      }}
+      render={() => (
+        <Form>
+          <div className="column is-half-desktop">
+            <CameraImageInput id="imageInput" allowClear name="imageInput" labelText="Image Input" />
+          </div>
+        </Form>
+      )}
+    />
+  </section>
+))

src/components/CamaraImageInput/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { FileInput, FileInputProps } from '../FileInput'
+
+export const CameraImageInput = (props: FileInputProps) => (
+  <FileInput
+    inputProps={{
+      capture: 'camera'
+    }}
+    dataTest={props.dataTest}
+    name={props.name}
+    labelText={props.labelText}
+    id={props.id}
+    allowClear={props.allowClear}
+  />
+)

src/components/FileInput/__tests__/index.tsx

@@ -7,7 +7,10 @@ import toJson from 'enzyme-to-json'
 const props: FileInputProps = {
   name: 'test',
   id: 'test',
-  labelText: 'test'
+  labelText: 'test',
+  inputProps: {
+    className: 'test'
+  }
 }
 
 describe('FileInput', () => {
@@ -34,9 +37,6 @@ describe('FileInput', () => {
   it('should render error correctly', done => {
     // setup
     let waitUntilFormSubmittedResolver: any = null
-    const waitUntilFormSubmitted = new Promise(resolve => {
-      waitUntilFormSubmittedResolver = resolve
-    })
 
     let submitForm
 
@@ -136,6 +136,30 @@ describe('FileInput', () => {
     })
   })
 
+  it('Spread the input props to input element', () => {
+    const Wrapper = () => (
+      <Formik
+        onSubmit={jest.fn()}
+        initialValues={{ test: '' }}
+        render={({ handleSubmit }) => {
+          return (
+            <FileInput
+              inputProps={{
+                demo: 'test'
+              }}
+              id="test"
+              labelText="test"
+              name="test"
+            />
+          )
+        }}
+      />
+    )
+
+    const wrapper = mount(<Wrapper />)
+    expect(wrapper.find('input[demo="test"]').length).toBe(1)
+  })
+
   it('should render fileName correctly', done => {
     // setup
     let waitUntilDataReaderLoadResolver: any = null

src/components/FileInput/index.tsx

@@ -16,6 +16,7 @@ export interface FileInputProps {
   allowClear?: boolean
   // props specialized for unit test
   testProps?: FileInputTestProps
+  inputProps?: Record<string, any>
 }
 
 export const FileInput = ({
@@ -25,7 +26,8 @@ export const FileInput = ({
   id = name,
   labelText,
   accept = '',
-  allowClear = false
+  allowClear = false,
+  inputProps
 }: FileInputProps) => {
   const [fileUrl, setFileName] = useState()
   const inputFile = React.useRef<HTMLInputElement>(null)
@@ -65,6 +67,7 @@ export const FileInput = ({
               <div className="control pb-2">
                 <label data-test="file-input-label" className="file-label" htmlFor={id}>
                   <input
+                    {...inputProps}
                     ref={inputFile}
                     id={id}
                     className="file-input"

src/components/Map/__tests__/index.tsx

@@ -246,6 +246,7 @@ describe('Map', () => {
   describe('renderMap', () => {
     it('should run correctly', () => {
       const fn = renderMap({
+        mapContainerStyles: '',
         googleMapsRef: {
           current: mockGoogleMaps
         },
@@ -274,6 +275,7 @@ describe('Map', () => {
     })
     it('should run correctly when error', () => {
       const fn = renderMap({
+        mapContainerStyles: '',
         googleMapsRef: {
           current: mockGoogleMaps
         },
@@ -301,6 +303,7 @@ describe('Map', () => {
     })
     it('should run correctly when error network', () => {
       const fn = renderMap({
+        mapContainerStyles: '',
         googleMapsRef: {
           current: mockGoogleMaps
         },

src/components/Menu/__tests__/Toggle.tsx

@@ -7,7 +7,8 @@ describe('Toggle', () => {
   it('should render correctly', () => {
     const mockProps = {
       isChecked: true,
-      onChange: jest.fn()
+      onChange: jest.fn(),
+      isResponsive: true
     }
     const wrapper = shallow(<Toggle {...mockProps} />)
     expect(toJson(wrapper)).toMatchSnapshot()
@@ -16,7 +17,8 @@ describe('Toggle', () => {
   it('should render correctly', () => {
     const mockProps = {
       isChecked: false,
-      onChange: jest.fn()
+      onChange: jest.fn(),
+      isResponsive: true
     }
     const wrapper = shallow(<Toggle {...mockProps} />)
     expect(toJson(wrapper)).toMatchSnapshot()
@@ -25,7 +27,8 @@ describe('Toggle', () => {
   it('should call onChange when change input', () => {
     const mockProps = {
       isChecked: false,
-      onChange: jest.fn()
+      onChange: jest.fn(),
+      isResponsive: true
     }
     const wrapper = shallow(<Toggle {...mockProps} />)
     const input = wrapper.find('input')

src/components/SelectBox/select-box.stories.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useRef, useEffect } from 'react'
-import { Form, Formik, FormikFormProps, FormikActions } from 'formik'
+import React, { useRef, useEffect } from 'react'
+import { Form, Formik } from 'formik'
 
 import { storiesOf } from '@storybook/react'
 import { SelectBox, SelectBoxOptions } from '.'