if( js && testing ) { level++; }

JavaScript? Testing?

Presenter Notes

Who Am I?

David Luecke

@daffl

github.com/daffl

https://github.com/daffl/jqueryto

Bitovi Logo

Presenter Notes

Open Source?

CanJS Logo
jQuery++ Logo

Presenter Notes

Testing, What's Out There?

DailyJS survey from December 2012:

45% Jasmine Logo
31% QUnit Logo
41% Mocha Logo

Presenter Notes

But ...

51% of respondents said they don’t write tests

JavaScript testing smiley is not happy

Presenter Notes

Getting started is easy

Set up a page:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My QUnit Test</title>
  <link rel="stylesheet" href="/resources/qunit.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="/resources/qunit.js"></script>
  <script src="/resources/underscore.js"></script>
  <script src="tests.js"></script>
</body>
</html>

Presenter Notes

Your Own Underscore Test

And in tests.js:

module("My Underscore Test");

test("values", function() {
    equal(_.values({one: 1, two: 2}).join(', '), '1, 2',
        'can extract the values from an object');
    equal(_.values({one: 1, two: 2, length: 3}).join(', '),
        '1, 2, 3', '... even when one of them is "length"');
});

Presenter Notes

Can We Do Better?

JavaScript testing smiley is thinking

Presenter Notes

A Holy Grail?

Adam Hawkins at RejectJS 2012 (watch)

  • Browser independent
  • All tests written in JavaScript
  • Unit and functional testing
  • Test against a single browser in development
  • Test against all target browsers in CI
  • Runs from the CLI

Presenter Notes

Not Again!

The Holy Grail!

Presenter Notes

Test Reporting

Presenter Notes

Starting Tests

Open the test page URL in the target browser(s)

Automate with Launchpad:

Presenter Notes

Testee - A test reporter

Automated cross-browser test reporter for QUnit, Jasmine and Mocha

Testee Logo

Some neat features:

  • Runs on all browsers
  • Many output formats
  • Easy CI integration
  • BrowserStack support
  • Code coverage
  • GruntJS task

Presenter Notes

Get started with Testee

Install:

npm install -g testee

Go to your project folder:

cd underscore

Point to your test page and run with PhantomJS:

testee test/index.html

Point to your test page and run with local Firefox:

testee test/index.html --browser firefox

Presenter Notes

More Testing!

Output XML test results for CI:

testee test/index.html --browser safari --reporter XUnit > testresults.xml

Run tests on Chrome Canary and output code coverage statistics:

testee test/index.html --browser canary --coverage

Test with IE 9.0 on BrowserStack:

testee test/index.html --browser ie:9.0@win --launch browserstack

Presenter Notes

Configuration File

Set up Remote Preview to open tests on other devices:

{
    "tunnel": {
        "type": "local",
        "hostname": "airblubber"
    },
    "launch": "remotePreview",
    "browser": {
        "file": "remote-preview/url.txt"
    }
}

And run like:

testee --config testee.json

Presenter Notes

Are We There Yet?

  • Browser independent
  • All tests written in JavaScript
  • Unit and functional testing
  • Test against a single browser in development
  • Test against all target browsers in CI
  • Runs from the CLI

Presenter Notes

Functional Testing

Presenter Notes

What Is It?

Automated tests performed from a user perspective

  • Emulate user input
  • Examine the result
  • Black box testing

Used for

  • Testing component interaction
  • Verifying UI heavy widgets
  • Application smoke tests

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

Are We There Yet?

  • Browser independent
  • All tests written in JavaScript
  • Unit and functional testing
  • Test against a single browser in development
  • Test against all target browsers in CI
  • Runs from the CLI

Presenter Notes

Keep it on your Radar

Presenter Notes