add more tests

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 '@wojtekmaj/enzyme-adapter-react-17';
+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.js → lib/__tests__/range-step-input.spec.jsx

@@ -1,30 +1,19 @@
 import React from 'react';
-import { mount, configure } from 'enzyme';
+import { configure, mount } from 'enzyme';
 import RangeStepInput from "../RangeStepInput";
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-// import * as App from '../../docs/index.jsx';
-import * as ReactDOM from "react-dom";
 
 configure({ adapter: new Adapter() });
 
-// jest.mock('../../docs/index');
-// const onChange = App.onChange as jest.MockedFunction;
-
 describe('<RangeStepInput>', () => {
   it('should render a RangeStepInput with a number as a value', () => {
     const onChange = jest.fn();
     const val = 5;
-    const div = document.createElement('div');
-
-    ReactDOM.render(<RangeStepInput onChange={onChange} step={1} value={val} />, div);
-
     let ReactWrapper = mount(<RangeStepInput onChange={onChange} step={1} value={val} />);
-    console.log("INNER HTML", div.innerHTML);
-    expect(div.querySelector('input').type).toBe('range');
 
     expect(ReactWrapper.find('input').prop('value')).toBeDefined();
     expect(ReactWrapper.find('input').prop('value')).toEqual(5);
-    // expect(ReactWrapper.find('input').prop('value').type()).toBe('range'); wieso geht das nicht?
+    expect(ReactWrapper.find('input').prop('type')).toBe('range');
   });
 
   afterEach(() => {
@@ -40,42 +29,30 @@ describe('<RangeStepInput>', () => {
     });
 
     it('should set value to a new value on change', () => {
-      // onChange.mockReturnValue(50);
-
       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: { name: 'width', value: 50 } });
+      ReactWrapper.find('input').simulate('change', { target: { value: 50 } });
       expect(testState.value).toEqual(50);
-
-      // wieso geht das nicht mit dem Mock? :
-      // ReactWrapper.find('input').simulate('onChange');
-      // expect(ReactWrapper.find('input').prop('value')).toEqual(newVal);
     });
 
-    // dieser Test ist komplett komisch
-    it('it changes state on mouse down', async () => {
+    it('it changes state on mouse down', () => {
       const onChange = jest.fn();
-      const mockCallBack = jest.fn();
 
       let ReactWrapper = mount(<RangeStepInput
         onChange={onChange}
-        onMouseDown={mockCallBack}
         step={1}
         value={5} />);
 
-      await ReactWrapper.find('input').invoke(onMouseDown)(
-        {
-          isMouseDown: true
-        }
-      );
+      ReactWrapper.find('input').simulate('mouseDown');
 
-      expect(ReactWrapper.state(isMouseDown)).toEqual(false)
-    })
+      expect(ReactWrapper.state().isMouseDown).toEqual(true);
+      ReactWrapper.find('input').simulate('mouseUp');
+      expect(ReactWrapper.state().isMouseDown).toEqual(false);
+    });
   });
 
 });