TDD: The Hard Parts

😿

Slides: http://bit.ly/1L9bckF

Feedback: http://midwestjs.com/feedback

Hi

• JavaScript @ Braintree
• Lots of 💚 for 🍜
• Poetry!

(braintreepayments.com/careers)

A hypothetical start

You may be familiar with...

LGTM 🚢🇮🇹

class TodoApp () {
  constructor () {
    this.todos = [];
    this.input = document.querySelector('#new-todo');
    this.todoList = document.querySelector('#new-todo');

    this.attachEvents();
    this.render();
  }

  render () { /* ... */ }
  attachEvents () { /* ... */ }
}

let app = new TodoApp();

😱

We know this is a bad idea.

But why?

The general adoption of unit testing is one of the most fundamental advances in software development in the last 5 to 7 years. - [20 Jul 2006]

Jeff Atwood

┓┏┓┏┓┃
┛┗┛┗┛┃＼○／
┓┏┓┏┓┃  /     No unit
┛┗┛┗┛┃ノ)
┓┏┓┏┓┃         tests
┛┗┛┗┛┃
┓┏┓┏┓┃
┛┗┛┗┛┃
┓┏┓┏┓┃
┃┃┃┃┃┃
┻┻┻┻┻┻

@davidwalsh

2014 JS Daily Survey

Test-first fundamentalism is like abstinence-only sex ed: An unrealistic, ineffective morality campaign for self-loathing and shaming.

David Heinemeier Hansson

A little history

<gross-oversimplification>

TDD is about:

• Feedback
• Ownership
• Empowerment

Tests are a means to an end

</gross-oversimplification>

TDD should be guilt free

Roadblocks to TDD

😿 Not Enough Time

😸 Don't quote tests

😸 Be pragmatic

😿 No Culture

😸 Create a Test Positive Culture

• Code should be covered by tests whenever possible.
• Tests should clearly describe the feature they cover.
• Someone should be able to help you write better tests.

😸 Find a better culture (there are many)

😿 Building testing infrastructure is hard

😸 Get help (from a real person)

😸 Don't roll your own (unless you have to)

These pluggable frameworks will helper you launch browsers, pre-process (and more!)

• 😸 karma
• 😸 testem
• 😸 zuul
• 😸 intern

😸 Invest Up Front

Building

😿 Front-End Iteration

It's hard to TDD "feel"

it('pops')

Pairing Pressure

😸 The Invaluable Spike

😸 Outside in: feature first

// tests/integration/todo-application.test.js
describe('TodoApplication', () => {
  it('allows a user to add todos', () => {
    browser.get('/');

    $('#new-todo')
      .sendKeys('Test')
      .sendKeys(protractor.Key.ENTER);

    let todos = $$('#todo-list li');

    expect(todos.get(0).getText()).toContain('Test');
  });
});

😿 Knowing what to test

confidence is made up of all testing layers

😸 Invest in the most effective layer

Cost/Reward: Component Integration Test

describe('PhantomJS View Test', () => {
  it('adds a todo when the user presses enter', () => {
    let view = new TodoView();
    let input = document.querySelector('#new-todo');

    input.value = 'Add a headless test';
    let event = document.createEvent('Event');
    event.keyCode = 13;
    event.init('keyup');
    input.dispatchEvent(event);

    expect(view.counter).to.eql(1);
  });
});

😱 not testing things😱

😿 Warped Code

import xhr from 'superagent';
import RSVP from 'rsvp';

function getTodoStatus(id) {
  let deferred = RSVP.defer();

  xhr
    .get(`/api/${id}`)
    .end((err, result) => {
      _handleXhr(deferred, err, result);
    });

  return deferred.promise;
}

function _handleXhr(deferred, err, result) {
  if (err) { return deferred.reject('Error'); }

  deferred.resolve(result.body);
}

describe('getTodoStatus', () => {
  describe('_handleXhr', () => {
    it('rejects if err is defined', () => {
      let mockDeferred = {reject: sinon.spy()};
      let error = new Error();
      _handleXhr(error, mockDeferred);

      expect(mockDeferred.reject).to.have.been.calledWith('Error');
    });
  });
});

😸 Prefer input control to _isolation

describe('getTodoStatus', () => {
  it('resolves with an error on connection error', (done) => {
    let fakeServer = sinon.fakeServer.create();
    fakeServer.respondWith('GET', [500, {}, '']);

    getTodoStatus(1)
      .catch((result) => {
        expect(result).to.eql('Error');
        done();
      });
  });
});

You and your code benefit

import xhr from 'superagent';

function getTodoStatus(id) {
  return new Promise((resolve, reject) => {
    xhr
      .get(`/api/${id}`)
      .end((err, result) => {
        if (err) { return reject('Error'); }

        resolve(result.body);
      });
  })
}

😿 Testing dependencies

import externalApi from 'external-api';

class MyService {
  get () {
    return externalApi.request();
  }
}

Breaking things up for testability

import externalApi from 'external-api';

class MyService {
  get () {
    return _externalApiProxy()
  },
  _externalApiProxy () {
    return externalApi.request();
  }
}

describe('get', () => {
  it('calls _externalApiProxy')
});

import proxyquire from 'proxyquire';

describe('myService', () => {
  it('fetches a result from externalApi', () => {
    let fakeExternalApi = {request: sinon.spy()};
    let myService = new proxyQuire('MyService', {
      'external-api' fakeExternalApi
    });

    myService.get();

    expect(fakeExternalApi.request).to.have.been.called;
  });
});

Tools for Dependency substitution

• Proxyquireify CommonJS (browserify)
• rewire webpack CommonJS (webpack)
• Squire.js AMD (require.js)

Maintaining tests

Tests are first class citizens

Tests tell a story

Todos
  #completed
    returns completed todos
    returns an empty array if there are no results
  #update
    changes the text of a todo
    adds tags contained in the text of a todo
    updates the edited timestamp of a todo

😿 Tests are boring to read

😸 Obliterate Meaningless tests

describe('Todos', () => {
  describe('get', () => {
      // meaningless drivel
      it('has a get method', () => {
        let todos = new Todos();
        expect(todos).to.respondTo('get');
      });

      // this actually covers the method
      it('retrieves todos', () => {
        let todos = new Todos();
        expect(todos.get()).to.eql(1);
      });
  });
});

😸 Reduce non-descriptive boilerplate.

it('retrieves todos', () => {
  let todos = new Todos();
  todos.configure({admin: true})
  todos.add({
    text: 'test1',
    user: 'Cheryl'
  });

  expect(todos.get(1).text).to.eql('test1');
});

it('deletes todos', () => {
  let todos = new Todos();
  todos.configure({admin: true})
  todos.add({
    text: 'test2',
    user: 'James'
  });

  todos.delete(1);
  expect(todos.get(1)).to.eql(undefined);
});

let todos = null;

beforeEach(() => {
  todos = new Todos();
  todos.configure({admin: true});
});

it('retrieves todos', () => {
  todos.add({
    text: 'test1',
    user: 'Cheryl'
  });

  expect(todos.get(1).text).to.eql('test1');
});

it('deletes todos', () => {
  todos.add({
    text: 'test2',
    user: 'James'
  });
// ...

Don't be too DRY

describe('edge case', function () {
  strange();
  setup();
  code();

  let state = todos.completed();

  expect(state).to.match('completed');
});

😿 Tests are boring to write

😸 Keep your tests fresh

let spy = sinon.spy();

expect(spy.calledWith(1)).to.eql(true);

import sinonChai from 'sinon-chai';
chai.use(sinonChai);

expect(spy).to.have.been.calledWith(1);

Tests should be as fun as possible to write

The joys of integration testing

Integration Tests === 😸 😸 😸

Integration Tests === 😿 😿 😿

😿 Flakey tests

😸 Invest in infrastructure

😸 Be prepared for flakiness

npm run test:integration

FAILED

re-running tests: test attempt 1

FAILED

re-running tests: test attempt 2

FAILED

re-running tests: test attempt 2

SUCCESS

😿 Slow Tests

😸 Shard

😸 Sleep Smart

// not so good
wait(2000);

// better

waitFor($('#todos').isPresent);

😸 Fail as fast and as explicitly as possible.

helpers.addTodo('test')
// lengthy animated process

expect($('#todos').get(0).getText().to.equal('test');

expect($('#new-todo').isPresent).to.be.true;
helpers.addTodo('test');
// lengthy animated process

expect($('#todos').get(0).getText().to.equal('test');

😿 Selenium quirks

$('#complete-todo').click();

browser
  .actions()
  .mouseDown()
  .mouseUp()
  .perform();

😸 Abstract (some of) the pain away

export function selectItem (elem) {
  elem.click();

  browser
    .actions()
    .mouseDown()
    .mouseUp()
    .perform();
}

import {selectItem} from './page-helpers';

selectItem($('#complete-todo'))

The long road

Tdd is an art.

We can make art.

Resources

• Test-Driven Development by Example (Kent Beck)
• Is TDD Dead? (DHH, Kent Beck, Martin Fowler)
• Testable JavaScript (Mark Ethan Trostler)

Thanks

• @itsnicktomlin
• github.com/nicktomlin

Slides: http://bit.ly/1L9bckF

Feedback: http://midwestjs.com/feedback