Skip to content

Commit 6329c5d

Browse files
javivelascojavivelasco
committed
Make tests pass
1 parent de89f9a commit 6329c5d

File tree

8 files changed

+138
-104
lines changed

8 files changed

+138
-104
lines changed

‎components/button/Button.js‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,20 @@ class Button extends React.Component {
2525
onMouseUp: React.PropTypes.func,
2626
primary: React.PropTypes.bool,
2727
raised: React.PropTypes.bool,
28-
theme: React.PropTypes.object,
28+
theme: React.PropTypes.shape({
29+
accent: React.PropTypes.string.isRequired,
30+
button: React.PropTypes.string.isRequired,
31+
flat: React.PropTypes.string.isRequired,
32+
floating: React.PropTypes.string.isRequired,
33+
icon: React.PropTypes.string.isRequired,
34+
inverse: React.PropTypes.string.isRequired,
35+
mini: React.PropTypes.string.isRequired,
36+
neutral: React.PropTypes.string.isRequired,
37+
primary: React.PropTypes.string.isRequired,
38+
raised: React.PropTypes.string.isRequired,
39+
rippleWrapper: React.PropTypes.string.isRequired,
40+
toggle: React.PropTypes.string.isRequired
41+
}),
2942
type: React.PropTypes.string
3043
};
3144

@@ -82,6 +95,9 @@ class Button extends React.Component {
8295
}
8396
}
8497

98+
const RippledButton = themr('ToolboxButton')(Ripple({centered: false})(Button));
8599
const RawButton = themr('ToolboxButton')(Button);
86-
export default themr('ToolboxButton')(Ripple({centered: false})(Button));
100+
101+
export default RippledButton;
87102
export { RawButton as RawButton };
103+
export { Button };

‎components/button/__test__/index.spec.js‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,45 @@
11
import expect from 'expect';
2-
import style from '../../button/style';
3-
import utils from '../../utils/testing';
4-
import {RawButton as Button} from '../Button';
2+
import React from 'react';
3+
import ReactDOM from 'react-dom';
4+
import TestUtils from 'react-addons-test-utils';
5+
import theme from '../theme.scss';
6+
import Button, { Button as RawButton } from '../Button';
57

6-
describe('Button', function () {
7-
let button;
8+
const getRenderedClassName = (tree, Component) => {
9+
const rendered = TestUtils.findRenderedComponentWithType(tree, Component);
10+
return ReactDOM.findDOMNode(rendered).getAttribute('class');
11+
};
812

13+
describe('Button', function () {
914
describe('#render', function () {
1015
it('uses flat and neutral styles by default', function () {
11-
button = utils.shallowRenderComponent(Button);
12-
13-
expect(button.props.className).toContain(style.flat);
14-
expect(button.props.className).toContain(style.neutral);
16+
const tree = TestUtils.renderIntoDocument(<Button theme={theme} />);
17+
const className = getRenderedClassName(tree, RawButton);
18+
expect(className).toContain(theme.flat);
19+
expect(className).toContain(theme.neutral);
1520
});
1621

1722
it('renders accent button with accent style', function () {
18-
button = utils.shallowRenderComponent(Button, { accent: true });
19-
20-
expect(button.props.className).toContain(style.flat);
21-
expect(button.props.className).toContain(style.accent);
23+
const tree = TestUtils.renderIntoDocument(<Button accent theme={theme} />);
24+
const className = getRenderedClassName(tree, RawButton);
25+
expect(className).toContain(theme.flat);
26+
expect(className).toContain(theme.accent);
2227
});
2328

2429
it('renders mini button with mini style', function () {
25-
button = utils.shallowRenderComponent(Button, { floating: true, mini: true });
26-
27-
expect(button.props.className).toContain(style.floating);
28-
expect(button.props.className).toContain(style.neutral);
29-
expect(button.props.className).toContain(style.mini);
30+
const tree = TestUtils.renderIntoDocument(<Button floating mini theme={theme} />);
31+
const className = getRenderedClassName(tree, RawButton);
32+
expect(className).toContain(theme.floating);
33+
expect(className).toContain(theme.neutral);
34+
expect(className).toContain(theme.mini);
3035
});
3136

3237
it('renders mini accented button with both styles', function () {
33-
button = utils.shallowRenderComponent(Button, { mini: true, accent: true });
34-
35-
expect(button.props.className).toContain(style.flat);
36-
expect(button.props.className).toContain(style.accent);
37-
expect(button.props.className).toContain(style.mini);
38+
const tree = TestUtils.renderIntoDocument(<Button accent mini theme={theme} />);
39+
const className = getRenderedClassName(tree, RawButton);
40+
expect(className).toContain(theme.flat);
41+
expect(className).toContain(theme.accent);
42+
expect(className).toContain(theme.mini);
3843
});
39-
4044
});
4145
});

‎components/input/Input.js‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,18 @@ class Input extends React.Component {
2424
onKeyPress: React.PropTypes.func,
2525
required: React.PropTypes.bool,
2626
theme: React.PropTypes.shape({
27-
bar: React.PropTypes.string.isRequired,
28-
counter: React.PropTypes.string.isRequired,
29-
disabled: React.PropTypes.string.isRequired,
30-
error: React.PropTypes.string.isRequired,
31-
errored: React.PropTypes.string.isRequired,
32-
hidden: React.PropTypes.string.isRequired,
33-
hint: React.PropTypes.string.isRequired,
34-
icon: React.PropTypes.string.isRequired,
35-
input: React.PropTypes.string.isRequired,
36-
inputElement: React.PropTypes.string.isRequired,
37-
required: React.PropTypes.string.isRequired,
38-
withIcon: React.PropTypes.string.isRequired
27+
bar: React.PropTypes.string,
28+
counter: React.PropTypes.string,
29+
disabled: React.PropTypes.string,
30+
error: React.PropTypes.string,
31+
errored: React.PropTypes.string,
32+
hidden: React.PropTypes.string,
33+
hint: React.PropTypes.string,
34+
icon: React.PropTypes.string,
35+
input: React.PropTypes.string,
36+
inputElement: React.PropTypes.string,
37+
required: React.PropTypes.string,
38+
withIcon: React.PropTypes.string
3939
}),
4040
type: React.PropTypes.string,
4141
value: React.PropTypes.any
@@ -113,3 +113,4 @@ class Input extends React.Component {
113113
}
114114

115115
export default themr('ToolboxInput')(Input);
116+
export { Input };

‎components/progress_bar/ProgressBar.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ class ProgressBar extends React.Component {
1212
mode: React.PropTypes.oneOf(['determinate', 'indeterminate']),
1313
multicolor: React.PropTypes.bool,
1414
theme: React.PropTypes.shape({
15-
buffer: React.PropTypes.string.isRequired,
16-
circle: React.PropTypes.string.isRequired,
17-
circular: React.PropTypes.string.isRequired,
18-
indeterminate: React.PropTypes.string.isRequired,
19-
linear: React.PropTypes.string.isRequired,
20-
multicolor: React.PropTypes.string.isRequired,
21-
path: React.PropTypes.string.isRequired,
22-
value: React.PropTypes.string.isRequired
15+
buffer: React.PropTypes.string,
16+
circle: React.PropTypes.string,
17+
circular: React.PropTypes.string,
18+
indeterminate: React.PropTypes.string,
19+
linear: React.PropTypes.string,
20+
multicolor: React.PropTypes.string,
21+
path: React.PropTypes.string,
22+
value: React.PropTypes.string
2323
}),
2424
type: React.PropTypes.oneOf(['linear', 'circular']),
2525
value: React.PropTypes.number
@@ -99,3 +99,4 @@ class ProgressBar extends React.Component {
9999
}
100100

101101
export default themr('ToolboxProgress')(ProgressBar);
102+
export { ProgressBar };

‎components/progress_bar/__test__/index.spec.js‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1+
import React from 'react';
12
import expect from 'expect';
2-
import style from '../../progress_bar/style';
3+
import TestUtils from 'react-addons-test-utils';
4+
import ProgressBar, { ProgressBar as RawProgressBar } from '../ProgressBar';
5+
import theme from '../theme.scss';
36
import utils from '../../utils/testing';
4-
import ProgressBar from '../index';
57

68
describe('ProgressBar', function () {
79
let progressBar;
810

911
describe('#calculateRatio', function () {
1012
before(function () {
11-
progressBar = utils.renderComponent(ProgressBar, {min: 100, max: 300});
13+
const tree = TestUtils.renderIntoDocument(<ProgressBar min={100} max={300} theme={theme} />);
14+
progressBar = TestUtils.findRenderedComponentWithType(tree, RawProgressBar);
1215
});
1316

1417
it('calculates the right ratio', function () {
@@ -28,37 +31,37 @@ describe('ProgressBar', function () {
2831
let buffer, value, wrapper, circle, strokeLength;
2932

3033
it('renders the value and buffer bars when it is linear', function () {
31-
wrapper = utils.shallowRenderComponent(ProgressBar).props.children;
34+
wrapper = utils.shallowRenderComponent(RawProgressBar, {theme}).props.children;
3235
expect(wrapper.props.children.length).toEqual(2);
3336
expect(wrapper.props.children[0].ref).toEqual('buffer');
3437
expect(wrapper.props.children[1].ref).toEqual('value');
3538
});
3639

3740
it('renders the value and buffer bars when it is linear', function () {
38-
progressBar = utils.shallowRenderComponent(ProgressBar, {mode: 'determinate', value: 30, buffer: 60});
41+
progressBar = utils.shallowRenderComponent(RawProgressBar, {mode: 'determinate', value: 30, buffer: 60, theme});
3942
buffer = (progressBar.props.children.props.children[0]);
4043
value = (progressBar.props.children.props.children[1]);
4144
expect(buffer.props.style.transform).toEqual(`scaleX(${0.6})`);
4245
expect(value.props.style.transform).toEqual(`scaleX(${0.3})`);
4346
});
4447

4548
it('renders the svg circle when it is circular', function () {
46-
progressBar = utils.shallowRenderComponent(ProgressBar, {type: 'circular'});
49+
progressBar = utils.shallowRenderComponent(RawProgressBar, {type: 'circular', theme});
4750
expect(progressBar.props.children.type).toEqual('svg');
4851
expect(progressBar.props.children.props.children.type).toEqual('circle');
4952
});
5053

5154
it('renders the proper circle length style when it is circular and determinate', function () {
52-
progressBar = utils.shallowRenderComponent(ProgressBar, {type: 'circular', mode: 'determinate', value: 30});
55+
progressBar = utils.shallowRenderComponent(RawProgressBar, {type: 'circular', mode: 'determinate', value: 30, theme});
5356
circle = progressBar.props.children.props.children;
5457
strokeLength = 2 * Math.PI * circle.props.r * 0.3;
5558
expect(circle.props.style.strokeDasharray).toEqual(`${strokeLength}, 400`);
5659
});
5760

5861
it('contains mode and className in its className', function () {
59-
progressBar = utils.shallowRenderComponent(ProgressBar, {mode: 'determinate', className: 'tight'});
60-
expect(progressBar.props.className).toContain(style.determinate);
61-
expect(progressBar.props.className).toContain(style.tight);
62+
progressBar = utils.shallowRenderComponent(RawProgressBar, {mode: 'determinate', className: 'tight', theme});
63+
expect(progressBar.props.className).toContain(theme.determinate);
64+
expect(progressBar.props.className).toContain(theme.tight);
6265
});
6366
});
6467
});

‎components/ripple/Ripple.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ const Ripple = (options = {}) => {
3030
rippleClassName: React.PropTypes.string,
3131
rippleSpread: React.PropTypes.number,
3232
theme: React.PropTypes.shape({
33-
ripple: React.PropTypes.string.isRequired,
34-
rippleActive: React.PropTypes.string.isRequired,
35-
rippleRestarting: React.PropTypes.string.isRequired,
36-
rippleWrapper: React.PropTypes.string.isRequired
33+
ripple: React.PropTypes.string,
34+
rippleActive: React.PropTypes.string,
35+
rippleRestarting: React.PropTypes.string,
36+
rippleWrapper: React.PropTypes.string
3737
})
3838
};
3939

‎components/slider/Slider.js‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,19 @@ class Slider extends React.Component {
1919
snaps: React.PropTypes.bool,
2020
step: React.PropTypes.number,
2121
theme: React.PropTypes.shape({
22-
container: React.PropTypes.string.isRequired,
23-
editable: React.PropTypes.string.isRequired,
24-
innerknob: React.PropTypes.string.isRequired,
25-
innerprogress: React.PropTypes.string.isRequired,
26-
input: React.PropTypes.string.isRequired,
27-
knob: React.PropTypes.string.isRequired,
28-
pinned: React.PropTypes.string.isRequired,
29-
pressed: React.PropTypes.string.isRequired,
30-
progress: React.PropTypes.string.isRequired,
31-
ring: React.PropTypes.string.isRequired,
32-
slider: React.PropTypes.string.isRequired,
33-
snap: React.PropTypes.string.isRequired,
34-
snaps: React.PropTypes.string.isRequired
22+
container: React.PropTypes.string,
23+
editable: React.PropTypes.string,
24+
innerknob: React.PropTypes.string,
25+
innerprogress: React.PropTypes.string,
26+
input: React.PropTypes.string,
27+
knob: React.PropTypes.string,
28+
pinned: React.PropTypes.string,
29+
pressed: React.PropTypes.string,
30+
progress: React.PropTypes.string,
31+
ring: React.PropTypes.string,
32+
slider: React.PropTypes.string,
33+
snap: React.PropTypes.string,
34+
snaps: React.PropTypes.string
3535
}),
3636
value: React.PropTypes.number
3737
};
@@ -298,3 +298,4 @@ class Slider extends React.Component {
298298
}
299299

300300
export default themr('ToolboxSlider')(Slider);
301+
export { Slider };

0 commit comments

Comments
 (0)