How to test a Middleman static site

MIDDLEMAN

RSPEC

May 21 2017 · 6 minutes read

One of the many advantages of static sites is the simplicity to setup, configure and maintain. The majority of static sites aren't huge. Some are simple blogs, others are project sites and some small to medium marketing sites. However, you would be mistaken to think just because it is a static site it doesn't require an automated test suite.

Imagine the scenario of a small marketing site for a product. It has a homepage, some information on pricing and set of feature pages. Most importantly its sole purpose is to convince users that your product is great. The static site's purpose is to acquire those users. So why would you not treat your static site as a first class citizen and give it the love and care you would for your main product? That means having tests to cover the workflows that a user might go through before signing up for your product.

To setup an automated test suite in Middleman first create a new Middleman static site or open your existing site in your editor of choice. As part of our test suite we will be using RSpec and Capybara. To install these as dependencies, open up the Gemfile and add the following:

  group :test do
    gem "rspec", "~> 3.4"
    gem "capybara", "~> 2.5"
  end

Then run bundler:

  $ bundle install

We can now setup the configuration for RSpec and Capybara. Create the required directories and files:

  $ mkdir -p spec/features && touch spec/spec_helper.rb

This will have created a new directory called spec/features where all of our tests will live. This will have also created a file called spec_helper.rb where all of our test configuration will live.

  spec
  ├── features
  └── spec_helper.rb

Let's now setup the test configuration. Open up spec_helper.rb and add the following:

  require "rspec"
  require "capybara/rspec"

  require "middleman-core"
  require "middleman-core/rack"

  middleman_app = ::Middleman::Application.new

  Capybara.app = ::Middleman::Rack.new(middleman_app).to_app do
    set :root, File.expand_path(File.join(File.dirname(__FILE__), ".."))
    set :environment, :development
    set :show_exceptions, false
  end

Now that we have our spec configuration setup we can add our first spec.

  $ touch spec/features/index_spec.rb

Within our index_spec.rb we can add some simple tests:

  require "spec_helper"

  describe "index page", type: :feature do
    before do
      visit "/"
    end

    it "responds successfully" do
      expect(page.status_code).to eql(200)
    end

    it "has a title" do
      expect(page).to have_title("Welcome to Middleman")
    end

    it "has a heading" do
      expect(page).to have_selector("h1", text: "Middleman is Running")
    end
  end

The first test checks that when we visit the page hosted at / then we will receive HTTP status code of 200. The second test checks that the page title is set to "Welcome to Middleman". Finally, the third test checks there is a heading element with the text "Middleman is Running".

We can now run the test suite:

  $ bundle exec rspec spec
  ...

  Finished in 0.02679 seconds (files took 1.29 seconds to load)
  3 examples, 0 failures

Look at those sweet, sweet dots. A developer's best friend, a passing test suite.

These are quite simple tests but it is not hard to imagine having tests that click throughout your static site, checking those all important workflows. So go out there and test your limits by choosing to add a test suite for your static site.

Thank you to Simon Rice for originally coming up with this approach.