react-input-mask - npm Package Compare versions

Comparing version 0.5.4 to 0.5.5

build/InputElement.js

@@ -34,2 +34,6 @@ // https://github.com/sanniassin/react-input-mask
 
+        if (!input) {
+            return null;
+        }
+
         // React 0.14
@@ -232,2 +236,22 @@ if (this.isDOMElement(input)) {
     },
+    setSelection: function (start) {
+        var len = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
+
+        var input = this.getInputDOMNode();
+        if (!input) {
+            return;
+        }
+
+        var end = start + len;
+        if ("selectionStart" in input && "selectionEnd" in input) {
+            input.selectionStart = start;
+            input.selectionEnd = end;
+        } else {
+            var range = input.createTextRange();
+            range.collapse(true);
+            range.moveStart("character", start);
+            range.moveEnd("character", end - start);
+            range.select();
+        }
+    },
     getSelection: function () {
@@ -243,9 +267,6 @@ var input = this.getInputDOMNode();
             var range = document.selection.createRange();
-            var len = input.value.length;
-
-            var inputRange = input.createTextRange();
-            inputRange.moveToBookmark(range.getBookmark());
-
-            start = -inputRange.moveStart("character", -len);
-            end = -inputRange.moveEnd("character", -len);
+            if (range.parentElement() === input) {
+                start = -range.moveStart("character", -input.value.length);
+                end = -range.moveEnd("character", -input.value.length);
+            }
         }
@@ -260,18 +281,5 @@
     getCaretPos: function () {
-        var input = this.getInputDOMNode();
-        var pos = 0;
-
-        if ("selectionStart" in input) {
-            pos = input.selectionStart;
-        } else {
-            var range = document.selection.createRange();
-            var len = range.text.length;
-            range.moveStart("character", -input.value.length);
-            pos = range.text.length - len;
-        }
-
-        return pos;
+        return this.getSelection().start;
     },
     setCaretPos: function (pos) {
-        var input;
         var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (fn) {
@@ -281,21 +289,6 @@ setTimeout(fn, 0);
 
-        var setPos = function () {
-            if ("selectionStart" in input && "selectionEnd" in input) {
-                input.selectionStart = input.selectionEnd = pos;
-            } else if ("setSelectionRange" in input) {
-                input.setSelectionRange(pos, pos);
-            } else {
-                var inputRange = input.createTextRange();
-                inputRange.collapse(true);
-                inputRange.moveStart("character", pos);
-                inputRange.moveEnd("character", 0);
-                inputRange.select();
-            }
-        };
+        var setPos = this.setSelection.bind(this, pos);
 
-        if (this.isMounted()) {
-            input = this.getInputDOMNode();
-            setPos();
-            raf(setPos);
-        }
+        setPos();
+        raf(setPos);
 
@@ -302,0 +295,0 @@ this.lastCaretPos = pos;

InputElement.js

@@ -33,2 +33,6 @@ // https://github.com/sanniassin/react-input-mask
 
+        if (!input) {
+            return null;
+        }
+
         // React 0.14
@@ -216,2 +220,21 @@ if (this.isDOMElement(input)) {
     },
+    setSelection: function(start, len = 0) {
+        var input = this.getInputDOMNode();
+        if (!input) {
+            return;
+        }
+
+        var end = start + len;
+        if ("selectionStart" in input && "selectionEnd" in input) {
+            input.selectionStart = start;
+            input.selectionEnd = end;
+        }
+        else {
+            var range = input.createTextRange();
+            range.collapse(true);
+            range.moveStart("character", start);
+            range.moveEnd("character", end - start);
+            range.select();
+        }
+    },
     getSelection: function() {
@@ -228,9 +251,6 @@ var input = this.getInputDOMNode();
             var range = document.selection.createRange();
-            var len = input.value.length;
-
-            var inputRange = input.createTextRange();
-            inputRange.moveToBookmark(range.getBookmark());
-
-            start = -inputRange.moveStart("character", -len);
-            end = -inputRange.moveEnd("character", -len);
+            if (range.parentElement() === input) {
+                start = -range.moveStart("character", -input.value.length);
+                end = -range.moveEnd("character", -input.value.length);
+            }
         }
@@ -245,19 +265,5 @@
     getCaretPos: function() {
-        var input = this.getInputDOMNode();
-        var pos = 0;
-
-        if ("selectionStart" in input) {
-            pos = input.selectionStart;
-        }
-        else {
-            var range = document.selection.createRange();
-            var len = range.text.length;
-            range.moveStart("character", -input.value.length);
-            pos = range.text.length - len;
-        }
-
-        return pos;
+        return this.getSelection().start;
     },
     setCaretPos: function(pos) {
-        var input;
         var raf = window.requestAnimationFrame
@@ -271,24 +277,7 @@ ||
 
-        var setPos = function() {
-            if ("selectionStart" in input && "selectionEnd" in input) {
-                input.selectionStart = input.selectionEnd = pos;
-            }
-            else if ("setSelectionRange" in input) {
-                input.setSelectionRange(pos, pos);
-            }
-            else {
-                var inputRange = input.createTextRange();
-                inputRange.collapse(true);
-                inputRange.moveStart("character", pos);
-                inputRange.moveEnd("character", 0);
-                inputRange.select();
-            }
-        };
+        var setPos = this.setSelection.bind(this, pos);
+        
+        setPos();
+        raf(setPos);
 
-        if (this.isMounted()) {
-            input = this.getInputDOMNode();
-            setPos();
-            raf(setPos);
-        }
-
         this.lastCaretPos = pos;
@@ -295,0 +284,0 @@ },

package.json

 {
   "name": "react-input-mask",
   "description": "Masked input component for React",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "homepage": "https://github.com/sanniassin/react-input-mask",
@@ -20,6 +20,14 @@ "license": "MIT",
     "babel": "^5.8.34",
-    "babel-jest": "^5.3.0",
-    "jest": "^0.1.40",
+    "babelify": "^6.4.0",
+    "console-polyfill": "^0.2.2",
+    "jasmine-core": "^2.3.4",
+    "karma": "^0.13.15",
+    "karma-browserify": "^4.4.0",
+    "karma-browserstack-launcher": "^0.1.7",
+    "karma-jasmine": "^0.3.6",
+    "karma-phantomjs-launcher": "^0.2.1",
+    "phantomjs": "^1.9.18",
     "react": "^0.14.3",
-    "react-addons-test-utils": "^0.14.3"
+    "react-addons-test-utils": "^0.14.3",
+    "react-dom": "^0.14.3"
   },
@@ -29,15 +37,5 @@ "main": "build/InputElement.js",
     "build": "babel InputElement.js -d build",
-    "prepublish": "npm run build && npm test",
-    "test": "jest"
+    "prepublish": "npm test && npm run build",
+    "test": "karma start"
   },
-  "jest": {
-    "scriptPreprocessor": "./node_modules/babel-jest",
-    "testDirectoryName": "tests",
-    "unmockedModulePathPatterns": [
-      "./node_modules/react",
-      "./node_modules/react-dom",
-      "./node_modules/react-addons-test-utils",
-      "./node_modules/fbjs"
-    ]
-  },
   "repository": {
@@ -44,0 +42,0 @@ "type": "git",

tests/input-test.js

@@ -1,3 +0,1 @@
-jest.dontMock('../build/InputElement');
-
 import React from 'react';
@@ -7,341 +5,343 @@ import ReactDOM from 'react-dom';
 
-const Input = require('../build/InputElement');
+const Input = require('../InputElement');
 
-var selectionStart = 0;
-var selectionEnd = 0;
-var selectionMethods = {
-    getCaretPos: () => selectionStart,
-    setCaretPos: (pos) => {
-        selectionStart = selectionEnd = pos;
-    },
-    getSelection: () => ({
-        start: selectionStart,
-        end: selectionEnd,
-        length: selectionEnd - selectionStart
-    }),
-    setSelection: (start, len) => {
-        selectionStart = start;
-        selectionEnd = start + len;
-    }
+document.body.innerHTML = '<div id="container"></div>';
+const container = document.getElementById('container');;
+
+function createInput(component, cb) {
+    return (done) => {
+        ReactDOM.unmountComponentAtNode(container);
+        var input = ReactDOM.render(component, container);
+
+        // IE can fail if executed synchronously
+        setImmediate(() => {
+            cb(input);
+            done();
+        });
+    };
 };
 
 describe('Input', () => {
-    it('Init format', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="[phone]" defaultValue="74953156454" />
-        );
-        input = Object.assign(input, selectionMethods);
+    it('Init format', createInput(
+        <Input mask="[phone]" defaultValue="74953156454" />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
-        expect('[phone]').toEqual(inputNode.value);
-    });
+        expect(inputNode.value).toEqual('[phone]');
+    }));
 
-    it('Format unacceptable string', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="+7 (9a9) 999 99 99" defaultValue="749531b6454" />
-        );
-        input = Object.assign(input, selectionMethods);
+    it('Format unacceptable string', createInput(
+        <Input mask="+7 (9a9) 999 99 99" defaultValue="749531b6454" />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
-        expect('+7 (4b6) 454 __ __').toEqual(inputNode.value);
-    });
+        expect(inputNode.value).toEqual('+7 (4b6) 454 __ __');
 
-    it('Focus/blur', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="+7 (*a9) 999 99 99" />
-        );
-        input = Object.assign(input, selectionMethods);
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
+    it('Focus/blur', createInput(
+        <Input mask="+7 (*a9) 999 99 99" />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
-        expect('').toEqual(inputNode.value);
+        expect(inputNode.value).toEqual('');
 
-        input.onFocus({
-            target: inputNode
-        });
-        expect('+7 (___) ___ __ __').toEqual(inputNode.value);
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+        expect(inputNode.value).toEqual('+7 (___) ___ __ __');
 
-        input.onBlur({
-            target: inputNode
-        });
-        expect('').toEqual(inputNode.value);
+        inputNode.blur();
+        TestUtils.Simulate.blur(inputNode);
+        expect(inputNode.value).toEqual('');
 
         input.setProps({ value: '+7 (___) ___ __ __' });
-        expect('').toEqual(inputNode.value);
+        expect(inputNode.value).toEqual('');
 
         input.setProps({ value: '+7 (1__) ___ __ __' });
-        expect('+7 (1__) ___ __ __').toEqual(inputNode.value);
-    });
+        expect(inputNode.value).toEqual('+7 (1__) ___ __ __');
 
-    it('alwaysShowMask', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="[phone]" alwaysShowMask />
-        );
-        input = Object.assign(input, selectionMethods);
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
+    it('alwaysShowMask', createInput(
+        <Input mask="[phone]" alwaysShowMask />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
-        expect('+7 (___) ___ __ __').toEqual(inputNode.value);
+        expect(inputNode.value).toEqual('+7 (___) ___ __ __');
 
-        input.onFocus({
-            target: inputNode
-        });
-        expect('+7 (___) ___ __ __').toEqual(inputNode.value);
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+        expect(inputNode.value).toEqual('+7 (___) ___ __ __');
 
-        input.onBlur({
-            target: inputNode
-        });
-        expect('+7 (___) ___ __ __').toEqual(inputNode.value);
+        inputNode.blur();
+        TestUtils.Simulate.blur(inputNode);
+        expect(inputNode.value).toEqual('+7 (___) ___ __ __');
 
         input.setProps({ alwaysShowMask: false });
-        expect('').toEqual(inputNode.value);
+        expect(inputNode.value).toEqual('');
 
         input.setProps({ alwaysShowMask: true });
-        expect('+7 (___) ___ __ __').toEqual(inputNode.value);
-    });
+        expect(inputNode.value).toEqual('+7 (___) ___ __ __');
 
-    it('Focus cursor position', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="[phone]" />
-        );
-        input = Object.assign(input, selectionMethods);
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
+    it('Focus cursor position', createInput(
+        <Input mask="[phone]" />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
-        input.setCaretPos(2);
-        input.onFocus({
-            target: inputNode
-        });
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+
         expect(input.getCaretPos()).toEqual(4);
 
-        input.onBlur({
-            target: inputNode
-        });
+        inputNode.blur();
+        TestUtils.Simulate.blur(inputNode);
 
         input.setProps({ value: '+7 (___) ___ _1 __' });
         input.setCaretPos(2);
-        input.onFocus({
-            target: inputNode
-        });
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
         expect(input.getCaretPos()).toEqual(16);
 
-        input.onBlur({
-            target: inputNode
-        });
+        inputNode.blur();
+        TestUtils.Simulate.blur(inputNode);
 
         input.setProps({ value: '+7 (___) ___ _1 _1' });
         input.setCaretPos(2);
-        input.onFocus({
-            target: inputNode
-        });
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
         expect(input.getCaretPos()).toEqual(2);
-    });
 
-    it('Characters input', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="+7 (*a9) 999 99 99" />
-        );
-        input = Object.assign(input, selectionMethods);
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
+    it('Characters input', createInput(
+        <Input mask="+7 (*a9) 999 99 99" />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
-        input.onFocus({
-            target: inputNode
-        });
 
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+
         input.setCaretPos(0);
         TestUtils.Simulate.keyPress(inputNode, { key: 'E' });
-        expect('+7 (E__) ___ __ __').toEqual(inputNode.value);
+        expect(inputNode.value).toEqual('+7 (E__) ___ __ __');
 
         TestUtils.Simulate.keyPress(inputNode, { key: '6' });
-        expect('+7 (E__) ___ __ __').toEqual(inputNode.value);
+        expect(inputNode.value).toEqual('+7 (E__) ___ __ __');
 
         TestUtils.Simulate.keyPress(inputNode, { key: 'x' });
-        expect('+7 (Ex_) ___ __ __').toEqual(inputNode.value);
-    });
+        expect(inputNode.value).toEqual('+7 (Ex_) ___ __ __');
 
-    it('Characters input without maskChar', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="[phone]" defaultValue={"[phone]"} maskChar={null} />
-        );
-        input = Object.assign(input, selectionMethods);
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
+    it('Characters input without maskChar', createInput(
+        <Input mask="[phone]" defaultValue={"[phone]"} maskChar={null} />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+
         input.setCaretPos(4);
         TestUtils.Simulate.keyPress(inputNode, { key: 'E' });
-        expect('[phone]').toEqual(inputNode.value);
+        expect(inputNode.value).toEqual('[phone]');
 
         TestUtils.Simulate.keyPress(inputNode, { key: '6' });
-        expect('[phone]').toEqual(inputNode.value);
-    });
+        expect(inputNode.value).toEqual('[phone]');
 
-    it('Backspace single character', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="[phone]" defaultValue="74953156454" />
-        );
-        input = Object.assign(input, selectionMethods);
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
+    it('Backspace single character', createInput(
+        <Input mask="[phone]" defaultValue="74953156454" />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+
         input.setCaretPos(10);
         TestUtils.Simulate.keyDown(inputNode, { key: 'Backspace' });
-        expect('+7 (495) _15 64 54').toEqual(inputNode.value);
+        expect(inputNode.value).toEqual('+7 (495) _15 64 54');
         
         TestUtils.Simulate.keyDown(inputNode, { key: 'Backspace' });
-        expect('+7 (49_) _15 64 54').toEqual(inputNode.value);
-    });
+        expect(inputNode.value).toEqual('+7 (49_) _15 64 54');
 
-    it('Backspace single character without maskChar', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="[phone]" defaultValue="74953156454" maskChar={null} />
-        );
-        input = Object.assign(input, selectionMethods);
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
+    it('Backspace single character without maskChar', createInput(
+        <Input mask="[phone]" defaultValue="74953156454" maskChar={null} />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+
         input.setCaretPos(10);
         TestUtils.Simulate.keyDown(inputNode, { key: 'Backspace' });
-        expect('[phone]').toEqual(inputNode.value);
-    });
+        expect(inputNode.value).toEqual('[phone]');
 
-    it('Backspace single character cursor position', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="[phone]" defaultValue="74953156454" />
-        );
-        input = Object.assign(input, selectionMethods);
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
+    it('Backspace single character cursor position', createInput(
+        <Input mask="[phone]" defaultValue="74953156454" />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+
         input.setCaretPos(10);
         TestUtils.Simulate.keyDown(inputNode, { key: 'Backspace' });
-        expect(9).toEqual(input.getCaretPos());
+        expect(input.getCaretPos()).toEqual(9);
 
         TestUtils.Simulate.keyDown(inputNode, { key: 'Backspace' });
-        expect(6).toEqual(input.getCaretPos());
+        expect(input.getCaretPos()).toEqual(6);
 
         input.setCaretPos(4);
         TestUtils.Simulate.keyDown(inputNode, { key: 'Backspace' });
-        expect(4).toEqual(input.getCaretPos());
-    });
+        expect(input.getCaretPos()).toEqual(4);
 
-    it('Backspace range', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="[phone]" defaultValue="74953156454" />
-        );
-        input = Object.assign(input, selectionMethods);
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
+    it('Backspace range', createInput(
+        <Input mask="[phone]" defaultValue="74953156454" />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+
         input.setSelection(1, 9);
         TestUtils.Simulate.keyDown(inputNode, { key: 'Backspace' });
-        expect('+7 (___) _15 64 54').toEqual(inputNode.value);
-    });
+        expect(inputNode.value).toEqual('+7 (___) _15 64 54');
 
-    it('Backspace range cursor position', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="[phone]" defaultValue="74953156454" />
-        );
-        input = Object.assign(input, selectionMethods);
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
+    it('Backspace range cursor position', createInput(
+        <Input mask="[phone]" defaultValue="74953156454" />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+
         input.setSelection(1, 9);
         TestUtils.Simulate.keyDown(inputNode, { key: 'Backspace' });
-        expect(1).toEqual(input.getCaretPos());
-    });
+        expect(input.getCaretPos()).toEqual(1);
 
-    it('Delete single character', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="[phone]" defaultValue="74953156454" />
-        );
-        input = Object.assign(input, selectionMethods);
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
+    it('Delete single character', createInput(
+        <Input mask="[phone]" defaultValue="74953156454" />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+
         input.setCaretPos(0);
         TestUtils.Simulate.keyDown(inputNode, { key: 'Delete' });
-        expect('[phone]').toEqual(inputNode.value);
+        expect(inputNode.value).toEqual('[phone]');
 
         input.setCaretPos(7);
         TestUtils.Simulate.keyDown(inputNode, { key: 'Delete' });
-        expect('+7 (495) _15 64 54').toEqual(inputNode.value);
+        expect(inputNode.value).toEqual('+7 (495) _15 64 54');
 
         input.setCaretPos(11);
         TestUtils.Simulate.keyDown(inputNode, { key: 'Delete' });
-        expect('+7 (495) _1_ 64 54').toEqual(inputNode.value);
-    });
+        expect(inputNode.value).toEqual('+7 (495) _1_ 64 54');
 
-    it('Delete single character cursor position', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="[phone]" defaultValue="74953156454" />
-        );
-        input = Object.assign(input, selectionMethods);
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
+    it('Delete single character cursor position', createInput(
+        <Input mask="[phone]" defaultValue="74953156454" />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+
         input.setCaretPos(0);
         TestUtils.Simulate.keyDown(inputNode, { key: 'Delete' });
-        expect(4).toEqual(input.getCaretPos());
+        expect(input.getCaretPos()).toEqual(4);
 
         input.setCaretPos(7);
         TestUtils.Simulate.keyDown(inputNode, { key: 'Delete' });
-        expect(9).toEqual(input.getCaretPos());
+        expect(input.getCaretPos()).toEqual(9);
 
         input.setCaretPos(11);
         TestUtils.Simulate.keyDown(inputNode, { key: 'Delete' });
-        expect(11).toEqual(input.getCaretPos());
-    });
+        expect(input.getCaretPos()).toEqual(11);
 
-    it('Delete range', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="[phone]" defaultValue="74953156454" />
-        );
-        input = Object.assign(input, selectionMethods);
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
+    it('Delete range', createInput(
+        <Input mask="[phone]" defaultValue="74953156454" />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+
         input.setSelection(1, 9);
         TestUtils.Simulate.keyDown(inputNode, { key: 'Delete' });
-        expect('+7 (___) _15 64 54').toEqual(inputNode.value);
-    });
+        expect(inputNode.value).toEqual('+7 (___) _15 64 54');
 
-    it('Mask change', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="9999-9999-9999-9999" defaultValue="34781226917" />
-        );
-        input = Object.assign(input, selectionMethods);
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
+    it('Mask change', createInput(
+        <Input mask="9999-9999-9999-9999" defaultValue="34781226917" />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
         input.setProps({ mask: "9999-999999-99999" });
-        expect('3478-122691-7____').toEqual(inputNode.value);
+        expect(inputNode.value).toEqual('3478-122691-7____');
 
         input.setProps({ mask: "9-9-9-9" });
-        expect('3-4-7-8').toEqual(inputNode.value);
+        expect(inputNode.value).toEqual('3-4-7-8');
 
         input.setProps({ mask: null });
-        expect('34781226917').toEqual(inputNode.value);
-    });
+        expect(inputNode.value).toEqual('34781226917');
 
-    it('Paste string', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="9999-9999-9999-9999" defaultValue="____-____-____-6543"/>
-        );
-        input = Object.assign(input, selectionMethods);
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
+    it('Paste string', createInput(
+        <Input mask="9999-9999-9999-9999" defaultValue="____-____-____-6543" />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+
         input.setSelection(3, 15);
         input.pasteText(inputNode.value, '34781226917', input.getSelection());
-        expect('___3-4781-2269-17_3').toEqual(inputNode.value);
+        expect(inputNode.value).toEqual('___3-4781-2269-17_3');
 
         input.setCaretPos(3);
         input.pasteText(inputNode.value, '3-__81-2_6917', input.getSelection());
-        expect('___3-__81-2_69-17_3').toEqual(inputNode.value);
-    });
+        expect(inputNode.value).toEqual('___3-__81-2_69-17_3');
 
-    it('Paste string without maskChar', () => {
-        var input = TestUtils.renderIntoDocument(
-            <Input mask="9999-9999-9999-9999" defaultValue="9999-9999-9999-9999" maskChar={null}/>
-        );
-        input = Object.assign(input, selectionMethods);
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
+    it('Paste string without maskChar', createInput(
+        <Input mask="9999-9999-9999-9999" defaultValue="9999-9999-9999-9999" maskChar={null} />, (input) => {
         var inputNode = ReactDOM.findDOMNode(input);
 
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+
         input.setSelection(0, 19);
         input.pasteText(inputNode.value, '34781226917', input.getSelection());
-        expect('3478-1226-917').toEqual(inputNode.value);
+        expect(inputNode.value).toEqual('3478-1226-917');
 
         input.setCaretPos(1);
         input.pasteText(inputNode.value, '12345', input.getSelection());
-        expect('3123-4547-8122-6917').toEqual(inputNode.value);
+        expect(inputNode.value).toEqual('3123-4547-8122-6917');
 
         input.setCaretPos(1);
         input.pasteText(inputNode.value, '4321', input.getSelection());
-        expect('3432-1547-8122-6917').toEqual(inputNode.value);
-    });
+        expect(inputNode.value).toEqual('3432-1547-8122-6917');
+
+        ReactDOM.unmountComponentAtNode(container);
+    }));
 });

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58151

increased by6.29%

Number of package files

8

increased by14.29%

Lines of code

1503

increased by7.51%

Worsened metrics

Dev dependency count

13

increased by160%

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes