I need a number of different full-page DOM samples for my qUnit test suite

Question

I have a small amount of Javascript to test, but it operates on the entire page, for example, finding elements by numbered ids like "#t34". I need to create a handful of different pages to test the different possible configurations. I see that I can use qunit-fixture to create a DOM tree for the tests to access, but each page configuration needs to be a complete page, since it will find elements by id.

The various qUnit tutorials out there seem focused on the simple examples of pure Javascript functions performing simple arithmetic. I need help understanding how to build a real test suite using a number of different files.

Updated with more details: I'm the owner of coverage.py, the Python code coverage tool. It generates HTML reports. These reports have jQuery on them to add a little bit of interactivity. I'm adding quite a lot more, and would like to automate the testing. The HTML looks like this. There is no server involved, these are just files written to a local directory, so there is no opportunity for ajax. I would like to run my tests against a number of different page configurations, mostly to do with edge cases of red- and green-colored chunks of code.

Because my code accesses source lines by number as $("#t123") (for example), I can't have more than one "page" of HTML in the same DOM, since the ids will conflict. How can I run qUnit against different pages of HTML?

Answer 1

For testing a full page and DOM, I would use something like Selenium http://seleniumhq.org/ Since you have some familiarity with JS testing, you might also consider http://www.phantomjs.org/ and http://zombie.labnotes.org/

With these you basically use a node.js server to load the page, from which you have complete access to the DOM at the node.js commandline or through scripting. Think of it like firebug scripting on the commandline (alternatively, a firebug plugin can do the same thing). You can do asserts to see that your id'ed elements exist, and toggle click elements and such.

(btw I was at bocoup, too :D)

Answer 2

#qunit-fixture is automatically reset by QUnit, which means you can fill it with markup used by each test, or leave it empty and have each test fill it to leverage the auto rest. Or just use markup that you reset individually after each test.

You can refactor per-test setup and teardown using the module method: http://docs.jquery.com/QUnit/module

In this case it sounds like a good option would be using (synchronous) ajax requests for each test, loading the page markup you need into the #qunit-fixture element. That way you only need custom setup, as QUnit will reset afterwards.

Even if you're dealing just with local files from the filesystem, as long as they are in the same directory as your testsuite file, you should be able to load them via ajax.

If not, its easy enough to get a local server running, e.g. via "open http://localhost:8080/ && python -m SimpleHTTPServer 8080" in that directory.