{"id":2055,"date":"2011-09-19T09:04:08","date_gmt":"2011-09-19T13:04:08","guid":{"rendered":"http:\/\/www.ericfeminella.com\/blog\/?p=2055"},"modified":"2020-03-12T23:00:42","modified_gmt":"2020-03-13T03:00:42","slug":"test-driven-javascript-with-qunit","status":"publish","type":"post","link":"https:\/\/www.ericfeminella.com\/blog\/2011\/09\/19\/test-driven-javascript-with-qunit\/","title":{"rendered":"Test Driven Javascript with QUnit"},"content":{"rendered":"

For the past year I have been using jQuery Mobile<\/a> for developing web based mobile applications leveraging HTML5<\/a>, CSS3<\/a> and JavaScript<\/a>. Like all UI implementations, meaningful test coverage is essential to ensuring requirements have been met and refactoring can be achieved with confidence. Building applications for the Mobile Web is no different in this respect. And so, a high quality Unit Testing framework<\/a> is as essential to the success of Mobile Web Applications as it is to their Desktop counterparts. <\/p>\n

Why QUnit?<\/h2>\n

While there are quite a few good JavaScript Unit Testing Frameworks<\/a> available, Jasmine<\/a> in particular, I have found QUnit<\/a> to best suit my particular needs for implementing Test Driven Development<\/a> in JavaScript based on it’s clean design and practical implementation.<\/p>\n

A Simple, Powerful API<\/h3>\n

The power of QUnit lies in it’s simple and a rather unique approach to Test Driven Development in JavaScript. The QUnit API<\/a> introduces a few slightly different test implementation concepts when compared to the more traditional xUnit<\/a> style of TDD. In doing so, QUnit succeeds in simplifying some of the tedium of writing tests by leveraging the language features of JavaScript as opposed to strictly adhering to the more traditional xUnit conventions, the design of which is based on an fundamentally different language idiom – that is, Java.<\/p>\n

For example, consider the follow which tests for a custom data namespace attribute in jQuery Mobile:<\/p>\n

\r\ntest(\"Test expected namespace override\", function() {\r\n    var expected = \"someNamespace-\";\r\n    var actual   = $.mobile.ns;\r\n    equal(actual, expected, \"expecting namespace to have been set.\");\r\n});<\/pre>\n
Figure 1 (run<\/a>) (source<\/a>)<\/span><\/p>\n
The above test may appear quite straightforward, yet it serves as a good example by illustrating how each test in QUnit is implemented by the QUnit test fixture. The first argument is simply a String which describes the test case. This is quite convenient in that the intent of a particular test case can be expressed more naturally in textual form as opposed to using a long, descriptive test method name. The Second argument contains the actual test implementation itself, which is defined as an anonymous function and passed as an argument to QUnit.test<\/code>.<\/p>\n
As you may have also noticed from the above example, there are some, perhaps subtle, differences between the QUnit style of testing and the traditional xUnit style. Specifically, whereas in xUnit assertions<\/a> expected values are specified first and preceded by actuals, in QUnit actuals are specified first followed by expected values. This may feel a bit odd at first however, after a few tests it’s easy to get used to. Additionally, where an assertion message is specified before any arguments in xUnit, in QUnit assertion messages are specified after all arguments. With regard to test descriptions, this is a difference I prefer as, a test message is always optional so passing this value last make sense. While somewhat subtle differences, these are worth noting.<\/p>\n
A Complete Example<\/h2>\n
As code can typically convey much more information than any lengthy article could ever hope to achieve, I have provided a simple, yet complete, example which demonstrates a basic qUnit test implementation. (run<\/a>) (source<\/a>)<\/span>.<\/p>\n","protected":false},"excerpt":{"rendered":"
For the past year I have been using jQuery Mobile for developing web based mobile applications leveraging HTML5, CSS3 and JavaScript. Like all UI implementations, meaningful test coverage is essential to ensuring requirements have been met and refactoring can be achieved with confidence. Building applications for the Mobile Web is no different in this respect. And so, a high quality… Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[62,59,78,45,35,40,112],"tags":[66,65,68,67,239,236,118,238],"class_list":["post-2055","post","type-post","status-publish","format-standard","hentry","category-css3","category-html5","category-javascript-2","category-refactoring","category-software-engineering","category-test-driven-development","category-user-experience-design","tag-css3-2","tag-html5-2","tag-javascript","tag-jquery-2","tag-jquery-mobile","tag-mobile","tag-qunit","tag-tablets"],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/2055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/comments?post=2055"}],"version-history":[{"count":0,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/2055\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/media?parent=2055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/categories?post=2055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/tags?post=2055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}