Add unit tests

Author: Daniel Yefet

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["@babel/preset-react"]
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }

README.md

@@ -1,6 +1,6 @@
 # react-input-auto-format
 
-A super simple input component that formats as you type.
+React Input Auto Format (catchy, I know) automatically formats the value of an input field while you're typing in it.
 
 ```HTML
 <Input format="## - ## - ##">

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+};

package.json

@@ -18,18 +18,26 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
     "@rollup/plugin-babel": "^5.3.0",
+    "@testing-library/dom": "^8.7.2",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.2.1",
+    "babel-jest": "^27.2.5",
+    "jest": "^27.2.5",
+    "jest-dom": "^4.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rollup": "^2.58.0"
   },
   "peerDependencies": {
-    "react": "^17.8.0",
-    "react-dom": "^17.8.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "scripts": {
     "build": "rollup -c",
-    "start": "rollup -c -w"
+    "start": "rollup -c -w",
+    "test": "jest --no-watchman"
   }
 }

src/index.js

@@ -2,9 +2,11 @@ import React, { useEffect, useRef, useState } from 'react';
 
 function noop() {}
 
-function format(value, pattern, placeholder = '#') {
+function format(value, pattern) {
   if (!pattern) return value;
 
+  const placeholder = '#';
+
   let endOfValue = 0;
   let characterIndex = 0;
   let newValue = value;
@@ -46,7 +48,7 @@ function Input({
   value: userValue = '',
   ...rest
 }) {
-  const [value, setValue] = useState(userValue);
+  const [value, setValue] = useState(format(userValue, pattern));
   const inputRef = useRef();
   const infoRef = useRef({});
 

src/index.spec.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import Input from '.';
+
+describe('The Input component', () => {
+  function getInput(props) {
+    return render(<Input type="text" {...props} />).getByRole('textbox');
+  }
+
+  it('should render', () => {
+    expect(getInput().value).toBe('');
+  });
+
+  it('should accept a default value', () => {
+    expect(getInput({ value: 'foo' }).value).toBe('foo');
+  });
+
+  it('should format the default value', () => {
+    expect(getInput({ value: 'foo', format: '# - # - #' }).value).toBe(
+      'f - o - o'
+    );
+  });
+
+  it('should format while typing', () => {
+    const input = getInput({ format: '## - ## - ##' });
+
+    userEvent.type(input, '12');
+
+    expect(input.value).toBe('12 - ');
+  });
+
+  it('should broadcast the raw value', () => {
+    const handleValueChange = jest.fn();
+
+    const input = getInput({
+      format: '# - # - #',
+      onValueChange: handleValueChange,
+    });
+
+    userEvent.type(input, '123');
+
+    expect(handleValueChange).toBeCalledWith('123');
+  });
+
+  it.each`
+    format            | type        | moveCursorTo | typeAgain        | cursorPosition
+    ${'## - ##'}      | ${'12'}     | ${null}      | ${null}          | ${5}
+    ${'## - ## - ##'} | ${'12345'}  | ${3}         | ${'1'}           | ${6}
+    ${'## - ## - ##'} | ${'123456'} | ${null}      | ${'{backspace}'} | ${11}
+    ${'## - ## - ##'} | ${'123456'} | ${7}         | ${'{backspace}'} | ${6}
+    ${'## - ## - ##'} | ${'123456'} | ${4}         | ${'{backspace}'} | ${1}
+  `(
+    'should position the cursor correctly',
+    ({ format, type, typeAgain, moveCursorTo, cursorPosition }) => {
+      const input = getInput({ format });
+
+      userEvent.type(input, type);
+
+      if (moveCursorTo) input.setSelectionRange(moveCursorTo, moveCursorTo);
+      if (typeAgain) userEvent.type(input, typeAgain);
+
+      expect(input.selectionStart).toBe(cursorPosition);
+    }
+  );
+});