I have been wanting to write this post since a long time. Finally, here it comes.
This is something that everyone working in a community should know. Testing! I didn’t consider it important enough until Michelle explained its importance to me during the Image Editor project for Google Summer of Code. Now that I started using it, its become so important that its hard to imagine a project with a team without test cases. And the most important thing is writing these tests is amazingly simple and it saves you a lot of time in the future.
I will put up the importance very briefly here. When we develop anything in a team with more than one developer working on the same project, there may be some changes that we make that might break something that others had previously written because they had assumed something which wasn’t very obvious to us. Having tests ready for the project comes to our rescue here. If the tests pass, we can lie in peace knowing that the changes that we have made don’t break anything.
As I mentioned earlier, writing test-cases is amazingly simple using all those frameworks out there. I will be describing the process of writing tests for jQuery using jqUnit. Before, we start writing the test, this is how we can initialize a new test case:
var myTests = new jqUnit.TestCase("My Application Tests");We can now start writing our tests:
// 1
myTests.test("Test Scenario 1", function () {
// Write some tests here
});Now lets start writing some simple tests. Don’t worry. Writing unit tests requires us to just call a few functions that we wrote and check it against a return value that we expect. This is something that you always think of when writing the function, so writing the test is just a little extra effort which certainly pays off in the future. Finally, here’s how to write the tests:
jqUnit.isVisible("My component is visible", "#my-component-id");
jqUnit.notVisible("My hidden component is not visible", "#my-hidden-component-id");
jqUnit.assertNotNull("My function 1 doesn't return null", myApplicationInstance.myFunction1());
jqUnit.assertNotUndefined("My function 1 doesn't return undefined value", myApplicationInstance.myFunction1());
jqUnit.assertFalse("My function 2 returns false", myApplicationInstance.myFunction2());
jqUnit.assertTrue("My variable 1 is set", myApplicationInstance.myVar1);
jqUnit.assertEquals("My function 3 returns correct value", "expectedValue", myApplicationInstance.myFunction3());The tests are pretty obvious. This takes care of the actual tests. Now we need something where we can see the results of the tests. Lets make an html file where we can include the js file that we just created.
<!-- This is the QUnit test css file -->
<link rel="stylesheet" media="screen" href="lib/qunit/css/qunit.css" />
<!-- These are the jqUnit test js files -->
<script type="text/javascript" src="lib/qunit/js/qunit.js"></script>
<script type="text/javascript" src="lib/test-core/jqUnit/js/jqUnit.js"></script>
<!-- The test file that you just wrote -->
<script type="text/javascript" src="../js/myTests.js"></script>
<!-- Other imports, like jQuery and your application imports -->And finally the markup to render the tests:
<body id="body">
<h1 id="qunit-header">My Application Basic Tests</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
</body>If you want to have a look at the complete test files for a live project, see my tests for the Fluid Infusion Image Editor here.