General unit testing concepts/practices in JavaScript against different browsers?

Question

I’ve been writing unit tests in strongly typed languages and I have a fair good understanding about it. When writing unit tests in JavaScript to verify if certain functions are working properly in certain browsers I am back to the manual testing. I have no understanding of how it works. Because JavaScript is meant to close the gap between data and presentation and make it more interactive. And everything is happening within browsers and it's more to do with UI. So I am assuming that if I were going to write a unit test I would write something like (in pseudo code):

run function A
check DOM if certain element has been created
  if not then fail
check if element is visible
  if not then fail
check for the content of that element
  if null then fail
etc…

Writing these tests seem like “hard coding” to me and what’s missing is that the tests wouldn’t be able to tell if it’s been rendered properly, it's only doing the pure functional tests. So I am wondering if someone can explain to me what are the proper test procedures in JavaScript, how to do build automations and some general concepts in doing it. I was just looking at John Resig's project testswarm but yet to figure out what it’s about. I am also reading about QUnit at the moment.

I am looking for some introductory materials on the concepts/practices that can me started. I am not looking for specific libraries or tools unless they have good introduction on the concepts.

Thanks.

Answer 1

This is definitely a confusing and dynamic area of web development right now. In my mind, there are a few important feature distinctions of JS testing:

• pure unit tests, that test plain Javascript code. You can assert that a+b=3, or whatever. We've had only a few problem that fit into this category. When discussion options, there are lots of alternatives to the JSUnit (a JUnit port). They break down into TDD vs. BDD and naming choices within those categories.
• Javascript + DOM tests. So much of the code written these days is about manipulating the DOM. eg. assertEqual('<a><div /></a>', $('div').wrap('a')); For DOM-based JS testing, you either need to move to in-browser testing, or use a library like env.js.
• There are also mocking & stubbing (smoke), async and other helpers

There are two places tests can run:

• out-of-browser testing (generally faster to run, so they can be used in a TDD enviroment)
• in-browser testing (slower, more complicated, but provide more accurate cross-browser test results)

Selenium runs in-browser, so it is great for integration tests. If you have nothing else working, this is a good starting point. It's been around for a few years and supports most popular browsers and languages. Watching a screencast like this might be helpful. And this documentation might give you a flavor of what the tests would look like. There are also quite a few other tutorials and screencasts around, but many of them get bogged down in the technical doodoo you don't care about, so you have to be selective.

Finally, here's an example from blue ridge, which is a collection of tools pulled together for out-of-browser testing (and manual in-browser test) for Rails:

Screw.Unit(function() {
    describe("Your application javascript", function() {
        it("accesses the DOM from fixtures/application.html", function() {
            expect($$('.select_me').length).to(equal, 2);
        });
    });
});

This is a single test using an rspec-like syntax test test that a couple elements are there. Hope this helps!

Answer 2

Check jsTestDriver. I think this is one of the best:

The goal of JsTestDriver is to build a JavaScript test runner which:

easily integrates with continuous builds systems and allows running tests on multiple browsers quickly to ease TDD style development.

http://code.google.com/p/js-test-driver/