chore: #130 address warning and error when running test (#187)

* chore: #130 address warning and error when running test

* chore: #130 update address warning when running test

package.json

@@ -1,6 +1,9 @@
 {
   "name": "root",
   "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
     "build": "lerna run build:prod --parallel",
     "fetch-config": "yarn config-manager getSecret reapit-marketplace-app-config",
@@ -10,6 +13,22 @@
     "test": "lerna run test:ci --parallel",
     "test-e2e:ci": "lerna run test-e2e:ci --parallel"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged && lerna run test:update-badges --since HEAD^ && git add .",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "lint-staged": {
+    "**/cypress/**/*.{ts,tsx}": [
+      "yarn lint:cypress",
+      "git add"
+    ],
+    "*.{ts,tsx}": [
+      "yarn lint",
+      "git add"
+    ]
+  },
   "dependencies": {
     "@apollo/react-hooks": "^3.1.3",
     "@sentry/browser": "^5.11.1",
@@ -182,7 +201,7 @@
     "source-map-loader": "^0.2.4",
     "style-loader": "^0.23.1",
     "sw2dts": "^2.6.2",
-    "ts-jest": "^24.2.0",
+    "ts-jest": "^25.2.0",
     "ts-loader": "^6.2.1",
     "ts-node": "^8.3.0",
     "ts-paths-to-webpack-alias": "^0.3.1",
@@ -200,24 +219,5 @@
     "yeoman-generator": "^4.0.1",
     "yo": "^3.1.1",
     "yosay": "^2.0.2"
-  },
-  "workspaces": [
-    "packages/*"
-  ],
-  "lint-staged": {
-    "*.{ts,tsx}": [
-      "yarn lint",
-      "git add"
-    ],
-    "**/cypress/**/*.{ts,tsx}": [
-      "yarn lint:cypress",
-      "git add"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "pre-commit": "lint-staged && lerna run test:update-badges --since HEAD^ && git add ."
-    }
   }
 }

packages/elements/src/components/DatePicker/__tests__/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { shallow, mount } from 'enzyme'
 import { DatePicker, DatePickerProps, CustomInput } from '../index'
 import { Formik, Form } from 'formik'
+import { act } from 'react-dom/test-utils'
 
 jest.unmock('dayjs')
 
@@ -31,7 +32,7 @@ describe('Date-time picker', () => {
     })
   })
 
-  it('should map value correctly from textbox to formik', done => {
+  it('should map value correctly from textbox to formik', async () => {
     const submitCallback = jest.fn()
     const mockEvent = {
       target: {
@@ -49,18 +50,20 @@ describe('Date-time picker', () => {
         }}
       </Formik>,
     )
+
     const input = wrapper.find('input')
-    input.simulate('change', mockEvent)
+
+    await act(async () => {
+      input.simulate('change', mockEvent)
+    })
 
     // onChange
     const form = wrapper.find('form')
-    form.simulate('submit')
-
-    setTimeout(() => {
-      wrapper.update()
-      expect(submitCallback.mock.calls[0][0]).toMatchObject({ test: '1997-11-22T00:00:00' })
-      done()
-    }, 100)
+    await act(async () => {
+      form.simulate('submit')
+    })
+    wrapper.update()
+    expect(submitCallback.mock.calls[0][0]).toMatchObject({ test: '1997-11-22T00:00:00' })
   })
 
   describe('should map value correctly from formik to text box', () => {

packages/elements/src/components/FileInput/__tests__/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { shallow, mount } from 'enzyme'
 import { FileInput, FileInputProps } from '../index'
-import { Formik } from 'formik'
+import { Formik, Form } from 'formik'
 import toJson from 'enzyme-to-json'
+import { act } from 'react-dom/test-utils'
 
 const props: FileInputProps = {
   name: 'test',
@@ -32,42 +33,28 @@ describe('FileInput', () => {
     expect(label.text()).toBe('test')
   })
 
-  it('should render error correctly', done => {
-    // setup
-    let waitUntilFormSubmittedResolver: any = null
-
-    let submitForm
-
-    // formik submit function was asynchronous
-    let onSubmit = values => {
-      waitUntilFormSubmittedResolver(values)
-    }
-
+  it('should render error correctly', async () => {
     const Wrapper = () => (
-      <Formik validate={() => ({ test: 'test' })} initialValues={{ test: '' }} onSubmit={onSubmit}>
-        {({ handleSubmit }) => {
-          submitForm = handleSubmit
-
-          // force form vaidate to test
-          return <FileInput id="test" labelText="test" name="test" />
-        }}
+      <Formik validate={() => ({ test: 'test' })} initialValues={{ test: '' }} onSubmit={jest.fn()}>
+        {() => (
+          <Form>
+            <FileInput id="test" labelText="test" name="test" />
+          </Form>
+        )}
       </Formik>
     )
 
-    // trigger upload even
     const wrapper = mount(<Wrapper />)
 
-    submitForm()
+    // onSubmit
+    await act(async () => {
+      wrapper.find('form').simulate('submit', { preventDefault: () => {} })
+    })
 
-    // validate function of is asynchornous and non blocking. use setimeout to push assertion
-    // function into event loop queue
-    setTimeout(() => {
-      wrapper.update()
-      const error = wrapper.find('.has-text-danger')
-      console.log(error.at(0).html())
+    wrapper.update()
 
-      done()
-    }, 1)
+    const error = wrapper.find('.has-text-danger')
+    expect(error).toHaveLength(1)
   })
 
   it('should convert to base64 data correctly', done => {

packages/elements/src/components/FileInput/index.tsx

@@ -33,7 +33,7 @@ export const FileInput = ({
   inputProps,
   required = false,
 }: FileInputProps) => {
-  const [fileUrl, setFileName] = useState()
+  const [fileUrl, setFileName] = useState<string>()
   const inputFile = React.useRef<HTMLInputElement>(null)
 
   return (

packages/elements/src/components/Input/__tests__/index.tsx

@@ -5,6 +5,7 @@ import { Formik, Form } from 'formik'
 import toJson from 'enzyme-to-json'
 import { FaSearch } from 'react-icons/fa'
 import { fieldValidateRequire } from '../../../utils/validators'
+import { act } from 'react-dom/test-utils'
 
 const props: InputProps = {
   id: 'username',
@@ -42,7 +43,7 @@ describe('Input', () => {
     expect(toJson(shallow(<Input {...requiredInputProps} />))).toMatchSnapshot()
   })
 
-  it('should work when integrating with Formik', () => {
+  it('should work when integrating with Formik', async () => {
     const wrapper = mount(
       <Formik initialValues={{ username: '' }} onSubmit={jest.fn()}>
         {() => (
@@ -53,12 +54,15 @@ describe('Input', () => {
       </Formik>,
     )
     expect(wrapper.find('label')).toHaveLength(1)
-    wrapper.find('input').simulate('change', {
-      target: {
-        value: 'abcxyz',
-        name: 'username',
-      },
+    await act(async () => {
+      wrapper.find('input').simulate('change', {
+        target: {
+          value: 'abcxyz',
+          name: 'username',
+        },
+      })
     })
+    wrapper.update()
     expect(wrapper.find('input').prop('value')).toEqual('abcxyz')
   })
 

packages/elements/src/components/Map/__tests__/index.tsx

@@ -28,7 +28,6 @@ describe('Map', () => {
   let markerCallBack = jest.fn()
   let mockCurrentLocation: any = null
   let mockBounds: any = null
-  const mockAlert = jest.spyOn(window, 'alert')
   let mockMarker: any = null
   let mockMarkers: any[] = []
   const mockMarkerComponent = () => <div>Test</div>
@@ -113,7 +112,7 @@ describe('Map', () => {
       const mockResponse = {}
       const mockStatus = 'ERROR'
       fn(mockResponse, mockStatus)
-      expect(mockAlert).toBeCalled()
+      expect(window.alert).toBeCalled()
     })
   })
 

packages/elements/src/components/SelectBox/__tests__/index.tsx

@@ -3,6 +3,7 @@ import { shallow, mount } from 'enzyme'
 import { SelectBox, SelectBoxOptions, SelectBoxProps } from '../index'
 import { Formik, Form, FormikErrors } from 'formik'
 import toJson from 'enzyme-to-json'
+import { act } from 'react-dom/test-utils'
 
 const mockedOptions: SelectBoxOptions[] = [
   { label: 'a', value: 'a' },
@@ -66,17 +67,16 @@ describe('SelectBox', () => {
   })
 
   describe('should work when integrating with Formik', () => {
-    it('Render error correctly', done => {
+    it('Render error correctly', async () => {
       const wrapper = mount(<ErrorFomrikComponent />)
       const select = wrapper.find('select')
-      select.simulate('focus')
-      select.simulate('change', { target: { name: 'demo', value: 'b' } })
-      select.simulate('blur', { target: { name: 'demo', value: 'b' } })
-      select.update()
-      setTimeout(() => {
-        expect(wrapper.find('select').props().value).toBe('b')
-        done()
-      }, 100)
+      await act(async () => {
+        select.simulate('change', { target: { name: 'demo', value: 'b' } })
+      })
+
+      wrapper.update()
+
+      expect(wrapper.find('select').props().value).toBe('b')
     })
   })
 
@@ -86,18 +86,19 @@ describe('SelectBox', () => {
     expect(label.text()).toBe('Demo')
   })
 
-  it('Map value correctly from formik', done => {
+  it('Map value correctly from formik', async () => {
     const wrapper = createFormikWrapper()
 
-    wrapper.find('select').simulate('change', {
-      target: {
-        value: 'a',
-      },
+    await act(async () => {
+      wrapper.find('select').simulate('change', {
+        target: {
+          name: 'demo',
+          value: 'a',
+        },
+      })
     })
-    setTimeout(() => {
-      expect(wrapper.find('select').prop('value')).toEqual('a')
-    }, 1)
-    done()
+    wrapper.update()
+    expect(wrapper.find('select').prop('value')).toEqual('a')
   })
 
   afterEach(() => {

packages/elements/src/components/TextArea/__tests__/index.tsx

@@ -3,6 +3,7 @@ import { shallow, mount } from 'enzyme'
 import { TextArea, TextAreaProps } from '../index'
 import { Formik, Form } from 'formik'
 import toJson from 'enzyme-to-json'
+import { act } from 'react-dom/test-utils'
 
 const props: TextAreaProps = {
   id: 'username',
@@ -15,7 +16,7 @@ describe('Input', () => {
     expect(toJson(shallow(<TextArea {...props} />))).toMatchSnapshot()
   })
 
-  it('should work when integrating with Formik', () => {
+  it('should work when integrating with Formik', async () => {
     const wrapper = mount(
       <Formik initialValues={{ username: '' }} onSubmit={jest.fn()}>
         {() => (
@@ -26,12 +27,15 @@ describe('Input', () => {
       </Formik>,
     )
     expect(wrapper.find('label')).toHaveLength(1)
-    wrapper.find('textarea').simulate('change', {
-      target: {
-        value: 'abcxyz',
-        name: 'username',
-      },
+    await act(async () => {
+      wrapper.find('textarea').simulate('change', {
+        target: {
+          value: 'abcxyz',
+          name: 'username',
+        },
+      })
     })
+    wrapper.update()
     expect(wrapper.find('textarea').prop('value')).toEqual('abcxyz')
   })
 

packages/elements/src/hooks/UsePortal/__tests__/portal-provider.tsx

@@ -4,11 +4,7 @@ import { usePortal } from '../use-portal'
 import { PortalProvider } from '../portal-provider'
 
 export const renderWithPortalProvider = ui => {
-  return (
-    <PortalProvider>
-      <body>{ui}</body>
-    </PortalProvider>
-  )
+  return <PortalProvider>{ui}</PortalProvider>
 }
 
 const App: React.FunctionComponent<any> = () => {

packages/geo-diary/src/sagas/appointment-detail.ts

@@ -78,7 +78,7 @@ export const cancelAppointmentRequest = function*() {
       yield put(appointmentsRequestData({ time: filterTime }))
     }
   } catch (error) {
-    console.error(error)
+    console.error(error.message)
     yield put(
       errorThrownServer({
         type: 'SERVER',

packages/geo-diary/src/sagas/next-appointment.ts

@@ -101,7 +101,7 @@ export const validateNextAppointment = function*({ data: travelMode }: Action<st
         )
       }
     } catch (err) {
-      console.log(err)
+      console.error(err.message)
       yield put(nextAppointmentClear())
     }
   } else {

packages/lifetime-legal/src/sagas/__tests__/checklist-detail.ts

@@ -34,6 +34,8 @@ import ActionTypes from '@/constants/action-types'
 import { selectUserCode } from '@/selectors/auth'
 import { fetchContact, fetchIdentityCheck, updateContact, updateIdentityCheck } from '../api'
 
+jest.mock('../../core/store')
+
 const mockHeaders = {
   Authorization: '123',
 }

packages/lifetime-legal/src/sagas/__tests__/submit-checks.ts

@@ -7,6 +7,12 @@ import { cloneableGenerator } from '@redux-saga/testing-utils'
 import { history } from '@/core/router'
 import routes from '@/constants/routes'
 
+jest.mock('../../core/router.tsx', () => ({
+  history: {
+    push: jest.fn(),
+  },
+}))
+
 describe('submit-check post data', () => {
   const id = 'MKC16000098"'
   const action: Action<string> = {