openlayers/test/browser/spec/ol/interaction/pointer.test.js

import Layer from '../../../../../src/ol/layer/Layer.js';
import Map from '../../../../../src/ol/Map.js';
import MapBrowserEvent from '../../../../../src/ol/MapBrowserEvent.js';
import MapBrowserEventHandler from '../../../../../src/ol/MapBrowserEventHandler.js';
import OlEvent from '../../../../../src/ol/events/Event.js';
import PointerInteraction from '../../../../../src/ol/interaction/Pointer.js';
import View from '../../../../../src/ol/View.js';

describe('ol.interaction.Pointer', function () {
  describe('#handleEvent', function () {
    let event;
    let defaultPrevented;

    beforeEach(function () {
      const type = 'pointerdown';
      const pointerEvent = new OlEvent();
      pointerEvent.type = type;
      pointerEvent.pointerId = 0;
      pointerEvent.preventDefault = function () {
        defaultPrevented = true;
      };
      event = new MapBrowserEvent(type, new Map(), pointerEvent);
      defaultPrevented = false;
    });

    it('does not prevent default on handled down event', function () {
      const interaction = new PointerInteraction({
        handleDownEvent: function () {
          return true;
        },
      });
      interaction.handleEvent(event);
      expect(defaultPrevented).to.be(false);
    });

    it('does not prevent default on unhandled down event', function () {
      const interaction = new PointerInteraction({
        handleDownEvent: function () {
          return false;
        },
      });
      interaction.handleEvent(event);
      expect(defaultPrevented).to.be(false);
    });
  });

  describe('event handlers', function () {
    let handleDownCalled, handleDragCalled, handleMoveCalled, handleUpCalled;

    const flagHandleDown = function () {
      handleDownCalled = true;
    };

    const flagHandleDrag = function () {
      handleDragCalled = true;
    };

    const flagHandleMove = function () {
      handleMoveCalled = true;
    };

    const flagHandleUp = function () {
      handleUpCalled = true;
    };

    class MockPointerInteraction extends PointerInteraction {
      constructor() {
        super(...arguments);
      }
      handleDownEvent(mapBrowserEvent) {
        flagHandleDown();
        return super.handleDownEvent(mapBrowserEvent);
      }
      handleDragEvent(mapBrowserEvent) {
        flagHandleDrag();
      }
      handleMoveEvent(mapBrowserEvent) {
        flagHandleMove();
      }
      handleUpEvent(mapBrowserEvent) {
        flagHandleUp();
        return super.handleUpEvent(mapBrowserEvent);
      }
    }

    beforeEach(function () {
      handleDownCalled = false;
      handleDragCalled = false;
      handleMoveCalled = false;
      handleUpCalled = false;
    });

    it('has default event handlers', function () {
      const interaction = new PointerInteraction({});
      expect(interaction.handleDownEvent()).to.be(false);
      expect(interaction.handleUpEvent()).to.be(false);
    });

    it('allows event handler overrides via options', function () {
      const interaction = new PointerInteraction({
        handleDownEvent: flagHandleDown,
        handleDragEvent: flagHandleDrag,
        handleMoveEvent: flagHandleMove,
        handleUpEvent: flagHandleUp,
      });

      interaction.handleDownEvent();
      expect(handleDownCalled).to.be(true);

      interaction.handleDragEvent();
      expect(handleDragCalled).to.be(true);

      interaction.handleMoveEvent();
      expect(handleMoveCalled).to.be(true);

      interaction.handleUpEvent();
      expect(handleUpCalled).to.be(true);
    });

    it('allows event handler overrides via class extension', function () {
      const interaction = new MockPointerInteraction({});

      interaction.handleDownEvent();
      expect(handleDownCalled).to.be(true);

      interaction.handleDragEvent();
      expect(handleDragCalled).to.be(true);

      interaction.handleMoveEvent();
      expect(handleMoveCalled).to.be(true);

      interaction.handleUpEvent();
      expect(handleUpCalled).to.be(true);
    });
  });

  describe("With a map's MapBrowserEventHandler", function () {
    let target, interaction, element, down1, down2, up1, up2;
    beforeEach(function () {
      target = document.createElement('div');
      target.style.width = '100px';
      target.style.height = '100px';
      document.body.appendChild(target);
      interaction = new PointerInteraction({});
      const handler = new MapBrowserEventHandler(
        new Map({
          target: target,
          layers: [
            new Layer({
              render: () => {},
            }),
          ],
          interactions: [interaction],
          view: new View({
            center: [0, 0],
            zoom: 0,
          }),
        })
      );
      handler.map_.renderSync();
      element = handler.element_;
      down1 = new Event('pointerdown', {target: element});
      down1.clientX = 0;
      down1.clientY = 0;
      down1.button = 0;
      down1.pointerId = 1;
      down2 = new Event('pointerdown', {target: element});
      down2.clientX = 0;
      down2.clientY = 0;
      down2.button = 0;
      down2.pointerId = 2;
      up1 = new Event('pointerup', {target: element.firstChild});
      up1.clientX = 0;
      up1.clientY = 0;
      up1.button = 0;
      up1.pointerId = 1;
      up2 = new Event('pointerup', {target: element.firstChild});
      up2.clientX = 0;
      up2.clientY = 0;
      up2.button = 0;
      up2.pointerId = 2;
    });

    afterEach(function () {
      document.body.removeChild(target);
    });

    it('tracks pointers correctly', function () {
      element.dispatchEvent(down1);
      element.dispatchEvent(down2);
      expect(interaction.targetPointers[0].pointerId).to.be(1);
      expect(interaction.targetPointers[1].pointerId).to.be(2);
      document.dispatchEvent(up1);
      document.dispatchEvent(up2);
      expect(interaction.targetPointers).to.have.length(0);
    });
  });
});