Advanced java script unit testing - js-il.com
-
Upload
eyal-vardi -
Category
Technology
-
view
124 -
download
6
description
Transcript of Advanced java script unit testing - js-il.com
![Page 1: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/1.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Advanced JavaScript UnitTesting
Israel JavaScript Conference
Yaniv [email protected]://www.UpStruct.net
![Page 2: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/2.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Israel JavaScript Conference
Yaniv [email protected]://www.UpStruct.net
Hello.
![Page 3: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/3.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | 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
![Page 5: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/5.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
We All Know It’s a Good Thing to
![Page 6: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/6.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Why?
Tests Increase Confidence
Tests Encourage Good Design
Collective Ownership (for Quality…)
![Page 7: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/7.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
But Still… The most common excuse would be:
“We don’t have time/capacity…”
![Page 8: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/8.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
The (Short) Answer We need a quick way to test on all
Browsers…
![Page 10: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/10.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | 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
VowsSOAtest
Sinon.js
wru
Tyrtle
Buster.JS
QUnit
http://en.wikipedia.org/wiki/List_of_unit_testing_frameworks#JavaScript
![Page 11: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/11.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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
![Page 12: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/12.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | 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
VowsSOAtest
Sinon.js
wru
Tyrtle
Buster.JS
QUnit
http://en.wikipedia.org/wiki/List_of_unit_testing_frameworks#JavaScript
![Page 14: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/14.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
*Note
The Tools are secondary importance
Most important is doing those Unit Tests
![Page 15: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/15.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
In-Browser Testing with QUnit
![Page 16: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/16.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | 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!
![Page 17: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/17.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | 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.
![Page 18: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/18.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Get The Bytes Go to the Official Site
http://qunitjs.com
Or, get the latest version from GitHub https://github.com/jquery/qunit
![Page 19: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/19.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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>
![Page 20: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/20.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
A Test Case
test(“Sanity Test", function () { ok(1 == 1, 'Hello QUnit‘);
});
![Page 21: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/21.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
The Test Runner “In-Browser” Tests Fast – Immediate Feedback As Simple as it can be
![Page 22: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/22.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Writing & Running Testswith QUnit
![Page 23: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/23.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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
![Page 24: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/24.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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‘);});
![Page 25: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/25.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
And There’s More to Assertions Async Tests
- asyncTest- start- stop
More Control- expect
Configurations- config- init- reset
![Page 27: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/27.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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
![Page 28: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/28.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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>
![Page 29: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/29.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | 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.
<div id=“product” data-identity=“3”>…</div>
var productId = $(‘#product’).data(‘identity’);
![Page 30: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/30.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Test Module - Revisitedrequire(["jquery", "underscore“], function ($, _) {
module("Tests and Modules", { setup: function () { }, teardown: function () { } });
test(“Sanity Test", function () { ok(1 == 1, 'Hello QUnit‘); });});
![Page 31: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/31.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
QUnit combined with Require.JS
![Page 32: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/32.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Headless Testswith JsTestDriver
![Page 33: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/33.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | 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
![Page 34: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/34.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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
![Page 35: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/35.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Set-Up the Environment JsTestDriver.jar
Runner
jsTestDriver.confConfiguration File
Adapter Scripts- equiv.js- QUnitAdapter.js
![Page 36: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/36.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Configuration File (YAML) server: http://localhost:9876basepath: ""load: - jquery.js - qunit.js - sinon.jstest: - test.jsserve: - module.jsplugin: # Plug-Ins
![Page 37: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/37.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | 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
![Page 38: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/38.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Running Headless Tests
![Page 39: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/39.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Mocking with Sinon.JS
![Page 40: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/40.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Sinon.JS Standalone test spies, stubs and mocks
for JavaScript.
No dependencies, works with any unit testing framework.
![Page 41: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/41.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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
![Page 42: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/42.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Sinon.JS Provides Rich API Stubs Mocks Fake Timers Fake XHR Spies
More…
![Page 43: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/43.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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(); });});
![Page 44: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/44.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Mocking with Sinon.JS
![Page 46: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/46.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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
![Page 47: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/47.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Headless Tests from VS
![Page 48: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/48.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
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.
![Page 49: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/49.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Resources JavaScript Unit Testing Frameworks
http://en.wikipedia.org/wiki/List_of_unit_testing_frameworks#JavaScript
A Step by Step Guide: Part I, Part II, Part III
![Page 50: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/50.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
www.js-il.com
18.6.13
![Page 51: Advanced java script unit testing - js-il.com](https://reader033.fdocuments.in/reader033/viewer/2022061223/54c68cbb4a79591d558b458c/html5/thumbnails/51.jpg)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Thanks.
Yaniv [email protected]://www.UpStruct.net