Using Capybara and BDD Tests to Build a Homepage
In this video we'll use behavior driven development to create an end-to-end integration test using Capybara to build a homepage.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

In this guide, we are going to do two things. First, we are going to create a test to check if our testing environment is working fine, and second, we are going to start creating the pages.

To start off, let's create our homepage. We'll begin by creating a directory called features, and to do that we'll run the command:

mkdir spec/features

Next, to create a static file, use the command:

touch spec/features/static_spec.rb

Open the static_spec.rb file, and put the following code in it.

# spec/features/static_spec.rb

require 'rails_helper'

describe 'navigate' do
  describe 'homepage' do
    it 'can be reached successfully' do
      visit root_path
      expect(page.status_code).to eq(200)
    end
  end
end

In this code, we are calling a gem called rails_helper, so we can access its methods. Then, we are creating a describe block called navigate and then, we are going to see if we get to the homepage. Essentially, this code is going to mimic going to the browser and checking if the root_path exists. Finally, it is expecting the status code of the page to be equal to 200, which means, the page exists. This is the HTTP status code meaning success.

Now, to test this, go to your command line and type:

rspec

large

This test will obviously fail because we haven't created a homepage yet. However, it follows the test-driven development process. The obvious advantage with test-driven development is you'll get things working as minimally as possible, so you don't end up with bulky code and performance issues.

Now, if you read through the error message, you'll find that a database called Overtime_test doesn't exist. To fix that, let's create a database with the command:

bundle exec rake db:create
bundle exec rake db:migrate

With these commands we are both creating and migrating to the database. Now, if you run rspec, you'll get

large

Though the error is fixed, we have others that need to be corrected. One of them is that root_path is not defined.

To set this root_path, go to a file called routes.rb. This file will have quite a few comments, so feel free to delete them all.

Next, add this code:

# config/routes.rb

root to: 'static#homepage'

Once you've done this, go back to the command line and run rspec again.

large

This time, the error says it's looking for something called a StaticController. To fix this error, go to app/controllers and create a file called static_controller.rb. Inside this file, add the following code:

# app/controllers/static_controller.rb

class StaticController < ApplicationController
  def homepage
  end
end

If you run rspec now, you'll get another error.

large

This means there is no view page. So, go to your views folder, create a sub-folder called static and inside it a file called homepage.html.erb.

This should fix everything for us.

large

See how far we've moved along with test-driven development, and how it's making us to implement the minimal amount of needed for a successful run? This is a much better way to build applications compared with using tools such as scaffolds that bloat a project's code.

To see this page on the browser, go to homepage.html.erb file and add a simple tag like this:

<!-- app/views/static/homepage.html.erb -->

<h1>From the homepage</h1>

Start the rails server with the command rails s, and open your browser and type localhost:3000. This should bring up the homepage.

large

Finally, let's push everything to github with the commands

git add
git ci -m "Add rspec, capybara and setup homepage"
git push

You can go check these files in the github repo.

In the next guide, we'll put together some models to get the development process going.

Resources