On Rails, Ext JS, Netzke, and nomadic lifestyle

Testing with CoffeeScript and Mocha
February 25, 2013

Integration testing of Netzke Core requires running a lot of JavaScript, which, before the rewrite, resulted in numerous custom Cucumber steps that served as wrappers around that JavaScript code. The tests used to read pretty nicely, but the code overhead was too high, and performance very low, as for each spec a page containing the tested component would get reloaded. So, I decided to have a look at JavaScript testing frameworks, and after trying out Jasmine first, decided that Mocha would serve me better (thanks @ptico for pointing me in that direction). After enabling CoffeeScript for writing actual specs, and creating a few custom Ext JS-related helpers, I ended up with specs that read almost as good as Cucumber features, at the same time written in a real programming language, not Gherkin:

<% highlight :coffeescript do %> describe "Actions component", -> it "should handle clicking a button", -> click button "Simple action" expectToSee header "Simple action triggered"

it "should show certain buttons disabled", -> expectDisabled button "Disabled action"

it "should not show buttons for excluded actions", -> expectToNotSee button "Excluded action" ~~~

And for asynchronous scenarios:

<% highlight :coffeescript do %> describe "Plugins component", -> it "should be able to call its server part as defined in PluginWithEndpoints", (done) -> click tool 'gear' wait -> expectToSee header "Response from server side of PluginWithEndpoints" done() ~~~

You can find the rest of the Mocha features in spec/mocha. Every file from that folder, corresponding to an equally named testing component, is being automatically picked up by the setup and turned into a separate RSpec spec. This way there's generally one Mocha feature for each component being tested. The specs inside that feature are being run all at once, without the need to reload the page. As a result, it's much faster now (also due to the fact that the assertions are now being executed directly in the browser).

Individual features can be run manually in any browser (e.g. in order to analyze the failures) by appending "?spec={feature}" to the URL of a tested component, for example: http://core-test-app.dev/components/Endpoints?spec=endpoints. This will run spec/mocha/endpoints.js.coffee spec on the test/core_test_app/components/endpoints.rb component:

Mocha spec

I also want to add that most of the testing components have been re-worked and better named in order to give the developer a clear message of what exactly is being tested. Hopefully this will make understanding Netzke code an easier task, too.

comments powered by Disqus

Max Gorin

Web developer and digital roamer since 2008. Author of Netzke. Feminist, atheist, life hacker, and common sense devotee.

Twitter | GitHub | LinkedIn


  1. tutorials (14)
  2. netzke (26)
  3. rails (1)
  4. 0-7 (3)
  5. testing (2)
  6. videos (1)
  7. speaking (5)
  8. 0-8 (5)
  9. productivity (1)
  10. frontend (1)
  11. web-development (1)

By Year

  1. 2016 (1)
  2. 2015 (3)
  3. 2014 (2)
  4. 2013 (4)
  5. 2012 (5)
  6. 2011 (3)
  7. 2010 (6)
  8. 2009 (4)
  9. 2008 (1)