Rails%203%20In%20Action

256 CHAPTER 10 Tracking state
The first option tag in the select tag has an additional attribute: selected. When
this attribute is set, the option is the one selected as the default option for the select.
This is achieved by using the :selected option for f.select. The value for this
option is the corresponding value attribute for the option tag. In this case, it’s the
state_id of the @ticket object.
With the select box in place, you’re almost at a point where this scenario will be
passing. Let’s see how far you’ve gotten by running bin/cucumber features/creating
_comments.feature. It won’t be able to find the Open option in your select box:
And I select "Open" from "State"
No such option 'Open' in this select box. Available options:
➥(Capybara::OptionNotFound)
This is because you need to add a state to your database! Let’s add this line to the bottom
of your Background in features/creating_comments.feature to do this:
Given there is a state called "Open"
Let’s now run the scenario using bin/cucumber features/creating_comments
.feature so you can get the step definition. Put this step definition in a new file called
features/step_definitions/state_steps.rb using this code:
Given /^there is a state called "([^"]*)"$/ do |name|
State.create!(:name => name)
end
By defining this step and rerunning the scenario you’ll see that it’s now failing at the
last step:
And I should see "Open" within "#ticket .state"
Unable to find css "#ticket .state" (Capybara::ElementNotFound)
This output means it’s looking for any element with the id attribute of ticket that
contains any type of element with the id of state, but it can’t find it.
Rather than putting the state inside the TicketsController’s show template, put it
in a partial. This is due to the fact that you’ll be reusing this to display a state wherever
you need it in the future. Additionally, you’ll apply a dynamic class around the state so
you can style it later on. Let’s create a new partial at app/views/states/_state.html.erb
and fill it with this content:
To style the element you need a valid CSS class name. You can get one by using the
parameterize method. If, for example, you had a state called “Drop bears strike
without warning!” and used parameterize on it, all the spaces and non-URL-valid
characters would be stripped, leaving you with “drop-bears-strike-without-warning,”
which is a perfectly valid CSS class name. You’ll use this later on to style the state using
the color and background attributes.