diff --git a/components/input/__tests__/__snapshots__/index.test.tsx.snap b/components/input/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000..9c907be --- /dev/null +++ b/components/input/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,1031 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Input should be work with icon 1`] = ` +"
test-icon
test-icon
" +`; + +exports[`Input should be work with label 1`] = ` +"
label
label
" +`; + +exports[`Input should work with different sizes 1`] = ` +"
" +`; + +exports[`Input should work with different status 1`] = ` +"
" +`; diff --git a/components/input/__tests__/index.test.tsx b/components/input/__tests__/index.test.tsx new file mode 100644 index 0000000..5220bf7 --- /dev/null +++ b/components/input/__tests__/index.test.tsx @@ -0,0 +1,125 @@ +import React from 'react' +import { mount } from 'enzyme' +import { Input } from 'components' +import { nativeEvent } from 'tests/utils' + +describe('Input', () => { + it('should render correctly', () => { + const wrapper = mount() + expect(() => wrapper.unmount()).not.toThrow() + }) + + it('should work with different sizes', () => { + const wrapper = mount( +
+ + + + +
+ ) + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should work with different status', () => { + const wrapper = mount( +
+ + + +
+ ) + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should be work with label', () => { + const wrapper = mount( +
+ + + Block Label +
+ ) + expect(wrapper.html()).toMatchSnapshot() + }) + it('should be work with icon', () => { + const wrapper = mount( +
+ test-icon} /> + test-icon} /> +
+ ) + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should set input from value', () => { + let wrapper = mount() + let input = wrapper.find('input').getDOMNode() as HTMLInputElement + expect(input.value).toEqual('test') + + wrapper = mount() + input = wrapper.find('input').getDOMNode() as HTMLInputElement + expect(input.value).toEqual('test2') + + wrapper.setProps({ value: 'test3' }) + input = wrapper.find('input').getDOMNode() as HTMLInputElement + expect(input.value).toEqual('test3') + }) + + it('should trigger event when input changed', () => { + let value = '' + const callback = jest.fn() + .mockImplementation((e: React.ChangeEvent) => value = e.target.value) + const wrapper = mount() + wrapper.find('input').at(0) + .simulate('change', { target: { value: 'test' } }) + expect(callback).toHaveBeenCalled() + expect(value).toEqual('test') + }) + + it('should ignore event when input disabled', () => { + const callback = jest.fn() + const wrapper = mount() + wrapper.find('input').at(0) + .simulate('change', { target: { value: 'test' } }) + expect(callback).not.toHaveBeenCalled() + }) + + it('should ignore event when input readonly', () => { + const callback = jest.fn() + const wrapper = mount() + wrapper.find('input').at(0) + .simulate('change', { target: { value: 'test' } }) + expect(callback).not.toHaveBeenCalled() + }) + + it('should clear text', () => { + let value = '' + const callback = jest.fn() + .mockImplementation((e: React.ChangeEvent) => value = e.target.value) + const clearHandler = jest.fn() + const wrapper = mount() + + wrapper.find('input').at(0) + .simulate('change', { target: { value: 'test' } }) + expect(callback).toHaveBeenCalled() + expect(value).toEqual('test') + + wrapper.find('.clear-icon').at(0) + .simulate('click', nativeEvent) + expect(clearHandler).toHaveBeenCalled() + expect(value).toEqual('') + }) + + it('should trigger focus correctly', () => { + const focus = jest.fn() + const blur = jest.fn() + const wrapper = mount() + + const input = wrapper.find('input').at(0) + input.simulate('focus') + expect(focus).toHaveBeenCalled() + input.simulate('blur') + expect(blur).toHaveBeenCalled() + }) +}) diff --git a/components/input/__tests__/use-input.test.tsx b/components/input/__tests__/use-input.test.tsx new file mode 100644 index 0000000..86b9934 --- /dev/null +++ b/components/input/__tests__/use-input.test.tsx @@ -0,0 +1,56 @@ +import React, { useEffect } from 'react' +import { mount } from 'enzyme' +import { Input, useInput } from 'components' + +describe('UseInput', () => { + it('should follow change with use-input', () => { + let log = '' + const logSpy = jest.spyOn(console, 'log') + .mockImplementation(msg => log = msg) + const MockInput: React.FC<{ value?: string }> = ({ value }) => { + const { state, setState, bindings } = useInput('') + useEffect(() => { + if (value) setState(value) + }, [value]) + useEffect(() => { + if (state) console.log(state) + }, [state]) + return + } + + const wrapper = mount() + wrapper.setProps({ value: 'test' }) + const input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement + + expect(input.value).toEqual('test') + expect(log).toContain('test') + + log = '' + wrapper.find('input').at(0) + .simulate('change', { target: { value: 'test-change' }}) + expect(log).toContain('test-change') + logSpy.mockRestore() + }) + + it('should follow change with use-input', () => { + const MockInput: React.FC<{ value?: string, resetValue?: boolean }> = ({ value, resetValue }) => { + const { reset, setState, bindings } = useInput('') + useEffect(() => { + if (value) setState(value) + }, [value]) + useEffect(() => { + if (resetValue) reset() + }, [resetValue]) + return + } + + const wrapper = mount() + wrapper.setProps({ value: 'test' }) + let input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement + expect(input.value).toEqual('test') + + wrapper.setProps({ resetValue: true }) + input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement + expect(input.value).toEqual('') + }) +})