I want to test the JavaScript code in our web app. We are using the jQuery library and .Net MVC. I've looked at these answers, and jqUnit looked nice, so I tried it, just to realize that I'll have to pretty much recreate all markup for every page I want to test.
Am I missing something? Are there any alternative approaches for testing JS/jQuery code? Our markup is at times plex, and changes drastically as a result of AJAX calls.
The best I can think of is trying to stick our app in an iframe on a test page. Haven't tried it yet.
I want to test the JavaScript code in our web app. We are using the jQuery library and .Net MVC. I've looked at these answers, and jqUnit looked nice, so I tried it, just to realize that I'll have to pretty much recreate all markup for every page I want to test.
Am I missing something? Are there any alternative approaches for testing JS/jQuery code? Our markup is at times plex, and changes drastically as a result of AJAX calls.
The best I can think of is trying to stick our app in an iframe on a test page. Haven't tried it yet.
Share Improve this question edited May 23, 2017 at 10:27 CommunityBot 11 silver badge asked Aug 13, 2009 at 14:48 montrealistmontrealist 5,69312 gold badges50 silver badges72 bronze badges9 Answers
Reset to default 4 +100If your testing javascript functions/objects, might i suggest YUI's testing ponent.
http://developer.yahoo./yui/yuitest/
Very similar setup to JUnit but only requires that you include a few test javascript files. It would be pretty easy to include this in your page while in a Test mode only.
You could just create the structure you want to test in the memory without appending it to the document. This won't work will all the tests (as for example CSS propeties won't affect items not inserted to the document but in some cases this may be worth a try).
First it's very fast, and second you don't spoil your document with test items you need to remove after you plete the tests.
Here's that idea in a very simple example.
test('My tests', function () {
var testSubj = $('<div>This <b>is</b> my <span>test subject</span></div>');
ok(testSubj.children('span') == 'test subject', 'Span is correct');
});
You may need two approaches, depending on the code:
- Code that can be unit tested. There is some Javascript that is independent enough that you can use JSUnit to test it with a minimal amount of HTML markup. In a way this markup is your test fixture data.
You may want to figure out how you can restructure your code such that it can be tested in this way. Can you make the JS more modular, or less dependent on a certain markup? (Sadly, sometimes you can't.)
- Code that requires integration testing. Like you said, it's a pain to recreate all that markup. Someone else suggested selenium (which runs your page in a frame). That's a good approach to test Javascript code in its real environment.
The disadvantage of these is that they tend to be slower to run and a little harder to maintain or brittle. Look up the "Page Object" pattern to help you out on the maintainability front.
We end up automating the JS unit tests using selenium to drive it.
It might be worth considering Selenium and running some automated tests at the browser level.
Of course, in an ideal world you would work with a unit-testing framework at the code-level, but given that may involve a lot of up-front rework, a solid promise might be to test that the javascript actually does what you need it to using Selenium or a similar framework.
Testing your app inside an iframe could work.
What I've found to be better is to stick with the Model-View-Presenter (MVP) paradigm (on the client side alone) along with breaking the UI ponents into digestible chunks to be able to test each ponent inside its own "driver" page. Most of the logic resides inside the Presenter(s), which is pure JavaScript and therefore can be tested with pure JavaScript unit tests. Individual UI ponents can be tested with a framework like Selenium and their testing would simply be ensuring that they throw the right events to the Presenter. The Model can also be made testable as pure-JavaScript if the backend access part is stubbed/mocked out into some sort of Fetcher class.
You can use a template engine. Many different template engines exist for many different http server setups, so you'll probably find one that suits your needs, and that is implemented in the (server side) programming language of your choice.
Now once you installed your template engine, you can use your original layout and add a little marker, where you can insert a <script> tag when testing, and nothing when not testing.
The advantage of this approach: there needs to be absolutely no difference between the production pages and the test pages. You can avoid adding an iframe you don't need for anything else than testing.
Windmill is an excellent python based javascript test framework. It's under active development, so it's constantly improving. I would remend taking a look at it. You can create automated tests it has a nice GUI you also can use to setup tests. There's a bunch of other features, but no reason to list them all here.
So there are two kinds of tests you seem to be asking about. One is unittesting the code you write that consumes jquery. The answer to this is much simpler than everyone usually thinks. Just mock jquery in your unit tests. It's really easy and works pretty much the same way you would do mocking in any other programming language. Except it's easy to do without even a framework in javascript. I actually run these kinds of tests in an automated test suite using Test.TAP and rhino for my projects. No browser required.
The other kind of test is an integration or regression test. This is where a tool like selenium es in. These tests happen in your actual application and are designed to make sure that all the pieces work together the way your expect. Browser, JQuery, your javascript, and Web-Server. Keeping these two kinds of tests seperate in your mind is key to putting together a test suite for javascript code. Ideally you would run these tests in multiple browsers (possibly even multiple configurations of the browsers).
The visibone browser reference suggests something they call 'assertiveness'. It basically gives a suggestion on how to implement unit testing for JavaScript. Its really quite simple.
See the bottom right of the following picture link:
http://www.visibone./products/ebk8-9_850.jpg
To summarise here:
Create a function assert():
function assert(fact, details){
if (!fact) alert("Assert failure: " + details);
}
And you could call it something like this:
assert((parseInt("1") == 1), "Check string '1' is equal to integer 1");
Or possibly with a better === parison:
assert((parseInt("1") === 1), "Check string '1' is equal to integer 1");
There is more on the linked picture, and your assert functions could bee more sophisticaed.
I did a google search on "JavaScript assert", and got quite a few links back, so it might be worth checking out yourself.