Thursday, July 9, 2009

Creating Testable Web UI Components

Until recently, I always thought that the only way to test the UI components in an application was to create an end-to-end test using some kind of robot user.  The reason being is that much of the UI is created using JSP pages or custom tags…these are sometimes hard to run separately outside the application, so we’ve created tests for them before but running front end tests and hoping for good results.

Since this is painful to do any detailed testing on, we generally resort to good old human testing in our QA department to make sure that the UI comes out right…obviously a bad practice.

This article goes through a case study on how to create a testable UI component using a custom tag and shows the various tests I use to validate the code.

The Tag Class

If you look at some of my old code for tag classes, you end up with some very complicated presentation logic to try and follow.  My thought on this at the time was to put the complicated logic in a tag class instead of using struts logic tags and scriptlets in my JSP page.  Although using a tag class is preferred to this, I now view my tag class as simply being the ‘glue’ between the data that I am trying to present and how it is presented.

What I mean by this is that, the tag class should really be used for getting a reference to the data that you want to display and passing it to the components which render the output and then passing that output to the browser.  The actual tag reference is just a place holder to get that output in the right spot on the page.  This model makes for cleaner, easily testable code.  When you want to test the functionality of a tag class, you simply need to write a test that validates that when you pass a reference to the tag, it can find the data it needs and render an output, you don’t have to try and test all of the possible output issues involved.

The Renderer

Our application uses Struts, so a renderer is not technically part of the framework at this point as it is in say JSF.  The concept is that of a component that can convert a data structure into some form of visual representation, as in say HTML.  I use the term ‘renderer’ to refer to any software component that does this type of translation.

I usually start with a renderer interface since it is likely that I may need to render this component in one of many ways.   I pass off the responsibility of selecting the appropriate renderer to the tag class this way I can make configurable outputs.  The renderer is specific enough to be able to perform simple presentation logic, this makes the testing of a renderer component fairly straight forward.

Consider this interface:

  1: public interface ClientRenderer
  2: {
  3:     String output(Client client);
  4: }

I love using interfaces in this case because I don’t have to worry about what my output will look like to get it all wired together.  I can make a very simple implementation that will just output the clients name for starters

  1: public class SimpleClientRenderer
  2: 	implements ClientRenderer
  3: {
  4: 	public String output(Client client)
  5: 	{
  6: 		return client.getOrganizationName();
  7: 	}
  8: }

A test for this class is very simple to do and doesn’t require that you use a whole bunch of mock framework classes:

  1: public class SimpleClientRendererTest
  2: 	extends TestCase
  3: {
  4: 	public void testOutput() throws Exception
  5: 	{
  6: 		final Client cl = new Client();
  7: 		cl.setOraganizationName("testme");
  9: 		final ClientRenderer r = new SimpleClientRenderer();
 10: 		final String out = r.output(cl);
 12: 		assertEquals("Unexpected Output", "testme", out);
 13: 	}
 14: }

Obviously, this is a very simple example that would likely be handled with a bean:write tag, but the idea is that this renderer class doesn’t have any framework dependencies to test.  It is simply a class that outputs in a predictable (and therefore testable) manner.

Testing the Tag Class

JSP Tag classes run within a framework and require references to a pageContext, a request and a response.  I use MockRunner for testing tag classes since they can run within the context of my build server and don’t have to be deployed anywhere.

Since I’ve already tested the fact that my client will render the correct way, all I need to test now is that I can get the correct reference to my renderer.

  1: public class ClientOutputTag
  2: 	extends TagSupport
  3: {
  4: 	private Client clientRef;
  5: 	protected String attribute;
  7: 	public void doStartTag() throws JspException
  8: 	{
  9: 		... // get client ref from whereever
 10: 	}
 12: 	public void doEndTag() throws JspException
 13: 	{
 14: 		final ClientRenderer r = new SimpleClientRenderer();
 15: 		final String out = r.output(clientRef);
 17: 		try
 18: 		{
 19: 			pageContext.getOut().write(out);
 20: 		}
 21: 		catch(IOException e)
 22: 		{
 23: 			// error
 24: 		}
 25: 	}
 27: 	... // req'd accessors
 28: }

As you can see by this implementation, the tag class is responsible only for getting the reference and calling the renderer, you test would look something like:

  1: public class ClientOutputTagTest
  2: 	extends BasicTagTestCaseAdapter
  3: {
  4: 	public void testTag() throws Exception
  5: 	{
  6: 		final Client cl = new Client();
  7: 		cl.setOrganization("testme");
  8: 		final ClientOutputTag tag = 
  9: 			(ClientOutputTag) createTag(ClientOutputTag.class);
 11: 		tag.setAttribute("client");
 12: 		setRequestAttribute("client", cl);
 14: 		tag.doStartTag();
 15: 		tag.doEndTag();
 17: 		final String out = getOutput();
 19: 		assertEquals("Unexpected Output", "testme", out);
 20: 	}
 21: }

This is a simple example, so there isn’t much to test here.  I may want to test to make sure that if I’m outputting html, that it will be valid or something like that; I would use a sax parser for that.

No comments: