Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Test-driven Client-side JS

Pete Hodgson
February 04, 2015

Test-driven Client-side JS

Presented at ForwardJS, Feb 2015
VIDEO: https://forwardjs.com/lectures/33

Writing high quality, maintainable client-side code is becoming increasingly important as we continue to move more logic into the browser. This talk will show how unit-testing and test-driven development helps you build better quality code, faster.

We'll see examples of building a React app test-first, then look at techniques and tools to solve the trickier parts of unit-testing in JavaScript. You'll see how TDD guides us towards cleaner and more maintainable code, with clear separation between your application logic and the browser's 'ideosnycractic' APIs.

Pete Hodgson

February 04, 2015
Tweet

More Decks by Pete Hodgson

Other Decks in Programming

Transcript

  1. { dest_name: “Richmond”, etd: 8, … } Departure Domain Object

    { destination: “Richmond”, departing: “8 mins” } View Object presenter function
  2. var departurePresenter = require('../../js/departure_presenter'); ! describe( 'Departure presenter', function(){ it('presents

    the destination', function(){ // Given var departure = { dest_name: "Ontario", etd: 10 }; // When var viewModel = departurePresenter(departure); // Then expect(viewModel).to.have.property('destination','Ontario'); }); });
  3. var departurePresenter = require('../../js/departure_presenter'); ! describe( 'Departure presenter', function(){ it('presents

    the destination', function(){ // Given var departure = { dest_name: "Ontario", etd: 10 }; // When var viewModel = departurePresenter(departure); // Then expect(viewModel).to.have.property('destination','Ontario'); }); });
  4. { dest_name: “Richmond”, etd: 8, … } Departure Domain Object

    { destination: “Richmond”, departing: “8 mins” } View Object
  5. { dest_name: “Richmond”, etd: 8, … } Departure Domain Object

    { destination: “Richmond”, departing: “8 mins” } View Object
  6. 25

  7. 26

  8. 27

  9. 29

  10. 34

  11. it( 'parses the AJAX response as JSON', function(){ // Given

    var fakeJson = '{ "some":"json" }'; var fakeAjaxResponse = Q(fakeJson); var fakeAjaxFn = function(){ return fakeAjaxResponse; }; ! var departuresGateway = createDeparturesGateway(fakeAjaxFn); ! // When var departuresPromise = departuresGateway.fetchDeparturesFor('blah'); ! // Then return expect(departuresPromise) .to.eventually .deep.equal({some:"json"}); });
  12. mocha test runner chai assertion library gulp task runner, file

    watcher testem browser manager sinon stubbing/mocking chai-as-promised …