BDD cycle - how to join backend with frontend

Question

I'd like to know how you connect frontend BDD (i.e. Jasmine) with backend BDD (rspec, cucumber). How these two relate and form one cohesive BDD cycle? What would be the correct steps of this cycle?

Answer 1

To create a cohesive BDD cycle you would use the "outside-in" development technique, and then take the approach of "faking it until you make it" i.e. using mock objects until you write concrete implementations.

Lets say you have the following cucumber scenario:

Given I am on the home screen
When I submit valid log-in credentials
Then I am navigated to the landing page

This would be the outermost test you have. Obviously when you'd run this each step would fail as nothing has been implemented.

Now you would revert to creating the front-end BDD using Jasmine to implement the home screen. Once your Jasmine tests succeed, this in turn would cause the "Given" step to pass.

Next you would write more front-end tests to implement the log-in functionality, but at this stage you may mock the call to the server to actually validate the user (hence taking the "fake it to make it" approach). Again, by mocking the log-in process you'll be able to rapidly develop the log-in screen and satisfy the cucumber test.

Once you have written the cucumber test and you Jasmine tests passing, you would then go on to implement the back-end BDD development off the user validation code (i.e. write the concrete code which will authenticate users logging into the site).

Hence you can see that this "Outside in" development approach allows you to use BDD at both the back-end and front-end layers.

Some other useful articles on this development approach are here:

• http://rubylearning.com/blog/2010/10/05/outside-in-development/
• http://blog.josephwilk.net/ruby/outside-in-development-with-cucumber-and-rspec.html
• https://softwareengineering.stackexchange.com/a/166437