wassname/slider
1
0
Fork 0
mirror of https://github.com/wassname/slider.git synced 2026-09-09 11:35:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update unit test

Browse Source
This commit is contained in:
Benjy Cui
2015-12-01 17:57:05 +08:00
parent 5f9a65137a
commit e7d98e0ee4
2 changed files with 106 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
-1
View File
@@ -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",
tests/index.spec.js
+106 -43
View File
@@ -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(
<Slider className="rc-slider" defaultValue={40}/>,
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(<Slider />, 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(
<Slider className="rc-slider" step={20}/>,
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(<Slider defaultValue={50} />, 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(
<Slider className="rc-slider" step={20} dots/>,
div
);
const node1 = $(div);
expect(node1.find('.rc-slider-dot').length).to.be(6);
const sliderWithValue = ReactDOM.render(<Slider value={50} />, 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(
<Slider marks={{0: '一', 20: '二', 40: '三', 60: '四', 100: '五'}} defaultValue={40} />,
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(<Slider range />, 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(<Slider range defaultValue={[0, 50]} />, 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(<Slider range value={[50, 100]} />, 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(<Slider value={50} step={10} dots />, 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(<Slider range value={[20, 50]} step={10} dots />, 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(<Slider value={30} marks={marks} />, 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(<Slider range value={30} marks={marks} />, 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(<Slider value={0} min={10} />, div);
expect(sliderWithMin.state.upperBound).to.be(10);
ReactDOM.unmountComponentAtNode(div);
const sliderWithMax = ReactDOM.render(<Slider value={100} max={90} />, div);
expect(sliderWithMax.state.upperBound).to.be(90);
ReactDOM.unmountComponentAtNode(div);
const range = ReactDOM.render(<Slider range value={[0, 100]} min={10} max={90} />, div);
expect(range.state.lowerBound).to.be(10);
expect(range.state.upperBound).to.be(90);
ReactDOM.unmountComponentAtNode(div);
});
});