From a6978323930a81d983b0051ad61bcf81fb7a7235 Mon Sep 17 00:00:00 2001 From: MG12 Date: Thu, 3 Dec 2015 23:36:20 +0800 Subject: add picker test case --- tests/TimePicker.spec.jsx | 145 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 tests/TimePicker.spec.jsx (limited to 'tests/TimePicker.spec.jsx') diff --git a/tests/TimePicker.spec.jsx b/tests/TimePicker.spec.jsx new file mode 100644 index 0000000..5b08a81 --- /dev/null +++ b/tests/TimePicker.spec.jsx @@ -0,0 +1,145 @@ +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 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('TimePicker', function () { + var div; + var showSecond = true; + var str = showSecond ? 'HH:mm:ss' : 'HH:mm'; + var formatter = new DateTimeFormat(str); + + function renderPicker(props) { + return ReactDOM.render( + , div); + } + + function formatTime(time, formatter) { + return formatter.parse(time, { + locale: zhCn, + obeyCount: true, + }); + } + + beforeEach(function () { + div = document.createElement('div'); + document.body.appendChild(div); + }); + + 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(); + }); + }); + + describe('render panel to body', function () { + it('support 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, 'rc-time-picker-panel-inner')[0]).not.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(); + }); + }); + + it('destroy 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, 'rc-time-picker-panel-inner')[0]).not.to.be.ok(); + expect(picker.state.open).to.be(true); + if (document.querySelectorAll) { + expect(document.querySelectorAll('.rc-time-picker').length).not.to.be(0); + } + expect(TestUtils.scryRenderedDOMComponentsWithTag(picker.panelInstance, 'li')[0]).to.be.ok(); + ReactDOM.unmountComponentAtNode(div); + setTimeout(next, 100); + }, function (next) { + if (document.querySelectorAll) { + expect(document.querySelectorAll('.rc-time-picker').length).to.be(0); + } + expect(picker.panelInstance).not.to.be.ok(); + next(); + }], function () { + done(); + }); + }); + }); + +}); -- cgit v1.2.3 From 02d1b455617089d59a5202135eb43850f42e08a1 Mon Sep 17 00:00:00 2001 From: MG12 Date: Fri, 4 Dec 2015 15:45:58 +0800 Subject: add header and select test case --- tests/TimePicker.spec.jsx | 105 +++++++++++++++++++++++++++------------------- 1 file changed, 61 insertions(+), 44 deletions(-) (limited to 'tests/TimePicker.spec.jsx') 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(); + }); + }); + }); + }); -- cgit v1.2.3