How To Add RSpec Tests To Jekyll

Recently, I was trying to build a website for myself using GitHub Pages. I didn’t want anything too fancy, just something where I can put up my resume and pages about my personal projects. Since it wasn’t going to be very large (10–20 pages), I decided to use Jekyll as the CMS as it is easy to get started and expand on later ( what I am showing you here ). I got to a point where I wanted to start adding a navigation bar and some javascript to my site, but I didn’t have a way of testing to be sure I get the same results on each page. There is no testing suite integrated into Jekyll by default, so I set out to add my own that would suit my needs. I already have some experience using R-Spec, a Behaviour-Driven-Development framework for writing spec tests in the Ruby programming language. So I decided that I would use R-spec to be the test runner in my project. Capybara is a browser driver that will navigate to the pages on our website so R-Spec can test them. Using Rspec and Capybara, this is how to build a testing suite for Jekyll.

For this project, we need to create a blank jekyll blog.

jekyll new my-blog

This will create the blank jekyll blog with the starting template. If you run ‘jekyll serve’ in the directory, you can open it up in the web browser and see this.

As you can see we have a blank page that can now use as a template for our integration tests. The first step after establishing our project is to install the gems we will be needing. Add this namespace to your gemfile. This will require these gems whenever you manually require the namespace, that way you are not slowing down your site build when you don’t need to.

After that just run ‘bundle install’ in the command line and it will install these gems in your project. Next we need to modify our _config.yaml file. This is the base config file for jekyll, and where we will be defining which pages we want to actually test. Since our testing framework is not linked to jekyll explicitly, we need to tell it which pages and where they are for it to test them. Add these lines to the bottom of the config file:

Finally we need to actually setup the tests themselves. Run ‘rspec — init’ in the console in the my-blog directory. This will create a spec folder and a test helper. Inside this folder, modify the spec helper to look like this below:

Next, inside the spec folder, create a feature folder that will tell rspec that this is a feature test. Inside this folder, create a file called ‘page_spec.rb’. Inside this file, paste the test from down below.

And now you have your tests! You can run rspec in the folder and it will now test your blog!