How to Create an Index View Using BDD in Rails
In this section we're going to build out the index view for our posts using BDD. To start with, I'm going to create a file called post_spec.rb inside the spec/features directory for our integration tests.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

In this section we're going to build out the index view for our posts using BDD. To start with, I'm going to create a file called post_spec.rb inside the spec/features directory for our integration tests. This code is going to leverage the Capybara testing framework and is going to mimic what happens inside the browser.

This is the code for this page:

# spec/post_spec.rb

require 'rails_helper'

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

Inside the navigate block, we are creating another block called index that mimics the page where employees get to see their overtime hours. In the next line, we are just going to check if this page can be reached at all.

Like we did in static_spec.rb, we are checking if the status code of the page is equal to 200, which means, it exists. We know that we have a posts_path route, which was created by the resource generator.

To check this test, go to your terminal and run rspec, you'll see that the output is:

large

The output states that there is no action called index inside PostsController. So, we are going to fix it. Open posts_controller.rb and add the index action inside it, like this:

# app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def index
  end
end

Next, let's create a view template for our index page. To do that, go to views/posts, and create a file called index.html.erb. Now, run the test again, and it should pass.

large

Let's now work on the content. Go back to post_spec.rb, and create another test, like this:

# spec/post_spec.rb

require 'rails_helper'

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

    it 'has a title of Posts' do
      visit posts_path
      expect(page).to have_content(/Posts/)
    end
  end
end

In this test, we are checking if there's any content that contains the word Posts on the index page. When you run rspec, this test will obviously fail because our index page is empty. To fix this, go to index.html.erb and type the following code

<!-- app/views/posts/index.html.erb -->

<h1>Posts</h1>

If you run the rspec again, it should now pass.

Next, let's test this in the browser. Start server with the command rails s and open localhost:3000/posts in the browser. This is what it should look like.

large

So it's good that we have the functionality working. However this page is pretty plain looking, so we'll work on that in the next guide. For now, let's upload these changes to github.

Resources