From e7d98e0ee4a66268f55ed837f7cfd8e432340894 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Dec 2015 17:57:05 +0800 Subject: [PATCH] chore: update unit test --- package.json | 1 - tests/index.spec.js | 149 +++++++++++++++++++++++++++++++------------- 2 files changed, 106 insertions(+), 44 deletions(-) diff --git a/package.json b/package.json index bcff807..7365a6c 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,6 @@ }, "devDependencies": { "expect.js": "0.3.x", - "jquery": "^1.11.2", "pre-commit": "1.x", "rc-server": "3.x", "rc-tools": "4.x", diff --git a/tests/index.spec.js b/tests/index.spec.js index 501d3a0..f37a55a 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -1,8 +1,9 @@ const expect = require('expect.js'); -const Slider = require('../index.js'); const React = require('react'); const ReactDOM = require('react-dom'); -const $ = require('jquery'); +const ReactTestUtils = require('react-addons-test-utils'); +const Slider = require('..'); + require('../assets/index.less'); describe('rc-slider', function() { @@ -14,51 +15,113 @@ describe('rc-slider', function() { ReactDOM.unmountComponentAtNode(div); }); - it('should render a simple slider with value correctly!', () => { - const slider = ReactDOM.render( - , - div - ); - const node = $(div); - expect(node.find('.rc-slider').length).to.be(1); - expect(node.find('.rc-slider-handle').length).to.be(1); - expect(node.find('.rc-slider-track').length).to.be(1); - expect(slider.state.upperBound).to.be(40); - const trackWidth = node.find('.rc-slider-track')[0].style.width; - expect(trackWidth).to.eql(node.find('.rc-slider-handle')[0].style.left); + it('should render a Slider with correct DOM structure', () => { + const slider = ReactDOM.render(, div); + expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider').length).to.be(1); + expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-handle').length).to.be(1); + expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-track').length).to.be(1); }); - it('should render a slider with correct numbers of step!', () => { - const slider = ReactDOM.render( - , - div - ); - const node = $(div); - expect(node.find('.rc-slider').length).to.be(1); - expect(node.find('.rc-slider-handle').length).to.be(1); - expect(node.find('.rc-slider-track').length).to.be(1); - expect(slider.state.upperBound).to.be(0); + it('should render a Slider with correct value and CSS style', () => { + const sliderWithDefaultValue = ReactDOM.render(, div); + expect(sliderWithDefaultValue.state.upperBound).to.be(50); + expect(ReactTestUtils + .scryRenderedDOMComponentsWithClass(sliderWithDefaultValue, 'rc-slider-handle')[0] + .style.cssText) + .to.be('left: 50%; '); + expect(ReactTestUtils + .scryRenderedDOMComponentsWithClass(sliderWithDefaultValue, 'rc-slider-track')[0] + .style.cssText) + .to.be('left: 0%; width: 50%; visibility: visible; '); - ReactDOM.render( - , - div - ); - const node1 = $(div); - expect(node1.find('.rc-slider-dot').length).to.be(6); + const sliderWithValue = ReactDOM.render(, div); + expect(sliderWithValue.state.upperBound).to.be(50); + expect(ReactTestUtils + .scryRenderedDOMComponentsWithClass(sliderWithDefaultValue, 'rc-slider-handle')[0] + .style.cssText) + .to.be('left: 50%; '); + expect(ReactTestUtils + .scryRenderedDOMComponentsWithClass(sliderWithDefaultValue, 'rc-slider-track')[0] + .style.cssText) + .to.be('left: 0%; width: 50%; visibility: visible; '); }); - it('should render a slider with marks correctly!', () => { - const slider = ReactDOM.render( - , - div - ); - const node = $(div); - expect(node.find('.rc-slider').length).to.be(1); - expect(node.find('.rc-slider-handle').length).to.be(1); - expect(node.find('.rc-slider-track').length).to.be(1); - expect(node.find('.rc-slider-dot').length).to.be(Object.keys(slider.props.marks).length); - expect(node.find('.rc-slider-mark').length).to.be(1); - expect(node.find('.rc-slider-mark-text').length).to.be(Object.keys(slider.props.marks).length); - expect(slider.state.upperBound).to.be(40); + it('should render a Range with correct DOM structure', () => { + const range = ReactDOM.render(, div); + expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider').length).to.be(1); + expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider-handle').length).to.be(2); + expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider-track').length).to.be(1); + }); + + it('should render a Range with correct value and CSS style', () => { + const sliderWithDefaultValue = ReactDOM.render(, div); + expect(sliderWithDefaultValue.state.lowerBound).to.be(0); + expect(sliderWithDefaultValue.state.upperBound).to.be(50); + expect(ReactTestUtils + .scryRenderedDOMComponentsWithClass(sliderWithDefaultValue, 'rc-slider-handle')[0] + .style.cssText) + .to.be('left: 50%; '); + expect(ReactTestUtils + .scryRenderedDOMComponentsWithClass(sliderWithDefaultValue, 'rc-slider-handle')[1] + .style.cssText) + .to.be('left: 0%; '); + expect(ReactTestUtils + .scryRenderedDOMComponentsWithClass(sliderWithDefaultValue, 'rc-slider-track')[0] + .style.cssText) + .to.be('left: 0%; width: 50%; visibility: visible; '); + + const sliderWithValue = ReactDOM.render(, div); + expect(sliderWithValue.state.lowerBound).to.be(50); + expect(sliderWithValue.state.upperBound).to.be(100); + expect(ReactTestUtils + .scryRenderedDOMComponentsWithClass(sliderWithDefaultValue, 'rc-slider-handle')[0] + .style.cssText) + .to.be('left: 100%; '); + expect(ReactTestUtils + .scryRenderedDOMComponentsWithClass(sliderWithDefaultValue, 'rc-slider-handle')[1] + .style.cssText) + .to.be('left: 50%; '); + expect(ReactTestUtils + .scryRenderedDOMComponentsWithClass(sliderWithDefaultValue, 'rc-slider-track')[0] + .style.cssText) + .to.be('width: 50%; visibility: visible; left: 50%; '); + }); + + it('should render dots correctly when `dots=true`', () => { + const slider = ReactDOM.render(, div); + expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-dot').length).to.be(11); + expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-dot-active').length).to.be(6); + + const range = ReactDOM.render(, div); + expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider-dot').length).to.be(11); + expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider-dot-active').length).to.be(4); + }); + + it('should render marks correctly when `marks` is not an empty object', () => { + const marks = {0: '0', 30: '30', 100: '100'}; + + const slider = ReactDOM.render(, div); + expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-mark-text').length).to.be(3); + expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-mark-text')[0].innerHTML).to.be('0'); + expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-mark-text')[1].innerHTML).to.be('30'); + expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-mark-text')[2].innerHTML).to.be('100'); + + const range = ReactDOM.render(, div); + expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider-mark-text').length).to.be(3); + }); + + it('should not set value greater than `max` or smaller `min`', () => { + const sliderWithMin = ReactDOM.render(, div); + expect(sliderWithMin.state.upperBound).to.be(10); + ReactDOM.unmountComponentAtNode(div); + + const sliderWithMax = ReactDOM.render(, div); + expect(sliderWithMax.state.upperBound).to.be(90); + ReactDOM.unmountComponentAtNode(div); + + const range = ReactDOM.render(, div); + expect(range.state.lowerBound).to.be(10); + expect(range.state.upperBound).to.be(90); + ReactDOM.unmountComponentAtNode(div); }); });