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