tests/Select.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 import {KeyCode} from 'rc-util';
  10
  11 import DateTimeFormat from 'gregorian-calendar-format';
  12 import GregorianCalendar from 'gregorian-calendar';
  13 import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
  14 import TimePickerLocale from '../src/locale/zh_CN';
  15
  16 describe('Select', function () {
  17   var container;
  18
  19   function renderPicker(props) {
  20     var showSecond = true;
  21     var formatter = new DateTimeFormat('HH:mm:ss');
  22
  23     return ReactDOM.render(
  24       <TimePicker
  25         formatter={formatter}
  26         locale={TimePickerLocale}
  27         showSecond={showSecond}
  28         defaultValue={formatTime('01:02:03', formatter)}
  29         {...props}
  30       />, container);
  31   }
  32
  33   function formatTime(time, formatter) {
  34     return formatter.parse(time, {
  35       locale: zhCn,
  36       obeyCount: true,
  37     });
  38   }
  39
  40   beforeEach(function () {
  41     container = document.createElement('div');
  42     document.body.appendChild(container);
  43   });
  44
  45   afterEach(function () {
  46     ReactDOM.unmountComponentAtNode(container);
  47     document.body.removeChild(container);
  48   });
  49
  50   describe('select number', function () {
  51
  52     it('select number correctly', function (done) {
  53       var picker = renderPicker();
  54       expect(picker.state.open).not.to.be.ok();
  55       var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
  56       var selector;
  57       async.series([function (next) {
  58         expect(picker.state.open).to.be(false);
  59
  60         Simulate.click(input);
  61         setTimeout(next, 100);
  62       }, function (next) {
  63         expect(picker.state.open).to.be(true);
  64         selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select');
  65
  66         setTimeout(next, 100);
  67       }, function (next) {
  68         expect(selector.length).to.be(3);
  69
  70         next();
  71       }], function () {
  72         done();
  73       });
  74     });
  75
  76   });
  77
  78   describe('select to change value', function () {
  79
  80     it('hour correctly', function (done) {
  81       var change;
  82       var picker = renderPicker({
  83         onChange: function (v) {
  84           change = v;
  85         }
  86       });
  87       expect(picker.state.open).not.to.be.ok();
  88       var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
  89       var header;
  90       async.series([function (next) {
  91         expect(picker.state.open).to.be(false);
  92
  93         Simulate.click(input);
  94         setTimeout(next, 100);
  95       }, function (next) {
  96         expect(picker.state.open).to.be(true);
  97         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
  98         var selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0];
  99         var option = selector.getElementsByTagName('li')[19];
 100         expect(header).to.be.ok();
 101         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
 102         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
 103
 104         Simulate.click(option);
 105         setTimeout(next, 100);
 106       }, function (next) {
 107         expect(change).to.be.ok();
 108         expect(change.getHourOfDay()).to.be(19);
 109         expect(ReactDOM.findDOMNode(header).value).to.be('19:02:03');
 110         expect(ReactDOM.findDOMNode(input).value).to.be('19:02:03');
 111         expect(picker.state.open).to.be.ok();
 112
 113         next();
 114       }], function () {
 115         done();
 116       });
 117     });
 118
 119     it('minute correctly', function (done) {
 120       var change;
 121       var picker = renderPicker({
 122         onChange: function (v) {
 123           change = v;
 124         }
 125       });
 126       expect(picker.state.open).not.to.be.ok();
 127       var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
 128       var header;
 129       async.series([function (next) {
 130         expect(picker.state.open).to.be(false);
 131
 132         Simulate.click(input);
 133         setTimeout(next, 100);
 134       }, function (next) {
 135         expect(picker.state.open).to.be(true);
 136         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
 137         var selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1];
 138         var option = selector.getElementsByTagName('li')[19];
 139         expect(header).to.be.ok();
 140         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
 141         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
 142
 143         Simulate.click(option);
 144         setTimeout(next, 100);
 145       }, function (next) {
 146         expect(change).to.be.ok();
 147         expect(change.getMinutes()).to.be(19);
 148         expect(ReactDOM.findDOMNode(header).value).to.be('01:19:03');
 149         expect(ReactDOM.findDOMNode(input).value).to.be('01:19:03');
 150         expect(picker.state.open).to.be.ok();
 151
 152         next();
 153       }], function () {
 154         done();
 155       });
 156     });
 157
 158     it('second correctly', function (done) {
 159       var change;
 160       var picker = renderPicker({
 161         onChange: function (v) {
 162           change = v;
 163         }
 164       });
 165       expect(picker.state.open).not.to.be.ok();
 166       var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0];
 167       var header;
 168       async.series([function (next) {
 169         expect(picker.state.open).to.be(false);
 170
 171         Simulate.click(input);
 172         setTimeout(next, 100);
 173       }, function (next) {
 174         expect(picker.state.open).to.be(true);
 175         header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0];
 176         var selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2];
 177         var option = selector.getElementsByTagName('li')[19];
 178         expect(header).to.be.ok();
 179         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03');
 180         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03');
 181
 182         Simulate.click(option);
 183         setTimeout(next, 100);
 184       }, function (next) {
 185         expect(change).to.be.ok();
 186         expect(change.getSeconds()).to.be(19);
 187         expect(ReactDOM.findDOMNode(header).value).to.be('01:02:19');
 188         expect(ReactDOM.findDOMNode(input).value).to.be('01:02:19');
 189         expect(picker.state.open).to.be.ok();
 190
 191         next();
 192       }], function () {
 193         done();
 194       });
 195     });
 196
 197   });
 198 });