Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript Test-Driven Development (TDD) with QUnit

4,232 views

Published on

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

Published in: Technology, Business
  • Login to see the comments

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

×