Post on 27-Jan-2015
description
JavaScriptTest-Driven Development
with QUnit @tasanakorn
http://www.tasanakorn.com
Barcamp Bangkhen, 2012-09-16Tuesday, 18 September 12
Agenda
Concept
QUnit
Example
Discussion
Tuesday, 18 September 12
Software Development Process
Plain Old Unit Testing
Test-Last
Test-Driven Development (TDD)
Test-First
Tuesday, 18 September 12
Test-Driven Development (TDD)
Test
Code
Refactor
Tuesday, 18 September 12
Development Style
Keep It Simple, Stupid (KISS)
You ain’t gonna need it (YAGNI)
Fake it till you make it
Tuesday, 18 September 12
Unit Test
Tuesday, 18 September 12
QUnit
QUnit is a powerful, easy-to-use JavaScript unit test suite. It's used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself!
http://qunitjs.com
Tuesday, 18 September 12
QUnit: Assert
ok(truthy [, message])
equal(actual, expected [, message])
deepEqual(actual, expected [, message])
Tuesday, 18 September 12
ExampleValidate Telephone Number
Tuesday, 18 September 12
QUnit : HTML test suite
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="stylesheet" href="/resources/qunit.css"></head><body> <div id="qunit"></div> <script src="/resources/qunit.js"></script> <script src="/resources/tests.js"></script></body></html>
Tuesday, 18 September 12
QUnit: Add a test
// tests.js
// Testmodule("isPhoneNumber");
test("Wrong number", function () { equal(isPhoneNumber("abcdefg"), false, "All alphabet");});
Tuesday, 18 September 12
QUnit: Run all test and see if the new one fails
Tuesday, 18 September 12
QUnit: Write some code
// Code Under Test isPhoneNumber = function(a) { return false;}
// Testmodule("isPhoneNumber");
test("Wrong number", function () { equal(isPhoneNumber("abcdefg"), false, "All alphabet");});
Tuesday, 18 September 12
QUnit: Run automated tests and see them succeed
Tuesday, 18 September 12
QUnit: Refactor code
// Code Under Test isPhoneNumber = function(input) { return false;}
// Testmodule("isPhoneNumber");
test("Wrong number", function () { equal(isPhoneNumber("abcdefg"), false, "All alphabet");});
Tuesday, 18 September 12
QUnit: Re-running test cases
Tuesday, 18 September 12
QUnit: Repeat// Code Under Test isPhoneNumber = function(input) { reg = /^\d+$/; if (reg.test(input)) { return true; } return false;}
// Testmodule("isPhoneNumber");
test("Wrong number", function () { equal(isPhoneNumber("abcdefg"), false, "All alphabet");
equal(isPhoneNumber("021234567"), true, "input = 021234567");equal(isPhoneNumber("0819876543"), true, "input = 021234567");
});
Tuesday, 18 September 12
Related Topics
JsUnit
JSMock, JSmockito
Selenium
JSpec, Jasmine, JSSpec
...
Tuesday, 18 September 12