tests/Select.spec.jsx

   1 import ReactDOM from 'react-dom';
   2 import React from 'react';
   3 import TimePicker from '../src/TimePicker';
   4 import TestUtils from 'react-dom/test-utils';
   5 const Simulate = TestUtils.Simulate;
   6 import expect from 'expect.js';
   7 import async from 'async';
   8 import moment from 'moment';
   9
  10 describe('Select', () => {
  11   let container;
  12
  13   function renderPicker(props) {
  14     const showSecond = true;
  15     const format = 'HH:mm:ss';
  16
  17     return ReactDOM.render(
  18       <TimePicker
  19         format={format}
  20         showSecond={showSecond}
  21         defaultValue={moment('01:02:04', format)}
  22         {...props}
  23       />, container);
  24   }
  25
  26   beforeEach(() => {
  27     container = document.createElement('div');
  28     document.body.appendChild(container);
  29   });
  30
  31   afterEach(() => {
  32     ReactDOM.unmountComponentAtNode(container);
  33     document.body.removeChild(container);
  34   });
  35
  36   describe('select panel', () => {
  37     it('select panel reacts to mouseenter and mouseleave correctly', (done) => {
  38       const picker = renderPicker();
  39       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
  40         'rc-time-picker-input')[0];
  41       async.series([(next) => {
  42         Simulate.click(input);
  43         setTimeout(next, 100);
  44       }, (next) => {
  45         const re = /(^|\s+)rc-time-picker-panel-select-active(\s+|$)/;
  46         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
  47           'rc-time-picker-panel-select')[0];
  48
  49         expect(re.test(selector.className)).to.be(false);
  50
  51         Simulate.mouseEnter(selector);
  52         expect(re.test(selector.className)).to.be(true);
  53
  54         Simulate.mouseLeave(selector);
  55         expect(re.test(selector.className)).to.be(false);
  56
  57         next();
  58       }], () => {
  59         done();
  60       });
  61     });
  62   });
  63
  64   describe('select number', () => {
  65     it('select number correctly', (done) => {
  66       const picker = renderPicker();
  67       expect(picker.state.open).not.to.be.ok();
  68       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
  69         'rc-time-picker-input')[0];
  70       let selector;
  71       async.series([(next) => {
  72         expect(picker.state.open).to.be(false);
  73
  74         Simulate.click(input);
  75         setTimeout(next, 100);
  76       }, (next) => {
  77         expect(picker.state.open).to.be(true);
  78         selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
  79           'rc-time-picker-panel-select');
  80
  81         setTimeout(next, 100);
  82       }, (next) => {
  83         expect(selector.length).to.be(3);
  84
  85         next();
  86       }], () => {
  87         done();
  88       });
  89     });
  90   });
  91
  92   describe('select to change value', () => {
  93     it('hour correctly', (done) => {
  94       let change;
  95       const picker = renderPicker({
  96         onChange(v) {
  97           change = v;
  98         },
  99       });
 100       expect(picker.state.open).not.to.be.ok();
 101       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
 102         'rc-time-picker-input')[0];
 103       let header;
 104       async.series([(next) => {
 105         expect(picker.state.open).to.be(false);
 106
 107         Simulate.click(input);
 108         setTimeout(next, 100);
 109       }, (next) => {
 110         expect(picker.state.open).to.be(true);
 111         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 112           'rc-time-picker-panel-input')[0];
 113         expect(header).to.be.ok();
 114         expect((header).value).to.be('01:02:04');
 115         expect((input).value).to.be('01:02:04');
 116
 117         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 118           'rc-time-picker-panel-select')[0];
 119         const option = selector.getElementsByTagName('li')[19];
 120         Simulate.click(option);
 121         setTimeout(next, 100);
 122       }, (next) => {
 123         expect(change).to.be.ok();
 124         expect(change.hour()).to.be(19);
 125         expect((header).value).to.be('19:02:04');
 126         expect((input).value).to.be('19:02:04');
 127         expect(picker.state.open).to.be.ok();
 128
 129         next();
 130       }], () => {
 131         done();
 132       });
 133     });
 134
 135     it('minute correctly', (done) => {
 136       let change;
 137       const picker = renderPicker({
 138         onChange(v) {
 139           change = v;
 140         },
 141       });
 142       expect(picker.state.open).not.to.be.ok();
 143       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
 144         'rc-time-picker-input')[0];
 145       let header;
 146       async.series([(next) => {
 147         expect(picker.state.open).to.be(false);
 148
 149         Simulate.click(input);
 150         setTimeout(next, 100);
 151       }, (next) => {
 152         expect(picker.state.open).to.be(true);
 153         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 154           'rc-time-picker-panel-input')[0];
 155         expect(header).to.be.ok();
 156         expect((header).value).to.be('01:02:04');
 157         expect((input).value).to.be('01:02:04');
 158
 159         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 160           'rc-time-picker-panel-select')[1];
 161         const option = selector.getElementsByTagName('li')[19];
 162         Simulate.click(option);
 163         setTimeout(next, 100);
 164       }, (next) => {
 165         expect(change).to.be.ok();
 166         expect(change.minute()).to.be(19);
 167         expect((header).value).to.be('01:19:04');
 168         expect((input).value).to.be('01:19:04');
 169         expect(picker.state.open).to.be.ok();
 170
 171         next();
 172       }], () => {
 173         done();
 174       });
 175     });
 176
 177     it('second correctly', (done) => {
 178       let change;
 179       const picker = renderPicker({
 180         onChange(v) {
 181           change = v;
 182         },
 183       });
 184       expect(picker.state.open).not.to.be.ok();
 185       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
 186         'rc-time-picker-input')[0];
 187       let header;
 188       async.series([(next) => {
 189         expect(picker.state.open).to.be(false);
 190
 191         Simulate.click(input);
 192         setTimeout(next, 100);
 193       }, (next) => {
 194         expect(picker.state.open).to.be(true);
 195         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 196           'rc-time-picker-panel-input')[0];
 197         expect(header).to.be.ok();
 198         expect((header).value).to.be('01:02:04');
 199         expect((input).value).to.be('01:02:04');
 200
 201         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 202           'rc-time-picker-panel-select')[2];
 203         const option = selector.getElementsByTagName('li')[19];
 204         Simulate.click(option);
 205         setTimeout(next, 100);
 206       }, (next) => {
 207         expect(change).to.be.ok();
 208         expect(change.second()).to.be(19);
 209         expect((header).value).to.be('01:02:19');
 210         expect((input).value).to.be('01:02:19');
 211         expect(picker.state.open).to.be.ok();
 212
 213         next();
 214       }], () => {
 215         done();
 216       });
 217     });
 218
 219     it('disabled correctly', (done) => {
 220       let change;
 221       const picker = renderPicker({
 222         onChange(v) {
 223           change = v;
 224         },
 225         disabledMinutes(h) {
 226           return [h];
 227         },
 228         disabledSeconds(h, m) {
 229           return [h + m % 60];
 230         },
 231       });
 232       expect(picker.state.open).not.to.be.ok();
 233       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
 234         'rc-time-picker-input')[0];
 235       let header;
 236       async.series([(next) => {
 237         expect(picker.state.open).to.be(false);
 238
 239         Simulate.click(input);
 240         setTimeout(next, 100);
 241       }, (next) => {
 242         expect(picker.state.open).to.be(true);
 243         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 244           'rc-time-picker-panel-input')[0];
 245         expect(header).to.be.ok();
 246         expect((header).value).to.be('01:02:04');
 247         expect((input).value).to.be('01:02:04');
 248
 249         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 250           'rc-time-picker-panel-select')[1];
 251         const option = selector.getElementsByTagName('li')[1];
 252         Simulate.click(option);
 253         setTimeout(next, 100);
 254       }, (next) => {
 255         expect(change).not.to.be.ok();
 256         expect((header).value).to.be('01:02:04');
 257         expect((input).value).to.be('01:02:04');
 258         expect(picker.state.open).to.be.ok();
 259
 260         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 261           'rc-time-picker-panel-select')[2];
 262         const option = selector.getElementsByTagName('li')[3];
 263         Simulate.click(option);
 264         setTimeout(next, 100);
 265       }, (next) => {
 266         expect(change).not.to.be.ok();
 267         expect((header).value).to.be('01:02:04');
 268         expect((input).value).to.be('01:02:04');
 269         expect(picker.state.open).to.be.ok();
 270
 271         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 272           'rc-time-picker-panel-select')[1];
 273         const option = selector.getElementsByTagName('li')[7];
 274         Simulate.click(option);
 275         setTimeout(next, 100);
 276       }, (next) => {
 277         expect(change).to.be.ok();
 278         expect(change.minute()).to.be(7);
 279         expect((header).value).to.be('01:07:04');
 280         expect((input).value).to.be('01:07:04');
 281         expect(picker.state.open).to.be.ok();
 282
 283         next();
 284       }], () => {
 285         done();
 286       });
 287     });
 288
 289     it('hidden correctly', (done) => {
 290       let change;
 291       const picker = renderPicker({
 292         onChange(v) {
 293           change = v;
 294         },
 295         disabledHours() {
 296           return [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23];
 297         },
 298         hideDisabledOptions: true,
 299       });
 300       expect(picker.state.open).not.to.be.ok();
 301       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
 302       let header;
 303       async.series([(next) => {
 304         expect(picker.state.open).to.be(false);
 305
 306         Simulate.click(input);
 307         setTimeout(next, 100);
 308       }, (next) => {
 309         expect(picker.state.open).to.be(true);
 310         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 311           'rc-time-picker-panel-input')[0];
 312         expect(header).to.be.ok();
 313         expect((header).value).to.be('01:02:04');
 314         expect((input).value).to.be('01:02:04');
 315
 316         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 317           'rc-time-picker-panel-select')[0];
 318         const option = selector.getElementsByTagName('li')[3];
 319         Simulate.click(option);
 320         setTimeout(next, 100);
 321       }, (next) => {
 322         expect(change).to.be.ok();
 323         expect(change.hour()).to.be(6);
 324         expect((header).value).to.be('06:02:04');
 325         expect((input).value).to.be('06:02:04');
 326         expect(picker.state.open).to.be.ok();
 327
 328         const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 329           'rc-time-picker-panel-select')[0];
 330         const option = selector.getElementsByTagName('li')[4];
 331         Simulate.click(option);
 332         setTimeout(next, 100);
 333       }, (next) => {
 334         expect(change).to.be.ok();
 335         expect(change.hour()).to.be(8);
 336         expect((header).value).to.be('08:02:04');
 337         expect((input).value).to.be('08:02:04');
 338         expect(picker.state.open).to.be.ok();
 339
 340         next();
 341       }], () => {
 342         done();
 343       });
 344     });
 345   });
 346
 347
 348   describe('select in 12 hours mode', () => {
 349     it('renders correctly', (done) => {
 350       const picker = renderPicker({
 351         use12Hours: true,
 352         defaultValue: moment().hour(14).minute(0).second(0),
 353         showSecond: false,
 354         format: undefined,
 355       });
 356       expect(picker.state.open).not.to.be.ok();
 357       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
 358         'rc-time-picker-input')[0];
 359       let selector;
 360       async.series([(next) => {
 361         expect(picker.state.open).to.be(false);
 362
 363         Simulate.click(input);
 364         setTimeout(next, 100);
 365       }, (next) => {
 366         expect(picker.state.open).to.be(true);
 367         selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 368           'rc-time-picker-panel-select');
 369         expect((input).value).to.be('2:00 pm');
 370
 371         setTimeout(next, 100);
 372       }, (next) => {
 373         expect(selector.length).to.be(3);
 374
 375         next();
 376       }], () => {
 377         done();
 378       });
 379     });
 380
 381
 382     it('renders 12am correctly', (done) => {
 383       const picker = renderPicker({
 384         use12Hours: true,
 385         defaultValue: moment().hour(0).minute(0).second(0),
 386         showSecond: false,
 387         format: undefined,
 388       });
 389       expect(picker.state.open).not.to.be.ok();
 390       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
 391         'rc-time-picker-input')[0];
 392       let selector;
 393       async.series([(next) => {
 394         expect(picker.state.open).to.be(false);
 395
 396         Simulate.click(input);
 397         setTimeout(next, 100);
 398       }, (next) => {
 399         expect(picker.state.open).to.be(true);
 400         selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 401           'rc-time-picker-panel-select');
 402         setTimeout(next, 100);
 403       }, (next) => {
 404         expect(selector.length).to.be(3);
 405
 406         next();
 407       }], () => {
 408         done();
 409       });
 410     });
 411
 412
 413     it('renders 5am correctly', (done) => {
 414       const picker = renderPicker({
 415         use12Hours: true,
 416         defaultValue: moment().hour(0).minute(0).second(0),
 417         showSecond: false,
 418         format: undefined,
 419       });
 420       expect(picker.state.open).not.to.be.ok();
 421       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
 422         'rc-time-picker-input')[0];
 423       let selector;
 424       async.series([(next) => {
 425         expect(picker.state.open).to.be(false);
 426
 427         Simulate.click(input);
 428         setTimeout(next, 100);
 429       }, (next) => {
 430         expect(picker.state.open).to.be(true);
 431         selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 432           'rc-time-picker-panel-select')[0];
 433         expect((input).value).to.be('12:00 am');
 434         const option = selector.getElementsByTagName('li')[3];
 435         Simulate.click(option);
 436         setTimeout(next, 100);
 437       }, (next) => {
 438         expect((input).value).to.be('3:00 am');
 439         next();
 440       }], () => {
 441         done();
 442       });
 443     });
 444
 445
 446     it('renders 12am/pm correctly', (done) => {
 447       const picker = renderPicker({
 448         use12Hours: true,
 449         defaultValue: moment().hour(0).minute(0).second(0),
 450         showSecond: false,
 451         format: undefined,
 452       });
 453       expect(picker.state.open).not.to.be.ok();
 454       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
 455         'rc-time-picker-input')[0];
 456       let selector;
 457       async.series([(next) => {
 458         expect(picker.state.open).to.be(false);
 459
 460         Simulate.click(input);
 461         setTimeout(next, 100);
 462       }, (next) => {
 463         expect(picker.state.open).to.be(true);
 464         selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 465           'rc-time-picker-panel-select')[2];
 466         expect((input).value).to.be('12:00 am');
 467         const option = selector.getElementsByTagName('li')[1];
 468         Simulate.click(option);
 469         setTimeout(next, 200);
 470       }, (next) => {
 471         expect((input).value).to.be('12:00 pm');
 472         next();
 473       }, (next) => {
 474         Simulate.click(selector.getElementsByTagName('li')[0]);
 475         setTimeout(next, 200);
 476       }, (next) => {
 477         expect((input).value).to.be('12:00 am');
 478         next();
 479       }], () => {
 480         done();
 481       });
 482     });
 483
 484     it('renders uppercase AM correctly', (done) => {
 485       const picker = renderPicker({
 486         use12Hours: true,
 487         defaultValue: moment().hour(0).minute(0).second(0),
 488         showSecond: false,
 489         format: 'h:mm A',
 490       });
 491       expect(picker.state.open).not.to.be.ok();
 492       const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
 493         'rc-time-picker-input')[0];
 494       let selector;
 495       async.series([(next) => {
 496         expect(picker.state.open).to.be(false);
 497
 498         Simulate.click(input);
 499         setTimeout(next, 100);
 500       }, (next) => {
 501         expect(picker.state.open).to.be(true);
 502         selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
 503           'rc-time-picker-panel-select')[2];
 504         expect((input).value).to.be('12:00 AM');
 505         const option = selector.getElementsByTagName('li')[1];
 506         Simulate.click(option);
 507         setTimeout(next, 200);
 508       }, (next) => {
 509         expect((input).value).to.be('12:00 PM');
 510         next();
 511       }, (next) => {
 512         Simulate.click(selector.getElementsByTagName('li')[0]);
 513         setTimeout(next, 200);
 514       }, (next) => {
 515         expect((input).value).to.be('12:00 AM');
 516         next();
 517       }], () => {
 518         done();
 519       });
 520     });
 521   });
 522 });