Testing a Mui Date Picker Adaptor Component Integrated with React Hook Form

Subject Under Test

A date picker component integrating mui’s date picker with React Hook Form’s form context. It uses the Controller component from React Hook Form(RHF) and configures mui’s DatePicker to handle validations and more. I use t…


This content originally appeared on DEV Community and was authored by Rex

Subject Under Test

A date picker component integrating mui's date picker with React Hook Form's form context. It uses the Controller component from React Hook Form(RHF) and configures mui's DatePicker to handle validations and more. I use this component instead of mui's DatePicker in all my forms.

Behaviours

  1. It inherits all the behaviours from DatePicker of mui and accepts all DatePicker props as-is.
  2. It takes name, formContext and defaultValue required props and registers the DatePicker to the form context of RHF
  3. It has two modes: edit mode and read-only mode. In read-only mode, it is disabled, has no date picker icon button and is rendered as a standard(underline) TextField. In edit mode, it is rendered as outlined TextField.
  4. It builds in the required validation rule and takes a required prop.
  5. It builds in a validation rule for invalid date input
  6. It accepts validation rules and enforces them.
  7. It takes an optional onChange prop. It will update the value and trigger the given onChange method on change.
  8. It has a default mask and date format and can be changed with props.
  9. It defaults to size small, full width and shrink label.
  10. It set time to end of the day.
  11. It takes a style prop for styling the underlying TextField.

Code

Notes

  1. matchMedia is mocked so that the date picker can be rendered in desktop mode with the date picker icon button
  2. TestComponent sets up a React Hook Form environment and shows how the SUT can be used.
  3. FormForTesting is a testing utility component for testing React Hook Form form components.
  4. The tests are grouped into three categories: appearance, behaviours and validations.


This content originally appeared on DEV Community and was authored by Rex


Print Share Comment Cite Upload Translate Updates
APA

Rex | Sciencx (2022-01-21T22:01:35+00:00) Testing a Mui Date Picker Adaptor Component Integrated with React Hook Form. Retrieved from https://www.scien.cx/2022/01/21/testing-a-mui-date-picker-adaptor-component-integrated-with-react-hook-form/

MLA
" » Testing a Mui Date Picker Adaptor Component Integrated with React Hook Form." Rex | Sciencx - Friday January 21, 2022, https://www.scien.cx/2022/01/21/testing-a-mui-date-picker-adaptor-component-integrated-with-react-hook-form/
HARVARD
Rex | Sciencx Friday January 21, 2022 » Testing a Mui Date Picker Adaptor Component Integrated with React Hook Form., viewed ,<https://www.scien.cx/2022/01/21/testing-a-mui-date-picker-adaptor-component-integrated-with-react-hook-form/>
VANCOUVER
Rex | Sciencx - » Testing a Mui Date Picker Adaptor Component Integrated with React Hook Form. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/21/testing-a-mui-date-picker-adaptor-component-integrated-with-react-hook-form/
CHICAGO
" » Testing a Mui Date Picker Adaptor Component Integrated with React Hook Form." Rex | Sciencx - Accessed . https://www.scien.cx/2022/01/21/testing-a-mui-date-picker-adaptor-component-integrated-with-react-hook-form/
IEEE
" » Testing a Mui Date Picker Adaptor Component Integrated with React Hook Form." Rex | Sciencx [Online]. Available: https://www.scien.cx/2022/01/21/testing-a-mui-date-picker-adaptor-component-integrated-with-react-hook-form/. [Accessed: ]
rf:citation
» Testing a Mui Date Picker Adaptor Component Integrated with React Hook Form | Rex | Sciencx | https://www.scien.cx/2022/01/21/testing-a-mui-date-picker-adaptor-component-integrated-with-react-hook-form/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts