Downloaded 83 times
![QUnit: Assert ok(truthy [, message]) equal(actual, expected [, message]) deepEqual(actual, expected [, message]) Tuesday, 18 September 12](https://image.slidesharecdn.com/tdd-qunit-120918003000-phpapp02/75/JavaScript-Test-Driven-Development-TDD-with-QUnit-8-2048.jpg)
Uploaded byTasanakorn Phaipool
JavaScript Test-Driven Development (TDD) with QUnit
This document summarizes a presentation on test-driven development with QUnit for JavaScript. It includes an agenda, explanations of TDD and the QUnit testing framework, and an example of writing tests and code for a telephone number validation function using QUnit. The document demonstrates how to set up a basic test suite with QUnit, write tests, write code to pass the tests, and refactor the code while ensuring tests continue to pass.
JavaScript Test-Driven Development (TDD) with QUnit
- 1. JavaScript Test-Driven Development with QUnit @tasanakorn http://www.tasanakorn.com Barcamp Bangkhen, 2012-09-16 Tuesday, 18 September 12
- 2. Agenda Concept QUnit Example Discussion Tuesday, 18 September 12
- 3. Software Development Process Plain Old Unit Testing Test-Last Test-Driven Development (TDD) Test-First Tuesday, 18 September 12
- 4. Test-Driven Development (TDD) Test Code Refactor Tuesday, 18 September 12
- 5. Development Style Keep It Simple, Stupid (KISS) You ain’t gonna need it (YAGNI) Fake it till you make it Tuesday, 18 September 12
- 6. Unit Test Tuesday, 18September 12
- 7. 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
- 8. QUnit: Assert ok(truthy [, message]) equal(actual, expected [, message]) deepEqual(actual, expected [, message]) Tuesday, 18 September 12
- 9. Example Validate Telephone Number Tuesday, 18 September 12
- 10. QUnit : HTMLtest 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. QUnit: Add atest // tests.js // Test module("isPhoneNumber"); test("Wrong number", function () { equal(isPhoneNumber("abcdefg"), false, "All alphabet"); }); Tuesday, 18 September 12
- 12. QUnit: Run alltest and see if the new one fails Tuesday, 18 September 12
- 13. QUnit: Write somecode // 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. QUnit: Run automatedtests and see them succeed Tuesday, 18 September 12
- 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. QUnit: Re-running test cases Tuesday, 18 September 12
- 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. Related Topics JsUnit JSMock, JSmockito Selenium JSpec, Jasmine, JSSpec ... Tuesday, 18 September 12