Javascript TDD

Sunday, March 2, 2014

File new project, empty web application

Select empty template

Add solution to source control

Select location to store project

Get qunit source code here

Create this folder structure and add the qunit files

Add these two empty javascript files

Add an html page and reference all files

Write a first test in tests file

Run the test runner in the browser and view the test passed

Grouping tests in modules for better organization, in server side code modules are fixtures

View the tests are prefixed with their module name

Bring in jquery via nuget

Add a reference to jquery in the test runner

Add this div in the body

Write this dom test

View the test runner in the browser, test has passed, hip, hip array :-)

Add this function to the systemundertest file, class added for identifier, makes the test less brittle

In the tests file, assert that the element exists identified by class name

Finally add the markup in qunit-fixture div, takes care of setup and teardown, so dom is not polluted

Run the test runner in the browser, test passed

Write a new test, insert the assert inside the timeout and give it a timeout of 100 ms

The test fails, it completes before the assert has the opportunity to run

Add qunits stop and start functions, to have the code inside the function run before the test

Test runner in the browser passes

Duplicate the test and add a second settimeout function, note the call to qunits stop twice to inform qunit that there are two function invocations

View the test runner results, qunit waits 2 seconds to execute the second test

Add an async test, does not require call to stop function

View all 4 tests pass in the browser

Add this function to fade out a div for a given duration

Add this new test, assert that div is invisible after 600 ms

View in browser, the test passes

Add a callback function that will be called when the fadeout is complete to the system under test

Pass in the function as the second parameter, the callback

Refresh the browser and view the test passes

Write this test, to assert the value of a global variable

Run the test in the browser and see it passes

Check the check for globals checkbox and view 1 assertion fails with message introduced a global variable

To fix it put var in front of the variable name

Rerun the test and view that all pass

Default Success Warning Important Info Inverse
B S W I ? O