An input component integrating
mui with React Hook Form. It uses the
Controller component from React Hook Form(RHF) and configures
TextField to handle validations and more. I use this component instead of
mui in all my forms. There are three benefits to this approach(adaptor pattern):
- It provides RHF integration
- It is a customised version of
TextFieldwith some common functions that meet the business requirements
- It is an adaptor bridging the RHF forms and
muiso that the form components do not depend
mui, which made upgrading or replacing
The SUT's target users are developers, and it is to be used inside an RHF form only. Therefore the behaviours and tests are focused on the expectations of the developers.
- It inherits all the behaviours from
muiand accepts all
- It takes
defaultValuerequired props and registers the
TextFieldto the form context of RHF
- It has two modes: edit mode and read-only mode. In read-only mode, it is disabled and rendered as a standard(underline)
TextField. In edit mode, it is rendered as outlined
- It hides if
- It builds in the
requiredvalidation rule and takes a
- It accepts validation rules and enforces them.
- It formats numbers with thousands separator commas by default and accept
react-number-formatfor further customisation.
- It defaults to size small.
- It takes an optional
onChangeprop. On change, it will trigger the given
onChangemethod and update input value.
TestComponentshows the usage of the SUT. Its props are extended from the SUT's props so that the tests can configure the SUT on the fly.
- For good orders, the tests are grouped into four categories: appearance, behaviours, validations and number formatting.
- Appearance tests depend on how
TextFieldand assert the class names rendered by
- Validation tests depend on RHF's validations and the render helper text of
- The tests use
userEventto mimic end-user browser interactions.
onSubmitis mocked and cleared before each test.
EpicTextFieldis a styled