refactor tests

test/unit/PointerEvents-test.ts

@@ -0,0 +1,246 @@
+import { assert } from 'chai';
+
+import {
+  addStage,
+  Konva,
+  simulatePointerDown,
+  simulatePointerMove,
+  simulatePointerUp,
+} from './utis';
+
+// TODO: restore it!
+describe.skip('PointerEvents', function () {
+  Konva._pointerEventsEnabled = true;
+  // ======================================================
+  it('pointerdown pointerup pointermove', function (done) {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    var circle = new Konva.Circle({
+      x: stage.width() / 2,
+      y: stage.height() / 2,
+      radius: 70,
+      fill: 'red',
+      stroke: 'black',
+      strokeWidth: 4,
+    });
+
+    // mobile events
+    var pointerdown = false;
+    var pointerup = false;
+    var pointermove = false;
+
+    /*
+     * mobile
+     */
+    circle.on('pointerdown', function () {
+      pointerdown = true;
+    });
+
+    circle.on('pointerup', function () {
+      pointerup = true;
+    });
+
+    circle.on('pointermove', function () {
+      pointermove = true;
+    });
+
+    layer.add(circle);
+    stage.add(layer);
+
+    // touchstart circle
+    simulatePointerDown(stage, {
+      x: 289,
+      y: 100,
+      pointerId: 1,
+      preventDefault: function () {},
+    });
+
+    assert(pointerdown, '1) pointerdown should be true');
+    assert(!pointermove, '1) pointermove should be false');
+    assert(!pointerup, '1) pointerup should be false');
+
+    // pointerup circle
+    simulatePointerUp(stage, {
+      touches: [],
+      preventDefault: function () {},
+    });
+
+    assert(pointerdown, '2) pointerdown should be true');
+    assert(!pointermove, '2) pointermove should be false');
+    assert(pointerup, '2) pointerup should be true');
+
+    // pointerdown circle
+    simulatePointerDown(stage, {
+      touches: [
+        {
+          x: 289,
+          y: 100,
+        },
+      ],
+      preventDefault: function () {},
+    });
+
+    assert(pointerdown, '3) pointerdown should be true');
+    assert(!pointermove, '3) pointermove should be false');
+    assert(pointerup, '3) pointerup should be true');
+
+    // pointerup circle to triger dbltap
+    simulatePointerUp(stage, {
+      touches: [],
+      preventDefault: function () {},
+    });
+    // end drag is tied to document mouseup and pointerup event
+    // which can't be simulated.  call _endDrag manually
+    //Konva.DD._endDrag();
+
+    assert(pointerdown, '4) pointerdown should be true');
+    assert(!pointermove, '4) pointermove should be false');
+    assert(pointerup, '4) pointerup should be true');
+
+    setTimeout(function () {
+      // pointermove circle
+      simulatePointerMove(stage, {
+        touches: [
+          {
+            x: 290,
+            y: 100,
+          },
+        ],
+        preventDefault: function () {},
+      });
+
+      assert(pointerdown, '5) pointerdown should be true');
+      assert(pointermove, '5) pointermove should be true');
+      assert(pointerup, '5) pointerup should be true');
+
+      done();
+    }, 17);
+  });
+
+  // ======================================================
+  it('pointer capture', function (done) {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    var circle = new Konva.Circle({
+      x: stage.width() / 2,
+      y: stage.height() / 2,
+      radius: 70,
+      fill: 'red',
+      stroke: 'black',
+      strokeWidth: 4,
+    });
+
+    var circle2 = new Konva.Circle({
+      x: stage.width() / 2,
+      y: 20,
+      radius: 20,
+      fill: 'red',
+      stroke: 'black',
+      strokeWidth: 4,
+    });
+
+    // mobile events
+    var downCount = 0;
+    var otherDownCount = 0;
+
+    var pointerup = false;
+    var pointermove = false;
+
+    circle2.on('pointerdown', function () {
+      otherDownCount++;
+    });
+
+    circle.on('pointerdown', function (event) {
+      downCount++;
+      this.setPointerCapture(event['pointerId']);
+    });
+
+    circle.on('pointerup', function (evt) {
+      assert(
+        this.hasPointerCapture(evt['pointerId']),
+        'circle released capture'
+      );
+      pointerup = true;
+    });
+
+    circle.on('pointermove', function (evt) {
+      assert(this.hasPointerCapture(evt['pointerId']), 'circle has capture');
+      pointermove = true;
+    });
+
+    layer.add(circle);
+    layer.add(circle2);
+    stage.add(layer);
+
+    var top = stage.content.getBoundingClientRect().top;
+
+    // on circle 2 to confirm it works
+    simulatePointerDown(stage, {
+      x: 289,
+      y: 10 + top,
+      pointerId: 0,
+      preventDefault: function () {},
+    });
+
+    assert(otherDownCount === 1, '6) otherDownCount should be 1');
+    assert(downCount === 0, '6) downCount should be 0');
+    assert(!pointermove, '6) pointermove should be false');
+    assert(!pointerup, '6) pointerup should be false');
+
+    // on circle with capture
+    simulatePointerDown(stage, {
+      x: 289,
+      y: 100 + top,
+      pointerId: 1,
+      preventDefault: function () {},
+    });
+
+    assert(otherDownCount === 1, '7) otherDownCount should be 1');
+    assert(downCount === 1, '7) downCount should be 1');
+    assert(!pointermove, '7) pointermove should be false');
+    assert(!pointerup, '7) pointerup should be true');
+
+    // second pointerdown
+    simulatePointerDown(stage, {
+      x: 289,
+      y: 10 + top,
+      pointerId: 1,
+      preventDefault: function () {},
+    });
+
+    assert(otherDownCount === 1, '8) otherDownCount should be 1');
+    assert(downCount === 2, '8) pointerdown should be 2');
+    assert(!pointermove, '8) pointermove should be false');
+    assert(!pointerup, '8) pointerup should be true');
+
+    setTimeout(function () {
+      // pointermove over circle 2
+      simulatePointerMove(stage, {
+        x: 290,
+        y: 10 + top,
+        pointerId: 1,
+        preventDefault: function () {},
+      });
+
+      assert(otherDownCount === 1, '9) otherDownCount should be 1');
+      assert(pointermove, '9) pointermove should be true');
+
+      simulatePointerUp(stage, {
+        pointerId: 1,
+        preventDefault: function () {},
+      });
+
+      simulatePointerDown(stage, {
+        x: 289,
+        y: 10 + top,
+        pointerId: 1,
+        preventDefault: function () {},
+      });
+
+      assert(otherDownCount === 2, '10) otherDownCount should be 1');
+      assert(pointerup, '10) pointerup should be true');
+
+      done();
+    }, 17);
+  });
+});