JavaScript Test-Driven Development (TDD) with QUnit

3,958 views

Published on

Introduction to Test-Driven Development (TDD) in JavaScript with QUnit

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,958
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
80
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

JavaScript Test-Driven Development (TDD) with QUnit

  1. 1. JavaScript Test-Driven Development with QUnit @tasanakorn http://www.tasanakorn.com Barcamp Bangkhen, 2012-09-16Tuesday, 18 September 12
  2. 2. Agenda Concept QUnit Example DiscussionTuesday, 18 September 12
  3. 3. Software Development Process Plain Old Unit Testing Test-Last Test-Driven Development (TDD) Test-FirstTuesday, 18 September 12
  4. 4. Test-Driven Development (TDD) Test Code RefactorTuesday, 18 September 12
  5. 5. Development Style Keep It Simple, Stupid (KISS) You ain’t gonna need it (YAGNI) Fake it till you make itTuesday, 18 September 12
  6. 6. Unit TestTuesday, 18 September 12
  7. 7. QUnit QUnit is a powerful, easy-to-use JavaScript unit test suite. Its used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself! http://qunitjs.comTuesday, 18 September 12
  8. 8. QUnit: Assert ok(truthy [, message]) equal(actual, expected [, message]) deepEqual(actual, expected [, message])Tuesday, 18 September 12
  9. 9. Example Validate Telephone NumberTuesday, 18 September 12
  10. 10. 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
  11. 11. QUnit: Add a test // tests.js // Test module("isPhoneNumber"); test("Wrong number", function () { equal(isPhoneNumber("abcdefg"), false, "All alphabet"); });Tuesday, 18 September 12
  12. 12. QUnit: Run all test and see if the new one failsTuesday, 18 September 12
  13. 13. QUnit: Write some code // Code Under Test isPhoneNumber = function(a) { return false; } // Test module("isPhoneNumber"); test("Wrong number", function () { equal(isPhoneNumber("abcdefg"), false, "All alphabet"); });Tuesday, 18 September 12
  14. 14. QUnit: Run automated tests and see them succeedTuesday, 18 September 12
  15. 15. QUnit: Refactor code // Code Under Test isPhoneNumber = function(input) { return false; } // Test module("isPhoneNumber"); test("Wrong number", function () { equal(isPhoneNumber("abcdefg"), false, "All alphabet"); });Tuesday, 18 September 12
  16. 16. QUnit: Re-running test casesTuesday, 18 September 12
  17. 17. QUnit: Repeat // Code Under Test isPhoneNumber = function(input) { reg = /^d+$/; if (reg.test(input)) { return true; } return false; } // Test module("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
  18. 18. Related Topics JsUnit JSMock, JSmockito Selenium JSpec, Jasmine, JSSpec ...Tuesday, 18 September 12

×