Testing translate3d animations with Test/Unit, Poltergeist, Capybara and PhantomJS

README.md

Testing translate3d animations with Test/Unit, Poltergeist, Capybara and PhantomJS

I am working on a jQuery plugin and needed a way to "integration" test it to see if everything in the browser worked correctly. I wanted an automatic testing solution and have looked at QUnit and such but it seemed an even better way to actually test it with a fake browser.

This example contains the following:

• A Rack app that loads up index.html and javascripts from the demo/ directory.
• My SwipeTest testcase.
• My test_helper that creates a TestCase classed that includes and sets up Capybara and poltergeist.

In the test_swipe_move_page method on the SwipeTest case, you can see that I visit "/" in the Rack app, which is the demo for the plugin.

Then, I resize the browser window of my driver to fit an iPad resolution.

The next lines, simulate a "swipe" movement in PhantomJS trough Poltergeist.

page.driver.mouse_down_at(100, 100)
page.driver.mouse_move_at(50, 100)
page.driver.mouse_up_at(20, 100)

Then I assert some functionality in the plugin that should move the specified div with the .pages selector with a -webkit-transform: translate3d() call.

The private css_matrix_for_selector method evaluates some JavaScript in PhantomJS to grab the CSS3 matrix and interprate the coordinates trough a Regexp.

This is a great way of "integration" testing my JavaScript code, while still using some awesome Ruby tools that can be run with "rake test"

More info

Check out http://github.com/michiels/jquery-pageswipe for updates and the total picture.

app.rb

require 'rack'

class App
  def self.run
    return Rack::Builder.new {
      use ::Rack::Static,
        :urls => ["/demo", "/pageswipe", "/demo/assets"],
        :root => "."
        
      

      run lambda { |env|
          [
            200, 
            {
              'Content-Type'  => 'text/html', 
              'Cache-Control' => 'public, max-age=86400' 
            },
            File.open('demo/index.html', File::RDONLY)
          ]
        }
    }
  end
end

swipe_test.rb

require File.expand_path(File.dirname(__FILE__)) + '/test_helper'

class SwipeTest < CapybaraTestCase
  
  def test_swipe_moves_page
    
    # Visit page
    visit "/"
    
    # Resize browser window
    page.driver.resize(768, 1024)
    
    # "Swipe"
    page.driver.mouse_down_at(100, 100)
    page.driver.mouse_move_at(50, 100)
    page.driver.mouse_up_at(20, 100)
    
    # Sleep to wait for the animation to finish
    sleep 1
    
    # Assert the new translated position of the ".pages" div.
    assert_equal -768, css_matrix_for_selector('.pages')[0]
  end
  
  private
  
  def css_matrix_for_selector(css_selector)
    # Grabs the transform matrix trough JavaScript
    css_transform_matrix = page.driver.evaluate_script("$('#{css_selector}').css('-webkit-transform')")
    
    # Parses the matrix
    match = /matrix\(\d+, \d+, \d+, \d+, (-?\d+), (-?\d+)\)/.match(css_transform_matrix)
    
    # Return a x,y tuple and turns the elements to integers.
    [match[1], match[2]].map! { |x| x.to_i }
  end
  
end

test_helper.rb

require 'test/unit'
require 'capybara'
require 'capybara/dsl'
require 'capybara/poltergeist'
require './test/app'

Capybara.app = App.run
Capybara.default_driver = :poltergeist

class CapybaraTestCase < Test::Unit::TestCase
  include Capybara::DSL
end

Where are these methods defined? I Couldn't find any information:

# "Swipe"
    page.driver.mouse_down_at(100, 100)
    page.driver.mouse_move_at(50, 100)
    page.driver.mouse_up_at(20, 100)