touch_action 0.0.2alpha → 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 9d3e2af6c99f3deef3611b2c7110b26f780d8dea
+  data.tar.gz: 165fa9f2bf25346239a51b0f6fd663f1b0c61213
+SHA512:
+  metadata.gz: 0e3e0e96f9665c9b4ff044b4e0852a3328abc5c538f14872c32dbeeced283b904aecffba0f1251e221e59b296714a705b6f74c44180ded05221f7d3e25be7657
+  data.tar.gz: c52e192b96ac4af15786162ac6f7729cf10bc0bb2cd5b528ded46789c27cfa023aba196158bfe43dddbac5c788ae0b17ef2ae6d687c2cc382b3c60d19c7bd8e0

data/.gitignore

@@ -12,5 +12,5 @@
 *.o
 *.a
 mkmf.log
-console
-.DS_Store
+.DS_Store
+console

data/README.md

@@ -1,6 +1,6 @@
 # TouchAction
 
-Adds touch gestures to Watir and Selenium using YUI JS. Very useful when using Appium to test mobile websites. 
+Touch Action is a Ruby Gem used to add touch gestures simulation to the Watir-webdriver (and Selenium in the near future) in order to perform automated tests on mobile websites that requires those type of actions. It encapsulates the touch action library of [YUI JS](http://yuilibrary.com/yui/docs/event/simulate.html#simulating-touch-gestures). Very useful for example when testing mobile websites using [Appium](http://appium.io).
 
 ## Installation
 
@@ -15,30 +15,30 @@ And then execute:
     $ bundle
 
 And then add `require 'touch_action'` to your spec_helper.rb or wherever you want to use it.
-## WARNING
-It's currently being developed and there are no tests on it. For now, it's only supporting Watir-webdriver.
 
 ## Usage
 
 ```ruby
-  #on the element you want to perform the action, call touch_action(:name_of_method)
+  #on the element you want to perform the action, call touch_action(:name_of_action)
   element = @driver.div(:id, 'hit')
   element.touch_action(:swipe)
 ```
 ###Available Gestures
-It's currently supporting the gestures bellow. The hash as second argument is optional (here it's showing the default for each action).
+
+It's currently supporting the gestures bellow. The only required argument is the action symbol, the rest are optional (here it's showing the default options for each action).
+
 ```ruby
-  element.touch_action(:flick, {axis: 'x', distance: -100,  duration: 50}) #flick and swipe are the same 
+  element.touch_action(:flick, axis: 'x', distance: 100,  duration: 50) #flick and swipe are the same 
   
-  element.touch_action(:pinch, {r1: 50, r2: 100})
+  element.touch_action(:pinch, r1: 50, r2: 100)
   
   element.touch_action(:tap)
   
   element.touch_action(:doubletap)
   
-  element.touch_action(:press,  {hold: 2000})
+  element.touch_action(:press,  hold: 2000)
   
-  element.touch_action(:move, {xdist: 70, ydist: -50,  duration: 2000})
+  element.touch_action(:move, xdist: 70, ydist: -50,  duration: 500)
   
   element.touch_action(:rotate, {rotation: -75})
   

data/lib/touch_action.rb

@@ -5,57 +5,26 @@ require 'watir-webdriver'
 
 module TouchAction
 
-  def touch_action action, options = {}
-    browser.execute_script( send(action.to_s + '_script', options), self )
-  end
-
-  def flick_script options = {}
-    default_options = {axis: 'x', distance: -100,  duration: 50}
-    default_options.merge! options
-    flick = File.read(File.expand_path("../touch_action/javascripts/flick.js.erb", __FILE__))
-    render_erb(flick, default_options)
-  end
-
-  def pinch_script options = {}
-    default_options = {r1: 50, r2: 100}
-    default_options.merge! options
-    pinch = File.read(File.expand_path("../touch_action/javascripts/pinch.js.erb", __FILE__))
-    render_erb(pinch_file.read, default_options)
-  end
-
-  def tap_script options = {}
-    tap = File.read(File.expand_path("../touch_action/javascripts/tap.js.erb", __FILE__))
-    render_erb tap
-  end
+  ACTIONS_WITH_DEFAULT_OPTIONS = {
+    tap: {},
+    doubletap: {},
+    flick: {axis: 'x', distance: 100,  duration: 50},
+    pinch: {r1: 50, r2: 100},
+    press: {hold: 2000},
+    move: {xdist: 70, ydist: -50,  duration: 500},
+    rotate: {rotation: -75}
+  }
 
-  def doubletap_script options = {}
-    doubletap = File.read(File.expand_path("../touch_action/javascripts/doubletap.js.erb", __FILE__))
-    render_erb doubletap
-  end
-
-  def press_script options = {}
-    default_options = {hold: 2000}
-    default_options.merge! options
-    press = File.read(File.expand_path("../touch_action/javascripts/press.js.erb", __FILE__))
-    render_erb(press, default_options)
-  end
-
-  def move_script options = {}
-    default_options = {xdist: 70, ydist: -50,  duration: 2000}
-    default_options.merge! options
-    move = File.read(File.expand_path("../touch_action/javascripts/move.js.erb", __FILE__))
-    render_erb(move, default_options)
-  end
-
-  def rotate_script options = {}
-    default_options = {rotation: -75}
-    default_options.merge! options
-    rotate = File.read(File.expand_path("../touch_action/javascripts/rotate.js.erb", __FILE__))
-    render_erb(rotate, default_options)
+  def touch_action action, options = {}
+    action = :flick if action == :swipe
+    raise ArgumentError, "The touch action #{action} doesn't exist" unless ACTIONS_WITH_DEFAULT_OPTIONS[action]
+    default_options = ACTIONS_WITH_DEFAULT_OPTIONS[action]
+    options = default_options.merge options
+    script = File.read(File.expand_path("../touch_action/javascripts/#{action.to_s}.js.erb", __FILE__))
+    final_script = render_erb(script, options)
+    browser.execute_script( final_script, self )
   end
 
-  alias_method :swipe_script, :flick_script
-
 private
 
   def render_erb template, vars = {}

data/lib/touch_action/javascripts/tap.js.erb

@@ -6,7 +6,7 @@ function loadYui(callback) {
     var head = document.getElementsByTagName('head')[0];
     var script = document.createElement('script');
     script.type = 'text/javascript';
-    script.src = "http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js";
+    script.src = "//yui.yahooapis.com/3.18.0/build/yui/yui-min.js";
 
     // Then bind the event to the callback function.
     // There are several events for cross browser compatibility.

data/lib/touch_action/version.rb

@@ -1,3 +1,3 @@
 module TouchAction
-  VERSION = "0.0.2alpha"
+  VERSION = "0.1.0"
 end

data/spec/features/doubletap_spec.rb

@@ -0,0 +1,13 @@
+require 'spec_helper'
+
+RSpec.describe TouchAction do
+  describe "Doubletap" do
+    it 'should doubletap the div bound by HammerJS' do
+      @browser.goto('http://localhost:9292/tap')
+      element = @browser.div(id: 'myElement')
+      element.touch_action :doubletap
+      sleep(5)
+      expect(@browser.text).to include('doubletap')
+    end
+  end
+end

data/spec/features/flick_spec.rb

@@ -0,0 +1,32 @@
+require 'spec_helper'
+
+RSpec.describe TouchAction do
+  describe "Flick" do
+    it 'should flick the div bound by hammerJs' do
+      @browser.goto('http://localhost:9292')
+      div = @browser.div(id: 'hit')
+      div.touch_action :flick
+      sleep(5)
+      expect(@browser.p(id: 'distance_x').text).to include('100')
+    end
+
+    it 'should flick the div bound by hammerJs when passing swipe instead of flick' do
+      @browser.goto('http://localhost:9292')
+      div = @browser.div(id: 'hit')
+      div.touch_action :swipe
+      sleep(5)
+      expect(@browser.p(id: 'distance_x').text).to include('100')
+    end
+
+    context "Options" do
+
+      it 'should flick the div bound by hammerJs to the left when passing the a negative distance' do
+        @browser.goto('http://localhost:9292')
+        div = @browser.div(id: 'hit')
+        div.touch_action :flick, distance: -80
+        sleep(5)
+        expect(@browser.p(id: 'distance_x').text).to include('-80')
+      end
+    end
+  end
+end

data/spec/features/move_spec.rb

@@ -0,0 +1,15 @@
+require 'spec_helper'
+
+RSpec.describe TouchAction do
+  describe "Move" do
+    it 'should move the div bound by hammerJs' do
+      @browser.goto('http://localhost:9292')
+      div = @browser.div(id: 'hit')
+      div.touch_action :move
+      sleep(5)
+      expect(@browser.p(id: 'distance_x').text).to include('70')
+      expect(@browser.p(id: 'distance_y').text).to include('-50')
+    end
+
+  end
+end

data/spec/features/pinch_spec.rb

@@ -0,0 +1,15 @@
+require 'spec_helper'
+
+RSpec.describe TouchAction do
+  describe "Pinch" do
+    it 'should pinch the photo bound by pinchzoom js' do
+      @browser.goto('http://localhost:9292/pinch')
+      pinch_zoom_div = @browser.div(class: 'pinch-zoom')
+      last_transform_value = pinch_zoom_div.style('-webkit-transform')
+      element = @browser.image
+      element.touch_action :pinch
+      sleep(5)
+      expect(last_transform_value).not_to be_equal(pinch_zoom_div.style('-webkit-transform'))
+    end
+  end
+end

data/spec/features/press_spec.rb

@@ -0,0 +1,13 @@
+require 'spec_helper'
+
+RSpec.describe TouchAction do
+  describe "Press" do
+    it 'should press the div bound by HammerJS' do
+      @browser.goto('http://localhost:9292/tap')
+      element = @browser.div(id: 'myElement')
+      element.touch_action :press
+      sleep(5)
+      expect(element.text).to include('press')
+    end
+  end
+end

data/spec/features/rotate_spec.rb

@@ -0,0 +1,16 @@
+require 'spec_helper'
+
+RSpec.describe TouchAction do
+  describe "Rotate" do
+    it 'should Rotate the photo bound by pinchzoom js' do
+      @browser.goto('http://localhost:9292')
+      div = @browser.div(id: 'hit')
+      div.touch_action :move # don't ask me why, on this example rotate only works after a move
+      sleep(5)
+      last_transform_value = div.style('-webkit-transform')
+      div.touch_action :rotate
+      sleep(3)
+      expect(last_transform_value).not_to be_equal(div.style('-webkit-transform'))
+    end
+  end
+end

data/spec/features/tap_spec.rb

@@ -0,0 +1,20 @@
+require 'spec_helper'
+
+RSpec.describe TouchAction do
+  describe "Tap" do
+    it 'should tap the div bound by HammerJS' do
+      @browser.goto('http://localhost:9292/tap')
+      element = @browser.div(id: 'myElement')
+      element.touch_action :tap
+      sleep(5)
+      expect(element.text).to include('tap')
+    end
+
+    it 'should tap link bound by FastClick' do
+      @browser.goto('http://localhost:9292/tap')
+      @browser.a(id: 'fastclick').touch_action :tap
+      sleep(5)
+      expect(@browser.p(id: 'fast-click-test').text).to include('1 times')
+    end
+  end
+end

data/spec/spec_helper.rb

@@ -0,0 +1,56 @@
+require "rspec"
+require "pry"
+require 'rack'
+require 'thin'
+require 'touch_action'
+require 'watir-webdriver'
+
+Dir["./spec/support/**/*.rb"].sort.each { |f| require f}
+
+@server_thread = Thread.new do
+  Rack::Handler::Thin.run @app, :Port => 9292
+end
+
+
+case ENV['platform']
+when 'ios'
+  capabilities = {
+    :deviceName => 'iPhone 5s',
+    :browserName => 'Safari',
+    :platformVersion => '7.1',
+    :platformName => 'iOS',
+    :app => 'safari',
+    :newCommandTimeout => 9999
+  }
+
+when 'android'
+  capabilities = {
+
+  :deviceName => 'android_simulator',
+  :version => '4.4.2',
+  :platformName => 'Android',
+  :newCommandTimeout => 9999,
+  :browserName => 'Browser',
+  :avd => 'android_simulator',
+  autoAcceptAlerts: true
+}
+
+end
+
+
+ENV['appium_url'] ||= "http://127.0.0.1:4723/wd/hub"
+ENV['browser'] ||= 'firefox'
+
+RSpec.configure do |config|
+
+  config.before(:each) do
+    if ENV['platform']
+      @browser = Watir::Browser.new(Selenium::WebDriver.for(:remote, :desired_capabilities => capabilities, :url => ENV['appium_url']))
+    else
+      @browser = Watir::Browser.new ENV['browser']
+    end
+  end
+  config.after(:each) do
+    @browser.close if @browser
+  end
+end

data/spec/support/static_website/public/css/style.css

@@ -0,0 +1,77 @@
+@import url(http://fonts.googleapis.com/css?family=Open+Sans);
+
+*, *:after, *:before {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    min-height: 100%;
+    background: #eee;
+    font: 13px/1.5em 'Open Sans', Helvetica, Arial, sans-serif;
+}
+
+a {
+    color: #4986e7;
+}
+
+.bg1, .green { background: #42d692; }
+.bg2, .blue { background: #4986e7; }
+.bg3, .red { background: #d06b64; }
+.bg4, .purple { background: #cd74e6; }
+.bg5, .azure { background: #9fe1e7; }
+
+body {
+    margin: 20px;
+}
+
+pre {
+    background: #fff;
+    padding: 20px;
+    margin-bottom: 20px;
+}
+
+.container {
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+.clear { clear: both; }
+
+
+html, body {
+    overflow: hidden;
+    margin: 0;
+}
+
+body {
+    -webkit-perspective: 500;
+    -moz-perspective: 500;
+    perspective: 500;
+}
+
+.animate {
+    -webkit-transition: all .3s;
+    -moz-transition: all .3s;
+    transition: all .3s;
+}
+
+#hit {
+    padding: 10px;
+}
+
+#log {
+    position: absolute;
+    padding: 10px;
+}
+
+#myElement {
+  background: silver;
+  height: 300px;
+  text-align: center;
+  font: 30px/300px Helvetica, Arial, sans-serif;
+}
+

data/spec/support/static_website/public/index.html

@@ -0,0 +1,198 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Touch Page Test</title>
+  <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
+  
+  <script type='application/javascript' src='js/hammer.js'></script>
+  <link rel="stylesheet" type="text/css" href="css/style.css" />
+  <style type="text/css">
+    #blue{
+      position:absolute;
+      top:100px;
+      left:500px;
+      width:100px;
+      height:100px;
+      background-color:blue;
+      cursor:pointer;
+      right:
+    }
+  </style>  
+</head>
+<body>
+
+  <p>Move the square to get it moving (it's using Hammer JS to recognize the touch).</p>
+  
+  <p id="distance_x">Distance moved horizontaly:</p>
+  <br>
+  <p id="distance_y">Distance moved verticaly:</p>
+
+
+  <div id="hit" style="background: #42d692; width: 150px; height: 150px;"></div>
+
+
+  <script>
+
+    var reqAnimationFrame = (function () {
+        return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
+            window.setTimeout(callback, 1000 / 60);
+        };
+    })();
+
+    var el = document.querySelector("#hit");
+
+    var START_X = Math.round((window.innerWidth - el.offsetWidth) / 2);
+    var START_Y = Math.round((window.innerHeight - el.offsetHeight) / 2);
+
+    var ticking = false;
+    var transform;
+    var timer;
+
+    var mc = new Hammer.Manager(el);
+
+    mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
+
+    mc.add(new Hammer.Swipe()).recognizeWith(mc.get('pan'));
+    mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
+    mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);
+
+    mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
+    mc.add(new Hammer.Tap());
+
+    mc.on("panstart panmove", onPan);
+    mc.on("rotatestart rotatemove", onRotate);
+    mc.on("pinchstart pinchmove", onPinch);
+    mc.on("swipe", onSwipe);
+    mc.on("tap", onTap);
+    mc.on("doubletap", onDoubleTap);
+
+    mc.on("hammer.input", function(ev) {
+        if(ev.isFinal) {
+          START_X = START_X + ev.deltaX;
+          START_Y = START_Y + ev.deltaY;
+          $('#distance_x').text("Distance moved horizontaly: " + ev.deltaX);
+          $('#distance_y').text("Distance moved verticaly: " + ev.deltaY);
+          
+        }
+    });
+
+
+    function resetElement() {
+        el.className = 'animate';
+        transform = {
+            translate: { x: START_X, y: START_Y },
+            scale: 1,
+            angle: 0,
+            rx: 0,
+            ry: 0,
+            rz: 0
+        };
+
+        requestElementUpdate();
+
+
+    }
+
+    function updateElementTransform() {
+        var value = [
+                    'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
+                    'scale(' + transform.scale + ', ' + transform.scale + ')',
+                    'rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +','+  transform.angle + 'deg)'
+        ];
+
+        value = value.join(" ");
+        el.textContent = value;
+        el.style.webkitTransform = value;
+        el.style.mozTransform = value;
+        el.style.transform = value;
+        ticking = false;
+    }
+
+    function requestElementUpdate() {
+        if(!ticking) {
+            reqAnimationFrame(updateElementTransform);
+            ticking = true;
+        }
+    }
+
+    function onPan(ev) {
+        el.className = '';
+        transform.translate = {
+            x: START_X + ev.deltaX,
+            y: START_Y + ev.deltaY
+        };
+
+        requestElementUpdate();
+        
+    }
+
+    var initScale = 1;
+    function onPinch(ev) {
+        if(ev.type == 'pinchstart') {
+            initScale = transform.scale || 1;
+        }
+
+        el.className = '';
+        transform.scale = initScale * ev.scale;
+
+        requestElementUpdate();
+        
+    }
+
+    var initAngle = 0;
+    function onRotate(ev) {
+        if(ev.type == 'rotatestart') {
+            initAngle = transform.angle || 0;
+        }
+
+        el.className = '';
+        transform.rz = 1;
+        transform.angle = initAngle + ev.rotation;
+        requestElementUpdate();
+        
+    }
+
+    function onSwipe(ev) {
+        var angle = 50;
+        transform.ry = (ev.direction & Hammer.DIRECTION_HORIZONTAL) ? 1 : 0;
+        transform.rx = (ev.direction & Hammer.DIRECTION_VERTICAL) ? 1 : 0;
+        transform.angle = (ev.direction & (Hammer.DIRECTION_RIGHT | Hammer.DIRECTION_UP)) ? angle : -angle;
+
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            resetElement();
+        }, 300);
+        requestElementUpdate();
+        
+    }
+
+    function onTap(ev) {
+        transform.rx = 1;
+        transform.angle = 25;
+
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            resetElement();
+        }, 200);
+        requestElementUpdate();
+        
+    }
+
+    function onDoubleTap(ev) {
+        transform.rx = 1;
+        transform.angle = 80;
+
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            resetElement();
+        }, 500);
+        requestElementUpdate();
+        
+    }
+
+    resetElement();
+
+  </script>
+</body>
+</html>