vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Make tests pass

old
Javi Velasco 2016-05-25 00:25:43 +02:00
parent de89f9ae6d
commit 6329c5d11d
8 changed files with 139 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/button/Button.js
View File

@ -25,7 +25,20 @@ class Button extends React.Component {
onMouseUp: React.PropTypes.func,
primary: React.PropTypes.bool,
raised: React.PropTypes.bool,
theme: React.PropTypes.object,
theme: React.PropTypes.shape({
accent: React.PropTypes.string.isRequired,
button: React.PropTypes.string.isRequired,
flat: React.PropTypes.string.isRequired,
floating: React.PropTypes.string.isRequired,
icon: React.PropTypes.string.isRequired,
inverse: React.PropTypes.string.isRequired,
mini: React.PropTypes.string.isRequired,
neutral: React.PropTypes.string.isRequired,
primary: React.PropTypes.string.isRequired,
raised: React.PropTypes.string.isRequired,
rippleWrapper: React.PropTypes.string.isRequired,
toggle: React.PropTypes.string.isRequired
}),
type: React.PropTypes.string
};
@ -82,6 +95,9 @@ class Button extends React.Component {
}
}
const RippledButton = themr('ToolboxButton')(Ripple({centered: false})(Button));
const RawButton = themr('ToolboxButton')(Button);
export default themr('ToolboxButton')(Ripple({centered: false})(Button));
export default RippledButton;
export { RawButton as RawButton };
export { Button };

52
components/button/__test__/index.spec.js
View File

@ -1,41 +1,45 @@
import expect from 'expect';
import style from '../../button/style';
import utils from '../../utils/testing';
import {RawButton as Button} from '../Button';
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import theme from '../theme.scss';
import Button, { Button as RawButton } from '../Button';
const getRenderedClassName = (tree, Component) => {
const rendered = TestUtils.findRenderedComponentWithType(tree, Component);
return ReactDOM.findDOMNode(rendered).getAttribute('class');
};
describe('Button', function () {
let button;
describe('#render', function () {
it('uses flat and neutral styles by default', function () {
button = utils.shallowRenderComponent(Button);
expect(button.props.className).toContain(style.flat);
expect(button.props.className).toContain(style.neutral);
const tree = TestUtils.renderIntoDocument(<Button theme={theme} />);
const className = getRenderedClassName(tree, RawButton);
expect(className).toContain(theme.flat);
expect(className).toContain(theme.neutral);
});
it('renders accent button with accent style', function () {
button = utils.shallowRenderComponent(Button, { accent: true });
expect(button.props.className).toContain(style.flat);
expect(button.props.className).toContain(style.accent);
const tree = TestUtils.renderIntoDocument(<Button accent theme={theme} />);
const className = getRenderedClassName(tree, RawButton);
expect(className).toContain(theme.flat);
expect(className).toContain(theme.accent);
});
it('renders mini button with mini style', function () {
button = utils.shallowRenderComponent(Button, { floating: true, mini: true });
expect(button.props.className).toContain(style.floating);
expect(button.props.className).toContain(style.neutral);
expect(button.props.className).toContain(style.mini);
const tree = TestUtils.renderIntoDocument(<Button floating mini theme={theme} />);
const className = getRenderedClassName(tree, RawButton);
expect(className).toContain(theme.floating);
expect(className).toContain(theme.neutral);
expect(className).toContain(theme.mini);
});
it('renders mini accented button with both styles', function () {
button = utils.shallowRenderComponent(Button, { mini: true, accent: true });
expect(button.props.className).toContain(style.flat);
expect(button.props.className).toContain(style.accent);
expect(button.props.className).toContain(style.mini);
const tree = TestUtils.renderIntoDocument(<Button accent mini theme={theme} />);
const className = getRenderedClassName(tree, RawButton);
expect(className).toContain(theme.flat);
expect(className).toContain(theme.accent);
expect(className).toContain(theme.mini);
});
});
});

25
components/input/Input.js
View File

@ -24,18 +24,18 @@ class Input extends React.Component {
onKeyPress: React.PropTypes.func,
required: React.PropTypes.bool,
theme: React.PropTypes.shape({
bar: React.PropTypes.string.isRequired,
counter: React.PropTypes.string.isRequired,
disabled: React.PropTypes.string.isRequired,
error: React.PropTypes.string.isRequired,
errored: React.PropTypes.string.isRequired,
hidden: React.PropTypes.string.isRequired,
hint: React.PropTypes.string.isRequired,
icon: React.PropTypes.string.isRequired,
input: React.PropTypes.string.isRequired,
inputElement: React.PropTypes.string.isRequired,
required: React.PropTypes.string.isRequired,
withIcon: React.PropTypes.string.isRequired
bar: React.PropTypes.string,
counter: React.PropTypes.string,
disabled: React.PropTypes.string,
error: React.PropTypes.string,
errored: React.PropTypes.string,
hidden: React.PropTypes.string,
hint: React.PropTypes.string,
icon: React.PropTypes.string,
input: React.PropTypes.string,
inputElement: React.PropTypes.string,
required: React.PropTypes.string,
withIcon: React.PropTypes.string
}),
type: React.PropTypes.string,
value: React.PropTypes.any
@ -113,3 +113,4 @@ class Input extends React.Component {
}
export default themr('ToolboxInput')(Input);
export { Input };

17
components/progress_bar/ProgressBar.js
View File

@ -12,14 +12,14 @@ class ProgressBar extends React.Component {
mode: React.PropTypes.oneOf(['determinate', 'indeterminate']),
multicolor: React.PropTypes.bool,
theme: React.PropTypes.shape({
buffer: React.PropTypes.string.isRequired,
circle: React.PropTypes.string.isRequired,
circular: React.PropTypes.string.isRequired,
indeterminate: React.PropTypes.string.isRequired,
linear: React.PropTypes.string.isRequired,
multicolor: React.PropTypes.string.isRequired,
path: React.PropTypes.string.isRequired,
value: React.PropTypes.string.isRequired
buffer: React.PropTypes.string,
circle: React.PropTypes.string,
circular: React.PropTypes.string,
indeterminate: React.PropTypes.string,
linear: React.PropTypes.string,
multicolor: React.PropTypes.string,
path: React.PropTypes.string,
value: React.PropTypes.string
}),
type: React.PropTypes.oneOf(['linear', 'circular']),
value: React.PropTypes.number
@ -99,3 +99,4 @@ class ProgressBar extends React.Component {
}
export default themr('ToolboxProgress')(ProgressBar);
export { ProgressBar };

23
components/progress_bar/__test__/index.spec.js
View File

@ -1,14 +1,17 @@
import React from 'react';
import expect from 'expect';
import style from '../../progress_bar/style';
import TestUtils from 'react-addons-test-utils';
import ProgressBar, { ProgressBar as RawProgressBar } from '../ProgressBar';
import theme from '../theme.scss';
import utils from '../../utils/testing';
import ProgressBar from '../index';
describe('ProgressBar', function () {
let progressBar;
describe('#calculateRatio', function () {
before(function () {
progressBar = utils.renderComponent(ProgressBar, {min: 100, max: 300});
const tree = TestUtils.renderIntoDocument(<ProgressBar min={100} max={300} theme={theme} />);
progressBar = TestUtils.findRenderedComponentWithType(tree, RawProgressBar);
});
it('calculates the right ratio', function () {
@ -28,14 +31,14 @@ describe('ProgressBar', function () {
let buffer, value, wrapper, circle, strokeLength;
it('renders the value and buffer bars when it is linear', function () {
wrapper = utils.shallowRenderComponent(ProgressBar).props.children;
wrapper = utils.shallowRenderComponent(RawProgressBar, {theme}).props.children;
expect(wrapper.props.children.length).toEqual(2);
expect(wrapper.props.children[0].ref).toEqual('buffer');
expect(wrapper.props.children[1].ref).toEqual('value');
});
it('renders the value and buffer bars when it is linear', function () {
progressBar = utils.shallowRenderComponent(ProgressBar, {mode: 'determinate', value: 30, buffer: 60});
progressBar = utils.shallowRenderComponent(RawProgressBar, {mode: 'determinate', value: 30, buffer: 60, theme});
buffer = (progressBar.props.children.props.children[0]);
value = (progressBar.props.children.props.children[1]);
expect(buffer.props.style.transform).toEqual(`scaleX(${0.6})`);
@ -43,22 +46,22 @@ describe('ProgressBar', function () {
});
it('renders the svg circle when it is circular', function () {
progressBar = utils.shallowRenderComponent(ProgressBar, {type: 'circular'});
progressBar = utils.shallowRenderComponent(RawProgressBar, {type: 'circular', theme});
expect(progressBar.props.children.type).toEqual('svg');
expect(progressBar.props.children.props.children.type).toEqual('circle');
});
it('renders the proper circle length style when it is circular and determinate', function () {
progressBar = utils.shallowRenderComponent(ProgressBar, {type: 'circular', mode: 'determinate', value: 30});
progressBar = utils.shallowRenderComponent(RawProgressBar, {type: 'circular', mode: 'determinate', value: 30, theme});
circle = progressBar.props.children.props.children;
strokeLength = 2 * Math.PI * circle.props.r * 0.3;
expect(circle.props.style.strokeDasharray).toEqual(`${strokeLength}, 400`);
});
it('contains mode and className in its className', function () {
progressBar = utils.shallowRenderComponent(ProgressBar, {mode: 'determinate', className: 'tight'});
expect(progressBar.props.className).toContain(style.determinate);
expect(progressBar.props.className).toContain(style.tight);
progressBar = utils.shallowRenderComponent(RawProgressBar, {mode: 'determinate', className: 'tight', theme});
expect(progressBar.props.className).toContain(theme.determinate);
expect(progressBar.props.className).toContain(theme.tight);
});
});
});

8
components/ripple/Ripple.js
View File

@ -30,10 +30,10 @@ const Ripple = (options = {}) => {
rippleClassName: React.PropTypes.string,
rippleSpread: React.PropTypes.number,
theme: React.PropTypes.shape({
ripple: React.PropTypes.string.isRequired,
rippleActive: React.PropTypes.string.isRequired,
rippleRestarting: React.PropTypes.string.isRequired,
rippleWrapper: React.PropTypes.string.isRequired
ripple: React.PropTypes.string,
rippleActive: React.PropTypes.string,
rippleRestarting: React.PropTypes.string,
rippleWrapper: React.PropTypes.string
})
};

27
components/slider/Slider.js
View File

@ -19,19 +19,19 @@ class Slider extends React.Component {
snaps: React.PropTypes.bool,
step: React.PropTypes.number,
theme: React.PropTypes.shape({
container: React.PropTypes.string.isRequired,
editable: React.PropTypes.string.isRequired,
innerknob: React.PropTypes.string.isRequired,
innerprogress: React.PropTypes.string.isRequired,
input: React.PropTypes.string.isRequired,
knob: React.PropTypes.string.isRequired,
pinned: React.PropTypes.string.isRequired,
pressed: React.PropTypes.string.isRequired,
progress: React.PropTypes.string.isRequired,
ring: React.PropTypes.string.isRequired,
slider: React.PropTypes.string.isRequired,
snap: React.PropTypes.string.isRequired,
snaps: React.PropTypes.string.isRequired
container: React.PropTypes.string,
editable: React.PropTypes.string,
innerknob: React.PropTypes.string,
innerprogress: React.PropTypes.string,
input: React.PropTypes.string,
knob: React.PropTypes.string,
pinned: React.PropTypes.string,
pressed: React.PropTypes.string,
progress: React.PropTypes.string,
ring: React.PropTypes.string,
slider: React.PropTypes.string,
snap: React.PropTypes.string,
snaps: React.PropTypes.string
}),
value: React.PropTypes.number
};
@ -298,3 +298,4 @@ class Slider extends React.Component {
}
export default themr('ToolboxSlider')(Slider);
export { Slider };

72
components/slider/__tests__/index.spec.js
View File

@ -1,20 +1,21 @@
import expect from 'expect';
import sinon from 'sinon';
import utils from '../../utils/testing';
import style from '../../slider/style';
import ProgressBar from '../../progress_bar';
import Input from '../../input';
import Slider from '../index';
import React from 'react';
import TestUtils from 'react-addons-test-utils';
import sinon from 'sinon';
import expect from 'expect';
import { ProgressBar } from '../../progress_bar/ProgressBar.js';
import Input, { Input as RawInput } from '../../input/Input.js';
import Slider, { Slider as RawSlider } from '../Slider.js';
import utils from '../../utils/testing';
import theme from '../theme.scss';
describe('Slider', function () {
let props, state, slider, progress, input, onChange;
let slider, progress, input, onChange;
describe('#positionToValue', function () {
before(function () {
props = { min: -500, max: 500 };
state = { sliderStart: 500, sliderLength: 100 };
slider = utils.renderComponent(Slider, props, state);
const tree = TestUtils.renderIntoDocument(<Slider min={-500} max={500} />);
slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
slider.setState({ sliderStart: 500, sliderLength: 100 });
});
it('returns min when position is less than origin', function () {
@ -32,8 +33,8 @@ describe('Slider', function () {
describe('#trimValue', function () {
before(function () {
props = { min: 0, max: 100, step: 0.1 };
slider = utils.renderComponent(Slider, props);
const tree = TestUtils.renderIntoDocument(<Slider min={0} max={100} step={0.1} />);
slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
});
it('rounds to the proper number', function () {
@ -52,8 +53,8 @@ describe('Slider', function () {
describe('#valueForInput', function () {
before(function () {
props = { min: 0, max: 100, step: 0.01 };
slider = utils.renderComponent(Slider, props);
const tree = TestUtils.renderIntoDocument(<Slider min={0} max={100} step={0.01} />);
slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
});
it('returns a fixed number when an integer is given', function () {
@ -67,16 +68,17 @@ describe('Slider', function () {
describe('#knobOffset', function () {
it('returns the corresponding offset for a given value and slider length/start', function () {
props = { min: -500, max: 500, value: -250 };
state = { sliderStart: 500, sliderLength: 100 };
slider = utils.renderComponent(Slider, props, state);
const tree = TestUtils.renderIntoDocument(<Slider min={-500} max={500} value={-250} />);
slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
slider.setState({ sliderStart: 500, sliderLength: 100 });
expect(slider.knobOffset()).toEqual(25);
});
});
describe('#render', function () {
it('contains a linear progress bar with proper properties', function () {
slider = utils.renderComponent(Slider, {min: 100, max: 1000, value: 140});
const tree = TestUtils.renderIntoDocument(<Slider min={100} max={1000} value={140} />);
slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
progress = TestUtils.findRenderedComponentWithType(slider, ProgressBar);
expect(progress.props.mode).toEqual('determinate');
expect(progress.props.type).toEqual('linear');
@ -86,26 +88,27 @@ describe('Slider', function () {
});
it('contains an input component if its editable', function () {
slider = utils.renderComponent(Slider, {editable: true, value: 130});
const tree = TestUtils.renderIntoDocument(<Slider editable value={130} />);
slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
input = TestUtils.findRenderedComponentWithType(slider, Input);
expect(parseInt(input.props.value)).toEqual(slider.props.value);
});
it('contains the proper number of snaps when snapped', function () {
slider = utils.shallowRenderComponent(Slider, {editable: true, pinned: true});
expect(slider.props.className).toContain(style.ring);
expect(slider.props.className).toContain(style.pinned);
slider = utils.shallowRenderComponent(Slider, {editable: true, value: 50});
expect(slider.props.className).toNotContain(style.ring);
slider = utils.shallowRenderComponent(RawSlider, {editable: true, pinned: true, theme});
expect(slider.props.className).toContain(theme.ring);
expect(slider.props.className).toContain(theme.pinned);
slider = utils.shallowRenderComponent(RawSlider, {editable: true, value: 50, theme});
expect(slider.props.className).toNotContain(theme.ring);
});
});
describe('#events', function () {
beforeEach(function () {
onChange = sinon.spy();
props = { min: -500, max: 500, onChange };
state = { sliderStart: 0, sliderLength: 1000 };
slider = utils.renderComponent(Slider, props, state);
const tree = TestUtils.renderIntoDocument(<Slider min={-500} max={500} onChange={onChange} />);
slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
slider.setState({ sliderStart: 0, sliderLength: 1000 });
slider.handleResize = (event, callback) => { callback(); };
});
@ -132,7 +135,9 @@ describe('Slider', function () {
});
it('changes input value when slider changes', function () {
slider = utils.renderComponent(Slider, {editable: true, onChange}, {sliderStart: 0, sliderLength: 1000});
const tree = TestUtils.renderIntoDocument(<Slider editable onChange={onChange} />);
slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
slider.setState({sliderStart: 0, sliderLength: 1000});
slider.handleResize = (event, callback) => { callback(); };
input = TestUtils.findRenderedComponentWithType(slider, Input);
TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
@ -141,8 +146,9 @@ describe('Slider', function () {
});
it('changes its value when input is blurred', function () {
slider = utils.renderComponent(Slider, {editable: true, value: 50, onChange});
input = TestUtils.findRenderedComponentWithType(slider, Input);
const tree = TestUtils.renderIntoDocument(<Slider editable value={50} onChange={onChange} />);
slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
input = TestUtils.findRenderedComponentWithType(slider, RawInput);
TestUtils.Simulate.change(input.refs.input, {target: {value: '80'}});
TestUtils.Simulate.blur(input.refs.input);
expect(onChange.called).toEqual(true);
@ -151,7 +157,9 @@ describe('Slider', function () {
it('calls onChange callback when the value is changed', function () {
const onChangeSpy = sinon.spy();
slider = utils.renderComponent(Slider, {onChange: onChangeSpy}, {sliderStart: 0, sliderLength: 1000});
const tree = TestUtils.renderIntoDocument(<Slider onChange={onChangeSpy} />);
slider = TestUtils.findRenderedComponentWithType(tree, RawSlider);
slider.setState({sliderStart: 0, sliderLength: 1000});
TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
expect(onChangeSpy.called).toEqual(true);
});