Saturday, June 20, 2009

There and Back Again: A User's Journey from the Homepage Complete

‹prev | My Chain | next›

The next step in the exploration-from-the-homepage Cucumber scenario is returning back to the homepage. Amazingly, I have made it through three and a half months of my chain without a site-wide layout. That will need to change in order to get this next step passing.

Haml layouts in Sinatra are designated by creating a layout.haml file. The following simple layout should do the trick:
%html
%title= ["EEE Cooks", @title].compact.join(": ")
%body
#header
#eee-header-logo
%a{:href => "/"}
%img{:alt => "Home", :src => "/images/eee_corner.png"}

= yield

#footer
Before defining the click-logo-to-return-home step, I re-run the whole Cucumber scenario to make sure the layout not break anything. Unfortunately, the earlier step that checked the number of meal thumbnail images on the homepage is now failing:
   When I view the site's homepage
Then I should see the 10 most recent meals prominently displayed
And the prominently displayed meals should include a thumbnail image
expected following output to contain a <img/> tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><title>EEE Cooks</title></head>
<html><body>
<div id="header">
<div id="eee-header-logo">
<a href="/">
<img alt="Home" src="/images/eee_corner.png"></a>
</div>
</div>
<div class="meals">
<h1>Meals</h1>
<a href="/meals/2009/06/11">
<img height="150" width="200" src="/images/2009-06-11/meal0.jpg"></a>
<h2>
<a href="/meals/2009/06/11">Meal 0</a>
</h2>
<p>meal summary</p>
...
The thumbnails are still there, so what gives? The failing Cucumber scenario is currently defined as:
Then /^the prominently displayed meals should include a thumbnail image$/ do
response.should have_selector("img", :count => 10)
end
Ah, rather than verifying that there are 10 meal thumbnail images, I am trying to verify that there are 10 images on the entire homepage. The addition of the site logo has upped the number of images on the homepage to 11. A CSS selector can provide the necessary context to only check meal thumbnails:
Then /^the prominently displayed meals should include a thumbnail image$/ do
response.should have_selector(".meals img", :count => 10)
end
The additional context in the scenario step gets it passing, so now I can try defining the click-the-logo step:
When /^I click the site logo$/ do
click_link "/"
end
That link is now on the page, thanks to the newly added layout, so this step is passing.

The next step is simply verifying that the user is back on the homepage after clicking the site logo. At this point, the distinguishing characteristic of the homepage is the inclusion of 10 meal summaries. So I use that to verify this step:
Then /^I should see the homepage$/ do
response.should have_selector(".meals h2", :count => 10)
end
Now that the user has gone from homepage to meal, to recipe, and back to the homepage, the next step is clicking on the recipe text under the 6th meal on the homepage. The primary reason for choosing the 6th meal/recipe was that this was the first that was vegetarian (the first 5 were Italian). Subsequent steps will verify that it behaves like vegetarian recipes should (i.e. the vegetarian category link is highlighted).

In this scenario, each meal has exactly one menu item—a recipe created just for that meal. Recipe names follow an obvious convention such that the recipe for the 6th meal should be named "Recipe for Meal 5" (meal indexes start at zero). The user should be able to click on the 6th recipe by clicking that text:
When /^I click the recipe link under the 6th meal$/ do
click_link "Recipe for Meal 5"
end
The second to last step in this scenario—verifying that the user is now on the recipe page—was already defined. After a small tweak to ensure that it applies for all recipes, I am onto the final step in this scenario, verifying that the vegetarian category is highlighted on this recipe page.

For a previous recipe, I defined a should-have-the-italian-category scenario step:
Then /^the Italian category should be highlighted$/ do
response.should have_selector("a",
:class => "active",
:content => "Italian")
end
A quick Regexp rewrite will get that step working for both Italian and vegetarian recipes:
Then /^the (\w+) category should be highlighted$/ do |category|
response.should have_selector("a",
:class => "active",
:content => category)
end
And, with that, I am all done with another scenario:



(commit)

With the entire scenario green, I will likely spend some time refactoring before moving onto the next scenario. Tomorrow.

No comments:

Post a Comment