Greetings all,
Now that we’ve been though the details of how to set up a simple assertion test with QUnit and PhantomJs in a Maven Continuous Integration build in part 1, let’s take a closer look at all the assertions that are available in a test.
The techniques here are dependent on some libraries, but this should already be included if you are using the phantomjs-qunit-runner maven plugin. Credit to this article to for the DOM setup and teardown helper functions.
Alright, onward to the code examples!
Suppose we had a javascript function that does a simple DOM manipulation to add some text to a given element as such.
JSDEMO.quickstart = function () {
/**
* Public interface
* @scope JSDEMO.quickstart
*/
return {
/**
* Appends some text to an input element ...
* @param addToElement Element to append some text to
*/
appendChildNodeToDom : function(addToElement) {
var newnode = document.createTextNode('Here is some content.');
document.getElementById(addToElement).appendChild(newnode);
}
};
} ();
Here is the code to test it! Pretty simple really.. comments inline
test("Can append child to element in DOM", function() {
// expected results for the test to compare against
var expectedTestDivHtml = "Here is some content.";
// Helper function to set up DOM element to test with
DOMSetup('<div id="testDiv"/>');
// Call our function to be tested with the DOM element created by the helper above
JSDEMO.quickstart.appendChildNodeToDom('testDiv');
// Test! See if results is as expected
equal(expectedTestDivHtml, $('#testDiv').html());
// Helper function to tear down DOM element tested with
DOMTearDown('#testDiv');
});
Comments