Javascript Unit Tests with the YUI TestManager +
Testing your Javascript is very important. Especially when the amount of code is growing and growing.
The easiest method are unit tests. We have tried several JS unit test frameworks. Including JSUnit, Scriptaculous Unit Test Runner and YUI test. With a lot of YUI components like the YUI Loader and many YUI widgets we refactored our unit tests to use YUI Test. We like the Yahoo User Interface because of its documentation and also of its code quality.
YUI Test is not bundled with YUI. You can use it with YUI but we also use other frameworks like Prototype and DWR. To learn more about YUI Test you can watch the presentation of Nicholas C. Zakas.
Ok, this is great, now I can test my Javascript. But wait, what is if I have a lot of Javascript. I can group my tests in test cases and test cases in test suites. This is supported. But while the amount of Javascript is growing one file for all tests isn’t enough. We have a lot of different modules. Each consists of a lot of test cases. Sure, you can copy them all together in a file which is several thousand lines long. But every test run takes then a lot of time, debugging is more complex and it is more complicated to manage this file.
YUI TestManager
Wouldn’t it be great to have a test runner. A script which takes a lot of unit test files and run them one after another. Our first approach was based on the Scriptaculous Unit Test Runner embedded in a frameset. We had a navigation frame and some Javascript included to run one unit test file in the main frame. One problem was to collect the results of all unit test files. We patched the Unit Test Runner and collected the data. It was ok and I wanted to refactor the solution to publish it. After starting I suddenly found an undocumented feature of YUI Test – The YUI TestManager. It is exactly what I wanted to do, define the unit test files, run through all of them and collect the results. I think Yahoo is using this feature internally and didn’t talk a lot about it. But it is included in the API, so please YUI team, include it to the documentation. It is a great piece of code.
Continuous Integration of Javascript with Selenium
Before I will show you how to use it, some more thoughts about this. We are coming from the agile Java world. So continuous integration is very important for us. Please search for “Continuous Integration Javascript” in your search machine. There are just a few hits and no ready to use solution. Yes, you can try to go back to the Java world and run tests with Rhino. There are some Java based unit test frameworks for Javascript. But there are two downsides. You are leaving the Javascript world and you are leaving the browser. It can be ok for you but I don’t trust the different browsers. I want to be able to run the tests fast in the browser when I’m developing and I want to test as many browsers as I can. We searched for a solution and what we have running is a suite of Selenium tests. They are at another level. Functional tests which run through use cases in the web frontend. But if we could give them a result of our unit tests we are able to include this in our setup. Then we can run the unit tests in IE, Firefox and Opera automatically.
YUI Test gives you the logger to view the results of your tests. It is not the best view for test results but it is ok. Also there are a lot of events which include the results of the tests after running them. We have implemented a little script which displays a nice summary which we test with Selenium.
Source code
Now let’s head to the source code.
At the beginning we need a unit test. Because I’m want to concentrate on the TestManager you will find a very very simple test.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>String test</title>
<!--CSS-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/logger/assets/logger.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/yuitest/assets/testlogger.css">
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/logger/logger-min.js"></script>
<!-- Source File -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yuitest/yuitest-min.js"></script>
<script type="text/javascript">
YAHOO.tool.TestRunner.add(new YAHOO.tool.TestCase({
name: "String test",
testEqualityAsserts : function () {
var Assert = YAHOO.util.Assert;
Assert.areEqual("hel"+"lo", "hello"); //passes
Assert.areEqual("YUI test".substr(0,3), "YUI"); //passes
}
}));
YAHOO.util.Event.onDOMReady(function (){
if (parent && parent.TestManager) {
parent.TestManager.load();
}
else {
var logger = new YAHOO.tool.TestLogger();
//run the tests
YAHOO.tool.TestRunner.run();
}
});
</script>
</head>
<body>
</body>
</html>
In the first part we define our tests. In the second part you will see that the test will be called after the DOM is ready. It is a little bit different from the normal examples, because we call parent.TestManager.load() if it is available. Now you can copy this code, write your own tests, define test suites, … It starts to get interesting, if you have so many tests, that you want to group them into different files. With the code above you can go ahead and create multiple tests. In the example code I have created to test files calcTest.html and stringTest.html.
To run all tests in all your test files you need to call the TestManager:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JS Unit Tests</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!--CSS-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/logger/assets/logger.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/yuitest/assets/testlogger.css">
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/logger/logger-min.js"></script>
<!-- Source File -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yuitest/yuitest-min.js"></script>
<!-- Source file -->
<script type="text/javascript">
var TestManager = YAHOO.tool.TestManager;
TestManager.setPages([
"./stringTest.html",
"./calcTest.html"
]);
YAHOO.util.Event.onDOMReady(function() {
TestManager.start();
});
</script>
</head>
<body>
<h1>JS Unit Tests</h1>
</body>
</html>
That’s simple, isn’t it?
That will give you the following output:
We wanted to give it more the feeling of a unit test suite. As I told you there is an event after test completion, which includes the test results. With our script we are building a summary table which gives you a nice overview for your test results.
With the overview table we also can track the results with a simple Selenium test:
package com.agimatec.ostium.portlets.jsunit;
import com.agimatec.ostium.portlets.util.ScreenshottingSelenium;
import com.thoughtworks.selenium.Selenium;
import org.testng.Assert;
import org.testng.Reporter;
import org.testng.annotations.*;
public class JsUnitTest {
Selenium selenium;
@BeforeMethod
@Parameters({"selenium.host", "selenium.port", "browser", "baseUrl", "ostium.login",
"ostium.password"})
public void startSelenium(
@Optional("localhost")String host,
@Optional("4444")int port,
@Optional("*firefox")String browser,
@Optional("http://localhost:8080")String baseUrl
) throws Exception {
Reporter.log("Running selenium");
selenium = new ScreenshottingSelenium(host, port, browser, baseUrl);
selenium.start();
}
@Test
public void checkPassedJsUnitTests() throws InterruptedException {
selenium.open("/portlets/ostium/utilities/ajf/src/test/javascript/testrunner.html");
for (int second = 0; ; second++) {
if (second >= 60) Assert.fail("timeout");
try {
if (selenium.isElementPresent("//div[@id='testcontainer']/div/h2")) break;
} catch (Exception e) {
}
Thread.sleep(1000);
}
Assert.assertTrue(
selenium.isTextPresent("exact:Result: Passed"),
"The result of the JS tests should be 'PASSED'.");
}
@AfterMethod
public void stopSelenium() {
Reporter.log("Stopping selenium");
selenium.stop();
}
}
The only thing to do is to run the files on a local server. We use a Jetty with Maven to host the files because Selenium needs to include a proxy which didn’t work if you access the file directly.
Find more to Selenium on our other posts:
Download the script and some examples here. We are planning to release it with some other JS stuff as a Google code project, but we are still searching for a name.
If this post was helpful or you have additional ideas, please don’t hesitate to comment.
Nice writeup! I’m glad you’ve enjoyed YUI Test. The TestManager was one of those things I hacked together quickly and wasn’t sure if people would find it useful or not, which is why it’s a bit of a secret. I’ve been meaning to go back in and make it a more full-fledged component with full documentation, so stay tuned!
thanks for sharing. I am also in need of YUI TestManager ;)
I also found TestManager very useful. Thanks for the writeup!
Could you elaborate on the use of selenium here ?
Does these tests are written for both unit and acceptance testing ?
Also interested to know if you found a name and hosted the project on google code