refactor: refactorng after review

openedx · Sep 18, 2023 · 4687fed · 4687fed
1 parent 029f3d9
commit 4687fed
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 34 deletions.
diff --git a/src/Form/FormControl.jsx b/src/Form/FormControl.jsx
@@ -9,8 +9,6 @@ import FormControlDecoratorGroup from './FormControlDecoratorGroup';
 
 import { callAllHandlers, useHasValue } from './fieldUtils';
 
-const DEFAULT_MASK_VALUE = '00-00-000';
-
 const FormControl = React.forwardRef(({
   as,
   className,
@@ -21,7 +19,6 @@ const FormControl = React.forwardRef(({
   autoResize,
   onChange,
   hasInputMask,
-  mask,
   ...props
 }, ref) => {
   const {
@@ -76,7 +73,7 @@ const FormControl = React.forwardRef(({
       className={className}
     >
       <RBFormControl
-        as={hasInputMask ? IMaskInput : as}
+        as={hasInputMask?.length ? IMaskInput : as}
         ref={resolvedRef}
         size={size}
         isInvalid={isInvalid}
@@ -85,7 +82,7 @@ const FormControl = React.forwardRef(({
           'has-value': hasValue,
         })}
         onChange={handleOnChange}
-        mask={mask}
+        mask={hasInputMask}
         {...controlProps}
       />
     </FormControlDecoratorGroup>
@@ -128,10 +125,8 @@ FormControl.propTypes = {
   isInvalid: PropTypes.bool,
   /** Only for `as="textarea"`. Specifies whether the input can be resized according to the height of content. */
   autoResize: PropTypes.bool,
-  /** Specifies whether to use an input mask for the input. */
-  hasInputMask: PropTypes.bool,
-  /** Specifies the input mask to be used if `hasInputMask` is set to `true`. */
-  mask: PropTypes.string,
+  /** Specifies what format to use for the input mask. */
+  hasInputMask: PropTypes.string,
 };
 
 FormControl.defaultProps = {
@@ -150,8 +145,7 @@ FormControl.defaultProps = {
   isValid: undefined,
   isInvalid: undefined,
   autoResize: false,
-  hasInputMask: false,
-  mask: DEFAULT_MASK_VALUE,
+  hasInputMask: undefined,
 };
 
 export default FormControl;
diff --git a/src/Form/form-control.mdx b/src/Form/form-control.mdx
@@ -179,8 +179,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
         <h3>Phone</h3>
         <Form.Group>
           <Form.Control
-            hasInputMask
-            mask="+{1}(000)000-00-00"
+            hasInputMask="+{1}(000)000-00-00"
             value={value}
             onChange={handleChange}
             leadingElement={<Icon src={FavoriteBorder} />}
@@ -193,8 +192,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
       <h3>Credit card</h3>
       <Form.Group>
         <Form.Control
-          hasInputMask
-          mask="0000 0000 0000 0000"
+          hasInputMask="0000 0000 0000 0000"
           value={value}
           onChange={handleChange}
           leadingElement={<Icon src={FavoriteBorder} />}
@@ -206,8 +204,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
       <h3>Date</h3>
       <Form.Group>
         <Form.Control
-          hasInputMask
-          mask={Date}
+          hasInputMask={Date}
           value={value}
           onChange={handleChange}
           leadingElement={<Icon src={FavoriteBorder} />}
@@ -219,8 +216,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
       <h3>Secure password</h3>
       <Form.Group>
         <Form.Control
-          hasInputMask
-          mask="XXX-XX-0000"
+          hasInputMask="XXX-XX-0000"
           value={value}
           definitions={{
             X: {
@@ -239,8 +235,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
       <h3>OTP password</h3>
       <Form.Group>
         <Form.Control
-          hasInputMask
-          mask="G-00000"
+          hasInputMask="G-00000"
           value={value}
           onChange={handleChange}
           leadingElement={<Icon src={FavoriteBorder} />}
@@ -253,8 +248,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
           <h3>Course prise</h3>
           <Form.Group>
             <Form.Control
-              hasInputMask
-              mask="$num"
+              hasInputMask="$num"
               blocks={{
                 num: {
                   // nested masks are available!
@@ -303,8 +297,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
   return (
     <Form.Group>
       <Form.Control
-        hasInputMask
-        mask="+{1}(000)000-00-00"
+        hasInputMask="+{1}(000)000-00-00"
         leadingElement={<Icon src={FavoriteBorder} />}
         trailingElement={<Icon src={Verified} />}
         floatingLabel="What is your phone number?"

diff --git a/src/Form/tests/FormControl.test.jsx b/src/Form/tests/FormControl.test.jsx
@@ -1,5 +1,8 @@
 import React, { useState } from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import {
+  fireEvent, render, screen, act,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import FormControl from '../FormControl';
 
@@ -14,8 +17,7 @@ function Component({ isClearValue }) {
 
   return (
     <FormControl
-      hasInputMask
-      mask="+{1}(000)000-00-00"
+      hasInputMask="+{1}(000)000-00-00"
       value={inputValue}
       onChange={isClearValue ? onChangeFunc : (e) => setInputValue(e.target.value)}
       onAccept={isClearValue ? onChangeFunc : (value) => setInputValue(value)}
@@ -25,9 +27,10 @@ function Component({ isClearValue }) {
 }
 
 describe('FormControl', () => {
-  it('textarea changes its height with autoResize prop', () => {
+  it('textarea changes its height with autoResize prop', async () => {
     const useReferenceSpy = jest.spyOn(React, 'useRef').mockReturnValue(ref);
     const onChangeFunc = jest.fn();
+    const inputText = 'new text';
     render(
       <FormControl as="textarea" autoResize onChange={onChangeFunc} data-testid="form-control-textarea" />,
     );
@@ -41,17 +44,19 @@ describe('FormControl', () => {
     expect(useReferenceSpy).toHaveBeenCalledTimes(1);
     expect(ref.current.style.height).toBe('0px');
 
-    fireEvent.change(textarea, { target: { value: 'new text' } });
+    await userEvent.type(textarea, inputText);
 
-    expect(onChangeFunc).toHaveBeenCalledTimes(1);
+    expect(onChangeFunc).toHaveBeenCalledTimes(inputText.length);
     expect(ref.current.style.height).toEqual(`${ref.current.scrollHeight + ref.current.offsetHeight}px`);
   });
   it('should apply and accept input mask for phone numbers', () => {
     render(<Component />);
 
-    const input = screen.getByTestId('form-control-with-mask');
-    fireEvent.change(input, { target: { value: '1234567890' } });
-    expect(input.value).toBe('+1(234)567-89-0');
+    act(() => {
+      const input = screen.getByTestId('form-control-with-mask');
+      userEvent.type(input, '1234567890');
+      expect(input.value).toBe('+1(234)567-89-0');
+    });
   });
   it('should be cleared from the mask elements value', () => {
     render(<Component isClearValue />);