When developing something, it is good practice to check after each change if your code still working correctly, doing the things you want it to do.
As the code becomes more complicate, the quantity of cases to check became larger, and more difficult to complete all of them without forget something.
That's where unit tests came to help us. Jquery-ui works with Qunit unit tests, so we will use this framework too.
When you write your unit test you must think about which behavior you want to be tested.
Lets list some behaviors we want our loading indicator widget to behave:
1. after initialization, loading widget should add a div styled with 'loading' class.
2. The loading div should been removed after widget destroyed.
Writing tests
When you write a test you need to specify 3 things:
1. to set up the initial conditions the test will begin with
2. to Specify what result you expect
3. to check if the result is as expected
Lets test the first behavior
module( "loadingindicator: core" );
test( "the loading element appears", function() {
expect( 1 );
var element = $( "#main" ).loadingindicator();
ok( $( "#main .loading" ).length, 1 );
});
Explanation: in this test we applying the plugin on the "main" div element (located on the testing environment) and after this we checking if some element decorated with class element appears inside the "main" after plugin code activated.After running the tests in Qunit testing environment, if everything is working as expected (acording to the plan) - we get the following screen with blue lines:
