Testing Highcharts (JS charting library) with Cucumber

Question

I have an application in which we help our clients visualize data via graphs rendered with highcharts. The data processing and visualization is the primary value our application provides, in other words its important and should be tested.

I am using cucumber to write integration tests for the application, I would like to include some basic tests of our highcharts implementation. I am especially keen to test that the correct data is being plotted as well as that custom ajax interactions are working correctly. An example feature might look something like this:

Feature: Plot Related Alarm Data
  As an project owner
  I want to see antecedent data plotted around the time of the alarm
  So that I can diagnose the issue and save gobs of money.

  Background:
    Given a bunch of stuff is set up
    And I am logged in
    # ...

  Scenario: Alarm data is plotted
    Given I have an alarm
    # ...
    When I visit the alarm show page
    Then I should see 5 days of data in my graph

  Scenario: Alarm data is clicked
    Given # ...
    When # ...
    And I click on a data point
    Then I should be on the data page

Any experience testing things like this and which tool Selenium, Watir, etc was used would be appreciated.

Answer 1

A strategy that I've used:

1. render the data in an HTML table
2. generate the chart in JavaScript using the data from that table (e.g. http://www.highcharts.com/demo/column-parsed)
3. use Cucumber just to verify that the table contains the expected data using table diffs via tableish