numberCounter.jsx

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;
 
 

numberCounter_test.js

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);
  });
});