Search code examples
javascriptunit-testingqunitjs-test-driver

Using QUnit with JSTestDriver

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?

Solution

  • 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.