/
index.test.tsx
121 lines (109 loc) · 3.52 KB
/
index.test.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import { fireEvent, render } from '@testing-library/react';
import React from 'react';
import CustomInput from '../index';
describe('CustomInput', () => {
it('renders correctly', () => {
const wrapper = render(<CustomInput type="number" />);
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('renders readonly', () => {
const wrapper = render(<CustomInput type="number" readOnly />);
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('auto focus', () => {
const { container } = render(<CustomInput autoFocus className="custom-input" />);
const input = container.getElementsByClassName('za-custom-input--focus');
expect(input).toHaveLength(1);
});
it('show clear', () => {
const onChange = jest.fn();
const { container } = render(
<CustomInput
clearable
className="custom-input"
defaultValue="test"
onChange={onChange}
autoFocus
/>,
);
const clear = container.querySelector('.za-custom-input__clear');
fireEvent.click(clear!);
const input = container.querySelectorAll('input[type="hidden"]')[0] as HTMLInputElement;
expect(input.value).toEqual('');
});
it('focus', () => {
const onFocus = jest.fn();
const { container } = render(
<CustomInput className="custom-input" value="test" onFocus={onFocus} />,
);
const input = container.querySelector('.za-custom-input');
fireEvent.click(input!);
expect(onFocus).toBeCalled();
});
it('disabled focus', () => {
const onFocus = jest.fn();
render(<CustomInput className="custom-input" value="test" onFocus={onFocus} disabled />);
const input = document.body.querySelector('.za-custom-input');
fireEvent.click(input!);
expect(onFocus).toBeCalledTimes(0);
});
it('onBlur', () => {
const onBlur = jest.fn();
render(<CustomInput type="number" className="custom-input" onBlur={onBlur} autoFocus />);
fireEvent.click(document.body);
expect(onBlur).toBeCalledTimes(1);
});
it('onKeyClick', () => {
const onBlur = jest.fn();
const onChange = jest.fn();
render(
<CustomInput
type="number"
className="custom-input"
onBlur={onBlur}
autoFocus
onChange={onChange}
/>,
);
const item = document.body.getElementsByClassName('za-keyboard__item');
fireEvent.click(item[10]!);
expect(onBlur).toBeCalledTimes(1);
fireEvent.click(item[1]!);
expect(onChange).toBeCalled();
});
it('maxLength', () => {
const onChange = jest.fn();
render(
<CustomInput
type="number"
className="custom-input"
value="1234"
maxLength={4}
autoFocus
onChange={onChange}
/>,
);
const item = document.body.getElementsByClassName('za-keyboard__item');
fireEvent.click(item[1]!);
expect(onChange).toBeCalledTimes(0);
});
});
describe('CustomInput.Number', () => {
it('inputNumber value 0', () => {
render(<CustomInput clearable type="number" value={0} />);
const input = document.body.querySelectorAll('input[type="hidden"]')[0] as HTMLInputElement;
expect(input.value).toEqual('0');
});
});
describe('CustomInput.Price', () => {
it('renders correctly', () => {
const wrapper = render(<CustomInput type="price" />);
expect(wrapper.asFragment()).toMatchSnapshot();
});
});
describe('CustomInput.Idcard', () => {
it('renders correctly', () => {
const wrapper = render(<CustomInput type="idcard" maxLength={18} />);
expect(wrapper.asFragment()).toMatchSnapshot();
});
});