From 02d1b455617089d59a5202135eb43850f42e08a1 Mon Sep 17 00:00:00 2001 From: MG12 Date: Fri, 4 Dec 2015 15:45:58 +0800 Subject: [PATCH] add header and select test case --- src/module/Panel.jsx | 2 +- tests/Header.spec.jsx | 246 ++++++++++++++++++++++++++++++++++++++ tests/Select.spec.jsx | 198 ++++++++++++++++++++++++++++++ tests/TimePicker.spec.jsx | 105 +++++++++------- tests/index.spec.js | 2 + 5 files changed, 508 insertions(+), 45 deletions(-) create mode 100644 tests/Header.spec.jsx create mode 100644 tests/Select.spec.jsx diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx index 4c7eaae..2c2f554 100644 --- a/src/module/Panel.jsx +++ b/src/module/Panel.jsx @@ -8,7 +8,7 @@ function noop() { function generateOptions(length) { const arr = []; - for(let i = 0; i < length; i++){ + for (let i = 0; i < length; i++) { arr.push(i); } return arr; diff --git a/tests/Header.spec.jsx b/tests/Header.spec.jsx new file mode 100644 index 0000000..e574d38 --- /dev/null +++ b/tests/Header.spec.jsx @@ -0,0 +1,246 @@ +import ReactDOM from 'react-dom'; +import React from 'react'; +import TimePicker from '../src/TimePicker'; + +import TestUtils from 'react-addons-test-utils'; +var Simulate = TestUtils.Simulate; +import expect from 'expect.js'; +import async from 'async'; +import {KeyCode} from 'rc-util'; + +import DateTimeFormat from 'gregorian-calendar-format'; +import GregorianCalendar from 'gregorian-calendar'; +import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; +import TimePickerLocale from '../src/locale/zh_CN'; + +describe('Header', function () { + var container; + + function renderPicker(props) { + var showSecond = true; + var formatter = new DateTimeFormat('HH:mm:ss'); + + return ReactDOM.render( + , container); + } + + function formatTime(time, formatter) { + return formatter.parse(time, { + locale: zhCn, + obeyCount: true, + }); + } + + beforeEach(function () { + container = document.createElement('div'); + document.body.appendChild(container); + }); + + afterEach(function () { + ReactDOM.unmountComponentAtNode(container); + document.body.removeChild(container); + }); + + describe('input to change value', function () { + it('input correctly', function (done) { + var picker = renderPicker(); + expect(picker.state.open).not.to.be.ok(); + var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + var header; + async.series([function (next) { + Simulate.click(input); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(true); + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + expect(header).to.be.ok(); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + + ReactDOM.findDOMNode(header).value = '12:34:56'; + Simulate.change(header); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(true); + expect(ReactDOM.findDOMNode(header).value).to.be('12:34:56'); + expect(ReactDOM.findDOMNode(input).value).to.be('12:34:56'); + + next(); + }], function () { + done(); + }); + }); + + it('carry correctly', function (done) { + var picker = renderPicker(); + expect(picker.state.open).not.to.be.ok(); + var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + var header; + async.series([function (next) { + Simulate.click(input); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(true); + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + expect(header).to.be.ok(); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + + ReactDOM.findDOMNode(header).value = '33:44:55'; + Simulate.change(header); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(true); + expect(ReactDOM.findDOMNode(header).value).to.be('09:44:55'); + expect(ReactDOM.findDOMNode(input).value).to.be('09:44:55'); + + ReactDOM.findDOMNode(header).value = '10:90:30'; + Simulate.change(header); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(true); + expect(ReactDOM.findDOMNode(header).value).to.be('11:30:30'); + expect(ReactDOM.findDOMNode(input).value).to.be('11:30:30'); + + ReactDOM.findDOMNode(header).value = '34:56:78'; + Simulate.change(header); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(true); + expect(ReactDOM.findDOMNode(header).value).to.be('10:57:18'); + expect(ReactDOM.findDOMNode(input).value).to.be('10:57:18'); + + next(); + }], function () { + done(); + }); + }); + + it('check correctly', function (done) { + var picker = renderPicker(); + expect(picker.state.open).not.to.be.ok(); + var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + var header; + async.series([function (next) { + Simulate.click(input); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(true); + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + expect(header).to.be.ok(); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + + ReactDOM.findDOMNode(header).value = '3:34:56'; + Simulate.change(header); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(true); + expect(ReactDOM.findDOMNode(header).value).to.be('3:34:56'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); + + ReactDOM.findDOMNode(header).value = '13:3:56'; + Simulate.change(header); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(true); + expect(ReactDOM.findDOMNode(header).value).to.be('13:3:56'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); + + ReactDOM.findDOMNode(header).value = '13:34:5'; + Simulate.change(header); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(true); + expect(ReactDOM.findDOMNode(header).value).to.be('13:34:5'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(header).className).to.contain('rc-time-picker-panel-input-invalid'); + next(); + }], function () { + done(); + }); + }); + + }); + + describe('other operations', function () { + it('clear correctly', function (done) { + var change; + var picker = renderPicker({ + onChange: function (v) { + change = v; + } + }); + expect(picker.state.open).not.to.be.ok(); + var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + var header; + async.series([function (next) { + expect(picker.state.open).to.be(false); + + Simulate.click(input); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(true); + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + var clearButton = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-clear-btn')[0]; + expect(header).to.be.ok(); + expect(clearButton).to.be.ok(); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + + Simulate.mouseDown(clearButton); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(false); + expect(change).to.be(null); + expect(ReactDOM.findDOMNode(header).value).to.be(''); + expect(ReactDOM.findDOMNode(input).value).to.be(''); + + next(); + }], function () { + done(); + }); + }); + + it('exit correctly', function (done) { + var picker = renderPicker(); + expect(picker.state.open).not.to.be.ok(); + var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + var header; + async.series([function (next) { + expect(picker.state.open).to.be(false); + + Simulate.click(input); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(true); + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + expect(header).to.be.ok(); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + + Simulate.keyDown(ReactDOM.findDOMNode(header), { + keyCode: KeyCode.ESC + }); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(false); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + + next(); + }], function () { + done(); + }); + }); + + }); +}); diff --git a/tests/Select.spec.jsx b/tests/Select.spec.jsx new file mode 100644 index 0000000..036a0f9 --- /dev/null +++ b/tests/Select.spec.jsx @@ -0,0 +1,198 @@ +import ReactDOM from 'react-dom'; +import React from 'react'; +import TimePicker from '../src/TimePicker'; + +import TestUtils from 'react-addons-test-utils'; +var Simulate = TestUtils.Simulate; +import expect from 'expect.js'; +import async from 'async'; +import {KeyCode} from 'rc-util'; + +import DateTimeFormat from 'gregorian-calendar-format'; +import GregorianCalendar from 'gregorian-calendar'; +import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; +import TimePickerLocale from '../src/locale/zh_CN'; + +describe('Select', function () { + var container; + + function renderPicker(props) { + var showSecond = true; + var formatter = new DateTimeFormat('HH:mm:ss'); + + return ReactDOM.render( + , container); + } + + function formatTime(time, formatter) { + return formatter.parse(time, { + locale: zhCn, + obeyCount: true, + }); + } + + beforeEach(function () { + container = document.createElement('div'); + document.body.appendChild(container); + }); + + afterEach(function () { + ReactDOM.unmountComponentAtNode(container); + document.body.removeChild(container); + }); + + describe('select number', function () { + + it('select number correctly', function (done) { + var picker = renderPicker(); + expect(picker.state.open).not.to.be.ok(); + var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + var selector; + async.series([function (next) { + expect(picker.state.open).to.be(false); + + Simulate.click(input); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(true); + selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select'); + + setTimeout(next, 100); + }, function (next) { + expect(selector.length).to.be(3); + + next(); + }], function () { + done(); + }); + }); + + }); + + describe('select to change value', function () { + + it('hour correctly', function (done) { + var change; + var picker = renderPicker({ + onChange: function (v) { + change = v; + } + }); + expect(picker.state.open).not.to.be.ok(); + var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + var header; + async.series([function (next) { + expect(picker.state.open).to.be(false); + + Simulate.click(input); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(true); + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + var selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[0]; + var option = selector.getElementsByTagName('li')[19]; + expect(header).to.be.ok(); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + + Simulate.click(option); + setTimeout(next, 100); + }, function (next) { + expect(change).to.be.ok(); + expect(change.getHourOfDay()).to.be(19); + expect(ReactDOM.findDOMNode(header).value).to.be('19:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('19:02:03'); + expect(picker.state.open).to.be.ok(); + + next(); + }], function () { + done(); + }); + }); + + it('minute correctly', function (done) { + var change; + var picker = renderPicker({ + onChange: function (v) { + change = v; + } + }); + expect(picker.state.open).not.to.be.ok(); + var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + var header; + async.series([function (next) { + expect(picker.state.open).to.be(false); + + Simulate.click(input); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(true); + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + var selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[1]; + var option = selector.getElementsByTagName('li')[19]; + expect(header).to.be.ok(); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + + Simulate.click(option); + setTimeout(next, 100); + }, function (next) { + expect(change).to.be.ok(); + expect(change.getMinutes()).to.be(19); + expect(ReactDOM.findDOMNode(header).value).to.be('01:19:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:19:03'); + expect(picker.state.open).to.be.ok(); + + next(); + }], function () { + done(); + }); + }); + + it('second correctly', function (done) { + var change; + var picker = renderPicker({ + onChange: function (v) { + change = v; + } + }); + expect(picker.state.open).not.to.be.ok(); + var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + var header; + async.series([function (next) { + expect(picker.state.open).to.be(false); + + Simulate.click(input); + setTimeout(next, 100); + }, function (next) { + expect(picker.state.open).to.be(true); + header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-input')[0]; + var selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-select')[2]; + var option = selector.getElementsByTagName('li')[19]; + expect(header).to.be.ok(); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:03'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:03'); + + Simulate.click(option); + setTimeout(next, 100); + }, function (next) { + expect(change).to.be.ok(); + expect(change.getSeconds()).to.be(19); + expect(ReactDOM.findDOMNode(header).value).to.be('01:02:19'); + expect(ReactDOM.findDOMNode(input).value).to.be('01:02:19'); + expect(picker.state.open).to.be.ok(); + + next(); + }], function () { + done(); + }); + }); + + }); +}); diff --git a/tests/TimePicker.spec.jsx b/tests/TimePicker.spec.jsx index 5b08a81..5bd056e 100644 --- a/tests/TimePicker.spec.jsx +++ b/tests/TimePicker.spec.jsx @@ -13,20 +13,34 @@ import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; import TimePickerLocale from '../src/locale/zh_CN'; describe('TimePicker', function () { - var div; - var showSecond = true; - var str = showSecond ? 'HH:mm:ss' : 'HH:mm'; - var formatter = new DateTimeFormat(str); + var container; function renderPicker(props) { + var showSecond = true; + var formatter = new DateTimeFormat('HH:mm:ss'); + return ReactDOM.render( , div); + />, container); + } + + function renderPickerWithoutSeconds(props) { + var showSecond = false; + var formatter = new DateTimeFormat('HH:mm'); + + return ReactDOM.render( + , container); } function formatTime(time, formatter) { @@ -37,48 +51,17 @@ describe('TimePicker', function () { } beforeEach(function () { - div = document.createElement('div'); - document.body.appendChild(div); + container = document.createElement('div'); + document.body.appendChild(container); }); afterEach(function () { - ReactDOM.unmountComponentAtNode(div); - document.body.removeChild(div); - }); - - it('popup correctly', function (done) { - var change; - var picker = renderPicker({ - onChange: function (v) { - change = v; - } - }); - expect(picker.state.open).not.to.be.ok(); - var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; - async.series([function (next) { - Simulate.click(input); - setTimeout(next, 100); - }, function (next) { - expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-inner')[0]).to.be.ok(); - expect(picker.state.open).to.be(true); - var hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1]; - Simulate.click(hour); - setTimeout(next, 100); - }, function (next) { - expect(change).to.be.ok(); - expect(change.getHourOfDay()).to.be(1); - expect(change.getMinutes()).to.be(57); - expect(change.getSeconds()).to.be(58); - expect(ReactDOM.findDOMNode(input).value).to.be('01:57:58'); - expect(picker.state.open).to.be.ok(); - next(); - }], function () { - done(); - }); + ReactDOM.unmountComponentAtNode(container); + document.body.removeChild(container); }); describe('render panel to body', function () { - it('support correctly', function (done) { + it('popup correctly', function (done) { var change; var picker = renderPicker({ onChange: function (v) { @@ -87,11 +70,12 @@ describe('TimePicker', function () { }); expect(picker.state.open).not.to.be.ok(); var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + expect(ReactDOM.findDOMNode(input).value).to.be('12:57:58'); async.series([function (next) { Simulate.click(input); setTimeout(next, 100); }, function (next) { - expect(TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-panel-inner')[0]).not.to.be.ok(); + expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-inner')[0]).to.be.ok(); expect(picker.state.open).to.be(true); var hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1]; Simulate.click(hour); @@ -128,7 +112,7 @@ describe('TimePicker', function () { expect(document.querySelectorAll('.rc-time-picker').length).not.to.be(0); } expect(TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[0]).to.be.ok(); - ReactDOM.unmountComponentAtNode(div); + ReactDOM.unmountComponentAtNode(container); setTimeout(next, 100); }, function (next) { if (document.querySelectorAll) { @@ -142,4 +126,37 @@ describe('TimePicker', function () { }); }); + describe('render panel to body (without seconds)', function () { + it('popup correctly', function (done) { + var change; + var picker = renderPickerWithoutSeconds({ + onChange: function (v) { + change = v; + } + }); + expect(picker.state.open).not.to.be.ok(); + var input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; + expect(ReactDOM.findDOMNode(input).value).to.be('08:24'); + async.series([function (next) { + Simulate.click(input); + setTimeout(next, 100); + }, function (next) { + expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance, 'rc-time-picker-panel-inner')[0]).to.be.ok(); + expect(picker.state.open).to.be(true); + var hour = TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[1]; + Simulate.click(hour); + setTimeout(next, 100); + }, function (next) { + expect(change).to.be.ok(); + expect(change.getHourOfDay()).to.be(1); + expect(change.getMinutes()).to.be(24); + expect(ReactDOM.findDOMNode(input).value).to.be('01:24'); + expect(picker.state.open).to.be.ok(); + next(); + }], function () { + done(); + }); + }); + }); + }); diff --git a/tests/index.spec.js b/tests/index.spec.js index 58c049a..ae3918a 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -1 +1,3 @@ import './TimePicker.spec'; +import './Header.spec'; +import './Select.spec'; -- 2.41.0