Testing JavaScript code without re-markup?

Question

I want to check the JavaScript code in our web application. We use jQuery library and .Net MVC library. I looked at these answers and jqUnit looked pretty good, so I tried it just to realize that I would have to pretty much recreate all the markup for every page I want to check.

Am I missing something? Are there any alternative approaches to testing JS / jQuery code? Our markup is sometimes complex and changes dramatically as a result of AJAX calls.

The best I can think of is to try to bind our application in an iframe on the test page. I have not tried it yet.

Answer 1

If your test functions are javascript / objects, can I suggest a YUI testing component.

http://developer.yahoo.com/yui/yuitest/

A very similar setup for JUnit, but only requires that you include some javascript test files. It would be pretty easy to include this in your page only in test mode.

Answer 2

You can simply create the structure you want to test in memory without adding it to the document. This will not work, all tests (for example, CSS propositions will not affect elements that are not inserted into the document, but in some cases it may be worth a try).

At first it is very fast, and secondly, you do not spoil your document with test elements that must be deleted after the tests are completed.

Here is an 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'); }); 

Answer 3

You may need two approaches, depending on the code:

• Code that can be verified by the module. There is some Javascript that is independent enough that you can use JSUnit for testing with a minimal amount of HTML markup. To some extent, this markup is your test material.

You might want to figure out how you can rebuild your code so that it can be tested in this way. Can you make JS more modular or less dependent on specific markup? (Unfortunately, sometimes you cannot.)

2. Code requiring integration testing. As you said, it’s a pain to recreate all this markup. Someone suggested selenium (which launches your page in frame). This is a good approach to test Javascript code in its real environment.

The disadvantage of these factors is that they tend to work slower and are a little harder to maintain or fragile. See the Page Object template to help you with your maintenance.

Ultimately, automating JS tests using selenium to control it.

Answer 4

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 module-level module testing module, but given that this can include many preliminary alterations, a serious compromise may be to verify that javascript really does what you need to use Selenium or similar structure.

Answer 5

Testing your application inside an iframe may work.

What I consider the best is to adhere to the Model-View-Presenter (MVP) paradigm (client-side only), and also break user interface components into digestible pieces so that you can test each component inside its own driver page. Most of the logic is inside Presenter (s), which is pure JavaScript and can therefore be tested using pure JavaScript unit tests. Individual user interface components can be tested with a framework such as Selenium, and testing them will simply ensure that they relay the correct events to Presenter. The model can also be tested as pure-JavaScript if part of the access to the backend is hatched / mocked by some Fetcher class.

Answer 6

You can use the template engine. There are many different template mechanisms for the different settings of the http server, so you will probably find one that suits your needs and that is implemented in the programming language (server side) of your choice.

Now that you have installed the template engine, you can use your original layout and add a small marker where you can insert the <script> tag when testing, and it doesn’t test anything.

The advantage of this approach: there should be no difference between production pages and test pages. You can avoid adding an iframe that you don't need for anything other than testing.

Answer 7

Windmill is an excellent python-based javascript testing framework. He is actively developing, so he is constantly improving. I would recommend taking a look at it. You can create automated tests, they have a good graphical interface that you can also use to configure tests. There are many other features there, but there is no reason to list them all here.

Answer 8

So, there are two types of tests that you seem to be asking about. One of them is unittesting the code you write, which consumes jquery. The answer to this is much simpler than everyone usually thinks. Just mock jquery in your unit tests. It is very simple and works almost the same as you would mock any other programming language. In addition, it is easy to do without a javascript framework. I really run such tests in an automatic test suite using Test.TAP and a rhino for my projects. No browser required.

Another type of test is an integration or regression test. A tool such as selenium appears here. These tests take place in your real application and are designed to ensure that all parts work together as you expect. Browser, jQuery, your javascript and web server. Keeping these two types of tests in your mind is the key to creating a test suite for javascript code. Ideally, you run these tests in multiple browsers (perhaps even in multiple browser configurations).

Answer 9

The visibone browser link offers what they call "confidence." This basically gives a suggestion on how to implement unit testing for JavaScript. It is really very simple.

See the lower right side of the following image link:

http://www.visibone.com/products/ebk8-9_850.jpg

To summarize here:

Create the assert () function:

 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 perhaps with a better comparison ===:

 assert((parseInt("1") === 1), "Check string '1' is equal to integer 1"); 

There is more in the linked picture, and your assert functions may become more sophisticated.

I did a Google search on the “JavaScript assert” and got quite a few links, so it might be worth checking out.