Here’s an easy summary:

JavaScript distinguishes between null, which is an object of type ‘object’ that indicates a deliberate non-value, and undefined, which is an object of type ‘undefined’ that indicates an uninitialized value.

While this distinction is made, undefined == null. This is due to JavaScripts type coercion. The two operands do NOT have to be of the same type to yield true for equality, as JavaScript automatically performs conversion on a differing operand.

So:

• 1==true  // evaluates to true
• “1″==true // evaluates to true
• 45==”45″ // evaluates to true
• null==undefined // evaluates to true

If the last bullet doesn’t seem to make as much sense, you’re not alone.

In a lot of cases, you’re not going to want to evaluate objects with this coercion. For those cases, strict evaluation is allowed with ===. No coercion is performed in this case.

So:

• true===1  // evaluates to false
• NaN===NaN // evaluates to false
• var x=[1,2]
• var y=[1,2]
• x===y // evaluates to false
• undefined === null // evaluates to false

var healthCare = {
exists: true
};

healthCare.exists // will be true
healthCare.isExpensive // will be undefined

Lastly, double negation can be used in JavaScript to convert any value to a Boolean object.

if(!!healthCare.exists) // will be true

if(!!healthCare.isExpensive) // will be false

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:

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.

Posted via email

During the presentation, I used Rhino to run the examples. I have seen other projects that use Rhino for unit testing, but they seemed a little heavy weight for what I wanted to do, which was to write unit tests for the project’s JavaScript and integrate it into our continuous integration environment.

The following explains what I did instead that seems to work well. I’d be interested in hearing any alternative suggestions.

To start with, I used Rhino and env.js to create a more full featured javascript runtime environment in the jvm, as John Resig wrote about a while back. I wrote about this a while back.

Because I wanted to run Rhino and execute JavaScript inside a unit test, it was easiest for me to modify the Shell example provided by the Rhino group.

Note: WordPress was blowing up on me when I tried to show the entire class… this is the abbreviated version with most of my changes.

public class Shell extends ScriptableObject {

    private boolean quitting;
    private static final long serialVersionUID = -5638074146250193112L;
    /**
     * Logger for this class.
     */
    private static final Logger logger = Logger.getLogger(Shell.class);

    @Override
    public String getClassName() {
        return "global";
    }

    public static void print(final Context cx, final Scriptable thisObj, final Object[] args, final Function funObj) {
        for (int i = 0; i < args.length; i++) {
            if (i > 0) {
                logger.info(" ");
            }

            // Convert the arbitrary JavaScript value into a string form.
            String s = Context.toString(args[i]);

            logger.info(s);
        }
    }

    public void quit() {
        quitting = true;
    }

    public static double version(final Context cx, final Scriptable thisObj,
            final Object[] args, final Function funObj) {
        double result = cx.getLanguageVersion();
        if (args.length > 0) {
            double d = Context.toNumber(args[0]);
            cx.setLanguageVersion((int) d);
        }
        return result;

    }

    public static void load(final Context cx, final Scriptable thisObj,
            final Object[] args, final Function funObj) {
        Shell shell = (Shell) getTopLevelScope(thisObj);
        for (int i = 0; i < args.length; i++) {
            shell.processSource(cx, Context.toString(args[i]));
        }
    }

    public static void assertEquals(final String expected, final String actual) {
        Assert.assertEquals(expected, actual);
    }

    public static void assertNotNull(final Object object) {
        Assert.assertTrue(!(object instanceof org.mozilla.javascript.Undefined));
        Assert.assertTrue("Provided object is null", object != null);
    }

    public static void assertTrue(final boolean condition) {
        Assert.assertTrue(condition);
    }

    public static void assertFalse(final boolean condition) {
        Assert.assertFalse(condition);
    }

}

Next I created an Abstract JUnit test that loads my Javascript environment. My setUp method looks something like this:

    protected void setUp() throws Exception {
        super.setUp();
        context = Context.enter();
        try {

            context.setOptimizationLevel(-1);
            shell = new Shell();
            context.initStandardObjects(shell);

            // Define some global functions particular to the shell. Note
            // that these functions are not part of ECMA.
            String[] names = { "print", "quit", "version", "load",
                    "assertEquals", "assertNotNull",
                    "assertTrue", "assertFalse"};
            shell.defineFunctionProperties(names, Shell.class,
                                           ScriptableObject.DONTENUM);
            shell.processSource(context, "src/test/resources/scripts/startup.js");
        } catch (Exception e) {
            e.printStackTrace();
        }

    }

This initializes the JavaScript context and loads the environment-specific javascript I want to test. In my case I wanted to test code that uses ExtJS. My startup.js script looks like this:

load('src/test/resources/scripts/env.js');
window.location='src/test/resources/scripts/empty.html';
document='src/test/resources/scripts/empty.html';
load('src/main/javascript/extjs/adapter/ext/ext-base.js');
load('src/main/javascript/extjs/ext-all-debug.js');
load('src/test/resources/scripts/resource.js');
load('src/test/resources/scripts/testdata.js');
load('target/myappcode.js');

Order is important here. First, I load env.js. Next I set values for window.location and document. I don't use either explicitly, but some of the other files look for them. Then I load extjs, and my data and app code.

The best part about this arrangement is the predefined functions provided by the shell class. I can easily reference junit assert statements from within my javascript test.

Here is an example JUnit class:

public class PhoneNumberTest extends AbstractJSTestCase {

    public PhoneNumberTest(final String name) {
        super(name);
    }

   public void testPhoneCountryCodeRender() {
       processScript("src/test/javascript/PhoneCountryCodeRenderTest.js");
   }

   public void testCreateGrid() {
       processScript("src/test/javascript/PhoneNumberCreateGridTest.js");
   }

}

and the javascript test code it calls:

var phoneNumber = new edit.form.PhoneNumber();

assertNotNull(phoneNumber);
assertNotNull(profile);

var grid = phoneNumber.createGrid(profile);

assertNotNull(grid);

var store = grid.store;

assertNotNull(store);

assertTrue(store.getCount() === 2);

var record1 = store.getAt(0);
assertNotNull(record1);
var record2 = store.getAt(1);
assertNotNull(record2);

print(record1.data.phoneNumber);
print(record2.data.phoneNumber);

print(record1.data.extension);
print(record2.data.extension);

// Now remove the access code from the phone number
record1.data.phoneNumber = PhoneUtils.removeAccessCode(record1);
print(record1.data.phoneNumber);

record2.data.phoneNumber = PhoneUtils.removeAccessCode(record2);
print(record2.data.phoneNumber);

I thought about using a number of back ends to support my project, but decided on Grails after reading about the built-in JSON converters.

Getting started note: Since this is a dirt simple example, I copied extjs into the web-app/js directory. James Lorenzen looks like he has a better way, and there might be a plugin some day.

I started with a simple GORM object, Media, which looks like this:

class Media {

	static constraints = {
		releaseDate(nullable: true)
	}

	String title
	Date releaseDate
	Date dateCreated
	Date lastUpdated
}

Next I added some startup data by adding it to to Bootstrap.groovy class:

     	def m = new Media(releaseDate:null, title: 'Test')
     	m.save()

And added a controller:

import grails.converters.*

class MediaController {

    def view = {

    }

    def list = {
   	def listResult = [ total: Media.count(), items: Media.list(params)]
        render listResult as JSON
    }
}

And I now have a Grails back end that will deliver JSON to extjs! Off to the front end!

First I modified my layout, main.gsp, to add the extjs js and css files:

<html>
    <head>
        <title><g:layoutTitle default="Grails" /></title>

		<link rel="stylesheet" href="${createLinkTo(dir:'js',file:'ext-2.2/resources/css/ext-all.css')}"></link>
		<link rel="stylesheet" href="${createLinkTo(dir:'js',file:'ext-2.2/resources/css/theme-aero.css')}"></link>
		<script type="text/javascript" src="${createLinkTo(dir:'js',file:'ext-2.2/adapter/ext/ext-base.js')}"></script>
		<script type="text/javascript" src="${createLinkTo(dir:'js',file:'ext-2.2/ext-all-debug.js')}"></script>
		<script type="text/javascript" charset="utf-8">
			Ext.BLANK_IMAGE_URL = "${createLinkTo(dir:'js',file:'ext-2.2/resources/images/default/s.gif')}";
		</script>
		<g:layoutHead />

	</head>
	<body>
		<div id="container">
			<div id="content">
				<div id="include">
					<g:layoutBody />
				</div>
			</div>
		</div>
	</body>
</html>

and added my view.gsp:

<html>
	<head>
		<meta name="layout" content="main" />
		<title>Decorated</title>
		<script type="text/javascript" src="${createLinkTo(dir:'js',file:'oscar.js')}"></script>
	</head>
	<body>
		<div id="center-div"></div>
	</body>
</html>

and lastly, my js file, taken nearly verbatim from an extjs example:

/*
 * Ext JS Library 2.0 Beta 1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */

Ext.onReady(function(){

    // create the Data Store
    var ds = new Ext.data.Store({
       autoLoad: true,
       proxy: new Ext.data.HttpProxy({
       url: 'http://localhost:8080/oscar/media/list'}),
       reader: new Ext.data.JsonReader({
       	results: 'total',
       	root:'items',
       	id:'id'
       },
       [
               {name: 'title'},
               {name: 'dateCreated'},
               {name: 'lastUpdated'},
               {name: 'releaseDate'}
          ]
       )
    });

    var cm = new Ext.grid.ColumnModel([
	    {header: "Title", width: 120, dataIndex: 'title'},
		{header: "Created Date", width: 180, dataIndex: 'dateCreated'},
		{header: "Last Updated", width: 115, dataIndex: 'lastUpdated'},
		{header: "releaseDate", width: 100, dataIndex: 'releaseDate'}
	]);
    cm.defaultSortable = true;

    // create the grid
    var grid = new Ext.grid.GridPanel({
        ds: ds,
        cm: cm,
        renderTo:'center-div',
        width:540,
        height:200
    });
});

My code is checked in here.

Use Case Scenario - User has a text input field. User types in “Bi” and a request is sent to the server for searching all matching strings with “Bi”.

Technical Challenges Implementing this functionality for a single scenario should be straight forward but having a solution generic enough that any single or a combination of attributes of your domain objects could be searched using hibernate in the dao layer, has some challenges. Also remember, we are not interesting in Pojos but returning “Hibernate Objects” to the UI.

Solution In this example, I use a domain object, ResearchStaff. Let’s say, the first request from the client is matchResearchStaffs(String textPattern). Your Controller (or ajax facade) would look something similar.

public List matchResearchStaffs(String text, HttpServletRequest request) throws Exception{
    List  staffCol = researchStaffDao.getBySubnames(extractSubnames(text));

    // The below code is not required for simple searches. But if your ResearchStaff Object has a lot
    // of attributes and collections. You may want to strip it off or "reduce" it before sending it to the UI
    List  reducedStaffCol = new ArrayList (staffCol.size());
    for (ResearchStaff staff : staffCol) {
        reducedStaffCol.add(buildReduced(staff, Arrays.asList("id", "firstName","lastName")));
    }

     return reducedStaffCol;
}

As you see, the controller delegates to Dao for pattern matching and this is where Dao is smart enough to figure out ‘which’ domain object’s ‘what’ attributes are being queried. In my last article, you’ve seen how to couple an abstract domain object to a Base Dao and make it ‘aware’. Well, here you see the real benefits of that coupling.

    /**
     * A query builder for use by subclass DAOs.  It makes it easy to match a fragment of a name
     * or identifier against multiple properties.  This is intended for use in implementing
     * user-friendly dynamic searches; e.g., autocompleters.
     *
     * @param subnames the name fragments to search on
     * @param extraConditions custom HQL conditions with which to constrain the fragment matches
     * @param extraParameters parameters for the custom conditions
     * @param substringMatchProperties a list of properties of the implementing object which should
     *             be matched as case-insensitive substrings
     * @param exactMatchProperties a list of properties which should be matched as case-insensitive
     *             full strings
     * @return a list of matching domain object instances
     */
    @SuppressWarnings("unchecked")
    protected List findBySubname(
        String[] subnames, String extraConditions, List