fix: Improves isSingleLeftClick() to handle mousemove (#6138)

Fixes #6132

src/js/utils/dom.js

@@ -788,7 +788,8 @@ export function isSingleLeftClick(event) {
 
   // `mouseup` event on a single left click has
   // `button` and `buttons` equal to 0
-  if (event.button === 0 && event.buttons === 0) {
+  if (event.type === 'mouseup' && event.button === 0 &&
+      event.buttons === 0) {
     return true;
   }
 

test/unit/test-helpers.js

@@ -125,12 +125,11 @@ const TestHelpers = {
   },
 
   /**
-   * Triggers an event on a DOM node natively.
+   * Creates an event.
    *
-   * @param  {Element} element
-   * @param  {string} eventType
+   * @param {string} eventType
    */
-  triggerDomEvent(element, eventType) {
+  createEvent(eventType) {
     let event;
 
     if (document.createEvent) {
@@ -143,6 +142,18 @@ const TestHelpers = {
 
     event.eventName = eventType;
 
+    return event;
+  },
+
+  /**
+   * Triggers an event on a DOM node natively.
+   *
+   * @param  {Element} element
+   * @param  {string} eventType
+   */
+  triggerDomEvent(element, eventType) {
+    const event = TestHelpers.createEvent(eventType);
+
     if (document.createEvent) {
       element.dispatchEvent(event);
     } else {

test/unit/utils/dom.test.js

@@ -2,6 +2,7 @@
 import document from 'global/document';
 import sinon from 'sinon';
 import * as Dom from '../../../src/js/utils/dom.js';
+import TestHelpers from '../test-helpers.js';
 
 QUnit.module('dom');
 
@@ -601,3 +602,55 @@ QUnit.test('getBoundingClientRect() returns an object for elements that support
     assert.strictEqual(actual[k], expected[k], `the "${k}" returned by the Dom util matches what was returned by the mock element`);
   });
 });
+
+QUnit.test('isSingleLeftClick() returns false for mousemove event', function(assert) {
+  const mouseEvent = TestHelpers.createEvent('mousemove');
+
+  mouseEvent.button = 0;
+  mouseEvent.buttons = 0;
+
+  assert.notOk(Dom.isSingleLeftClick(mouseEvent), 'a mousemove event is not a single left click');
+});
+
+QUnit.test('isSingleLeftClick() returns true for mouseup event', function(assert) {
+  const mouseEvent = TestHelpers.createEvent('mouseup');
+
+  mouseEvent.button = 0;
+  mouseEvent.buttons = 0;
+
+  assert.ok(Dom.isSingleLeftClick(mouseEvent), 'a mouseup event is a single left click');
+});
+
+QUnit.test('isSingleLeftClick() checks return values for mousedown event', function(assert) {
+  const mouseEvent = TestHelpers.createEvent('mousedown');
+
+  // Left mouse click
+  mouseEvent.button = 0;
+  mouseEvent.buttons = 0;
+
+  assert.notOk(Dom.isSingleLeftClick(mouseEvent), 'a left mouse click on an older browser (Safari) is a single left click');
+
+  // Left mouse click
+  mouseEvent.button = 0;
+  mouseEvent.buttons = 1;
+
+  assert.ok(Dom.isSingleLeftClick(mouseEvent), 'a left mouse click on browsers that supporting buttons property is a single left click');
+
+  // Right mouse click
+  mouseEvent.button = 2;
+  mouseEvent.buttons = 2;
+
+  assert.notOk(Dom.isSingleLeftClick(mouseEvent), 'a right mouse click is not a single left click');
+
+  // Touch event on some mobiles
+  mouseEvent.button = 0;
+  mouseEvent.buttons = undefined;
+
+  assert.ok(Dom.isSingleLeftClick(mouseEvent), 'a touch event on mobiles is a single left click');
+
+  // Chrome simulates mobile devices
+  mouseEvent.button = undefined;
+  mouseEvent.buttons = undefined;
+
+  assert.ok(Dom.isSingleLeftClick(mouseEvent), 'a touch event on simulated mobiles is a single left click');
+});