Tiny Test JS - An Exploration Of Unit Testing In JavaScript
After reading the book, Streamlined Object Modeling, I created a GitHub project as a place to practice the concepts that were presented in the book. I chose to execute these object-modeling explorations in JavaScript since it's a very light-weight and universally understood language (and I hoped that it would precipitate more feedback). As I was half-way through my first exploration, however, it occurred to me that this would be the perfect opportunity to learn more about unit testing in JavaScript. So, I stopped, took a little detour, and ported my Tiny Test ColdFusion unit testing framework over to JavaScript. The result is Tiny Test JS - a very lightweight, visually pleasing unit testing framework for my JavaScript modules.
| |
|
|
||
| |
|
|||
| |
|
|
View the Tiny Test JS project on my GitHub account.
The Tiny Test JS project is designed to be dropped, "as is," (more or less) into your tests directory. It has its own Application.js file in which you must list your test case modules and define your RequireJS path mappings. The test runner is optimized for both clickability and window-focus-based running. Using RequireJS, I can reload your test cases on the fly and re-run them when you give focus to the Tiny Test JS window. This makes ALT-TAB based navigation incredibly efficient.
Out of the box, I only wanted to provide the most bare bones assertion methods:
- this.assert( truthy )
- this.assertTrue( truthy )
- this.assertFalse( falsey )
- this.assertEquals( simpleValue, simpleValue )
- this.assertNotEquals( simpleValue, simpleValue )
Just as with Tiny Test, however, you can easily add your own custom assertion methods by using the "TestCase.js" module that ships in the "specs" directory. All of your test cases implicitly extend this module, making all of its methods available on your test case's "this" scope.
To run your test cases using your mouse, you simply click anywhere within the "status" portion of the page (ie. the huge colored area at the top). If you want to be really fast, however, you can enable the auto-run feature (ie. the checkbox in the bottom-left corner of the page). When this feature is enabled, the selected tests will be re-run automatically whenever the test runner window receives focus. This means that when you update your code, you simply need to ALT-TAB back to your test runner and your tests will be re-run instantaneously - no clicking required!
Tiny Test JS is very minimal and was primarily a means though which I could become more comfortable with unit testing and Object Oriented Programming (via the Streamlined Object Modeling project). Is it definitely not intended to compete with robust unit testing frameworks like Jasmine or QUnit. I just felt a need to create something that was perfectly aligned with my own programming workflow.
Reader Comments
Great job!
I'd like to see maybe a post about how you approach writing client side tests and how you approach writing modules for testability.
Maybe a lessons learned type post perhaps. I used to do 'x' but 'x' sucks because .... etc
Anyway... thanks again ;)
@Mike,
Thanks my man! I'm super new to the concept of unit testing, so I'm pretty far away from being able to really talk about the pros/cons of various methods. Even TinyTestJS is fairly limited in that it can only test "synchronous" code at this time. So, no async callbacks or AJAX requests.
Furthermore, I am not sure how you would test something like an AngularJS module which would need to have the AngularJS module defined _before_ the unit tests could run.
You'd think that since I do a lot of AngularJS I would actually know things like that ... unfortunately no. Hopefully, I will in the near future!
My next step is going to be to integrate TinyTestJS with my Streamlined Object Modeling project, which will help weed out some bugs, for sure.