]> git.immae.eu Git - github/fretlink/time-picker.git/blob - tests/TimePicker.spec.jsx
select text when focusing time input
[github/fretlink/time-picker.git] / tests / TimePicker.spec.jsx
1 import ReactDOM from 'react-dom';
2 import React from 'react';
3 import TimePicker from '../src/TimePicker';
4
5 import TestUtils from 'react-dom/test-utils';
6 const Simulate = TestUtils.Simulate;
7 import expect from 'expect.js';
8 import async from 'async';
9 import moment from 'moment';
10
11 describe('TimePicker', () => {
12 let container;
13
14 function renderPicker(props) {
15 const showSecond = true;
16 const format = ('HH:mm:ss');
17
18 return ReactDOM.render(
19 <TimePicker
20 format={format}
21 showSecond={showSecond}
22 defaultValue={moment('12:57:58', format)}
23 {...props}
24 />, container);
25 }
26
27 function renderPickerWithoutSeconds(props) {
28 const showSecond = false;
29 const format = ('HH:mm');
30
31 return ReactDOM.render(
32 <TimePicker
33 format={format}
34 showSecond={showSecond}
35 defaultValue={moment('08:24', format)}
36 {...props}
37 />, container);
38 }
39
40 beforeEach(() => {
41 container = document.createElement('div');
42 document.body.appendChild(container);
43 });
44
45 afterEach(() => {
46 ReactDOM.unmountComponentAtNode(container);
47 document.body.removeChild(container);
48 });
49
50 describe('render panel to body', () => {
51 it('popup correctly', (done) => {
52 let change;
53 const picker = renderPicker({
54 onChange(v) {
55 change = v;
56 },
57 });
58 expect(picker.state.open).not.to.be.ok();
59 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
60 'rc-time-picker-input')[0];
61 expect((input).value).to.be('12:57:58');
62 async.series([(next) => {
63 Simulate.click(input);
64 setTimeout(next, 100);
65 }, (next) => {
66 expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
67 'rc-time-picker-panel-inner')[0]).to.be.ok();
68 expect(picker.state.open).to.be(true);
69 const hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1];
70 Simulate.click(hour);
71 setTimeout(next, 100);
72 }, (next) => {
73 expect(change).to.be.ok();
74 expect(change.hour()).to.be(1);
75 expect(change.minute()).to.be(57);
76 expect(change.second()).to.be(58);
77 expect((input).value).to.be('01:57:58');
78 expect(picker.state.open).to.be.ok();
79 next();
80 }], () => {
81 done();
82 });
83 });
84
85 it('destroy correctly', (done) => {
86 const picker = renderPicker();
87 expect(picker.state.open).not.to.be.ok();
88 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
89 'rc-time-picker-input')[0];
90 async.series([(next) => {
91 Simulate.click(input);
92 setTimeout(next, 100);
93 }, (next) => {
94 expect(TestUtils.scryRenderedDOMComponentsWithClass(picker,
95 'rc-time-picker-panel-inner')[0]).not.to.be.ok();
96 expect(picker.state.open).to.be(true);
97 if (document.querySelectorAll) {
98 expect(document.querySelectorAll('.rc-time-picker').length).not.to.be(0);
99 }
100 expect(TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance,
101 'li')[0]).to.be.ok();
102 ReactDOM.unmountComponentAtNode(container);
103 setTimeout(next, 100);
104 }, (next) => {
105 if (document.querySelectorAll) {
106 expect(document.querySelectorAll('.rc-time-picker').length).to.be(0);
107 }
108 expect(picker.panelInstance).not.to.be.ok();
109 next();
110 }], () => {
111 done();
112 });
113 });
114
115 it('support name', () => {
116 const picker = renderPicker({
117 name: 'time-picker-form-name',
118 });
119 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
120 'rc-time-picker-input')[0];
121 expect(input.name).to.be('time-picker-form-name');
122 });
123
124 it('support focus', () => {
125 const picker = renderPicker({
126 name: 'time-picker-form-name',
127 });
128 expect(picker.focus).to.be.a('function');
129 });
130
131 it('should be controlled by open', () => {
132 const picker = renderPicker({
133 open: false,
134 });
135 expect(picker.state.open).not.to.be.ok();
136 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
137 'rc-time-picker-input')[0];
138 Simulate.click(input);
139 expect(picker.state.open).not.to.be.ok();
140 });
141 });
142
143 describe('render panel to body (without seconds)', () => {
144 it('popup correctly', (done) => {
145 let change;
146 const picker = renderPickerWithoutSeconds({
147 onChange(v) {
148 change = v;
149 },
150 });
151 expect(picker.state.open).not.to.be.ok();
152 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
153 'rc-time-picker-input')[0];
154 expect((input).value).to.be('08:24');
155 async.series([(next) => {
156 Simulate.click(input);
157 setTimeout(next, 100);
158 }, (next) => {
159 expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
160 'rc-time-picker-panel-inner')[0]).to.be.ok();
161 expect(picker.state.open).to.be(true);
162 const hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1];
163 Simulate.click(hour);
164 setTimeout(next, 100);
165 }, (next) => {
166 expect(change).to.be.ok();
167 expect(change.hour()).to.be(1);
168 expect(change.minute()).to.be(24);
169 expect((input).value).to.be('01:24');
170 expect(picker.state.open).to.be.ok();
171 next();
172 }], () => {
173 done();
174 });
175 });
176 });
177
178 describe('render panel to body 12pm mode', () => {
179 it('popup correctly', (done) => {
180 let change;
181 const picker = renderPickerWithoutSeconds({
182 use12Hours: true,
183 value: null,
184 onChange(v) {
185 change = v;
186 },
187 });
188 expect(picker.state.open).not.to.be.ok();
189 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
190 'rc-time-picker-input')[0];
191 expect((input).value).to.be('');
192 async.series([(next) => {
193 Simulate.click(input);
194 setTimeout(next, 100);
195 }, (next) => {
196 expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
197 'rc-time-picker-panel-inner')[0]).to.be.ok();
198 expect(picker.state.open).to.be(true);
199 const hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1];
200 Simulate.click(hour);
201 setTimeout(next, 100);
202 }, (next) => {
203 expect(change).to.be.ok();
204 expect(picker.state.open).to.be.ok();
205 next();
206 }], () => {
207 done();
208 });
209 });
210 });
211 });