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