Javascript TDD

Sunday, March 2, 2014

File new project, empty asp.net 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