add tests to RangeStepInput component

.github/workflows/build-and-test.yml

@@ -13,4 +13,6 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-      - run: make eslint
+        run: make eslint
+      - name: Run tests
+        run: npm run test

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+};

docs/__tests__/index.spec.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { configure, mount } from 'enzyme';
+import { App } from "../index";
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+import { forceNumber } from "../../lib/utils";
+
+configure({ adapter: new Adapter() });
+
+describe('App', () => {
+  let ReactWrapper;
+  beforeEach(() => {
+    ReactWrapper = mount(<App />);
+  });
+
+  it('should render a div with a p tag and the RangeStepInput component', () => {
+    expect(ReactWrapper.find('p').length).toEqual(1);
+    expect(ReactWrapper.find(".input-group").length).toEqual(1);
+  });
+
+  it('should change the state when changing RangeStepInput', () => {
+    expect(ReactWrapper.find(".input-group-text").text()).toEqual('50');
+    ReactWrapper.find('input').simulate('change', { target: { value: 100 } });
+    expect(ReactWrapper.find(".input-group-text").text()).toEqual('100');
+  });
+});
+
+describe('forceNumber', () => {
+  describe('input value is a number', () => {
+    it('should return the provided value as a number', () => {
+      expect(typeof forceNumber('10')).toEqual('number');
+      expect(forceNumber('10')).toBe(10);
+    });
+
+    it('should return a negative value as a number', () => {
+      expect(forceNumber('-10')).toBe(-10);
+    });
+
+    it('should return a floating value as a number', () => {
+      expect(forceNumber('0.7')).toBe(0.7);
+    });
+
+    it('should return 0 value as a number', () => {
+      expect(forceNumber('0')).toBe(0);
+    });
+
+    it('should return a value starting with 0 as a number not starting with 0', () => {
+      expect(forceNumber('007')).toBe(7);
+    });
+
+    it('should return a value of type number as a number', () => {
+      expect(forceNumber(20)).toBe(20);
+    });
+  });
+
+  describe('input value is not a numbe', () => {
+    it('should return 0 if input is a text', () => {
+      expect(forceNumber('hello')).toBe(0);
+      expect(forceNumber('5hello')).toBe(0);
+      expect(forceNumber('5 hello')).toBe(0);
+      expect(forceNumber('5 7')).toBe(0);
+      expect(forceNumber('')).toBe(0);
+      expect(forceNumber(undefined)).toBe(0);
+      expect(forceNumber({})).toBe(0);
+      expect(forceNumber(null)).toBe(0);
+      expect(forceNumber([1, 2, 3])).toBe(0);
+      expect(forceNumber(NaN)).toBe(0);
+    });
+
+    it('should return 0 if input contains a number and text', () => {
+      expect(forceNumber('5hello')).toBe(0);
+      expect(forceNumber('5 hello')).toBe(0);
+    });
+
+    it('should return 0 if input contains spaces', () => {
+      expect(forceNumber('5 7')).toBe(0);
+    });
+
+    it('should return 0 if input is an empty string', () => {
+      expect(forceNumber('')).toBe(0);
+    });
+
+    it('should return 0 if input is undefined or null', () => {
+      expect(forceNumber(undefined)).toBe(0);
+      expect(forceNumber(null)).toBe(0);
+    });
+
+    it('should return 0 if input is an empty object', () => {
+      expect(forceNumber({})).toBe(0);
+    });
+
+    it('should return 0 if input is an array of numbers', () => {
+      expect(forceNumber([1, 2, 3])).toBe(0);
+    });
+
+    it('should return 0 if input is NaN', () => {
+      expect(forceNumber(NaN)).toBe(0);
+    });
+  })
+});

docs/index.jsx

@@ -1,44 +1,49 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {RangeStepInput} from '..';
+import { RangeStepInput } from '..';
 
-const forceNumber = function(n) {
-    n = Number(n);
-    if (isNaN(n) || typeof n === 'undefined') {
-        n = 0;
-    }
-    return n;
+const forceNumber = function (n) {
+  n = Number(n);
+  if (isNaN(n) || typeof n === 'undefined') {
+    n = 0;
+  }
+  return n;
 };
 
-class App extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: 50
-        };
-    }
-    render() {
-        return <div>
-            <p>Here's an example RangeStepInput:</p>
-            <div className="input-group mb-3">
-                <RangeStepInput
-                    min={0} max={100}
-                    value={this.state.value} step={1}
-                    onChange={this.onChange.bind(this)}
-                />
-                <div className="input-group-append">
-                    <span className="input-group-text ml-2">
-                        {this.state.value}
-                    </span>
-                </div>
-            </div>
-        </div>;
+export class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 50
     };
-    onChange(e) {
-        const newVal = forceNumber(e.target.value);
-        this.setState({value: newVal});
-    }
-};
+  }
+
+  render() {
+    return <div>
+      <p>Here's an example RangeStepInput:</p>
+      <div className="input-group mb-3">
+        <RangeStepInput
+          min={0}
+          max={100}
+          value={this.state.value}
+          step={1}
+          onChange={this.onChange.bind(this)}
+        />
+        <div className="input-group-append">
+            <span className="input-group-text ml-2">
+                {this.state.value}
+            </span>
+        </div>
+      </div>
+    </div>;
+  };
 
+  onChange(e) {
+    const newVal = forceNumber(e.target.value);
+    this.setState({ value: newVal });
+  }
+}
 
-ReactDOM.render(<App />, document.getElementById('react-container'));
+if (document.getElementById('react-container')) {
+  ReactDOM.render(<App />, document.getElementById('react-container'));
+}

lib/__tests__/range-step-input.spec.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { configure, mount } from 'enzyme';
+import RangeStepInput from "../RangeStepInput";
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+
+configure({ adapter: new Adapter() });
+
+describe('<RangeStepInput>', () => {
+  it('should render a RangeStepInput with a number as a value', () => {
+    const onChange = jest.fn();
+    const val = 5;
+    let ReactWrapper = mount(<RangeStepInput onChange={onChange} step={1} value={val} />);
+
+    expect(ReactWrapper.find('input').prop('value')).toBeDefined();
+    expect(ReactWrapper.find('input').prop('value')).toEqual(5);
+    expect(ReactWrapper.find('input').prop('type')).toBe('range');
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('behavior', () => {
+    it('renders a range setter input', () => {
+      const onChange = jest.fn();
+      let ReactWrapper = mount(<RangeStepInput onChange={onChange} step={1} value={5} />);
+
+      expect(ReactWrapper.find('input').length).toEqual(1);
+    });
+
+    it('should set value to a new value on change', () => {
+      const testState = { step: 1, value: 5 };
+      let ReactWrapper = mount(<RangeStepInput onChange={(e) => {
+        testState.value = e.target.value;
+      }} step={testState.step} value={testState.value} />);
+
+      expect(ReactWrapper.find('input').prop('value')).toEqual(5);
+      ReactWrapper.find('input').simulate('change', { target: { value: 50 } });
+      expect(testState.value).toEqual(50);
+    });
+
+    it('it changes state on mouse down', () => {
+      const onChange = jest.fn();
+
+      let ReactWrapper = mount(<RangeStepInput
+        onChange={onChange}
+        step={1}
+        value={5} />);
+
+      ReactWrapper.find('input').simulate('mouseDown');
+
+      expect(ReactWrapper.state().isMouseDown).toEqual(true);
+      ReactWrapper.find('input').simulate('mouseUp');
+      expect(ReactWrapper.state().isMouseDown).toEqual(false);
+    });
+  });
+
+});