Easy JavaScript Unit Test Integration

Jun 17, 2009

Add new tag, Extjs, javascript, JSUnit, Screw.Unit, Selenium

Easy JavaScript Unit Test Integration

At my current client I’ve been building a rather complex rich client app using ExtJs. The team has written a lot of JavaScript code, and has been writing a lot of JavaScript unit tests as well.

We’ve gone through several unit testing tools along the way trying to solve some logistical problems. We started with JSUnit, added Selenium, switched from JSUnitt to envjs, and are now using a hybrid approach I’ll describe in detail.

Some of the issues we wanted to address with our testing tools were:

How easy is it to run the tests?
How easy is it to debug the tests?
How easy is it to integrate the tests into our existing continuous integration environment

Most of the tools we used easily met the first two logistical issues, but the last one was not as simple.

The following describes an approach that meets all of the above list (after the jump).

Here is a very simple JavaScript object to test and illustrate the example:

```
var swineFluIndicator = {
```
```
  hasSwineFlu: function(sample) {
```

    return !!sample.oink ? true : false;

```
  }
```
```
};
```

If the sample has a property “oink”, the sample is infected with swine flu. Simple.

To test our code in development, we used the Screw.Unit test framework.

We went with Screw.Unit for several reasons:

Simple to implement- It’s just a JavaScript library
It generates a simple DOM output, which makes integration easy – I’ll demonstrate later.
It’s easy to customize, and the framework does not pollute the global namespace at all.
It’s simple to run and debug.

Here is an example Screw.Unit test of the sample code:

```
Screw.Unit(function() {
```

  describe("test whether a given sample has swine flu", function() {

```
   it("clean sample", function() {
```

     var swineFluIndicator  = new SwineFluIndicator();

```
     var testSample = {
```
```
       value : '123'
```
```
     };
```

      expect(swineFluIndicator.hasSwineFlu(testSample)).to(be_false);

```
    });
```
```
  });
```
```
});
```

Screw.Unit tests are executed in the browser (so debugging with Firebug is easy, and produce a very simple DOM that’s simple to read:
Screw.Unit Runner

Writing JavaScript unit tests is pretty easy; now it’s time to integrate them. HtmlUnit have released 2 new versions in 2009 so far that offer unprecedented DOM support via Rhino. With HtmlUnit, our test consists of rendering the page and interpreting the simple DOM results.

Set up the clients and load the page:

WebClient firefoxClient = new WebClient(BrowserVersion.FIREFOX_2);

WebClient ieClient = new WebClient(BrowserVersion.INTERNET_EXPLORER_6);

```
 
```

firefoxClient.setThrowExceptionOnScriptError(true);

ieClient.setThrowExceptionOnScriptError(true);

HtmlPage htmlPage = (HtmlPage) client.getPage(testFile.toURL());

and provide a means of interpreting the page results:

protected void interpretTestResults(final HtmlPage htmlPage) {

```
        String header = "";
```
```
        String heading = "";
```
```
        String paragraph = "";
```
```
        // returns a list of tests
```
```
        List testDivs = (List) htmlPage
```

            .getByXPath("//*[contains(@class,'describe focused')]");

```
 
```

        for (HtmlListItem htmlListItem : testDivs) {

            List heading1List = (List) htmlListItem.getByXPath("./h1");

            header = heading1List.get(0).getTextContent();

            // returns a list of its divisions; if there are nested

            // describes, there will be multiple its

            List test = (List) htmlListItem

                .getByXPath(".//*[contains(@class,'its')]");

            for (HtmlUnorderedList htmlUnorderedList : test) {

                // if there are no child nodes, this is part of a nested

```
                // describe
```

                if (htmlUnorderedList.hasChildNodes()) {

                    List failedItemList = (List) htmlUnorderedList

                        .getByXPath(".//*[contains(@class,'it enqueued failed')]");

                    if (failedItemList.size() == 0) {

```
                        // successful
```
```
                    } else {
```

                        for (HtmlListItem failedItem : failedItemList) {

                            List describedList = (List) failedItem

                                .getByXPath("./h2");

                            Assert.assertTrue(describedList.size() == 1);

                            heading = describedList.get(0).getTextContent();

                            List errorMessageList = (List) failedItem

                                .getByXPath("./*[contains(@class, 'error')]");

                            for (HtmlParagraph htmlParagraph : errorMessageList) {

                                paragraph += htmlParagraph.getTextContent();

```
                            }
```
```
                        }
```

                        Assert.fail("Header: " + header + " heading: " + heading + " paragraph: "

                            + paragraph);

```
                    }
```
```
                }
```
```
            }
```
```
        }
```
```
    }
```

This method takes an HtmlUnit HtmlPage and, using xpath expressions, iterates over the test result DIV tags generated by Screw.Unit. It ignores tests that passed, and focuses on the failed tests. For failed tests it gets the provided information about the test (the it and describes strings), so that we’ll know what test failed and why.

Lastly, rather than write a test for every Screw.Unit test page we write, we made use of JUnit4’s Parameterized test. This way we provide a list of Screw.Unit tests and have the Parameterized test execute a test for each.

Annotate the class:

```
@RunWith (Parameterized.class)
```
```
public class ScrewUnitTest {
```

```
Provide a static Collection:
```
```
@SuppressWarnings ("unchecked")
```
```
    @Parameters
```
```
    public static Collection data() {
```

        Collection fileCollection = new ArrayList();

        Collection fileList = FileUtils.listFiles(new File(HTML_TEST_DIR), extensions, true);

```
        for (File file : fileList) {
```

            File[] fileArray = { file };

            fileCollection.add(fileArray);

```
        }
```
```
        return fileCollection;
```
```
    }
```

and a constructor:

```
public ScrewUnitTest(File file) {
```
```
        this.file = file;
```
```
    }
```

Then for every file in the Collection, this.file will be available for reference in the tests. And our JavaScript tests can be easily run by a continuous integration system.

Easy JavaScript Unit Test Integration

About the Author

Object Partners

Leave a Reply Cancel reply