test(input): add testcase for password

components/input/__tests__/__snapshots__/index.test.tsx.snap

@@ -6,14 +6,15 @@ exports[`Input should be work with icon 1`] = `
           box-sizing: content-box;
           display: flex;
           width: calc(1.687 * 16pt * .42);
-          height: calc(1.687 * 16pt * .42);
+          height: 100%;
           align-items: center;
           vertical-align: center;
-          pointer-events: none;
           margin: 0;
           padding: 0 calc(1.687 * 16pt * .3);
           line-height: 1;
           position: relative;
+          cursor: default;
+          pointer-events: none;
         }
       </style></span><input type=\\"text\\" class=\\" left-icon\\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"></div></div><style>
         .with-label {
@@ -103,14 +104,15 @@ exports[`Input should be work with icon 1`] = `
           box-sizing: content-box;
           display: flex;
           width: calc(1.687 * 16pt * .42);
-          height: calc(1.687 * 16pt * .42);
+          height: 100%;
           align-items: center;
           vertical-align: center;
-          pointer-events: none;
           margin: 0;
           padding: 0 calc(1.687 * 16pt * .3);
           line-height: 1;
           position: relative;
+          cursor: default;
+          pointer-events: none;
         }
       </style></span></div></div><style>
         .with-label {

components/input/__tests__/__snapshots__/password.test.tsx.snap

@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InputPassword should render correctly 1`] = `
+"<div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   \\"><input type=\\"password\\" class=\\" right-icon\\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"><span class=\\"input-icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"16\\" height=\\"16\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg><style>
+        .input-icon {
+          box-sizing: content-box;
+          display: flex;
+          width: calc(1.687 * 16pt * .42);
+          height: 100%;
+          align-items: center;
+          vertical-align: center;
+          margin: 0;
+          padding: 0 calc(1.687 * 16pt * .3);
+          line-height: 1;
+          position: relative;
+          cursor: pointer;
+          pointer-events: auto;
+        }
+      </style></span></div></div><style>
+        .with-label {
+          display: inline-block;
+          width: initial;
+          box-sizing: border-box;
+          -webkit-box-align: center;
+        }
+        
+        .input-container {
+          display: inline-flex;
+          align-items: center;
+          width: initial;
+          height: calc(1.687 * 16pt);
+        }
+
+        .input-wrapper {
+          display: inline-flex;
+          vertical-align: middle;
+          align-items: center;
+          height: 100%;
+          flex: 1;
+          user-select: none;
+          border-radius: 5px;
+          border: 1px solid #eaeaea;
+          transition: border 0.2s ease 0s, color 0.2s ease 0s;
+        }
+        
+        .input-wrapper.left-label {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+        
+        .input-wrapper.right-label {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+        
+        .input-wrapper.disabled {
+          background-color: #fafafa;
+          border-color: #eaeaea;
+          cursor: not-allowed;
+        }
+        
+        input.disabled {
+          cursor: not-allowed;
+        }
+        
+        .input-wrapper.hover {
+          border-color: #666;
+        }
+
+        input {
+          margin: 4px 10px;
+          padding: 0;
+          box-shadow: none;
+          font-size: .875rem;
+          background-color: transparent;
+          border: none;
+          color: #000;
+          outline: none;
+          border-radius: 0;
+          width: 100%;
+          -webkit-appearance: none;
+        }
+        
+        input.left-icon {
+          margin-left: 0;
+        }
+        
+        input.right-icon {
+          margin-right: 0;
+        }
+        
+        ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
+          color: #999;
+        }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
+      </style></div>"
+`;

components/input/__tests__/index.test.tsx

@@ -122,4 +122,22 @@ describe('Input', () => {
     input.simulate('blur')
     expect(blur).toHaveBeenCalled()
   })
+  
+  it('should trigger icon event', () => {
+    const click = jest.fn()
+    const wrapper = mount(
+      <Input icon={<span id="test-icon">icon</span>} onIconClick={click} iconClickable />
+    )
+    wrapper.find('#test-icon').simulate('click', nativeEvent)
+    expect(click).toHaveBeenCalled()
+  })
+  
+  it('should ignore icon event when input disabled', () => {
+    const click = jest.fn()
+    const wrapper = mount(
+      <Input icon={<span id="test-icon">icon</span>} onIconClick={click} iconClickable disabled />
+    )
+    wrapper.find('#test-icon').simulate('click', nativeEvent)
+    expect(click).not.toHaveBeenCalled()
+  })
 })

components/input/__tests__/password.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Input } from 'components'
+import { nativeEvent } from 'tests/utils'
+
+describe('InputPassword', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(<Input.Password />)
+    const el = wrapper.find('input').getDOMNode() as HTMLInputElement
+    expect(el.type).toEqual('password')
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+  
+  it('should toggle input type', () => {
+    const wrapper = mount(<Input.Password />)
+    wrapper.find('.input-icon').simulate('click', nativeEvent)
+    const el = wrapper.find('input').getDOMNode() as HTMLInputElement
+    expect(el.type).toEqual('text')
+  })
+  
+  it('should hide toggle icon', () => {
+    const wrapper = mount(<Input.Password hideToggle />)
+    expect(wrapper.find('.input-icon').length).toBe(0)
+  })
+})

components/input/input.tsx

@@ -58,6 +58,7 @@ const Input = React.forwardRef<HTMLInputElement, React.PropsWithChildren<InputPr
   const clearHandler = (event: React.MouseEvent<HTMLDivElement>) => {
     setSelfValue('')
     onClearClick && onClearClick(event)
+    /* istanbul ignore next */
     if (!inputRef.current) return
     
     const changeEvent = simulateChangeEvent(inputRef.current, event)

components/input/password.tsx

@@ -24,8 +24,8 @@ const InputPassword = React.forwardRef<HTMLInputElement, React.PropsWithChildren
   useImperativeHandle(ref, () => inputRef.current)
   
   const iconClickHandler = () => {
-    if (hideToggle) return
     setVisible(v => !v)
+    /* istanbul ignore next */
     if (inputRef && inputRef.current) {
       inputRef.current.focus()
     }