How to Test Rails App using Mocha JS and Chai JS?

It has been quite some time since we started writing RSpecs for our Rails applications. We had written tests for our rails models, views and controllers. So whole MVC part was covered with tests.

In the beginning we had very less JavaScript code in our applications but with the time passing by our app’s Javascript code increased exponentially. With more than 1000 Javascript functions, we started to feel we need tests for this since we cannot test all this manually.

After digging many links and resources we found following popular Javascript testing frameworks which works with our rails app.

1. Konacha (Mocha JS and Chai JS)
2. Teaspoon

We were amused by the syntax provided by konacha gem.

expect(add(1, 2)).to.equal(3);

This is very similar to our RSpec syntax. And since we were familiar to rspecs we decided to choose konacha gem as our alternative. So why to wait, let us start integrating this with our rails app.

How to add?

We just need to add it to our gemfile

group :test, :development do
gem 'konacha'
end

Just do $ bundle install in your command line. And we are good to go!

How it can be used?

Now we need to create a directory named javascripts in our spec folder. The following command will take care of it!

$ mkdir spec/javascripts

Any test files that we add in this folder must have suffix as _spec or _tests.

Note: We can change the above suffix in the config/initializers/konacha.rbbut I advise not to change that configuration and try to keep things simple 🙂

Life is really simple, but we insist on making it complicated… – Confucius

We can write our tests in Javascript(.js)or CoffeeScript(.coffee). Lets take a very simple Javascript example. Suppose you want to test the Javascript code written in file at app/assets/javascripts/calculator.js

Now we need to create spec file for testing these Javascript functions. Just create a file spec/javascripts/calculator_spec.js. It is not mandatory to use this naming convention but doing so will surely make things systematic.

In above code describe and it block are analogous to RSpec blocks. Mocha JS provides describe(), it(), before(), after(), beforeEach(), and afterEach() blocks. Chai JS provides expect (expectations), assert(assertions) and should(should matchers).

The very first line //= require calculator in our calculator_spec.js adds the app/assets/javascripts/calculator.js file in our spec, so it can be available for testing. You add as many Javascript files here. Generally we need to add multiple Javascript files in case if there is any dependency among them.

Everything is ready to test. Perfect! Lets see them running!

We can run them either in console (command line) or in browser itself. Lets have a look at both these methods.

How to run tests in browser?

Just a simple command and you are good to go!

$ bundle exec rake konacha:serve

Now we can see our test running at http://localhost:3500 . It will look like below.

How to run tests from command line?

Now for doing this step we need to initialise few things. Create a file config/initializers/konacha.rb and paste in below contents.

Here we tell konacha that spec directory is spec/javascripts , also to find the spec files you need to match the files having _spec and _test in their filenames. We also need to specify web driver such as :webkit or :seleniumor :poltergeist so it can run the test headlessly (without GUI or console based).

Further we need to run the below command.

$ bundle exec rake konacha:run

You will see results like below.

Above screenshot shows there is one failed test and the rests are passed!

We can also run individual specs by below command.

$ bundle exec rake konacha:run SPEC=individual_spec_file_path

How can I test views?

If you have JavaScript templates such as EJS, Handlebars or Mustache JS, then you can test your views with konacha. But if you are having your templates in ERB /HAML / Slim ,then you need to convert it into a Javascript template. You need to do so because your ruby template may have instance variables and those variables are set from controllers. So this make it almost impossible to test. For testing ERB, HAML ruby view files we need to use capybara integration tests or as a other alternative lets convert them into static templates.

Lets convert our erb template into ejs template just by adding static values for testing purpose.

First of all we need to add the gem ejs into our gemfile.

group :development, :test do
gem "ejs"
end

As a best practice we must organise our templates at one common place. Lets create directory spec/javascripts/templates and add our all static templates there.

spec/javascripts/templates/static_template.jst.ejs

To make this available for our tests we must add following contents to file spec/javascripts/spec_helper.js .

//= require_tree ./templates

This will make all the templates available for testing!

Now lets add the tests at spec/javascripts/test_static_template_spec.js

In the first two lines we say add jquery and spec_helper file.

JST['templates/<*file_name*>']()

It compiles the JST template to HTML view. And we replace the body with this JST view so we can mimic what we want to test. After the view is created we can just write our expectations and assertions.

Now just run your tests they must pass now 🙂 That’s it!

Let me know which Javascript testing gems you use with your rails applications.

Which JS testing gem you use with Ruby on Rails applications? #rails #rubyonrails #javascript #tests

– Ankur Vyas (@ankurvyas27) July 2, 2017

Thanks for reading. If you liked it, press the heart button 🙂

At BoTree we help individuals, startups and businesses build their ideas from Canvas to Cloud. We fix bugs for free, forever. We can help you with Support and Maintenance of existing applications not developed by us. We also provide 24 x 7 support to all our clients.

Click here for more details…

At BoTree Technologies, we build enterprise applications with our RoR team of 25+ engineers.

We also specialize in Python, RPA, AI, Django, JavaScript and ReactJS.

Consulting is free – let us help you grow!