Post on 17-Dec-2015
1
Forms (Engineering Software as a Service §4.6)
© 2013 Armando Fox & David Patterson, all rights reserved
2
Dealing with Forms
• Creating a resource usually takes 2 interactions– new: Retrieve blank form– create: Submit filled form
• How to generate/display?• How to get values filled in
by user?• What to “return” (render)?
3
Rails Cookery #3
• To create a new submittable form:
1. Identify the action that serves the form itself
2. Identify the action that receives submission
3. Create routes, actions, views for each• Form elements’ name attributes will appear
as keys in params[]• Helpers provided for many common
elements
4
Creating the Form
• Anatomy of a form in HTML– the action and method attributes (i.e., the route)– only named form inputs will be submitted
• Generating the form in Rails– often can use URI helper for action, since it’s
just the URI part of a route (still need method)– form field helpers (see api.rubyonrails.org)
generate conveniently-named form inputs
http://pastebin.com/k8Y49EhE
http://pastebin.com/3dGWsSq8
5
END
8
Redirection, the Flash and the Session
(Engineering Software as a Service §4.7)
© 2013 Armando Fox & David Patterson, all rights reserved
9
Receiving the Form
• A neat trick: use debugger to inspect what’s going on– start with rails server --debugger– insert debugger where you want to stop – details & command summary: ESaaS §4.7
• NOTE: params[:movie] is a hash, because of the way we named form fields– Conveniently, just what Movie.create! wants
10
What View Should Be Rendered for Create Action?
• Idiom: redirect user to a more useful page– e.g., list of movies, if create is successful– e.g., New Movie form, if unsuccessful
• Redirect triggers a whole new HTTP request– How to inform user why they were redirected?
• Solution: flash[]—quacks like a hash that persists until end of next request– flash[:notice] conventionally for information– flash[:warning] conventionally for “errors”
11
Flash & Session
• session[]: like a hash that persists forever– reset_session nukes the whole thing– session.delete(:some_key), like a hash
• By default, cookies store entire contents of session & flash– Alternative: store Rails sessions in DB table– (Search “rails session use database table”)– Another alternative: store sessions in a
“NoSQL” storage system, like memcached
12
END
True - but a bad idea!
False, because you can’t put arbitrary objects into a hashFalse, because session[] isn’t really a hash, it just quacks like one
True - knock yourself out!☐
☐
☐
☐
13
Ben Bitdiddle says: “You can put arbitrary objects (not just “simple” ones like ints and strings) into the session[].” What do you think?
14
END
15
Administrivia
• Get account for “public projects” on PivotalTracker.com, add the TAs and me– Public projects are free
• Get account on CodeClimate.com– Provides code analysis– Free for an open source (OSS) repo– Sign in with your GitHub account
16
END
17
Finishing CRUD(Engineering Software as a Service §4.8)
© 2013 Armando Fox & David Patterson, all rights reserved
18
Edit/Update Pair is Analogous to New/Create Pair
• What’s the same?– 1st action retrieves form, 2nd action submits it– “submit” uses redirect (to show action for movie)
rather than rendering its own view• What’s different?
– Form should appear with existing values filled in: retrieve existing Movie first
– Form action uses PUT rather than POSThttp://pastebin.com/VV8ekFcn
http://pastebin.com/0drjjxGa
19
Destroy is Easy
• Remember, destroy is an instance method– Find the movie first...then destroy it– Send user back to Index
def destroy @movie = Movie.find(params[:id]) @movie.destroy flash[:notice] = "Movie '#{@movie.title}' deleted."
redirect_to movies_path end
20
END
Only this request and the next request
Only this request - once the view is rendered, the variable is reset to nilIt depends on whether the instance variable was declared static
This request and all subsequent requests☐
☐
☐
☐
21
If you set an instance variable in a controller method, its value will be retained for how long?
22
END
23
Fallacies, Pitfalls, and Perspectives on SaaS-on-Rails(Engineering Software as a Service §4.9 -
4.11)
© 2013 Armando Fox & David Patterson, all rights reserved
24
Fat Controllers & Fat Views
• Really easy to fall into “fat controllers” trap– Controller is first place touched in your code – Temptation: start coding in controller method
• Fat views– “All I need is this for-loop”– “....and this extra code to sort the list of movies
differently”– “...and this conditional, in case user is not
logged in”• No! That’s for model, controller, helpers
25
Designing for Service-Oriented Architecture
• A benefit of thin controllers & views: easy to retarget your app to SOA
• Typically, SOA calls will expect XML or JSON (JavaScript Object Notation, looks like nested hashes) instead of HTML
• A trivial controller change accomplishes this
http://pastebin.com/bT16LhJ4
26
END
Only (b)
Only (b) and (c)
Only (a) and (c)
Only (a) and (b)☐
☐
☐
☐
Which steps are ALWAYS required when adding a new action 'foo' to the Movie model of a Rails app:
(a) Ensure there is a template to render in app/views/movies/foo.html.haml (or .html.erb, etc)
(b) Ensure a route exists in config/routes.rb(c) Implement helper method to generate necessary route-
helper URIs
28
END
Introducing Cucumber &
Capybara(Engineering Software as a Service §7.6)
29© 2013 Armando Fox & David Patterson, all rights reserved
User Stories => Acceptance Tests?
• Wouldn’t it be great to automatically map 3x5 card user stories into tests for user to decide if accept the app?
• How would you match the English text to test code?
• How could you run the tests without a human in the loop to perform the actions?
30
Cucumber: Big Idea
• Tests from customer-friendly user stories– Acceptance: ensure satisfied customer– Integration: ensure interfaces between modules
consistent assumptions, communicate correctly • Cucumber meets halfway between
customer and developer – User stories are not code, so clear to customer
and can be used to reach agreement – Also not completely freeform, so can connect to
real tests31
Example User Story
Feature: User can manually add movie
Scenario: Add a movie Given I am on the RottenPotatoes home page When I follow "Add new movie" Then I should be on the Create New Movie page When I fill in "Title" with "Men In Black" And I select "PG-13" from "Rating" And I press "Save Changes" Then I should be on the RottenPotatoes home page And I should see "Men In Black"
32
3 to 8 Steps / Scenario
≥1 Scenarios / Feature
1 Feature
Cucumber User Story, Feature, and Steps
• User story: refers to single feature • Feature: ≥1 scenarios that show
different ways a feature is used – Keywords Feature and Scenario
identify respective components– Kept in .feature files
• Scenario: 3 - 8 steps that describe scenario
• Step definitions: Ruby code to test steps– Kept in X_controller.rb files
33
5 Step Keywords
1. Given steps represent state of world before event: preconditions
2. When steps represent event – e.g., simulate user pushing a button
3. Then steps represent expected postconditions; check if true
4. / 5. And & But extend previous step
34
Steps => Step Definitions via Regular Expressions
• Regexes match English phrases in steps of scenarios to step definitions!
• Given /^(?:|I )am on (.+)$/• “I am on the Rotten Potatoes home page”
• Step definitions (Ruby code) likely use captured string– “Rotten Potatoes home page”
35
More on “Cuke”
• Need to install Cucumber Gem– Just for test and development environment, not
for production environment• When Cucumber installed, it creates
commonly used step definitions• Need a test database to run app• Then edit .features file to add features
36
Fake User to Try Scenarios?
• Need tool that pretends to be the user to follow scenarios of user stories
• Capybara simulates browser– Can interact with app to
receive pages– Parse the HTML– Submit forms as a user would
37
38
END
A Feature has one or more Scenarios, which are composed typically of 3 to 8 StepsSteps use Given for current state, When for actions, and Then for consequences of actions
Cucumber matches step definitions to scenario steps using regexes, and Capybara pretends to be a user that interacts with the SaaS app accordingly
Step definitions are in Ruby, and are similar to method calls, while steps are in English and are similar to method definitions
39
Which is FALSE about Cucumber and Capybara?
1.
2.
3.
4.
40
END
Running Cucumber
and Capybara (Engineering Software as a Service §7.7)
41© 2013 Armando Fox & David Patterson, all rights reserved
Red-Yellow-Green Analysis
• Cucumber colors steps• Green for passing• Yellow for not yet implemented• Red for failing
(then following steps are Blue)• Goal: Make all steps green
for pass
(Hence green vegetable for name of tool)
42
Demo
• Add feature to cover existing functionality– Note: This example is doing it in wrong order –
should write tests first– Just done for pedagogic reasons
• (Or can look at screencast:
http://vimeo.com/34754747)
43
44
END
Enhancing Rotten Potatoes
Again(Engineering Software
as a Service §7.8)
45© 2013 Armando Fox & David Patterson, all rights reserved
Add a Real New Feature?
• What if we add something harder?– e.g., includes form to fill in– e.g., needs a User Interface– e.g., needs to add route to connect view to
controller– e.g., includes both a happy path and a sad path
46
Integrated with The Movie Database (TMDb)
• New Feature: Populate from TMDb, versus enter information by hand
• Need to add ability to search TMDb from Rotten Potatoes home page
• Need LoFi UI and Storyboard
47
Storyboard TMDb
• Figure 7.6 ofEngineering Software as aService
48
Search TMDb User Story(Fig. 7.7 ESAAS)
Feature: User can add movie by searching in The Movie Database (TMDb)
As a movie fan So that I can add new movies without manual tedium I want to add movies by looking up their details in TMDbScenario: Try to add nonexistent movie (sad path) Given I am on the RottenPotatoes home page Then I should see "Search TMDb for a movie" When I fill in "Search Terms" with "Movie That Does Not
Exist" And I press "Search TMDb" Then I should be on the RottenPotatoes home page And I should see "'Movie That Does Not Exist' was not
found in TMDb."
49
Haml for Search TMDb Page(Fig. 7.8 ESAAS)
-# add to end of app/views/movies/index.html.haml:
%h1 Search TMDb for a movie
= form_tag :action => 'search_tmdb' do
%label{:for => 'search_terms'} Search Terms = text_field_tag 'search_terms' = submit_tag 'Search TMDb'
50
http://pastebin/18yYBVbC
Haml Expansion Last Two Lines
• This Haml: = text_field_tag 'search_terms' = submit_tag 'Search TMDb’• Turns into this HTML:<label for='search_terms'>Search Terms</label>
<input id="search_terms" name="search_terms" type="text" />
• for attribute of label tag matches id attribute of input tag, from text_field_tag helper (above)
51
Try Cucumber?
• If try Cucumber, it fails• Missing the route• Also MoviesController#search_tmdb
is controller action that should receive form, yet not in movies_controller.rb
• Should use Test Driven Development (future lecture) to implement method search_tmdb
• Instead, to finish sad path, add fake controller method that always fails
52
Trigger Fake Controller When Form is POSTed (Fig. 7.9)
# add to routes.rb, just before or just after 'resources :movies' :
# Route that posts 'Search TMDb' formpost '/movies/search_tmdb'
53
http://pastebin/FrfkF6pd
Fake Controller Method: Will Fail Finding Movie (Fig. 7.9)
# add to movies_controller.rb, anywhere inside# 'class MoviesController < ApplicationController':
def search_tmdb # hardwired to simulate failure flash[:warning] = "'#{params[:search_terms]}' was not found in TMDb."
redirect_to movies_pathend
54
http:/pastebin/smwxv70i
55
END
56
Which statement is TRUE?
Usually you code the sad paths first
A sad path can pass without having code written needed to make a happy path pass
None of the above is true
Usually you complete the Behavior Driven Design phase with Cucumber before starting the Test Driven Development phase with RSpec
1.
2.
3.
4.
57
END
Running Rotten Potatoes Again
(Engineering Software as a Service §7.8)
58© 2013 Armando Fox & David Patterson, all rights reserved
Demo
• Add feature to search for movie in TMDb– Note: This will be a sad path, in that won’t find it– Will use fake method
(until future when implement it using TDD)• (Or can look at screencast:
http://vimeo.com/34754766)
59
Happy Path of TMDb
• Find an existing movie, should return to Rotten Potatoes home page
• But some steps same on sad path and happy path
• How to make it DRY?• Background means steps performed
before each scenario
60
TMDb w/2 Scenarios: Background (Fig. 7.10)
Feature: User can add movie by searching for it in The Movie Database (TMDb)
As a movie fan So that I can add new movies
without manual tedium I want to add movies by
looking up their details in TMDb
Background: Start from the Search form on the home page
Given I am on the RottenPotatoes home page
Then I should see "Search TMDb for a movie”
Scenario: Try to add nonexistent
movie (sad path)
When I fill in "Search Terms" with "Movie That Does Not Exist"
And I press "Search TMDb" Then I should be on the
RottenPotatoes home page And I should see "'Movie That
Does Not Exist' was not found in TMDb.”
Scenario: Try to add existing movie (happy path)
When I fill in "Search Terms" with "Inception"
And I press "Search TMDb" Then I should be on the
RottenPotatoes home page And I should see "Inception”
61
http://pastebin/icQGrYCV
Cucumber Summary
• New feature => UI for feature, write new step definitions, even write new methods before Cucumber can color steps green
• Usually do happy paths first• Background lets us DRY out scenarios of
same feature• BDD/Cucumber test behavior; TDD/RSpec
in folllowing chapter is how write methods to make all scenarios pass
62
63
END
And in Conclusion
• Cucumber – “magically” maps 3x5 card user stories onto acceptance tests and integration tests for the application
64