- Fixed #597 (Handle backspace before prefix, when negative value is …

…present) - Integrate testing-library
s-yadav · Dec 1, 2021 · 97366f0 · 97366f0
1 parent fdafbf1
commit 97366f0
Show file tree

Hide file tree

Showing 4 changed files with 233 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -45,6 +45,8 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.6.2",
     "@rollup/plugin-buble": "^0.21.3",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/react": "^16.9.4",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",

diff --git a/src/number_format.js b/src/number_format.js
@@ -740,33 +740,33 @@ class NumberFormat extends React.Component {
     const { value: lastValue } = this.state;
 
     if (input) {
-      //set caret position, and value imperatively when element is provided
-      if (setCaretPosition) {
-        //calculate caret position if not defined
-        if (!caretPos) {
-          const inputValue = params.inputValue || input.value;
+      //calculate caret position if not defined
+      if (caretPos === undefined && setCaretPosition) {
+        const inputValue = params.inputValue || input.value;
 
-          const currentCaretPosition = getCurrentCaretPosition(input);
+        const currentCaretPosition = getCurrentCaretPosition(input);
 
-          /**
-           * set the value imperatively, this is required for IE fix
-           * This is also required as if new caret position is beyond the previous value.
-           * Caret position will not be set correctly
-           */
-          input.value = formattedValue;
+        /**
+         * set the value imperatively, this is required for IE fix
+         * This is also required as if new caret position is beyond the previous value.
+         * Caret position will not be set correctly
+         */
+        input.value = formattedValue;
 
-          //get the caret position
-          caretPos = this.getCaretPosition(inputValue, formattedValue, currentCaretPosition);
-        }
+        //get the caret position
+        caretPos = this.getCaretPosition(inputValue, formattedValue, currentCaretPosition);
+      }
 
+      /**
+       * set the value imperatively, as we set the caret position as well imperatively.
+       * This is to keep value and caret position in sync
+       */
+      input.value = formattedValue;
+
+      //set caret position, and value imperatively when element is provided
+      if (setCaretPosition) {
         //set caret position
         this.setPatchedCaretPosition(input, caretPos, formattedValue);
-      } else {
-        /**
-         * if we are not setting caret position set the value imperatively.
-         * This is required on onBlur method
-         */
-        input.value = formattedValue;
       }
     }
 

diff --git a/test/library/keypress_and_caret.spec.js b/test/library/keypress_and_caret.spec.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import NumberFormat from '../../src/number_format';
 import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import {
   simulateKeyInput,
@@ -249,19 +251,28 @@ describe('Test keypress and caret position changes', () => {
       expect(caretPos).toEqual(2);
     });
 
-    it('should allow removing negation(-), even if its before suffix', () => {
+    it('should allow removing negation(-), even if its before suffix', async () => {
       const spy = jasmine.createSpy();
-      wrapper.setProps({
-        suffix: '',
-        prefix: '$',
-        value: '-$1,000',
-        onValueChange: spy,
-      });
-      wrapper.update();
 
-      simulateKeyInput(wrapper.find('input'), 'Backspace', 2, 2, setSelectionRange);
-      expect(wrapper.state().value).toEqual('$1,000');
-      expect(caretPos).toEqual(1);
+      const view = render(
+        <NumberFormat
+          thousandSeparator=","
+          suffix=""
+          prefix="$"
+          value="-$1,000"
+          onValueChange={spy}
+          data-testid="currency-input"
+        />,
+      );
+
+      const input = await view.findByTestId('currency-input');
+
+      input.setSelectionRange(2, 2);
+
+      userEvent.type(input, '{backspace}');
+
+      expect(input.value).toEqual('$1,000');
+      expect(input.selectionStart).toEqual(1);
       expect(spy).toHaveBeenCalled();
     });
   });