advanced java script unit testing - js-il.com

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

Advanced JavaScript UnitTesting

Israel JavaScript Conference

Yaniv YechezkelYaniv@UpStruct.nethttp://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

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

JSUnit

LBRTW UT

Enhance JS

Test.Simple

RhUnit

screw-unit

Jasmine

UnitTesting

JSSpec

YUI Test

intern

J3Unit

Crosscheck

jsUnitTest

TestIt

TestCase

Test.More

RhinoUnit

jsUnity

JSTest.NET

JSTest

Js-test-runner

Js-test-driver

FireUnit

JasUnit

VowsSOAtest

Sinon.js

Tyrtle

Buster.JS

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

JSUnit

LBRTW UT

Enhance JS

Test.Simple

RhUnit

screw-unit

Jasmine

UnitTesting

JSSpec

YUI Test

intern

J3Unit

Crosscheck

jsUnitTest

TestIt

TestCase

Test.More

RhinoUnit

jsUnity

JSTest.NET

JSTest

Js-test-runner

Js-test-driver

FireUnit

JasUnit

VowsSOAtest

Sinon.js

Tyrtle

Buster.JS

What Works for Me

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!

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

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

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>

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’);

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

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

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

www.js-il.com

18.6.13

Thanks.

advanced java script unit testing - js-il.com

javascript developers

generic javascript code

agendawhy unit testing

writing unit tests

toolsinbrowser testing

good thing

hello qunit

jquery ui

Technology

djlro j! js js • psi

m ou n tfl e ch red a id sd.r.c.js tyen i js taung ajs qanqu...

sparkling preziprezi exportra -...

jquery mobile apps - js-il.com

ibm script portlet for websphere portal - ibm.com · pdf...

alessandro marchisio - gennaio 2005 window scripting host...

java script测试之js unit ut

die fabelhafte welt java(script)-getriebener...

e4d js conference jquery for professionals - js-il.com

js dom & js bom

q umb ed ca tion d s r - emisec.co.za · mbonda sp mbombo...

teoría del estado unidad i :generalidades. lic.alvaro...

e4d js conference responsive web design - js-il.com

unity lesson 3 : c# vs js script

qm15 060313 qm15 en - wilo-il.com

xoopit: greasemonkey + js (sf js #3)

js a dvanced javascript advanced programming. js a dvanced...

stipulated final judgment and order for permanent ... · -...

node js websocket js meetup slides

developing real time web apps with signalr - js-il.com