Advanced java script unit testing - js-il.com

Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |

Advanced JavaScript UnitTesting

Israel JavaScript Conference

Yaniv [email protected]://www.UpStruct.net

mailto:[email protected]

http://www.js-il.com/


http://www.upstruct.net/



Israel JavaScript Conference


Hello.







Agenda

Why Unit Testing?

Picking the Tools

In-Browser Testing with QUnit

Headless Tests with JsTestDriver

Mocking with Sinon.JS

Integration with your IDE




Why Unit Testing?




We All Know It’s a Good Thing to




Why?

Tests Increase Confidence

Tests Encourage Good Design

Collective Ownership (for Quality…)




But Still… The most common excuse would be:

“We don’t have time/capacity…”




The (Short) Answer We need a quick way to test on all

Browsers…




Picking the Tools




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

VowsSOAtest

Sinon.js

wru

Tyrtle

Buster.JS

QUnit

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






Let’s 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




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

VowsSOAtest

Sinon.js

wru

Tyrtle

Buster.JS

QUnit







What Works for Me




*Note

The Tools are secondary importance

Most important is doing those Unit Tests




In-Browser Testing with QUnit




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!



https://github.com/jquery/qunit/tree/master/test


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.




Get The Bytes Go to the Official Site

http://qunitjs.com

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



http://qunitjs.com/

http://qunitjs.com/

http://qunitjs.com/

https://github.com/jquery/qunit

https://github.com/jquery/qunit


Set-Up The Test Page <!DOCTYPE html> <html> <head> <link href="Scripts/libs/qunit/qunit-1.10.0.css” rel="stylesheet" type="text/css" /> <script src="Scripts/libs/qunit/qunit-1.10.0.js" type="text/javascript"></script> <script src="Scripts/my-tests.js" type="text/javascript"></script>

</head><body> <div id="qunit"></div> <div id="qunit-fixture"></div> </body></html>




A Test Case

test(“Sanity Test", function () { ok(1 == 1, 'Hello QUnit‘);

});




The Test Runner “In-Browser” Tests Fast – Immediate Feedback As Simple as it can be




Writing & Running Testswith QUnit




Assertion Methods QUnit's assertion methods follow the

CommonJS Unit Testing specification, which was to some degree influenced by QUnit.

Assertions- ok- equal, notEqual- deepEqual, notDeepEqual- strictEqual, notStrictEqual- throws



http://wiki.commonjs.org/wiki/Unit_Testing/1.0


A Test Modulemodule("Tests and Modules", { // Runs before each test setup: function () { }, // Runs after each test teardown: function () { }});

test(“Sanity Test", function () { ok(1 == 1, 'Hello QUnit‘);});




And There’s More to Assertions Async Tests

- asyncTest- start- stop

More Control- expect

Configurations- config- init- reset




Support for AMD




Require.JS Require.JS JavaScript File & Module Loader AMD Compliant

AMD Asynchronous Module Definition An API Specification for defining modules Part of Common.JS Spec




Test Page - Revisited

<!DOCTYPE html> <html> <head> <link href="Scripts/libs/qunit/qunit-1.10.0.css“ rel="stylesheet" type="text/css" /> <script src="Scripts/libs/qunit/qunit-1.10.0.js" type="text/javascript"></script>

<script data-main="scripts/main-tests" src="scripts/libs/require/require.js" type="text/javascript"></script></head></html>




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.

<div id=“product” data-identity=“3”>…</div>

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




Test Module - Revisitedrequire(["jquery", "underscore“], function ($, _) {

module("Tests and Modules", { setup: function () { }, teardown: function () { } });

test(“Sanity Test", function () { ok(1 == 1, 'Hello QUnit‘); });});




QUnit combined with Require.JS




Headless Testswith JsTestDriver




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




Get The Bytes JsTestDriver

http://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





https://github.com/exnor/QUnit-to-JsTestDriver-adapter




Set-Up the Environment JsTestDriver.jar

Runner

jsTestDriver.confConfiguration File

Adapter Scripts- equiv.js- QUnitAdapter.js




Configuration File (YAML) server: http://localhost:9876basepath: ""load: - jquery.js - qunit.js - sinon.jstest: - test.jsserve: - module.jsplugin: # Plug-Ins




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




Running Headless Tests








Sinon.JS Standalone test spies, stubs and mocks

for JavaScript.

No dependencies, works with any unit testing framework.




Get The Bytes Sinon.JS

http://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



http://sinonjs.org/

http://sinonjs.org/

http://sinonjs.org/qunit

http://sinonjs.org/qunit

http://sinonjs.org/docs/#server


Sinon.JS Provides Rich API Stubs Mocks Fake Timers Fake XHR Spies

More…




Stubrequire(["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(); });});








IDE Integration




Development Environment Integration

IDE Can be integrated nicely with Visual

Studio Built-in with Web Storm

CI Headless Tests can run as part of CI Can test against multiple browsers




Headless Tests from VS




Summary There are plenty of Tools You can Mix and Match Tools can be integrated into your

development environment- IDE, CI Server

Conclusion Moving code to the Client-Side, doesn’t

mean loosing control or giving up on quality.




Resources JavaScript Unit Testing Frameworks


A Step by Step Guide: Part I, Part II, Part III






http://www.upstruct.net/2013/01/javascript-unit-testing-in-visual.html

http://www.upstruct.net/2013/02/javascript-unit-testing-in-visual.html

http://www.upstruct.net/2013/02/javascript-unit-testing-in-visual-part-3.html


www.js-il.com

18.6.13





Thanks.







Technology

Advanced java script unit testing - js-il.com