javascript/atoms/test/mouse_test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>mouse_test</title>
  <link rel="stylesheet" href="/filez/_main/third_party/js/qunit/qunit.css">
  <script src="/filez/_main/third_party/js/qunit/qunit.js"></script>
  <script src="/filez/_main/third_party/js/qunit/qunit_test_runner.js"></script>
  <script src="test_bootstrap.js"></script>
  <script type="text/javascript">
    goog.require('bot.Mouse');
    goog.require('bot.action');
    goog.require('bot.userAgent');
    goog.require('goog.Promise');
    goog.require('goog.array');
    goog.require('goog.dom');
    goog.require('goog.events');
    goog.require('goog.events.EventType');
    goog.require('goog.math.Coordinate');
    goog.require('goog.style');
    goog.require('goog.userAgent');
  </script>
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <div id="green" style="background-color:green; width:100px; height:50px">
  <div id="red" style="background-color:red; width:50px; height:25px;
  position: relative; top:25px;">Red</div>
  </div>
  <div id="capture" style="background-color:blue; width:100px; height:50px">
    <div id="innerCapture" style="background-color:cyan;
                                  width:50px;
                                  height:25px;">
    </div>
  </div>
<script type="text/javascript">
  goog.events.EventType.MOUSEWHEEL =
    goog.userAgent.GECKO ? 'DOMMouseScroll' : 'mousewheel';
  goog.events.EventType.MOUSEPIXELSCROLL = 'MozMousePixelScroll';

  var events = [];
  var greenDiv, redDiv, captureDiv, innerCaptureDiv;
  var MOUSE_EVENTS = [
    goog.events.EventType.MOUSEOUT,
    goog.events.EventType.MOUSEOVER,
    goog.events.EventType.MOUSEMOVE,
    goog.events.EventType.MOUSEDOWN,
    goog.events.EventType.MOUSEUP,
    goog.events.EventType.MOUSEWHEEL,
    goog.events.EventType.MOUSEPIXELSCROLL,
    goog.events.EventType.CLICK,
    goog.events.EventType.CONTEXTMENU,
    goog.events.EventType.DBLCLICK,
    goog.events.EventType.MSPOINTERDOWN,
    goog.events.EventType.MSPOINTERMOVE,
    goog.events.EventType.MSPOINTEROVER,
    goog.events.EventType.MSPOINTEROUT,
    goog.events.EventType.MSPOINTERUP
  ];

  greenDiv = bot.locators.findElement({id: 'green'});
  redDiv = bot.locators.findElement({id: 'red'});
  captureDiv = bot.locators.findElement({id: 'capture'});
  innerCaptureDiv = bot.locators.findElement({id: 'innerCapture'});

  QUnit.testStart(function() {
    bot.getDocument().documentElement.focus();
    events = [];
    goog.events.removeAll(greenDiv);
    goog.events.removeAll(redDiv);
    goog.events.removeAll(captureDiv);
    goog.events.removeAll(innerCaptureDiv);

    goog.events.listen(greenDiv, MOUSE_EVENTS, function(e) {
      events.push(e.type);
      events.push(e.target);
      events.push(e.button);
    });

    goog.events.listen(captureDiv, MOUSE_EVENTS, function(e) {
      events.push(e.type);
      events.push(e.target);
      events.push(e.button);
      if (e.type == goog.events.EventType.MSPOINTERDOWN) {
        captureDiv.msSetPointerCapture(e.getBrowserEvent().pointerId);
      }
    });
  });

  function b(button) {
    return bot.userAgent.IE_DOC_9 || goog.userAgent.WEBKIT ? button['wk'] :
        (goog.userAgent.IE ? button['ie'] :
            button['ff']);
  }

  function assertEvents(assert, var_args) {
    var expectedEvents = goog.array.concat.apply(null, Array.prototype.slice.call(arguments, 1));
    assert.deepEqual(events, expectedEvents);
    events = [];
  }

  function mousedownEvents(elem, button) {
     var evts = [goog.events.EventType.MOUSEDOWN, elem, button];
     return !bot.userAgent.IE_DOC_10 ? evts :
         [goog.events.EventType.MSPOINTERDOWN, elem, button].concat(evts);
  }

  function mousemoveEvents(elem, button) {
     var evts = [goog.events.EventType.MOUSEMOVE, elem, button];
     return bot.userAgent.IE_DOC_10 ?
         [goog.events.EventType.MSPOINTERMOVE, elem, -1].concat(evts) :
         evts;
  }

  function mouseoutEvents(elem, button) {
     var evts = [goog.events.EventType.MOUSEOUT, elem, button];
     return bot.userAgent.IE_DOC_10 ?
         [goog.events.EventType.MSPOINTEROUT, elem, -1].concat(evts) :
         evts;
  }

  function mouseupEvents(elem, button) {
     var evts = [goog.events.EventType.MOUSEUP, elem, button];
     return bot.userAgent.IE_DOC_10 ?
         [goog.events.EventType.MSPOINTERUP, elem, button].concat(evts) :
         evts;
  }

  function mouseoverAndMoveEvents(elem, button) {
    function mouseoverEvents(elem, button) {
       var evts = [goog.events.EventType.MOUSEOVER, elem, button];
       return bot.userAgent.IE_DOC_10 ?
           [goog.events.EventType.MSPOINTEROVER, elem, -1].concat(evts) :
           evts;
    }
    return goog.userAgent.IE ?
        mousemoveEvents(elem, button).concat(
             mouseoverEvents(elem, bot.userAgent.IE_DOC_9 ? button : 0)) :
        mouseoverEvents(elem, button).concat(mousemoveEvents(elem, button));
  }

  QUnit.test('no click when press hidden element', function(assert) {
    var coords = new goog.math.Coordinate(5, 5);
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, coords);
    goog.style.showElement(greenDiv, false);
    mouse.pressButton(bot.Mouse.Button.LEFT);
    mouse.releaseButton();

    assertEvents(assert, mouseoverAndMoveEvents(greenDiv, 0));
    goog.style.showElement(greenDiv, true);
  });

  QUnit.test('left click', function(assert) {
    var coords = new goog.math.Coordinate(5, 5);
    var mouse = new bot.Mouse();
    mouse.move(redDiv, coords);
    mouse.pressButton(bot.Mouse.Button.LEFT);
    mouse.releaseButton();

    assertEvents(assert,
      mouseoverAndMoveEvents(redDiv, 0),
      mousedownEvents(redDiv, b({ie: 1, wk: 0, ff: 0})),
      mouseupEvents(redDiv, b({ie: 1, wk: 0, ff: 0})),
      goog.events.EventType.CLICK, redDiv, 0
    );
  });

  QUnit.test('no left click when released over other element', function(assert) {
    var coords = new goog.math.Coordinate(5, 5);
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, coords);
    mouse.pressButton(bot.Mouse.Button.LEFT);
    mouse.move(redDiv, coords);
    mouse.releaseButton();

    assertEvents(assert,
      mouseoverAndMoveEvents(greenDiv, 0),
      mousedownEvents(greenDiv, b({ie: 1, wk: 0, ff: 0})),
      mouseoutEvents(greenDiv, 0),
      mouseoverAndMoveEvents(redDiv, b({ie: 1, wk: 0, ff: 0})),
      mouseupEvents(redDiv, b({ie: 1, wk: 0, ff: 0}))
    );
  });

  QUnit.test('right click', function(assert) {
    var coords = new goog.math.Coordinate(5, 5);
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, coords);
    mouse.pressButton(bot.Mouse.Button.RIGHT);
    mouse.move(redDiv, coords);
    mouse.releaseButton();

    var expectUninitializedButtons =
        goog.userAgent.product.CHROME && goog.userAgent.product.isVersion(60);
    var wkButtonData;
    if (expectUninitializedButtons) {
      wkButtonData = 0;
    } else {
      wkButtonData = 2;
    }

    assertEvents(assert,
      mouseoverAndMoveEvents(greenDiv, 0),
      mousedownEvents(greenDiv, 2),
      mouseoutEvents(greenDiv, b({ie: 2, wk: wkButtonData, ff: 0})),
      mouseoverAndMoveEvents(redDiv, b({ie: 2, wk: wkButtonData, ff: 0})),
      mouseupEvents(redDiv, 2),
      goog.events.EventType.CONTEXTMENU, redDiv, b({ie: 0, wk: 2, ff: 2})
    );
  });

  QUnit.test('double click', function(assert) {
    var coords = new goog.math.Coordinate(5, 5);
    var mouse = new bot.Mouse();
    mouse.move(redDiv, coords);
    mouse.pressButton(bot.Mouse.Button.LEFT);
    mouse.releaseButton();
    mouse.pressButton(bot.Mouse.Button.LEFT);
    mouse.releaseButton();

    assertEvents(assert,
      mouseoverAndMoveEvents(redDiv, 0),
      mousedownEvents(redDiv, b({ie: 1, wk: 0, ff: 0})),
      mouseupEvents(redDiv, b({ie: 1, wk: 0, ff: 0})),
      goog.events.EventType.CLICK, redDiv, 0,
      mousedownEvents(redDiv, b({ie: 1, wk: 0, ff: 0})),
      mouseupEvents(redDiv, b({ie: 1, wk: 0, ff: 0})),
      goog.events.EventType.CLICK, redDiv, 0,
      goog.events.EventType.DBLCLICK, redDiv, 0
    );
  });

  QUnit.test('no double click when the mouse moves between clicks', function(assert) {
    var coords = new goog.math.Coordinate(5, 5);
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, coords);
    mouse.pressButton(bot.Mouse.Button.LEFT);
    mouse.releaseButton();
    mouse.move(redDiv, coords);
    mouse.pressButton(bot.Mouse.Button.LEFT);
    mouse.releaseButton();

    assertEvents(assert,
      mouseoverAndMoveEvents(greenDiv, 0),
      mousedownEvents(greenDiv, b({ie: 1, wk: 0, ff: 0})),
      mouseupEvents(greenDiv, b({ie: 1, wk: 0, ff: 0})),
      goog.events.EventType.CLICK, greenDiv, 0,
      mouseoutEvents(greenDiv, 0),
      mouseoverAndMoveEvents(redDiv, 0),
      mousedownEvents(redDiv, b({ie: 1, wk: 0, ff: 0})),
      mouseupEvents(redDiv, b({ie: 1, wk: 0, ff: 0})),
      goog.events.EventType.CLICK, redDiv, 0
    );
  });

  QUnit.test('move on same element', function(assert) {
    var coords1 = new goog.math.Coordinate(5, 5);
    var coords2 = new goog.math.Coordinate(10, 5);
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, coords1);
    mouse.move(greenDiv, coords2);

    assertEvents(assert,
      mouseoverAndMoveEvents(greenDiv, 0),
      mousemoveEvents(greenDiv, 0)
    );
  });

  QUnit.test('move to another element', function(assert) {
    var coords = new goog.math.Coordinate(5, 5);
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, coords);
    mouse.move(redDiv, coords);

    assertEvents(assert,
      mouseoverAndMoveEvents(greenDiv, 0),
      mouseoutEvents(greenDiv, 0),
      mouseoverAndMoveEvents(redDiv, 0)
    );
  });

  QUnit.test('first move has null related', function(assert) {
    var mouse = new bot.Mouse();

    var fired = 0;

    goog.events.listenOnce(greenDiv, goog.events.EventType.MOUSEOVER,
        function(e) {
          fired++;
          assert.notOk(e.relatedTarget);
        });

    mouse.move(greenDiv, new goog.math.Coordinate(5, 5));

    assert.strictEqual(fired, 1);
  });

  QUnit.test('second move has related set', function(assert) {
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, new goog.math.Coordinate(5, 5));

    var fired = 0;
    var relatedTarget;
    goog.events.listen(redDiv, goog.events.EventType.MOUSEOVER,
        function(e) {
          fired++;
          relatedTarget = e.relatedTarget;
        });

    mouse.move(redDiv, new goog.math.Coordinate(5, 5));
    assert.strictEqual(fired, 1, 'mouseover event not fired');
    assert.ok(relatedTarget !== null);
    assert.notStrictEqual(relatedTarget, redDiv);
  });

  QUnit.test('move mouse from closed window does not error', function(assert) {
    var done = assert.async();
    var mouse = new bot.Mouse();
    var coord = new goog.math.Coordinate(0, 0);
    var iframe = document.createElement('iframe');

    new goog.Promise(function(loaded) {
      goog.events.listenOnce(iframe, 'load', loaded);
      iframe.src = 'testdata/blank_page.html';
      document.body.appendChild(iframe);
    }).then(function() {
      mouse.move(iframe.contentWindow.document.body, coord);
      return new goog.Promise(function(loaded) {
        goog.events.listenOnce(iframe, 'load', loaded);
        iframe.src = 'testdata/iframe_page.html';
      });
    }).then(function() {
      mouse.move(iframe.contentWindow.document.body, coord);
      document.body.removeChild(iframe);
      assert.ok(true);
      done();
    });
  });

  QUnit.test('move mouse fires all events on element hidden mid sequence', function(assert) {
    var coords = new goog.math.Coordinate(5, 5);
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, coords);
    goog.events.listen(greenDiv, 'mouseout', function() {
      goog.style.showElement(redDiv, false);
    });
    mouse.move(redDiv, coords);
    goog.style.showElement(redDiv, true);

    assertEvents(assert,
      mouseoverAndMoveEvents(greenDiv, 0),
      mouseoutEvents(greenDiv, 0),
      mouseoverAndMoveEvents(redDiv, 0)
    );
  });

  QUnit.test('scroll mouse zero ticks throws error', function(assert) {
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, new goog.math.Coordinate(5, 5));
    assert.throws(function() {
      mouse.scroll(0);
    });
  });

  QUnit.test('scroll mouse down', function(assert) {
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, new goog.math.Coordinate(5, 5));
    mouse.scroll(1);

    if (goog.userAgent.GECKO) {
      assertEvents(assert,
        mouseoverAndMoveEvents(greenDiv, 0),
        goog.events.EventType.MOUSEWHEEL, greenDiv, 0,
        goog.events.EventType.MOUSEPIXELSCROLL, greenDiv, 0
      );
    } else {
      assertEvents(assert,
        mouseoverAndMoveEvents(greenDiv, 0),
        goog.events.EventType.MOUSEWHEEL, greenDiv, 0
      );
    }
  });

  QUnit.test('scroll mouse up', function(assert) {
    var mouse = new bot.Mouse();
    mouse.move(greenDiv, new goog.math.Coordinate(5, 5));
    mouse.scroll(-2);

    if (goog.userAgent.GECKO) {
      assertEvents(assert,
        mouseoverAndMoveEvents(greenDiv, 0),
        goog.events.EventType.MOUSEWHEEL, greenDiv, 0,
        goog.events.EventType.MOUSEPIXELSCROLL, greenDiv, 0,
        goog.events.EventType.MOUSEWHEEL, greenDiv, 0,
        goog.events.EventType.MOUSEPIXELSCROLL, greenDiv, 0
      );
    } else {
      assertEvents(assert,
        mouseoverAndMoveEvents(greenDiv, 0),
        goog.events.EventType.MOUSEWHEEL, greenDiv, 0,
        goog.events.EventType.MOUSEWHEEL, greenDiv, 0
      );
    }
  });

  QUnit.test('ms set pointer capture', function(assert) {
    if (!bot.userAgent.IE_DOC_10) {
      assert.ok(true, 'Skipping: IE10 not detected');
      return;
    }
    var coords = new goog.math.Coordinate(75, 5);
    var mouse = new bot.Mouse();
    mouse.move(captureDiv, coords);
    mouse.pressButton(bot.Mouse.Button.LEFT);
    mouse.move(greenDiv, coords);
    mouse.releaseButton();

    assertEvents(assert,
      mouseoverAndMoveEvents(captureDiv, 0),
      mousedownEvents(captureDiv, 0),
      mouseoutEvents(captureDiv, 0),
      mouseoverAndMoveEvents(captureDiv, 0),
      mouseupEvents(captureDiv, 0)
    );
  });

  QUnit.test('click does not fire on captured pointer', function(assert) {
    if (!bot.userAgent.IE_DOC_10) {
      assert.ok(true, 'Skipping: IE10 not detected');
      return;
    }
    var mouse = new bot.Mouse();
    mouse.move(innerCaptureDiv, new goog.math.Coordinate(5, 5));
    mouse.pressButton(bot.Mouse.Button.LEFT);
    mouse.move(innerCaptureDiv, new goog.math.Coordinate(6, 6));
    mouse.releaseButton();

    assertEvents(assert,
      mouseoverAndMoveEvents(innerCaptureDiv, 0),
      mousedownEvents(innerCaptureDiv, 0),
      mousemoveEvents(captureDiv, 0),
      mouseupEvents(captureDiv, 0),
      goog.events.EventType.CLICK, innerCaptureDiv, 0
    );
  });
</script>
</body>
</html>