feat: rename classname to className and add related testing

Author: foryuki

src/Input.tsx

@@ -5,9 +5,9 @@ import { SvgBorderedClose } from 'or-icons'
 
 interface Props {
   /**
-   * additional classname
+   * additional className
    */
-  classname?: string
+  className?: string
 
   /**
    * whether the input box can only enter numbers
@@ -45,13 +45,13 @@ interface Props {
 export class Input extends PureComponent<Props, {}> {
   render() {
     const {
-      classname,
+      className,
       placeholder = '',
       value,
       maxlength,
       canClear = true
     } = this.props
-    const inputClass = clx(classname, 'or-input')
+    const inputClass = clx(className, 'or-input')
 
     return (
       <div className={inputClass}>
@@ -88,6 +88,7 @@ export class Input extends PureComponent<Props, {}> {
 
   handleClear = () => {
     const { onChange } = this.props
+    /* istanbul ignore next */
     if (typeof onChange === 'function') {
       onChange('')
     }

tests/Input.test.tsx

@@ -14,6 +14,12 @@ describe('src/index', () => {
       expect(wrapper.find('.or-input .or-clear-icon').length).toBe(0)
     })
 
+    it('should render basicly #className', () => {
+      wrapper = mount(<RenderInput className="hello" />)
+      expect(wrapper.find('.or-input').length).toBe(1)
+      expect(wrapper.find('.or-input').hasClass('hello')).toBe(true)
+    })
+
     it('should render basicly #placeholder', () => {
       wrapper = mount(<RenderInput placeholder="name" />)
       expect(wrapper.find('.or-input').length).toBe(1)
@@ -22,7 +28,7 @@ describe('src/index', () => {
     })
   })
 
-  describe('simulate events', () => {
+  describe('simulate events #default', () => {
     let wrapper
     it('onchange event', () => {
       wrapper = mount(<RenderInput />)
@@ -35,6 +41,19 @@ describe('src/index', () => {
     })
   })
 
+  describe('simulate events #numericInput', () => {
+    let wrapper
+    it('onchange event', () => {
+      wrapper = mount(<RenderInput numericInput={true} />)
+      const input = wrapper.find('.or-input input')
+      input.simulate('change', { target: { value: '123' } })
+      expect(wrapper.find('.or-input input').prop('value')).toBe('123')
+      expect(wrapper.find('.or-input .or-clear-icon').hostNodes().length).toBe(
+        1
+      )
+    })
+  })
+
   describe('simulate clear input events', () => {
     let wrapper
     it('onchange event', () => {
@@ -53,6 +72,7 @@ interface Props {
   maxlength?: number
   placeholder?: string
   value?: string
+  className?: string
 }
 
 class RenderInput extends React.Component<Props, {}> {
@@ -64,6 +84,7 @@ class RenderInput extends React.Component<Props, {}> {
     return (
       <div>
         <Input
+          className={this.props.className}
           value={this.state.name}
           onChange={this.handleChange}
           {...this.props}