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:

create app/controllers/pages_controller.rb
route get "pages/about"
route get "pages/home"
invoke erb
create app/views/pages
create app/views/pages/home.html.erb
create app/views/pages/about.html.erb
invoke rspec
create spec/controllers/pages_controller_spec.rb
create spec/views/pages
create spec/views/pages/home.html.erb_spec.rb
create spec/views/pages/about.html.erb_spec.rb
invoke helper
create app/helpers/pages_helper.rb
invoke rspec
create spec/helpers/pages_helper_spec.rb
invoke assets
invoke coffee
create app/assets/javascripts/pages.js.coffee
invoke scss
create app/assets/stylesheets/pages.css.scss

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:

rails s

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 have_content(“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.

Resources:

1. I’m keeping a public repo of this application at my github account. You can download the source code there.
2. Rails Tutorial by Michael Hartl