compaa 0.0.4 → 0.1.1

data/lib/compaa/generated_image.rb

@@ -25,7 +25,11 @@ module Compaa
     def delete_difference_image
       difference_image_path = path.gsub 'screenshots_generated_this_run', 'differences_in_screenshots_this_run'
       difference_image_path << '_difference.gif'
-      file_manager.rm difference_image_path
+      file_manager.rm difference_image_path, force: true
+    end
+
+    def delete
+      file_manager.rm path
     end
 
     private

data/lib/compaa/rack_app.rb

@@ -1,41 +1,92 @@
 require 'rack'
 require 'haml'
+require 'json'
 
 module Compaa
   class RackApp
-    attr_writer :root_directory
+    class << self
+      alias :new! :new
+    end
 
-    DEFAULT_ROOT = Dir.pwd
+    def self.new
+      me = self
+      Rack::Builder.new do
+        use Rack::Static, :urls => ['/artifacts/'], :root => Dir.pwd
+        use Rack::Static, :urls => ['/assets'], :root => File.expand_path('..', File.dirname(__FILE__))
+        run(me.new!)
+      end
+    end
 
-    def app
-      template = File.read File.expand_path 'template.haml', File.dirname(__FILE__)
-      root     = @root_directory or DEFAULT_ROOT
+    def call(env)
+      request = Request.new(Rack::Request.new(env))
+      request.response
+    end
 
-      Rack::Builder.new do
-        use Rack::Static, :urls => ['/artifacts'], :root => root
-
-        run lambda { |env|
-          request = Rack::Request.new env
-
-          if request.path == '/' and request.params.has_key? 'filepath'
-            locals = { :filepath => request.params['filepath'] }
-            body   = Haml::Engine.new(template).render Object.new, locals
-
-            [ 200, { 'Content-Type' => 'text/html' }, [body] ]
-          elsif request.path == '/script.js'
-            js = File.read File.expand_path('script.js', File.dirname(__FILE__))
-
-            [ 200, { 'Content-Type' => 'application/javascript' }, [js] ]
-          elsif request.path == '/screenshots' and request.request_method == 'POST' and request.params.has_key? 'filepath'
-            generated_image = GeneratedImage.new File.join(root, request.params['filepath'])
-            generated_image.create_reference_image
-            generated_image.delete_difference_image
-
-            [ 200, { 'Content-Type' => 'text/plain' }, ['Success'] ]
-          else
-            [ 404, {}, ['Not found'] ]
-          end
-        }
+    class Request
+      def initialize(request)
+        @request = request
+      end
+
+      def response
+        case @request.request_method
+        when 'GET'  then get
+        when 'POST' then post
+        else        four_oh_four
+        end
+      end
+
+      def get
+        case @request.path
+        when '/'               then index
+        when '/artifacts.json' then artifacts_json
+        else                   four_oh_four
+        end
+      end
+
+      def post
+        if @request.path == '/screenshots'
+          screenshots
+        else
+          four_oh_four
+        end
+      end
+
+      def index
+        template = File.read File.expand_path '../assets/index.haml', File.dirname(__FILE__)
+        body = Haml::Engine.new(template).render
+
+        [ 200, { 'Content-Type' => 'text/html' }, [body] ]
+      end
+
+      def screenshots
+        if @request.params.has_key?('filepath')
+          path = File.join(Dir.pwd, @request.params['filepath'])
+          generated_image = GeneratedImage.new(path)
+
+          generated_image.create_reference_image
+
+          generated_image.delete_difference_image
+          generated_image.delete
+
+          [ 200, { 'Content-Type' => 'text/plain' }, ['Success'] ]
+        else
+          four_oh_four
+        end
+      end
+
+      def artifacts_json
+        difference_images = DifferenceImage.all.map(&:reference_path)
+        generated_images  = GeneratedImage.all.reject(&:has_reference_image?).map(&:reference_path)
+
+        json = {
+          artifacts: difference_images + generated_images
+        }.to_json
+
+        [ 200, { 'Content-Type' => 'application/json' }, [json] ]
+      end
+
+      def four_oh_four
+        [ 404, { 'Content-Type' => 'text/plain' }, ['Not found'] ]
       end
     end
   end

data/lib/compaa/version.rb

@@ -1,3 +1,3 @@
 module Compaa
-  VERSION = "0.0.4"
+  VERSION = '0.1.1'
 end

data/mock_app.rb

@@ -0,0 +1,22 @@
+require 'sinatra'
+require 'json'
+require 'rack/cors'
+
+use Rack::Cors do
+  allow do
+    origins '*'
+    resource '/*', :headers => :any, :methods => [:get, :post]
+  end
+end
+
+get '/artifacts.json' do
+  content_type 'application/json'
+  {
+    artifacts: %w(
+      artifacts/reference_screenshots/one.png
+      artifacts/reference_screenshots/two.png
+      artifacts/reference_screenshots/three.png
+      artifacts/reference_screenshots/four.png
+    )
+  }.to_json
+end

data/spec/integration/integration_spec.rb

@@ -0,0 +1,66 @@
+require 'spec_helper'
+require 'capybara/poltergeist'
+
+Dir.chdir 'tmp/homemove' do
+  Capybara.app = Compaa::RackApp.new
+end
+Capybara.current_driver = :selenium
+
+describe "accepting screenshots from the browser" do
+  include Capybara::DSL
+
+  before do
+    FileUtils.rm_rf('tmp/homemove')
+    FileUtils.cp_r('fixtures/homemove', 'tmp/')
+  end
+
+  def assert_file_deleted(path)
+    refute File.exists?(path), 'Difference image was not deleted'
+  end
+
+  def refute_file_deleted(path)
+    assert File.exists?(path), 'Difference image should not have been deleted but was'
+  end
+
+  it "Accepts via clicking accept" do
+    Dir.chdir 'tmp/homemove' do
+      homemove_dir = 'artifacts/differences_in_screenshots_this_run/homemove'
+      visit '/'
+
+      assert_match %r{#{homemove_dir}/step_2_your_new_home/firefox_Darwin_sky_helpcentre_home_move_your_new_home1\.png_difference\.gif$},
+        page.find('img#animation', visible: false)['src']
+
+      click_link 'Accept'
+      sleep 0.1
+
+      assert_file_deleted "#{homemove_dir}/step_2_your_new_home/firefox_Darwin_sky_helpcentre_home_move_your_new_home1.png_difference.gif"
+
+      assert_match %r{#{homemove_dir}/step_4_contact_details/firefox_Darwin_sky_helpcentre_home_move_contact_details1\.png_difference\.gif$},
+        page.find('img#animation', visible: false)['src']
+
+      click_link 'Reject'
+      sleep 0.1
+
+      refute_file_deleted "#{homemove_dir}/step_4_contact_details/firefox_Darwin_sky_helpcentre_home_move_contact_details1.png_difference.gif"
+
+      assert_match %r{#{homemove_dir}/validation_failures_on_your_new_home/firefox_Darwin_sky_helpcentre_home_move_your_new_home1\.png_difference\.gif$},
+        page.find('img#animation', visible: false)['src']
+
+      click_link 'Accept'
+      sleep 0.1
+
+      assert_file_deleted "#{homemove_dir}/validation_failures_on_your_new_home/firefox_Darwin_sky_helpcentre_home_move_your_new_home1.png_difference.gif"
+
+      assert_match %r{artifacts/screenshots_generated_this_run/homemove/step_0_moving_home/firefox_Darwin_sky_helpcentre_home_move_getting_started1\.png$},
+        page.find('img#generatedImage', visible: false)['src']
+
+      click_link 'Accept'
+      sleep 0.5
+
+      assert File.exists? "artifacts/reference_screenshots/homemove/step_0_moving_home/firefox_Darwin_sky_helpcentre_home_move_getting_started1.png"
+      assert_file_deleted "artifacts/screenshots_generated_this_run/homemove/step_0_moving_home/firefox_Darwin_sky_helpcentre_home_move_getting_started1.png"
+
+      assert page.has_selector?('h1', text: 'Done!')
+    end
+  end
+end

data/spec/javascripts/CompaaSpec.js

@@ -0,0 +1,81 @@
+describe("Compaa", function() {
+  var compaa;
+
+  beforeEach(function() {
+    compaa = Object.create(Compaa);
+    compaa.compaaHost = 'http://localhost:4567';
+    loadFixtures('body.html');
+  });
+
+  describe("generatedImagePath()", function() {
+    it("changes the directory and filename of the referenceImagePath", function() {
+      var referencePath, expectedGeneratedImagePath;
+
+      referencePath = 'artifacts/reference_screenshots/firefox_home_move.png'
+      expectedGeneratedImagePath = 'artifacts/screenshots_generated_this_run/firefox_home_move.png';
+
+      spyOn(compaa, 'referenceImagePath').andReturn(referencePath);
+
+      expect(compaa.generatedImagePath()).toEqual(expectedGeneratedImagePath);
+    });
+  });
+
+  describe("differenceGifPath()", function() {
+    it("changes the directory to screenshots_generated_this_run and adds a png extension", function() {
+      var referenceImagePath, expectedDifferenceGifPath;
+
+      expectedDifferenceGifPath = 'artifacts/differences_in_screenshots_this_run/firefox_home_move.png_difference.gif';
+      referenceImagePath = 'artifacts/reference_screenshots/firefox_home_move.png'
+
+      spyOn(compaa, 'referenceImagePath').andReturn(referenceImagePath);
+
+      expect(compaa.differenceGifPath()).toEqual(expectedDifferenceGifPath);
+    });
+  });
+
+  describe("show()", function() {
+    it("hides [difference animation referenceImage generatedImage] elements and shows the given element", function() {
+      compaa.show('difference');
+
+      expect($('#difference').css('display')).toEqual('inline');
+
+      expect($('#animation').css('display')).toEqual('none');
+      expect($('#referenceImage').css('display')).toEqual('none');
+      expect($('#generatedImage').css('display')).toEqual('none');
+    });
+
+    it("hides [difference animation referenceImage generatedImage] elements and shows the given element", function() {
+      compaa.show('generatedImage');
+
+      expect($('#difference').css('display')).toEqual('none');
+      expect($('#animation').css('display')).toEqual('none');
+      expect($('#referenceImage').css('display')).toEqual('none');
+      expect($('#generatedImage').css('display')).toEqual('inline');
+    });
+  });
+
+  describe("init", function() {
+    it("sets click handlers for buttons", function() {
+      compaa.init();
+      $('#differenceButton').click();
+      expect($('#difference')).not.toBeHidden();
+      expect($('#animation')).toBeHidden();
+    });
+
+    it("sets reference images", function() {
+      spyOn(compaa, 'setArtifacts').andCallThrough();
+      compaa.init();
+      waitsFor(function() {
+        return compaa.setArtifacts.callCount > 0;
+      }, 'setArtifacts() didnt get called, is the mock is running??');
+      runs(function() {
+        expect(compaa.artifacts).toEqual([
+          'artifacts/reference_screenshots/one.png',
+          'artifacts/reference_screenshots/two.png',
+          'artifacts/reference_screenshots/three.png',
+          'artifacts/reference_screenshots/four.png'
+        ]);
+      });
+    });
+  });
+});

data/spec/javascripts/fixtures/body.html

@@ -0,0 +1,19 @@
+<div id="fixture">
+  <canvas id='offScreenCanvas' style='position: absolute; left: -9999999px;'></canvas>
+  <canvas id='difference'></canvas>
+  <img id='animation' style='display: none'>
+  <img id='referenceImage' style='display: none'>
+  <img id='generatedImage' style='display: none'>
+  <div style='width: 500px; margin: 0px auto; text-align: center;'>
+    <p>
+      <a class='btn' href='#' id='differenceButton'>Difference</a>
+      <a class='btn' href='#' id='animationButton'>Animation</a>
+      <a class='btn' href='#' id='referenceImageButton'>Reference Image</a>
+      <a class='btn' href='#' id='generatedImageButton'>Generated Image</a>
+    </p>
+    <p>
+      <a class='btn btn-primary' href='#' id='accept'>Accept</a>
+      <a class='btn btn-danger' href='#' id='reject'>Reject</a>
+    </p>
+  </div>
+</div>

data/spec/javascripts/support/bind.js

@@ -0,0 +1,23 @@
+if (!Function.prototype.bind) {
+  Function.prototype.bind = function (oThis) {
+    if (typeof this !== "function") {
+      // closest thing possible to the ECMAScript 5 internal IsCallable function
+      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+    }
+
+    var aArgs = Array.prototype.slice.call(arguments, 1),
+        fToBind = this,
+        fNOP = function () {},
+        fBound = function () {
+          return fToBind.apply(this instanceof function() {} && oThis
+                                 ? this
+                                 : oThis,
+                               aArgs.concat(Array.prototype.slice.call(arguments)));
+        };
+
+    fNOP.prototype = this.prototype;
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+}

data/spec/javascripts/support/jasmine-jquery.js

@@ -0,0 +1,658 @@
+/*!
+ Jasmine-jQuery: a set of jQuery helpers for Jasmine tests.
+
+ Version 1.5.1
+
+ https://github.com/velesin/jasmine-jquery
+
+ Copyright (c) 2010-2013 Wojciech Zawistowski, Travis Jeffery
+
+ Permission is hereby granted, free of charge, to any person obtaining
+ a copy of this software and associated documentation files (the
+ "Software"), to deal in the Software without restriction, including
+ without limitation the rights to use, copy, modify, merge, publish,
+ distribute, sublicense, and/or sell copies of the Software, and to
+ permit persons to whom the Software is furnished to do so, subject to
+ the following conditions:
+
+ The above copyright notice and this permission notice shall be
+ included in all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+var readFixtures = function() {
+  return jasmine.getFixtures().proxyCallTo_('read', arguments)
+}
+
+var preloadFixtures = function() {
+  jasmine.getFixtures().proxyCallTo_('preload', arguments)
+}
+
+var loadFixtures = function() {
+  jasmine.getFixtures().proxyCallTo_('load', arguments)
+}
+
+var appendLoadFixtures = function() {
+  jasmine.getFixtures().proxyCallTo_('appendLoad', arguments)
+}
+
+var setFixtures = function(html) {
+  jasmine.getFixtures().proxyCallTo_('set', arguments)
+}
+
+var appendSetFixtures = function() {
+  jasmine.getFixtures().proxyCallTo_('appendSet', arguments)
+}
+
+var sandbox = function(attributes) {
+  return jasmine.getFixtures().sandbox(attributes)
+}
+
+var spyOnEvent = function(selector, eventName) {
+  return jasmine.JQuery.events.spyOn(selector, eventName)
+}
+
+var preloadStyleFixtures = function() {
+  jasmine.getStyleFixtures().proxyCallTo_('preload', arguments)
+}
+
+var loadStyleFixtures = function() {
+  jasmine.getStyleFixtures().proxyCallTo_('load', arguments)
+}
+
+var appendLoadStyleFixtures = function() {
+  jasmine.getStyleFixtures().proxyCallTo_('appendLoad', arguments)
+}
+
+var setStyleFixtures = function(html) {
+  jasmine.getStyleFixtures().proxyCallTo_('set', arguments)
+}
+
+var appendSetStyleFixtures = function(html) {
+  jasmine.getStyleFixtures().proxyCallTo_('appendSet', arguments)
+}
+
+var loadJSONFixtures = function() {
+  return jasmine.getJSONFixtures().proxyCallTo_('load', arguments)
+}
+
+var getJSONFixture = function(url) {
+  return jasmine.getJSONFixtures().proxyCallTo_('read', arguments)[url]
+}
+
+jasmine.spiedEventsKey = function (selector, eventName) {
+  return [$(selector).selector, eventName].toString()
+}
+
+jasmine.getFixtures = function() {
+  return jasmine.currentFixtures_ = jasmine.currentFixtures_ || new jasmine.Fixtures()
+}
+
+jasmine.getStyleFixtures = function() {
+  return jasmine.currentStyleFixtures_ = jasmine.currentStyleFixtures_ || new jasmine.StyleFixtures()
+}
+
+jasmine.Fixtures = function() {
+  this.containerId = 'jasmine-fixtures'
+  this.fixturesCache_ = {}
+  this.fixturesPath = 'spec/javascripts/fixtures'
+}
+
+jasmine.Fixtures.prototype.set = function(html) {
+  this.cleanUp()
+  this.createContainer_(html)
+}
+
+jasmine.Fixtures.prototype.appendSet= function(html) {
+  this.addToContainer_(html)
+}
+
+jasmine.Fixtures.prototype.preload = function() {
+  this.read.apply(this, arguments)
+}
+
+jasmine.Fixtures.prototype.load = function() {
+  this.cleanUp()
+  this.createContainer_(this.read.apply(this, arguments))
+}
+
+jasmine.Fixtures.prototype.appendLoad = function() {
+  this.addToContainer_(this.read.apply(this, arguments))
+}
+
+jasmine.Fixtures.prototype.read = function() {
+  var htmlChunks = []
+
+  var fixtureUrls = arguments
+  for(var urlCount = fixtureUrls.length, urlIndex = 0; urlIndex < urlCount; urlIndex++) {
+    htmlChunks.push(this.getFixtureHtml_(fixtureUrls[urlIndex]))
+  }
+
+  return htmlChunks.join('')
+}
+
+jasmine.Fixtures.prototype.clearCache = function() {
+  this.fixturesCache_ = {}
+}
+
+jasmine.Fixtures.prototype.cleanUp = function() {
+  $('#' + this.containerId).remove()
+}
+
+jasmine.Fixtures.prototype.sandbox = function(attributes) {
+  var attributesToSet = attributes || {}
+  return $('<div id="sandbox" />').attr(attributesToSet)
+}
+
+jasmine.Fixtures.prototype.createContainer_ = function(html) {
+  var container
+  if(html instanceof $) {
+    container = $('<div id="' + this.containerId + '" />')
+    container.html(html)
+  } else {
+    container = '<div id="' + this.containerId + '">' + html + '</div>'
+  }
+  $(document.body).append(container)
+}
+
+jasmine.Fixtures.prototype.addToContainer_ = function(html){
+  var container = $(document.body).find('#'+this.containerId).append(html)
+  if(!container.length){
+    this.createContainer_(html)
+  }
+}
+
+jasmine.Fixtures.prototype.getFixtureHtml_ = function(url) {
+  if (typeof this.fixturesCache_[url] === 'undefined') {
+    this.loadFixtureIntoCache_(url)
+  }
+  return this.fixturesCache_[url]
+}
+
+jasmine.Fixtures.prototype.loadFixtureIntoCache_ = function(relativeUrl) {
+  var url = this.makeFixtureUrl_(relativeUrl)
+  var request = $.ajax({
+    type: "GET",
+    url: url + "?" + new Date().getTime(),
+    async: false
+  })
+  this.fixturesCache_[relativeUrl] = request.responseText
+}
+
+jasmine.Fixtures.prototype.makeFixtureUrl_ = function(relativeUrl){
+  return this.fixturesPath.match('/$') ? this.fixturesPath + relativeUrl : this.fixturesPath + '/' + relativeUrl
+}
+
+jasmine.Fixtures.prototype.proxyCallTo_ = function(methodName, passedArguments) {
+  return this[methodName].apply(this, passedArguments)
+}
+
+
+jasmine.StyleFixtures = function() {
+  this.fixturesCache_ = {}
+  this.fixturesNodes_ = []
+  this.fixturesPath = 'spec/javascripts/fixtures'
+}
+
+jasmine.StyleFixtures.prototype.set = function(css) {
+  this.cleanUp()
+  this.createStyle_(css)
+}
+
+jasmine.StyleFixtures.prototype.appendSet = function(css) {
+  this.createStyle_(css)
+}
+
+jasmine.StyleFixtures.prototype.preload = function() {
+  this.read_.apply(this, arguments)
+}
+
+jasmine.StyleFixtures.prototype.load = function() {
+  this.cleanUp()
+  this.createStyle_(this.read_.apply(this, arguments))
+}
+
+jasmine.StyleFixtures.prototype.appendLoad = function() {
+  this.createStyle_(this.read_.apply(this, arguments))
+}
+
+jasmine.StyleFixtures.prototype.cleanUp = function() {
+  while(this.fixturesNodes_.length) {
+    this.fixturesNodes_.pop().remove()
+  }
+}
+
+jasmine.StyleFixtures.prototype.createStyle_ = function(html) {
+  var styleText = $('<div></div>').html(html).text(),
+    style = $('<style>' + styleText + '</style>')
+
+  this.fixturesNodes_.push(style)
+
+  $('head').append(style)
+}
+
+jasmine.StyleFixtures.prototype.clearCache = jasmine.Fixtures.prototype.clearCache
+
+jasmine.StyleFixtures.prototype.read_ = jasmine.Fixtures.prototype.read
+
+jasmine.StyleFixtures.prototype.getFixtureHtml_ = jasmine.Fixtures.prototype.getFixtureHtml_
+
+jasmine.StyleFixtures.prototype.loadFixtureIntoCache_ = jasmine.Fixtures.prototype.loadFixtureIntoCache_
+
+jasmine.StyleFixtures.prototype.makeFixtureUrl_ = jasmine.Fixtures.prototype.makeFixtureUrl_
+
+jasmine.StyleFixtures.prototype.proxyCallTo_ = jasmine.Fixtures.prototype.proxyCallTo_
+
+jasmine.getJSONFixtures = function() {
+  return jasmine.currentJSONFixtures_ = jasmine.currentJSONFixtures_ || new jasmine.JSONFixtures()
+}
+
+jasmine.JSONFixtures = function() {
+  this.fixturesCache_ = {}
+  this.fixturesPath = 'spec/javascripts/fixtures/json'
+}
+
+jasmine.JSONFixtures.prototype.load = function() {
+  this.read.apply(this, arguments)
+  return this.fixturesCache_
+}
+
+jasmine.JSONFixtures.prototype.read = function() {
+  var fixtureUrls = arguments
+  for(var urlCount = fixtureUrls.length, urlIndex = 0; urlIndex < urlCount; urlIndex++) {
+    this.getFixtureData_(fixtureUrls[urlIndex])
+  }
+  return this.fixturesCache_
+}
+
+jasmine.JSONFixtures.prototype.clearCache = function() {
+  this.fixturesCache_ = {}
+}
+
+jasmine.JSONFixtures.prototype.getFixtureData_ = function(url) {
+  this.loadFixtureIntoCache_(url)
+  return this.fixturesCache_[url]
+}
+
+jasmine.JSONFixtures.prototype.loadFixtureIntoCache_ = function(relativeUrl) {
+  var self = this
+  var url = this.fixturesPath.match('/$') ? this.fixturesPath + relativeUrl : this.fixturesPath + '/' + relativeUrl
+  $.ajax({
+    async: false, // must be synchronous to guarantee that no tests are run before fixture is loaded
+    cache: false,
+    dataType: 'json',
+    url: url,
+    success: function(data) {
+      self.fixturesCache_[relativeUrl] = data
+    },
+    error: function(jqXHR, status, errorThrown) {
+        throw Error('JSONFixture could not be loaded: ' + url + ' (status: ' + status + ', message: ' + errorThrown.message + ')')
+    }
+  })
+}
+
+jasmine.JSONFixtures.prototype.proxyCallTo_ = function(methodName, passedArguments) {
+  return this[methodName].apply(this, passedArguments)
+}
+
+jasmine.JQuery = function() {}
+
+jasmine.JQuery.browserTagCaseIndependentHtml = function(html) {
+  return $('<div/>').append(html).html()
+}
+
+jasmine.JQuery.elementToString = function(element) {
+  var domEl = $(element).get(0)
+  if (domEl == undefined || domEl.cloneNode)
+    return $('<div />').append($(element).clone()).html()
+  else
+    return element.toString()
+}
+
+jasmine.JQuery.matchersClass = {}
+
+!function(namespace) {
+  var data = {
+    spiedEvents: {},
+    handlers:    []
+  }
+
+  namespace.events = {
+    spyOn: function(selector, eventName) {
+      var handler = function(e) {
+        data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)] = jasmine.util.argsToArray(arguments)
+      }
+      $(selector).on(eventName, handler)
+      data.handlers.push(handler)
+      return {
+        selector: selector,
+        eventName: eventName,
+        handler: handler,
+        reset: function(){
+          delete data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)]
+        }
+      }
+    },
+
+    args: function(selector, eventName) {
+      var actualArgs = data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)];
+
+      if (!actualArgs) {
+        throw "There is no spy for " + eventName + " on " + selector.toString() + ". Make sure to create a spy using spyOnEvent.";
+      }
+
+      return actualArgs;
+    },
+
+    wasTriggered: function(selector, eventName) {
+      return !!(data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)])
+    },
+
+    wasTriggeredWith: function(selector, eventName, expectedArgs, env) {
+      var actualArgs = jasmine.JQuery.events.args(selector, eventName).slice(1);
+      if (Object.prototype.toString.call(expectedArgs) !== '[object Array]') {
+        actualArgs = actualArgs[0];
+      }
+      return env.equals_(expectedArgs, actualArgs);
+    },
+
+    wasPrevented: function(selector, eventName) {
+      var args = data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)],
+          e = args ? args[0] : undefined;
+      return e && e.isDefaultPrevented()
+    },
+
+    wasStopped: function(selector, eventName) {
+      var e;
+      return (e = data.spiedEvents[jasmine.spiedEventsKey(selector, eventName)]) && e.isPropagationStopped()
+    },
+
+    cleanUp: function() {
+      data.spiedEvents = {}
+      data.handlers    = []
+    }
+  }
+}(jasmine.JQuery)
+
+!function(){
+  var jQueryMatchers = {
+    toHaveClass: function(className) {
+      return this.actual.hasClass(className)
+    },
+
+    toHaveCss: function(css){
+      for (var prop in css){
+        if (this.actual.css(prop) !== css[prop]) return false
+      }
+      return true
+    },
+
+    toBeVisible: function() {
+      return this.actual.is(':visible')
+    },
+
+    toBeHidden: function() {
+      return this.actual.is(':hidden')
+    },
+
+    toBeSelected: function() {
+      return this.actual.is(':selected')
+    },
+
+    toBeChecked: function() {
+      return this.actual.is(':checked')
+    },
+
+    toBeEmpty: function() {
+      return this.actual.is(':empty')
+    },
+
+    toExist: function() {
+      return $(document).find(this.actual).length
+    },
+
+    toHaveLength: function(length) {
+      return this.actual.length === length
+    },
+
+    toHaveAttr: function(attributeName, expectedAttributeValue) {
+      return hasProperty(this.actual.attr(attributeName), expectedAttributeValue)
+    },
+
+    toHaveProp: function(propertyName, expectedPropertyValue) {
+      return hasProperty(this.actual.prop(propertyName), expectedPropertyValue)
+    },
+
+    toHaveId: function(id) {
+      return this.actual.attr('id') == id
+    },
+
+    toHaveHtml: function(html) {
+      return this.actual.html() == jasmine.JQuery.browserTagCaseIndependentHtml(html)
+    },
+
+    toContainHtml: function(html){
+      var actualHtml = this.actual.html()
+      var expectedHtml = jasmine.JQuery.browserTagCaseIndependentHtml(html)
+      return (actualHtml.indexOf(expectedHtml) >= 0)
+    },
+
+    toHaveText: function(text) {
+      var trimmedText = $.trim(this.actual.text())
+      if (text && $.isFunction(text.test)) {
+        return text.test(trimmedText)
+      } else {
+        return trimmedText == text
+      }
+    },
+
+    toContainText: function(text) {
+      var trimmedText = $.trim(this.actual.text())
+      if (text && $.isFunction(text.test)) {
+        return text.test(trimmedText)
+      } else {
+        return trimmedText.indexOf(text) != -1;
+      }
+    },
+
+    toHaveValue: function(value) {
+      return this.actual.val() === value
+    },
+
+    toHaveData: function(key, expectedValue) {
+      return hasProperty(this.actual.data(key), expectedValue)
+    },
+
+    toBe: function(selector) {
+      return this.actual.is(selector)
+    },
+
+    toContain: function(selector) {
+      return this.actual.find(selector).length
+    },
+
+    toBeDisabled: function(selector){
+      return this.actual.is(':disabled')
+    },
+
+    toBeFocused: function(selector) {
+      return this.actual[0] === this.actual[0].ownerDocument.activeElement
+    },
+
+    toHandle: function(event) {
+
+      var events = $._data(this.actual.get(0), "events")
+
+      if(!events || !event || typeof event !== "string") {
+        return false
+      }
+
+      var namespaces = event.split(".")
+      var eventType = namespaces.shift()
+      var sortedNamespaces = namespaces.slice(0).sort()
+      var namespaceRegExp = new RegExp("(^|\\.)" + sortedNamespaces.join("\\.(?:.*\\.)?") + "(\\.|$)")
+
+      if(events[eventType] && namespaces.length) {
+        for(var i = 0; i < events[eventType].length; i++) {
+          var namespace = events[eventType][i].namespace
+          if(namespaceRegExp.test(namespace)) {
+            return true
+          }
+        }
+      } else {
+        return events[eventType] && events[eventType].length > 0
+      }
+    },
+
+    // tests the existence of a specific event binding + handler
+    toHandleWith: function(eventName, eventHandler) {
+      var stack = $._data(this.actual.get(0), "events")[eventName]
+      for (var i = 0; i < stack.length; i++) {
+        if (stack[i].handler == eventHandler) return true
+      }
+      return false
+    }
+  }
+
+  var hasProperty = function(actualValue, expectedValue) {
+    if (expectedValue === undefined) return actualValue !== undefined
+    return actualValue == expectedValue
+  }
+
+  var bindMatcher = function(methodName) {
+    var builtInMatcher = jasmine.Matchers.prototype[methodName]
+
+    jasmine.JQuery.matchersClass[methodName] = function() {
+      if (this.actual
+        && (this.actual instanceof $
+          || jasmine.isDomNode(this.actual))) {
+            this.actual = $(this.actual)
+            var result = jQueryMatchers[methodName].apply(this, arguments)
+            var element
+            if (this.actual.get && (element = this.actual.get()[0]) && !$.isWindow(element) && element.tagName !== "HTML")
+              this.actual = jasmine.JQuery.elementToString(this.actual)
+            return result
+          }
+
+          if (builtInMatcher) {
+            return builtInMatcher.apply(this, arguments)
+          }
+
+          return false
+    }
+  }
+
+  for(var methodName in jQueryMatchers) {
+    bindMatcher(methodName)
+  }
+}()
+
+beforeEach(function() {
+  this.addMatchers(jasmine.JQuery.matchersClass)
+  this.addMatchers({
+    toHaveBeenTriggeredOn: function(selector) {
+      this.message = function() {
+        return [
+          "Expected event " + this.actual + " to have been triggered on " + selector,
+          "Expected event " + this.actual + " not to have been triggered on " + selector
+        ]
+      }
+      return jasmine.JQuery.events.wasTriggered(selector, this.actual)
+    }
+  })
+  this.addMatchers({
+    toHaveBeenTriggered: function(){
+      var eventName = this.actual.eventName,
+          selector = this.actual.selector
+      this.message = function() {
+        return [
+          "Expected event " + eventName + " to have been triggered on " + selector,
+          "Expected event " + eventName + " not to have been triggered on " + selector
+        ]
+      }
+      return jasmine.JQuery.events.wasTriggered(selector, eventName)
+     }
+  })
+  this.addMatchers({
+    toHaveBeenTriggeredOnAndWith: function() {
+      var selector = arguments[0],
+          expectedArgs = arguments[1],
+          wasTriggered = jasmine.JQuery.events.wasTriggered(selector, this.actual);
+      this.message = function() {
+        if (wasTriggered) {
+          var actualArgs = jasmine.JQuery.events.args(selector, this.actual, expectedArgs)[1];
+          return [
+            "Expected event " + this.actual + " to have been triggered with " + jasmine.pp(expectedArgs) + "  but it was triggered with " + jasmine.pp(actualArgs),
+            "Expected event " + this.actual + " not to have been triggered with " + jasmine.pp(expectedArgs) + " but it was triggered with " + jasmine.pp(actualArgs)
+          ]
+        } else {
+          return [
+            "Expected event " + this.actual + " to have been triggered on " + selector,
+            "Expected event " + this.actual + " not to have been triggered on " + selector
+          ]
+        }
+      }
+      return wasTriggered && jasmine.JQuery.events.wasTriggeredWith(selector, this.actual, expectedArgs, this.env);
+    }
+  })
+  this.addMatchers({
+    toHaveBeenPreventedOn: function(selector) {
+      this.message = function() {
+        return [
+          "Expected event " + this.actual + " to have been prevented on " + selector,
+          "Expected event " + this.actual + " not to have been prevented on " + selector
+        ]
+      }
+      return jasmine.JQuery.events.wasPrevented(selector, this.actual)
+    }
+  })
+  this.addMatchers({
+    toHaveBeenPrevented: function() {
+      var eventName = this.actual.eventName,
+          selector = this.actual.selector
+      this.message = function() {
+        return [
+          "Expected event " + eventName + " to have been prevented on " + selector,
+          "Expected event " + eventName + " not to have been prevented on " + selector
+        ]
+      }
+      return jasmine.JQuery.events.wasPrevented(selector, eventName)
+    }
+  })
+  this.addMatchers({
+    toHaveBeenStoppedOn: function(selector) {
+      this.message = function() {
+        return [
+          "Expected event " + this.actual + " to have been stopped on " + selector,
+          "Expected event " + this.actual + " not to have been stopped on " + selector
+        ]
+      }
+      return jasmine.JQuery.events.wasStopped(selector, this.actual)
+    }
+  })
+  this.addMatchers({
+    toHaveBeenStopped: function() {
+      var eventName = this.actual.eventName,
+          selector = this.actual.selector
+      this.message = function() {
+        return [
+          "Expected event " + eventName + " to have been stopped on " + selector,
+          "Expected event " + eventName + " not to have been stopped on " + selector
+        ]
+      }
+      return jasmine.JQuery.events.wasStopped(selector, eventName)
+    }
+  })
+})
+
+afterEach(function() {
+  jasmine.getFixtures().cleanUp()
+  jasmine.getStyleFixtures().cleanUp()
+  jasmine.JQuery.events.cleanUp()
+})