javascript test-driven development (tdd) with qunit
DESCRIPTION
Introduction to Test-Driven Development (TDD) in JavaScript with QUnitTRANSCRIPT
![Page 1: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/1.jpg)
JavaScriptTest-Driven Development
with QUnit @tasanakorn
http://www.tasanakorn.com
Barcamp Bangkhen, 2012-09-16Tuesday, 18 September 12
![Page 2: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/2.jpg)
Agenda
Concept
QUnit
Example
Discussion
Tuesday, 18 September 12
![Page 3: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/3.jpg)
Software Development Process
Plain Old Unit Testing
Test-Last
Test-Driven Development (TDD)
Test-First
Tuesday, 18 September 12
![Page 4: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/4.jpg)
Test-Driven Development (TDD)
Test
Code
Refactor
Tuesday, 18 September 12
![Page 5: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/5.jpg)
Development Style
Keep It Simple, Stupid (KISS)
You ain’t gonna need it (YAGNI)
Fake it till you make it
Tuesday, 18 September 12
![Page 6: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/6.jpg)
Unit Test
Tuesday, 18 September 12
![Page 7: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/7.jpg)
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
![Page 8: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/8.jpg)
QUnit: Assert
ok(truthy [, message])
equal(actual, expected [, message])
deepEqual(actual, expected [, message])
Tuesday, 18 September 12
![Page 9: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/9.jpg)
ExampleValidate Telephone Number
Tuesday, 18 September 12
![Page 10: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/10.jpg)
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
![Page 11: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/11.jpg)
QUnit: Add a test
// tests.js
// Testmodule("isPhoneNumber");
test("Wrong number", function () { equal(isPhoneNumber("abcdefg"), false, "All alphabet");});
Tuesday, 18 September 12
![Page 12: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/12.jpg)
QUnit: Run all test and see if the new one fails
Tuesday, 18 September 12
![Page 13: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/13.jpg)
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
![Page 14: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/14.jpg)
QUnit: Run automated tests and see them succeed
Tuesday, 18 September 12
![Page 15: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/15.jpg)
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
![Page 16: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/16.jpg)
QUnit: Re-running test cases
Tuesday, 18 September 12
![Page 17: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/17.jpg)
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
![Page 18: JavaScript Test-Driven Development (TDD) with QUnit](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c7ff884a7959cc278b4630/html5/thumbnails/18.jpg)
Related Topics
JsUnit
JSMock, JSmockito
Selenium
JSpec, Jasmine, JSSpec
...
Tuesday, 18 September 12