Part 2 - Adding Static Pages To Your Todo Application
Now it’s time to add some static pages to our rails application. To keep things simple, we’re just going to add 2 pages – a home page and an about page.
Sidebar: Using Git
We’ll be using a version control system called Git throughout this tutorial. Use of this is optional, but it is recommended you learn Git at some point since that is currently what the Ruby on Rails world uses to manage source code. Michael Hartl talks uses it throughout the Rails tutorial (available for free online) or you can search for it.
git checkout -b part-2-static
Create the necessary directories
To make it easy, we’ll use the rails generator at the command prompt as follows:
rails g controller Pages home about
You should see something like:
We just asked rails to automatically generate a Pages controller with the associated methods and views named “home” and “about”. The files that we are interested in are app/controllers/pages_controller.rb, app/views/pages/home.html.erb, and app/views/pages/about.html.erb
In addition, if you open up config/routes.rb, you should see that rails added 2 routes automatically for us.
get "pages/home" get "pages/about"
This tells rails which view file to display when a URI (uniform resource identifier) is typed into the browser address bar.
Let’s boot up the rails server to see this in action
At the command prompt, type:
This will bring up the rails server, at which point, you should open your browser address bar and type http://localhost:3000/pages/home
You should see something like the following:
This is not what our final home page will look like, but it’s enough to illustrate the concepts for our purposes. What rails is doing is executing code in the “home” method in our rails controller file (see pages_controller.rb – there actually isn’t any code in the controller at this point) and passing any associated data to the view file home.html.erb and rendering it.
A similar mechanism occurs when you navigate to http://localhost:3000/pages/about
Minimal Testing and TDD
One of the things the Rails community is sweet on is TDD, or test driven development. So for the sake of completeness, I’m going to do some minimal integration testing on these views. As you progress with your rails skills, you’ll get a better feel for what type of testing is appropriate and when to apply it. But for simplicity’s sake, we begin with an integration test (request spec). Type the following at the command prompt:
rails generate integration_test pages
Now open spec/requests/pagesspec.rb. Delete (or comment out using the # sign) everything between the lines _describe “Pages” do and end block. We’re going to write our own tests.
We want to ensure that when a user navigates to our home or about page, that the word “Todo” appears somewhere in the content of that page. Here is what the test looks like:
require 'spec_helper' describe "Pages" do describe "home page" do it "should have content ‘Todo'" do visit "/pages/home" page.should have_content("Todo Demo") end describe "about page" do it "should have content 'Todo'" do visit "/pages/about" page.should have_content("Todo Demo") end end end
We are using Capybara and RSpec to write our tests. Visit tells uses the Capybara method visit to simulate a browser visiting that URI while the line page.should havecontent(“Todo Demo”)_ tests to see that the resulting page has the content we want to see.
Making Our Tests Green
Green is synonymous with “pass”, which is what we want our tests to do. To see if our tests pass:
bundle exec rspec spec/requests/pages_spec.rb
You should see something like:
Our tests fail, but that’s a good thing
With TDD, you write a failing test first, and then you write the code that makes it pass.
To make our tests pass, we’re going to edit our views. Open app/views/pages/home.html.erb and edit itas follows:
<h1>Pages#home</h1> <p> This is the home page for the Todo Demo App. Find me in app/views/pages/home.html.erb </p> Open app/views/pages/about.html.erb and edit itas follows: <h1>Pages#about</h1> <p> This is the about page for the Todo Demo App. Find me in app/views/pages/about.html.erb </p>
Now our tests are passing
When you run the tests again, you should see a status message in the terminal window like “2 examples, 0 failures”.
Sidebar: Using Git
git add .
git commit -m “rspec tests green for static pages”
git checkout master
git merge part-2-static
What we’ve covered so far and where we’re headed
Now that we’ve gotten a couple of static pages up and running for our application and gotten a bit of testing under our belt, we’re going to dive in to building the rest of our application. Along the way, we’re going to upgrade the look and feel so it looks nicer, but for now, we’ll make do.
- I’m keeping a public repo of this application at my github account. You can download the source code there.
- Rails Tutorial by Michael Hartl