Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

JavaScript Test-Driven Development (TDD) with QUnit

4.118 visualizaciones

Publicado el

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

Publicado en: Tecnología, Empresariales
  • Sé el primero en comentar

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

×