classiemilio

const circle = d3.select('circle');

function transition(radius, duration) {
  circle.transition()
    .duration(duration)
    .attr('r', radius);
}

describe('#transition', () => {
  beforeEach(() => {

classiemilio

const circle = d3.select('circle');

function transition(radius, duration) {
  circle.transition()
    .duration(duration)
    .attr('r', radius);
}

describe('#transition', () => {
  it('correctly transitions circle radius', () => {

classiemilio

const d3SelectionProto = Object.assign({}, d3.selection.prototype);

const D3TestUtils = {
  stubAndForceTransitions() {
    d3.selection.prototype.transition = function() {
      return this;
    };

    d3.selection.prototype.duration = function() {
      return this;

classiemilio

const D3TestUtils = {
  clockTick(milliseconds) {
    const currentNow = Date.now();
  
    Date.now = function() {
      return currentNow + milliseconds;
    }

    d3.timer.flush();
  }

classiemilio

const React = require(‘react’);
const ReactDOM = require(‘react-dom’);
const MyTooltipComponent = require('my-tooltip-component');
  
class MyGraphComponent extends React.Component {
  componentDidMount() {
    this.drawChart();
  }
  
  shouldComponentUpdate() {

classiemilio

const React = require(‘react’);
const ReactDOM = require(‘react-dom’);

class MyGraphComponent extends React.Component {
  componentDidMount() {    
    /* D3 code to append elements to this.svg */
  }
  
  shouldComponentUpdate() {
    return false; // This prevents future re-renders of this component

classiemilio

describe('#renderLines', function() {
  var xScale;
  var yScale;

  beforeEach(function() {
    xScale = d3.scale.linear().domain([0, 10]).range([0, 100]);
    yScale = d3.scale.linear().domain([0, 10]).range([0, 1000]);
  });

  it('renders lines correctly for a small 1-line data set', function() {

classiemilio

/* Implementation */

function getXScale(dimensions, data) {
  var range = [0, dimensions.width];
  var domain = [0, data.length - 1];
  return d3.scale.linear().domain(domain).range(range);
}

/* Test */

classiemilio

/* Implementation */

function renderLines(xScale, yScale, data) {
  var lineGenerator = getLineGenerator(xScale, yScale);
  d3.selectAll('path')
    .data(data)
    .enter()
    .append('path')
      .attr('d', lineGenerator);
}

classiemilio

/* Implementation */

function renderCircles(xScale, yScale, data) {
  d3.selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
      .attr('cx', circleCX.bind(undefined, xScale)
      .attr('cy', circleCY.bind(undefined, yScale);
}