writelesscode

On Rails, Ext JS, Netzke, and nomadic lifestyle

Testing Ext JS/Rails components with Cucumber and WebDriver in Netzke
January 27, 2011

Netzke Basepack Cucumber testsIf you're maintaining an open source project, a peace of mind is impossible without a decent test coverage. I've been successfully testing Netzke using Cucumber and Selenium/WebDriver (with some complementary RSpec tests as well). In this brief blogpost I will show you an example of a typical test scenario in Netzke Basepack, along with the code for a Cucumber step that communicates to the Ext JS component being tested. At the end, you can enjoy a little video I recorded of running complete Cucumber test suite on Basepack - I just thought it looked fun!

Here's an example of a scenario that tests inline editing in Basepack::GridPanel:

Scenario: Inline editing
  Given a book exists with title: "Magus", exemplars: 100
  When I go to the BookGrid test page
  And I edit row 1 of the grid with title: "Collector", exemplars: 200
  And I press "Apply"
  And I wait for the response from the server
  Then the grid should have 0 modified records
  And a book should exist with title: "Collector", exemplars: 200
  But a book should not exist with title: "Magus"

This scenario makes use of the BookGrid component defined in the test application bundled with Basepack.

And here's the implementation of the step that checks the amount of modified records in the grid:

Then /^the grid should have (\d+) modified records$/ do |n|
  page.driver.browser.execute_script(<<-JS).should == n.to_i
    var components = [];
    for (var cmp in Netzke.page) { components.push(cmp); }
    var grid = Netzke.page[components[0]];
    return grid.getStore().getModifiedRecords().length;
  JS
end

It's simply assuming that the first component on the page is the grid that we're testing. Other than that, both the scenario and the step implementation are rather straightforward, aren't they? As you may notice, I'm using the functionality of the Ext JS grid itself to do the necessary check - thus not messing with the generated DOM directly. I find this approach working pretty well.

I hope this blogpost will inspire you to write tests for your own components if aren't doing this already. You may browse the features and test applications for netzke-core and netzke-basepack to see more examples of how Ext JS components can be tested with Cucumber. Below is a little video that demos the complete run of the Cucumber tests for Netzke Basepack (in its actual state).

Happy testing, and don't forget to follow me on Twitter here!

Netzke Basepack tests from Nomad Coder on Vimeo.

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

Tags

  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)