tests/Header.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-addons-test-utils';
   6 const Simulate = TestUtils.Simulate;
   7 import expect from 'expect.js';
   8 import async from 'async';
   9 import KeyCode from 'rc-util/lib/KeyCode';
  10 import moment from 'moment';
  11
  12 describe('Header', () => {
  13   let container;
  14
  15   function renderPicker(props) {
  16     const showSecond = true;
  17     const format = 'HH:mm:ss';
  18
  19     return ReactDOM.render(
  20       <TimePicker
  21         format={format}
  22         showSecond={showSecond}
  23         defaultValue={moment('01:02:03', format)}
  24         {...props}
  25       />, container);
  26   }
  27
  28   beforeEach(() => {
  29     container = document.createElement('div');
  30     document.body.appendChild(container);
  31   });
  32
  33   afterEach(() => {
  34     ReactDOM.unmountComponentAtNode(container);
  35     document.body.removeChild(container);
  36   });
  37
  38   describe('input to change value', () => {
  39     it('input correctly', (done) => {
  40       const picker = renderPicker();
  41       expect(picker.state.open).not.to.be.ok();
  42       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
  43         'rc-time-picker-input')[0];
  44       let header;
  45       async.series([(next) => {
  46         Simulate.click(input);
  47         setTimeout(next, 100);
  48       }, (next) => {
  49         expect(picker.state.open).to.be(true);
  50         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
  51           'rc-time-picker-panel-input')[0];
  52         expect(header).to.be.ok();
  53         expect((header).value).to.be('01:02:03');
  54         expect((input).value).to.be('01:02:03');
  55
  56         (header).value = '12:34:56';
  57         Simulate.change(header);
  58         setTimeout(next, 100);
  59       }, (next) => {
  60         expect(picker.state.open).to.be(true);
  61         expect((header).value).to.be('12:34:56');
  62         expect((input).value).to.be('12:34:56');
  63
  64         next();
  65       }], () => {
  66         done();
  67       });
  68     });
  69
  70     it('carry correctly', (done) => {
  71       const picker = renderPicker();
  72       expect(picker.state.open).not.to.be.ok();
  73       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
  74         'rc-time-picker-input')[0];
  75       let header;
  76       async.series([(next) => {
  77         Simulate.click(input);
  78         setTimeout(next, 100);
  79       }, (next) => {
  80         expect(picker.state.open).to.be(true);
  81         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
  82           'rc-time-picker-panel-input')[0];
  83         expect(header).to.be.ok();
  84         expect((header).value).to.be('01:02:03');
  85         expect((input).value).to.be('01:02:03');
  86
  87         (header).value = '33:44:55';
  88         Simulate.change(header);
  89         setTimeout(next, 100);
  90       }, (next) => {
  91         expect(picker.state.open).to.be(true);
  92         expect((header).value).to.be('33:44:55');
  93         expect((input).value).to.be('01:02:03');
  94
  95         (header).value = '10:90:30';
  96         Simulate.change(header);
  97         setTimeout(next, 100);
  98       }, (next) => {
  99         expect(picker.state.open).to.be(true);
 100         expect((header).value).to.be('10:90:30');
 101         expect((input).value).to.be('01:02:03');
 102
 103         (header).value = '34:56:78';
 104         Simulate.change(header);
 105         setTimeout(next, 100);
 106       }, (next) => {
 107         expect(picker.state.open).to.be(true);
 108         expect((header).value).to.be('34:56:78');
 109         expect((input).value).to.be('01:02:03');
 110
 111         next();
 112       }], () => {
 113         done();
 114       });
 115     });
 116
 117     it('carry disabled correctly', (done) => {
 118       const picker = renderPicker({
 119         disabledMinutes(h) {
 120           return [h];
 121         },
 122         disabledSeconds(h, m) {
 123           return [h + m % 60];
 124         },
 125       });
 126       expect(picker.state.open).not.to.be.ok();
 127       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
 128         'rc-time-picker-input')[0];
 129       let header;
 130       async.series([(next) => {
 131         Simulate.click(input);
 132         setTimeout(next, 100);
 133       }, (next) => {
 134         expect(picker.state.open).to.be(true);
 135         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 136           'rc-time-picker-panel-input')[0];
 137         expect(header).to.be.ok();
 138         expect((header).value).to.be('01:02:03');
 139         expect((input).value).to.be('01:02:03');
 140
 141         (header).value = '10:09:78';
 142         Simulate.change(header);
 143         setTimeout(next, 100);
 144       }, (next) => {
 145         expect(picker.state.open).to.be(true);
 146         expect((header).className).to.contain('rc-time-picker-panel-input-invalid');
 147         expect((header).value).to.be('10:09:78');
 148         expect((input).value).to.be('01:02:03');
 149
 150         (header).value = '10:10:78';
 151         Simulate.change(header);
 152         setTimeout(next, 100);
 153       }, (next) => {
 154         expect(picker.state.open).to.be(true);
 155         expect((header).value).to.be('10:10:78');
 156         expect((input).value).to.be('01:02:03');
 157
 158         (header).value = '10:09:19';
 159         Simulate.change(header);
 160         setTimeout(next, 100);
 161       }, (next) => {
 162         expect(picker.state.open).to.be(true);
 163         expect((header).className).to.contain('rc-time-picker-panel-input-invalid');
 164         expect((header).value).to.be('10:09:19');
 165         expect((input).value).to.be('01:02:03');
 166
 167         (header).value = '10:09:20';
 168         Simulate.change(header);
 169         setTimeout(next, 100);
 170       }, (next) => {
 171         expect(picker.state.open).to.be(true);
 172         expect((header).value).to.be('10:09:20');
 173         expect((input).value).to.be('10:09:20');
 174
 175         next();
 176       }], () => {
 177         done();
 178       });
 179     });
 180
 181     it('carry hidden correctly', (done) => {
 182       const picker = renderPicker({
 183         disabledMinutes(h) {
 184           return [h];
 185         },
 186         disabledSeconds(h, m) {
 187           return [h + m % 60];
 188         },
 189         hideDisabledOptions: true,
 190       });
 191       expect(picker.state.open).not.to.be.ok();
 192       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
 193         'rc-time-picker-input')[0];
 194       let header;
 195       async.series([(next) => {
 196         Simulate.click(input);
 197         setTimeout(next, 100);
 198       }, (next) => {
 199         expect(picker.state.open).to.be(true);
 200         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 201           'rc-time-picker-panel-input')[0];
 202         expect(header).to.be.ok();
 203         expect((header).value).to.be('01:02:03');
 204         expect((input).value).to.be('01:02:03');
 205
 206         (header).value = '10:09:78';
 207         Simulate.change(header);
 208         setTimeout(next, 100);
 209       }, (next) => {
 210         expect(picker.state.open).to.be(true);
 211         expect((header).className).to.contain('rc-time-picker-panel-input-invalid');
 212         expect((header).value).to.be('10:09:78');
 213         expect((input).value).to.be('01:02:03');
 214
 215         (header).value = '10:10:78';
 216         Simulate.change(header);
 217         setTimeout(next, 100);
 218       }, (next) => {
 219         expect(picker.state.open).to.be(true);
 220         expect((header).value).to.be('10:10:78');
 221         expect((input).value).to.be('01:02:03');
 222
 223         (header).value = '10:09:19';
 224         Simulate.change(header);
 225         setTimeout(next, 100);
 226       }, (next) => {
 227         expect(picker.state.open).to.be(true);
 228         expect((header).className).to.contain('rc-time-picker-panel-input-invalid');
 229         expect((header).value).to.be('10:09:19');
 230         expect((input).value).to.be('01:02:03');
 231
 232         (header).value = '10:09:20';
 233         Simulate.change(header);
 234         setTimeout(next, 100);
 235       }, (next) => {
 236         expect(picker.state.open).to.be(true);
 237         expect((header).value).to.be('10:09:20');
 238         expect((input).value).to.be('10:09:20');
 239
 240         next();
 241       }], () => {
 242         done();
 243       });
 244     });
 245
 246     it('check correctly', (done) => {
 247       const picker = renderPicker();
 248       expect(picker.state.open).not.to.be.ok();
 249       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
 250         'rc-time-picker-input')[0];
 251       let header;
 252       async.series([(next) => {
 253         Simulate.click(input);
 254         setTimeout(next, 100);
 255       }, (next) => {
 256         expect(picker.state.open).to.be(true);
 257         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 258           'rc-time-picker-panel-input')[0];
 259         expect(header).to.be.ok();
 260         expect((header).value).to.be('01:02:03');
 261         expect((input).value).to.be('01:02:03');
 262
 263         (header).value = '3:34:56';
 264         Simulate.change(header);
 265         setTimeout(next, 100);
 266       }, (next) => {
 267         expect(picker.state.open).to.be(true);
 268         expect((header).value).to.be('3:34:56');
 269         expect((input).value).to.be('01:02:03');
 270         expect((header).className).to.contain('rc-time-picker-panel-input-invalid');
 271
 272         (header).value = '13:3:56';
 273         Simulate.change(header);
 274         setTimeout(next, 100);
 275       }, (next) => {
 276         expect(picker.state.open).to.be(true);
 277         expect((header).value).to.be('13:3:56');
 278         expect((input).value).to.be('01:02:03');
 279         expect((header).className).to.contain('rc-time-picker-panel-input-invalid');
 280
 281         (header).value = '13:34:5';
 282         Simulate.change(header);
 283         setTimeout(next, 100);
 284       }, (next) => {
 285         expect(picker.state.open).to.be(true);
 286         expect((header).value).to.be('13:34:5');
 287         expect((input).value).to.be('01:02:03');
 288         expect((header).className).to.contain('rc-time-picker-panel-input-invalid');
 289         next();
 290       }], () => {
 291         done();
 292       });
 293     });
 294   });
 295
 296   describe('other operations', () => {
 297     it('clear correctly', (done) => {
 298       let change;
 299       const picker = renderPicker({
 300         onChange(v) {
 301           change = v;
 302         },
 303       });
 304       expect(picker.state.open).not.to.be.ok();
 305       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
 306         'rc-time-picker-input')[0];
 307       let header;
 308       async.series([(next) => {
 309         expect(picker.state.open).to.be(false);
 310
 311         Simulate.click(input);
 312         setTimeout(next, 100);
 313       }, (next) => {
 314         expect(picker.state.open).to.be(true);
 315         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 316           'rc-time-picker-panel-input')[0];
 317         const clearButton = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 318           'rc-time-picker-panel-clear-btn')[0];
 319         expect(header).to.be.ok();
 320         expect(clearButton).to.be.ok();
 321         expect((header).value).to.be('01:02:03');
 322         expect((input).value).to.be('01:02:03');
 323
 324         Simulate.mouseDown(clearButton);
 325         setTimeout(next, 100);
 326       }, (next) => {
 327         expect(picker.state.open).to.be(false);
 328         expect(change).to.be(null);
 329         expect((header).value).to.be('');
 330         expect((input).value).to.be('');
 331
 332         next();
 333       }], () => {
 334         done();
 335       });
 336     });
 337
 338     it('exit correctly', (done) => {
 339       const picker = renderPicker();
 340       expect(picker.state.open).not.to.be.ok();
 341       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
 342         'rc-time-picker-input')[0];
 343       let header;
 344       async.series([(next) => {
 345         expect(picker.state.open).to.be(false);
 346
 347         Simulate.click(input);
 348         setTimeout(next, 100);
 349       }, (next) => {
 350         expect(picker.state.open).to.be(true);
 351         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 352           'rc-time-picker-panel-input')[0];
 353         expect(header).to.be.ok();
 354         expect((header).value).to.be('01:02:03');
 355         expect((input).value).to.be('01:02:03');
 356
 357         Simulate.keyDown((header), {
 358           keyCode: KeyCode.ESC,
 359         });
 360         setTimeout(next, 100);
 361       }, (next) => {
 362         expect(picker.state.open).to.be(false);
 363         expect((header).value).to.be('01:02:03');
 364         expect((input).value).to.be('01:02:03');
 365
 366         next();
 367       }], () => {
 368         done();
 369       });
 370     });
 371   });
 372 });