JavaScript Testing

Presenter Notes

Our Presenters

David Luecke

Eric Kryski

yycjs.github.io/javascript-testing

Presenter Notes

Our Sponsors

Assembly Co-working Space

Assembly

PetroFeed

PetroFeed

Presenter Notes

Our Sponsors

Village Brewery

Village Brewery

Presenter Notes

Last Month - MVWFT?

TodoMVC Logo

Presenter Notes

Testing!

  • Acceptance - High level requirements and specifications.
  • Functional - Based on the specification/requirements of the software component. High level test of a feature or user interaction.
  • Unit - Tests individual, contained units of code.
  • Integration - Test interfaces and interaction of various components (both inside and outside the system).
  • Regression - Used to make sure that your software does get worse instead of getting better.
  • Performance - Test the speed and performance limits of the system. Find optimal operation limits.

Presenter Notes

JavaScript testing

JavaScript testing very "young".

Client side testing still not a common practise.

Different environments

  • Client
    • Requires both, functional and unit testing
    • Browsers
    • Screen resolutions (mobile)
    • Internet Explorer (Boo!)
  • Server (NodeJS)

Presenter Notes

BrowserStack

Live web-based cross browser testing

Browserstack

  • Browsers on VMs in Mac OS and Windows, mobile emulators
  • RESTful API
  • Local tunneling
  • Screenshots

Presenter Notes

Headless Browsers

PhantomJS logo

PhantomJS

  • Webkit based.
  • Written in C++. API in Javascript and Coffeescript.

Zombie.js

  • Written in Coffeescript and NodeJS.
  • Use jQuery on server side.

Pro: Fast, works well for automated acceptance and UI tests

Con: Doesn't test actual browsers

Presenter Notes

Unit Testing

Presenter Notes

What?

  • Split functionality into contained units. Ideally each function should perform one unit of work.
  • Ideally we also want to isolate the code to be tested (using mocks, stubs, test harnesses)
  • Test each part.
    • Boundary Value Testing
    • White Box Testing

You don't need to write tests for every scenario (and you should't). Try and kill many birds with one stone.

Presenter Notes

JavaScript unit testing

Jasmine Logo QUnit Logo Mocha Logo

Presenter Notes

A blog post

var BlogPost = function(title, content, date) {
    this.title = title;
    this.content = content.replace(/n/g, "<br />");
    this.date = date || new Date();
    this.published = false;
}

BlogPost.prototype.publish = function() {
    this.published = true;
}

BlogPost.prototype.toString = function() {
    if(!this.published) {
        throw "This blog post is not published";
    }
    return "<h1>" + this.title + "</h1>" +
        "<h6>Published on " + this.date.toString() + "</h6>" +
        "<p>" + this.content + "</p>";
}

Presenter Notes

Running tests

Presenter Notes

Test runners

Automate running your JavaScript tests in any available browser and make the results persistent.

Services

Presenter Notes

Testee

Testee.JS runs your Mocha, QUnit or Jasmine unit tests from the command line using any browser.

  • Runs on all browsers (supporting SocketIO)
  • Many output formats Testee Logo
  • CI integration
  • BrowserStack support
  • GruntJS Task

Presenter Notes

Continuous Integration

  • Use source control management system (SCM) for builds
  • Run reports, tests, deploy or other tools on each SCM change
  • Popular open source CI servers:
    • Jenkins: Probably most popular CI server, formerly Hudson
    • CruiseControl: CI framework initially by Thoughtworks
    • TravisCI: Distributed build platform for the open source community

Mr. Jenkins

Presenter Notes

Functional testing

Presenter Notes

Function web application testing

Open Source Libraries

  • Zombie.js - Headles browser with automation API
  • CasperJS - Website automation using PhantomJS
  • FuncUnit - Clients side functional testing
  • Selenium - Browser automation toool

Services

Presenter Notes

FuncUnit

Functional testing library built on top of jQuery and QUnit:

  • Use jQuery syntax to emulate user input
  • Write QUnit style tests

Testing a TodoMVC app

test('TodoMVC app', function() {
    S('#new-todo').click().type('Do some nerdy stuff\r').wait(500);
    S('#todo-list li').size(1, 'Got one Todo');
    S('#todo-list li:first label')
        .html('Do some nerdy stuff', 'Todo has correct text');
    S('#todo-count').html(/<strong>1<\/strong>(.*)item(.*)left/,
        'Todo count text is correct');
});

Presenter Notes

Next month

  • 3 hour slide show about Daves holiday
  • TBA

Presenter Notes