Test Driven Development

Cycle

  • Add a test
  • Run all tests and see if the new one fails
  • Write some code
  • Run tests
  • Refactor code

Repeat

Why

  • Immediate feedback (bugs are found earlier)
  • Make sure you don't break previous code
  • Help refactor code (don't have to worry too much) ex. better policy

Why Not

(from Stackoverflow)

  • Big time investment
  • Additional Complexity
  • Design isn't clear at first

Practice

Create a folder and add following files:

  • index.html

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <title>TDD Practice</title>
          <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.20.0.css">
      </head>
      <body>
          <div id="qunit"></div>
          <div id="qunit-fixture"></div>
          <script src="http://code.jquery.com/qunit/qunit-1.20.0.js"></script>
          <script src="main.js"></script>
          <script src="tests.js"></script>
      </body>
      </html>
    
  • tests.js

      QUnit.test("hello test", function( assert ) {
          assert.ok( 1 == "1", "Passed!" );
      });
    
      QUnit.test('max', function (assert) {
    
      });
    
      QUnit.test('isOdd', function (assert) {
    
      });
    

Then, let's start to edit main.js! Our goal is to write unit tests first and implement main.js to pass all the tests.

Reference