CODEWITHSUNDEEP
javascriptunit-testingqunitjs-test-driver
Patrick McElhaney
Patrick McElhaney

Reputation: 59271

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?

Upvotes: 0

Views: 3400

Answers (2)

Ian Hill
Ian Hill

Reputation: 399

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.

Upvotes: 5

J&#246;rn Zaefferer
J&#246;rn Zaefferer

Reputation: 5705

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.

Upvotes: 1

Related Questions