Transcript
Page 1: JavaScript Test-Driven Development (TDD) with QUnit

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

Agenda

Concept

QUnit

Example

Discussion

Tuesday, 18 September 12

Page 3: JavaScript Test-Driven Development (TDD) with QUnit

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

Test-Driven Development (TDD)

Test

Code

Refactor

Tuesday, 18 September 12

Page 5: JavaScript Test-Driven Development (TDD) with QUnit

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

Unit Test

Tuesday, 18 September 12

Page 7: JavaScript Test-Driven Development (TDD) with QUnit

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

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

ExampleValidate Telephone Number

Tuesday, 18 September 12

Page 10: JavaScript Test-Driven Development (TDD) with QUnit

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

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

QUnit: Run all test and see if the new one fails

Tuesday, 18 September 12

Page 13: JavaScript Test-Driven Development (TDD) with QUnit

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

QUnit: Run automated tests and see them succeed

Tuesday, 18 September 12

Page 15: JavaScript Test-Driven Development (TDD) with QUnit

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

QUnit: Re-running test cases

Tuesday, 18 September 12

Page 17: JavaScript Test-Driven Development (TDD) with QUnit

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

Related Topics

JsUnit

JSMock, JSmockito

Selenium

JSpec, Jasmine, JSSpec

...

Tuesday, 18 September 12