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-addons-test-utils';
   6 var Simulate = TestUtils.Simulate;
   7 import expect from 'expect.js';
   8 import async from 'async';
   9
  10 import DateTimeFormat from 'gregorian-calendar-format';
  11 import GregorianCalendar from 'gregorian-calendar';
  12 import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
  13 import TimePickerLocale from '../src/locale/zh_CN';
  14
  15 describe('TimePicker', function () {
  16   var div;
  17   var showSecond = true;
  18   var str = showSecond ? 'HH:mm:ss' : 'HH:mm';
  19   var formatter = new DateTimeFormat(str);
  20
  21   function renderPicker(props) {
  22     return ReactDOM.render(
  23       <TimePicker
  24         formatter={formatter}
  25         locale={TimePickerLocale}
  26         showSecond={showSecond}
  27         defaultValue={formatTime('27:57:58', formatter)}
  28         {...props}
  29       />, div);
  30   }
  31
  32   function formatTime(time, formatter) {
  33     return formatter.parse(time, {
  34       locale: zhCn,
  35       obeyCount: true,
  36     });
  37   }
  38
  39   beforeEach(function () {
  40     div = document.createElement('div');
  41     document.body.appendChild(div);
  42   });
  43
  44   afterEach(function () {
  45     ReactDOM.unmountComponentAtNode(div);
  46     document.body.removeChild(div);
  47   });
  48
  49   it('popup correctly', function (done) {
  50     var change;
  51     var picker = renderPicker({
  52       onChange: function (v) {
  53         change = v;
  54       }
  55     });
  56     expect(picker.state.open).not.to.be.ok();
  57     var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
  58     async.series([function (next) {
  59       Simulate.click(input);
  60       setTimeout(next, 100);
  61     }, function (next) {
  62       expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-inner')[0]).to.be.ok();
  63       expect(picker.state.open).to.be(true);
  64       var hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1];
  65       Simulate.click(hour);
  66       setTimeout(next, 100);
  67     }, function (next) {
  68       expect(change).to.be.ok();
  69       expect(change.getHourOfDay()).to.be(1);
  70       expect(change.getMinutes()).to.be(57);
  71       expect(change.getSeconds()).to.be(58);
  72       expect(ReactDOM.findDOMNode(input).value).to.be('01:57:58');
  73       expect(picker.state.open).to.be.ok();
  74       next();
  75     }], function () {
  76       done();
  77     });
  78   });
  79
  80   describe('render panel to body', function () {
  81     it('support correctly', function (done) {
  82       var change;
  83       var picker = renderPicker({
  84         onChange: function (v) {
  85           change = v;
  86         }
  87       });
  88       expect(picker.state.open).not.to.be.ok();
  89       var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
  90       async.series([function (next) {
  91         Simulate.click(input);
  92         setTimeout(next, 100);
  93       }, function (next) {
  94         expect(TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-panel-inner')[0]).not.to.be.ok();
  95         expect(picker.state.open).to.be(true);
  96         var hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1];
  97         Simulate.click(hour);
  98         setTimeout(next, 100);
  99       }, function (next) {
 100         expect(change).to.be.ok();
 101         expect(change.getHourOfDay()).to.be(1);
 102         expect(change.getMinutes()).to.be(57);
 103         expect(change.getSeconds()).to.be(58);
 104         expect(ReactDOM.findDOMNode(input).value).to.be('01:57:58');
 105         expect(picker.state.open).to.be.ok();
 106         next();
 107       }], function () {
 108         done();
 109       });
 110     });
 111
 112     it('destroy correctly', function (done) {
 113       var change;
 114       var picker = renderPicker({
 115         onChange: function (v) {
 116           change = v;
 117         }
 118       });
 119       expect(picker.state.open).not.to.be.ok();
 120       var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
 121       async.series([function (next) {
 122         Simulate.click(input);
 123         setTimeout(next, 100);
 124       }, function (next) {
 125         expect(TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-panel-inner')[0]).not.to.be.ok();
 126         expect(picker.state.open).to.be(true);
 127         if (document.querySelectorAll) {
 128           expect(document.querySelectorAll('.rc-time-picker').length).not.to.be(0);
 129         }
 130         expect(TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[0]).to.be.ok();
 131         ReactDOM.unmountComponentAtNode(div);
 132         setTimeout(next, 100);
 133       }, function (next) {
 134         if (document.querySelectorAll) {
 135           expect(document.querySelectorAll('.rc-time-picker').length).to.be(0);
 136         }
 137         expect(picker.panelInstance).not.to.be.ok();
 138         next();
 139       }], function () {
 140         done();
 141       });
 142     });
 143   });
 144
 145 });