Using QUnit with JSTestDriver

Question

I want to use JsTestDriver to drive my QUnit tests, but I'm confused about what to do with the #qunit-fixture markup.

The standard QUnit test runner is an HTML page.

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="/qunit/qunit.css" type="text/css" />
  <script type="text/javascript" src="/qunit/qunit.js"></script>
  <script type="text/javascript" src="test-script.js"></script>
</head>
<body>
 ...
 <div id="qunit-fixture">
    *** tests depend on markup that goes here ***
 </div>
</body>
</html>

JsTestDriver has a QUnitAdapter that can be used to load and run test-script.js, but I don't see any accommodation for getting the markup in #qunit-fixture.

Am I missing something? Is the adapter supposed to be able to run existing QUnit tests? Or is it just a way to use QUnit's assertion framework with JsTestDriver?

Ian Hill · Accepted Answer · 2011-04-04T01:03:14.230

JsTestDriver differs from some of the other test frameworks in that it doesn't use external HTML pages as input to provide the HTML fixtures.

It instead provides the ability to create (or append) HTML fragments as part of the test case definition using its HtmlDoc feature.

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

This makes it possible to store HTML with the test, for example:

TestCase("Test HtmlDoc Features", {  
    "test creating an isolated dom fragment": function() {
        /*:DOC foo = <div id="demo"><p>foo</p></div>*/
        assertEquals("Foo is a dom fragment with id 'demo'", this.foo.id, "demo");
    },
    "test appending HTML to the body": function() {
        /*:DOC += <div id="demo"><p>foo</p></div>*/
        assertEquals("HTML is appended to the body", document.getElementById("demo").innerHTML, "<p>foo</p>");
    }
});

There are unfortunately some limitations with their approach. For example, while inline styles can be applied to the HTML tags directly, inserting style blocks or link tags to external CSS files does not apply the CSS styles to the generated markup. This makes it difficult to include CSS in your test case, for tests where you want to test getting or setting style properties on DOM elements.

score 1 · Answer 2 · answered Feb 26 '11 at 13:37

1

JsTestDriver has a QUnit adapter. This provides a subset of the QUnit API to run tests with JsTestDriver. It doesn't actually use QUnit and therefore supports not async tests, along with other missing features. Depending on what you test, it may still be useful.

answered Feb 26 '11 at 13:37

Jörn Zaefferer

5,665
3
30
34

Thanks. I found an [alternative QUnit plugin](https://github.com/jivesoftware/QUnitTestRunnerPlugin) that uses QUnit and is supposed to support async and other missing features. But even with that plugin I don't see anything about loading the `#test-fixture` markup. – Patrick McElhaney Feb 26 '11 at 15:34

Using QUnit with JSTestDriver

2 Answers2