Rails%203%20In%20Action

232 CHAPTER 9 File uploading
You could keep adding file fields until all the users are satisfied, or you could be
sensible about it and switch back to using one field and, directly underneath it, providing
a link that, when clicked, adds another file field. Using this solution, you also
clean up your UI a bit by removing possible extra file fields yet still allowing users to
attach as many files as they like. This is where JavaScript comes in.
When you introduce JavaScript into your application, you have to run any scenarios
that rely on it through another piece of software called WebDriver. WebDriver is a
browser driver, which was installed when the Capybara gem was installed, so you don’t
have to do anything to set it up. Capybara without WebDriver won’t run JavaScript
because it doesn’t support it by itself. By running these JavaScript-reliant scenarios
through WebDriver, you ensure the JavaScript will be executed. One of the great
things with this WebDriver and Capybara partnership is that you can use the same old,
familiar Capybara steps to test JavaScript behavior.
9.4.1 JavaScript testing
Capybara provides an easy way to trigger WebDriver testing. You tag a scenario (or feature)
with the @javascript tag, and it launches a new web browser window and tests
your code by using the same steps as standard Capybara testing. Isn’t that neat? To tag
a scenario, place @javascript above it. Let’s write a new scenario in the Creating
Tickets feature for multifile uploading, as shown in the following listing.
Listing 9.13 features/creating_tickets.feature
@javascript
Scenario: Creating a ticket with an attachment
When I fill in "Title" with "Add documentation for blink tag"
And I fill in "Description" with "The blank tag has an undocumented
➥speed attribute"
And I attach the file "spec/fixtures/speed.txt" to "File #1"
And I follow "Add another file"
And I attach the file "spec/fixtures/spin.txt" to "File #2"
And I press "Create Ticket"
Then I should see "Ticket has been created."
And I should see "speed.txt" within "#ticket .assets"
And I should see "spin.txt" within "#ticket .assets"
When I follow "speed.txt"
File
field
The @javascript tag at the top of this scenario tells Cucumber that the scenario uses
JavaScript, so it should be run using WebDriver. Also in this scenario, you’ve filled in
only one file field B because, as stated before, you’re going to reduce the number of
initial file fields to one. After filling in this field, you follow the Add Another File link
that triggers a JavaScript event, which renders the second file field that you can then
fill in. The rest of this scenario remains the same: ensuring that the ticket is created C
and that you can see the files inside the element with the class assets.
When you run this scenario with bin/cucumber features/creating_tickets
.feature:36, it fails because the Add Another File link doesn’t yet exist:
C
B
Create
ticket