advanced java script unit testing - js-il.com

Download Advanced java script unit testing - js-il.com

If you can't read please download the document

Post on 27-Jan-2015

114 views

Category:

Technology

6 download

Embed Size (px)

DESCRIPTION

js-il.com

TRANSCRIPT

Israel JavaScript Conference

Advanced JavaScript UnitTesting

Israel JavaScript Conference

Yaniv YechezkelYaniv@UpStruct.nethttp://www.UpStruct.net

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Israel JavaScript Conference

Yaniv YechezkelYaniv@UpStruct.nethttp://www.UpStruct.net

Hello.

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Agenda

Why Unit Testing?

Picking the Tools

In-Browser Testing with QUnit

Headless Tests with JsTestDriver

Mocking with Sinon.JS

Integration with your IDE

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Why Unit Testing?

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

We All Know Its a Good Thing to

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Its very much like regular exercise. Everybody knows its good, but few people do it.

5

Why?

Tests Increase Confidence

Tests Encourage Good Design

Collective Ownership (for Quality)

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

But Still

The most common excuse would be:We dont have time/capacity

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

The (Short) Answer

We need a quick way to test on all Browsers

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Picking the Tools

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Unit Testing Frameworks

Nodeunit

Suitest

DOH

JSUnit

LBRTW UT

Enhance JS

Test.Simple

RhUnit

screw-unit

Jasmine

JSpec

UnitTesting

JSSpec

YUI Test

intern

Mocha

J3Unit

Crosscheck

jsUnitTest

TestIt

TestCase

Test.More

RhinoUnit

jsUnity

JSTest.NET

JSTest

Js-test-runner

Js-test-driver

FireUnit

JasUnit

Vows

SOAtest

Sinon.js

wru

Tyrtle

Buster.JS

QUnit

http://en.wikipedia.org/wiki/List_of_unit_testing_frameworks#JavaScript

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Its very much like regular exercise. Everybody knows its good, but few people do it.

10

Lets Set the Expectations

In-Browser Testing

Headless Testing

Cross Platform

Seamless Integration with our Development Environment IDE, Build

Support for AMD/Requires.JS

Documented Libraries and Tools

Free Tools are preferred

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Unit Testing Frameworks

Nodeunit

Suitest

DOH

JSUnit

LBRTW UT

Enhance JS

Test.Simple

RhUnit

screw-unit

Jasmine

JSpec

UnitTesting

JSSpec

YUI Test

intern

Mocha

J3Unit

Crosscheck

jsUnitTest

TestIt

TestCase

Test.More

RhinoUnit

jsUnity

JSTest.NET

JSTest

Js-test-runner

Js-test-driver

FireUnit

JasUnit

Vows

SOAtest

Sinon.js

wru

Tyrtle

Buster.JS

QUnit

http://en.wikipedia.org/wiki/List_of_unit_testing_frameworks#JavaScript

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Its very much like regular exercise. Everybody knows its good, but few people do it.

12

What Works for Me

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

*Note

The Tools are secondary importance

Most important is doing those Unit Tests

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

In-Browser Testing with QUnit

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

QUnit

QUnit is a powerful, easy-to-use JavaScript unit testing framework.

It's used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code,including itself!

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

History

QUnit was originally developed by John Resig as part of jQuery.

In 2008 it got its own home, name and API documentation, allowing others to use it for their unit testing as well.

At the time it still depended on jQuery.

A rewrite in 2009 fixed that, and now QUnit runs completely standalone.

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Get The Bytes

Go to the Official Sitehttp://qunitjs.com

Or, get the latest version from GitHub https://github.com/jquery/qunit

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Set-Up The Test Page

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Data what?

HTML5 added a feature called custom data attributes. Data-* in short.

Any tag attribute that begins with data- may be used as a custom data storage associated with the element.

var productId = $(#product).data(identity);

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

29

Test Module - Revisited

require(["jquery", "underscore

], function ($, _) {

module("Tests and Modules", {

setup: function () {

},

teardown: function () {

}

});

test(Sanity Test", function () {

ok(1 == 1, 'Hello QUnit);

});

});

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

QUnit combined with Require.JS

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Headless Testswith JsTestDriver

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

JsTestDriver

JsTestDriver aims to help JavaScript developers use good TDD practices and aims to make writing unit tests as easy as what already exists today for java with JUnit.

Headless Tests

Supports AMD/Require.JS Modules

Plays nice with QUnit and Sinon.JS

Integrates well with Visual Studio, Web Storm

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Get The Bytes

JsTestDriverhttp://code.google.com/p/js-test-driver

QUnit to JsTestDriver Adapterhttps://github.com/exnor/QUnit-to-JsTestDriver-adapter - Translates QUnit API to JS Test Driver

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Set-Up the Environment

JsTestDriver.jarRunner

jsTestDriver.confConfiguration File

Adapter Scripts- equiv.js- QUnitAdapter.js

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Configuration File (YAML)

server: http://localhost:9876

basepath: ""

load:

- jquery.js

- qunit.js

- sinon.js

test:

- test.js

serve:

- module.js

plugin:

# Plug-Ins

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

The Test Runner

Server

Client (Running-Tests)

-jar JsTestDriver.jar --port 9876 --browser "chrome.exe","Safari.exe, iexplore.exe

-jar JsTestDriver-1.3.5.jar --server http://localhost:9876 --tests all --testOutput "jsTestDriver-TestResults" --verbose

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Running Headless Tests

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Mocking with Sinon.JS

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Sinon.JS

Standalone test spies, stubs and mocks for JavaScript.

No dependencies, works with any unit testing framework.

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Get The Bytes

Sinon.JShttp://sinonjs.org

QUnit Adapterhttp://sinonjs.org/qunit- Seamless Sinon.JS integration for Qunit

Sinon-IE Plug-Inhttp://sinonjs.org/docs/#server- Compatibility for IE when Timers & fake XHR are used

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Sinon.JS Provides Rich API

Stubs

Mocks

Fake Timers

Fake XHR

Spies

More

Israel JavaScript Conference | 03 6325707 | info@e4d.co.il | www.js-il.com |

Stub

require(["jquery",

"underscore",

"tests/calculator"

], function ($, _, calculator) {

test("Stub method", function () {

var stub = sinon.stub(calculator, "sum",

function (num1, num2) {

return num1 - num2;

});

var sum = calculator.sum(5, 3);

equal(sum, 2, "Expected 2");

stub.restore();

});

});

Israel JavaScript Confere