Exploration Through Example

Example-driven development, Agile testing, context-driven testing, Agile programming, Ruby, and other things of interest to Brian Marick

191.8

⇒

167.2

⇒

186.2

183.6

184.0

183.2

184.6

Thu, 18 Jan 2007

A variation of wireframe testing

Here's my last post on lively wireframe testing for a while. Again, the idea is to help with business-facing test-driven development in two ways. First: non-technical people like product directors often think about applications in terms of user interfaces. I think that's a problem, but trying to fix it right now just gets in the way of starting the project off smoothly. So this style of test is a compromise.

Second: when using a highly-decoupled presenter-first style of development, you may need some way to remind yourself of all the pieces of user interface that should update in response to a user action. Looking at changes to pictures—wireframes—is a good way to do that. (Thus, some of these tests may be desirable even in an ideal project. What I'm objecting to in the previous paragraph is when all of the discussion about what the product should do is in terms of the user interface, not business rules, generalizations, abstractions, and exceptions.)

What I show below is an improvement to the previous style. Suppose someone is preparing a sequence of wireframes to demonstrate a user workflow. She might naturally annotate the wireframe with comments about what the user will do next. Rather than redundantly enter those as Fit commands, I'll just use them directly. That requires less editing of HTML and more tweaking of OmniGraffle documents, which is a net win (HTML being a pain, even with Open Office). It also looks prettier. Aesthetics matters for acceptance.

This improvement was not hard to implement, given FitLibrary and Omnigraffle's decent document layout. The code that sits behind the table is the same as normal DoFixture code.

The Fit table for a wireframe workflow is nothing but a series of one-cell rows, each one corresponding to a step in the workflow or a page in the slide show. The contents of the input cell are ignored, so I have it show a snapshot of the corresponding Graffle page. (I made the tables by hand, but the images and HTML could be generated from the Graffle document by code—Applescript, Java, Ruby, whatever.)

Here are the first two steps of such a workflow:

"Start having opened a configuration file" is, invisibly, an OmniGraffle Pro table. When the HTML cell is executed, all the Graffle tables that precede the graphics are interpreted as CamelCased method names and invoked. So the first table cell calls this:

public void startHavingOpenedAConfigurationFileColon() {         WindowSystem.only().passToRelevantWindows("enter", DEFAULT_CONFIG);     }

... and then checks the state of the system-under-test against the (invisible) annotations on the page's wireframes.

Then the next cell calls changeTheInputFolderFromTheDefaultTo("/tmp/non-default-drop-zone"), and compares the resulting system state to the next Graffle page.

It's often convenient to end a page with the command that takes you to the next one. That's what "Now click edit" does below.

So the sequence for the above cell is:

1. changeTheDestinationFolderTo("/tmp/non-default-pickup")
2. ErrorAccumulator errors = checkAppearance(snapshot)
...
3. nowClickEdit()

In order to reduce test fragility, I don't display controls irrelevant to the test, tagging them with "and other things...":

My hope is that, over time, people could get weaned away from realistic wireframes to absolutely minimalistic ones.

Here's what a passing table cell looks like:

A not-yet-passing cell makes a list of what hasn't been done yet:

As shown above, once one cell fails, the rest of the cells are ignored (and colored grey). Otherwise, there would be annoying spurious failures. That fits well with a "make the next red green and don't worry about what happens after" style of development.

That's as much work as I plan to do on new kinds of Fit fixturing for this app. Elisabeth Hendrickson has convinced me the next step should be to hook up an Ajaxy front end to the app and think about testing and test-driving that. Frankly, there's a lot more demand for figuring out the testing of Ajax apps than for exploration through example using Fit.

## Posted at 08:14 in category /fit [permalink] [top]