Question

I am trying to learn how to use BDD for our development process and I sometimes end-up writing things that implies a UI design, so for brand new development or new features, the UI does not always exists.

For example, if I say this in a scenario “When a column header is clicked” it implies that this feature is based on some sort of table or grid, but at this point we are still just writing user-stories so there is no UI yet.

That gets me confused to know at what point in the process do we come up with a UI design ?

Keep in mind, I only have read articles about BDD and I think it would help our team a lot but still very new at this! Thx!

Answer 1

If you write your scenarios with a focus on the capabilities of the system, you’ll be able to refactor the underlying steps within those scenarios more easily. It keeps them flexible. So I’d ask – what does clicking the column get for you? Are you selecting something? What are you going to do with the selection? Are you searching for something and sorting by a value?

I like to see scenarios which say things like:

• When I look for the entry
• When I go to the diary for January
• When I look at the newest entries
• When I look at the same T-shirt in black

These could all involve clicking on a column header, but the implementation detail doesn’t matter. It’s the capability of the system.

Beneath these high-level scenarios and steps I like to create a screen or page with the smaller steps like clicking buttons in it. This makes it easy to refactor.

I wrote this in a DSL rather than English, but it works with the same idea – you can’t tell from the steps whether it’s a GUI or a web page, and some of the steps involve multiple UI actions:

http://code.google.com/p/wipflash/source/browse/Example.PetShop.Scenarios/PetRegistrationAndPurchase.cs

Hope you find it interesting and maybe it helps. Good luck!