Development

Responsive Retrofit: Updating Those Fixed-width Websites

Using integration tests has helped Creative Soapbox maintain clarity in requirements and ensure stability of complicated feature sets.

Steve Norell

July 17, 2012

Here at Creative Soapbox, we’ve implemented integration tests using rspec and capybara to simulate user activity and make sure the application behaves as expected.
The result is a complete automated test suite that demonstrates a working system and guarantees core functionality remains stable as features get added.

How it works

Let’s say you have a requirement for redirecting users to their dashboard when they’re logged in. The user story might look something like this:

As a user
I want to be redirected to my dashboard when I visit the home page
So that I see the interface that is most relevant to my task

We can verify this behavior by writing code that looks a lot like written instructions for a human being. The instructions aren’t carried out by a human; our tester is a robotic user that is actually interacting with a real life web browser and telling us what works and what doesn’t.

Here’s how we’d tell the tester to sign into the application.

visit sign_in_page

fill_in 'Email', with: “user@example.com
fill_in 'Password', with: "password"

click_button "Sign In"

That’s not an excerpt from a user manual, it’s actual code. The beauty and expressiveness of ruby gives us the ability to control the browser using natural language.

Once the tester has logged in, we can instruct him to verify that he experiences the correct behavior.

visit home_page
current_url.should include(“/dashboard”)

That second line tells our tester to verify that he has been taken to the correct page. In other words: After visiting the home page, the current url should include “/dashboard”.

Proving the System

Once we’ve written the tests, we execute them directly from the command line and the output tells us exactly what happened during the tests:

It worked! Our tester verified that after he logged in he was taken to the user dashboard.

Demonstrating the system

After we’re done writing code, we can take our tests, execute them again and have our tester generate a more permenant report of what happened. The report is an actual document containing the results of each test that can be shared with the whole team. This gives us the ability to keep clients up to date with exactly what is going on with their project at any given moment.

Moving forward with integration tests.

Using integration tests has helped Creative Soapbox maintain clarity in requirements and ensure stability of complicated feature sets. We are going to continue experimenting with this and other testing techniques in order to sustain a high level of quality in our work.

Read next