Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from 'react';
import ReactDOM from 'react-dom';
import d3 from 'd3';
class NumberCounter extends React.Component {
componentWillMount() {
this.setState({
number: this.props.number
});
}
componentWillReceiveProps(newProps) {
this.prepareComponentState(newProps);
}
prepareComponentState(props) {
let oldProps = this.props
d3.transition()
.duration(this.props.frequency)
.ease('linear')
.tween(oldProps, () => {
let i = d3.interpolate(oldProps.number, props.number);
return (t) => {
this.setState({
number: Math.round(i(t)),
});
}
})
}
render() {
return (
<text id = 'numberCounter'>
{this.state.number}
</text>
)
}
}
NumberCounter.defaultProps = {
number: 0,
frequency: 3000,
}
export default NumberCounter;
import React from 'react';
import ReactDOM from 'react-dom';
import {
renderIntoDocument,
findRenderedDOMComponentWithClass,
findRenderedDOMComponentWithTag,
scryRenderedDOMComponentsWithClass,
scryRenderedDOMComponentsWithTag,
isDOMComponent,
isElement,
isCompositeComponent,
Simulate
} from 'react-addons-test-utils';
import assert from 'assert';
import NumberCounter from 'app/components/elements/numberCounter.jsx';
describe('NumberCounter', () => {
var component, div, view;
beforeEach(() => {
component = <NumberCounter
number = {2}
frequency = {1000}
/>
div = document.createElement('div');
view = ReactDOM.render(component, div);
});
it('returns number', () => {
var number = findRenderedDOMComponentWithTag(view, 'text');
assert.equal(parseInt(number.textContent, 10), 2);
});
it('updates number', () => {
component = <NumberCounter
number = {4}
frequency = {1000}
/>
view = ReactDOM.render(component, div);
var number = findRenderedDOMComponentWithTag(view, 'text');
assert.equal(parseInt(number.textContent, 10), 4);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment