react-spatial/components/StopEvents/StopEvents.test.js

Components to build React map apps.

/* eslint-disable max-classes-per-file */
import React from 'react';
import { configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import StopEvents from './StopEvents';

jest.mock('resize-observer-polyfill');

configure({ adapter: new Adapter() });

// eslint-disable-next-line  react/prefer-stateless-function
var BasicComponent = /*@__PURE__*/(function (superclass) {
  function BasicComponent () {
    superclass.apply(this, arguments);
  }

  if ( superclass ) BasicComponent.__proto__ = superclass;
  BasicComponent.prototype = Object.create( superclass && superclass.prototype );
  BasicComponent.prototype.constructor = BasicComponent;

  BasicComponent.prototype.render = function render () {
    return (
      React.createElement( 'div', { id: "basic" },
        React.createElement( StopEvents, { observe: this })
      )
    );
  };

  return BasicComponent;
}(React.Component));
// eslint-disable-next-line  react/prefer-stateless-function,react/no-multi-comp
var BasicComponent2 = /*@__PURE__*/(function (superclass) {
  function BasicComponent2 () {
    superclass.apply(this, arguments);
  }

  if ( superclass ) BasicComponent2.__proto__ = superclass;
  BasicComponent2.prototype = Object.create( superclass && superclass.prototype );
  BasicComponent2.prototype.constructor = BasicComponent2;

  BasicComponent2.prototype.render = function render () {
    return (
      React.createElement( 'div', { id: "basic2" },
        React.createElement( StopEvents, { observe: "#basic2" })
      )
    );
  };

  return BasicComponent2;
}(React.Component));
// eslint-disable-next-line  react/prefer-stateless-function, react/no-multi-comp
var BasicComponent3 = /*@__PURE__*/(function (superclass) {
  function BasicComponent3 () {
    superclass.apply(this, arguments);
  }

  if ( superclass ) BasicComponent3.__proto__ = superclass;
  BasicComponent3.prototype = Object.create( superclass && superclass.prototype );
  BasicComponent3.prototype.constructor = BasicComponent3;

  BasicComponent3.prototype.render = function render () {
    return (
      React.createElement( 'div', { id: "basic" },
        React.createElement( StopEvents, { observe: this, events: ['contextmenu'] })
      )
    );
  };

  return BasicComponent3;
}(React.Component));

// eslint-disable-next-line  react/prefer-stateless-function
// eslint-disable-next-line react/no-multi-comp
var BasicComponent4 = /*@__PURE__*/(function (superclass) {
  function BasicComponent4(props) {
    superclass.call(this, props);
    this.state = {
      ref: null,
    };
  }

  if ( superclass ) BasicComponent4.__proto__ = superclass;
  BasicComponent4.prototype = Object.create( superclass && superclass.prototype );
  BasicComponent4.prototype.constructor = BasicComponent4;

  BasicComponent4.prototype.render = function render () {
    var this$1 = this;

    var ref$1 = this.state;
    var ref = ref$1.ref;
    return (
      React.createElement( 'div', {
        id: "basic4", ref: function (node) {
          if (node && !ref) {
            this$1.setState({ ref: node });
          }
        } },
        React.createElement( StopEvents, { observe: ref })
      )
    );
  };

  return BasicComponent4;
}(React.Component));

describe('StopEvents', function () {
  describe('when observe property is set to a React Component', function () {
    test('(un)observes it on (un)mount', function () {
      var spy = jest.spyOn(StopEvents.prototype, 'updateNodes');
      var spy2 = jest.spyOn(StopEvents.prototype, 'addListeners');
      var spy3 = jest.spyOn(StopEvents.prototype, 'removeListeners');
      var wrapper = mount(React.createElement( BasicComponent, null ));
      expect(spy).toHaveBeenCalled();
      expect(spy2).toHaveBeenCalled();
      expect(spy3).not.toHaveBeenCalled();
      spy.mockReset();
      spy2.mockReset();
      spy3.mockReset();
      wrapper.unmount();
      expect(spy).not.toHaveBeenCalled();
      expect(spy2).not.toHaveBeenCalled();
      expect(spy3).toHaveBeenCalled();
      spy.mockRestore();
      spy2.mockRestore();
      spy3.mockRestore();
    });
  });

  describe('when observe property is set to a query selector', function () {
    test('(un)observes it on (un)mount', function () {
      var spy = jest.spyOn(StopEvents.prototype, 'updateNodes');
      var spy2 = jest.spyOn(StopEvents.prototype, 'addListeners');
      var spy3 = jest.spyOn(StopEvents.prototype, 'removeListeners');
      var wrapper = mount(React.createElement( BasicComponent2, null ));
      expect(spy).toHaveBeenCalled();
      expect(spy2).toHaveBeenCalled();
      expect(spy3).not.toHaveBeenCalled();
      spy.mockReset();
      spy2.mockReset();
      spy3.mockReset();
      wrapper.unmount();
      expect(spy).not.toHaveBeenCalled();
      expect(spy2).not.toHaveBeenCalled();
      expect(spy3).toHaveBeenCalled();
      spy.mockRestore();
      spy2.mockRestore();
      spy3.mockRestore();
    });
  });

  describe('when observe property is an HTMLElement.', function () {
    test('(un)observes it on (un)mount/update', function () {
      var spy = jest.spyOn(StopEvents.prototype, 'updateNodes');
      var spy2 = jest.spyOn(StopEvents.prototype, 'addListeners');
      var spy3 = jest.spyOn(StopEvents.prototype, 'removeListeners');
      var wrapper = mount(React.createElement( BasicComponent4, null ));
      expect(spy).toHaveBeenCalledTimes(2);
      expect(spy2).toHaveBeenCalledTimes(2);
      expect(spy3).toHaveBeenCalledTimes(1);
      spy.mockReset();
      spy2.mockReset();
      spy3.mockReset();
      wrapper.unmount();
      expect(spy).not.toHaveBeenCalled();
      expect(spy2).not.toHaveBeenCalled();
      expect(spy3).toHaveBeenCalled();
      spy.mockRestore();
      spy2.mockRestore();
      spy3.mockRestore();
    });
  });

  describe('stop progation of events', function () {
    test('calling evt.stopPropagation', function () {
      var stop = jest.fn();
      var evt = new CustomEvent('pointerdown');
      evt.stopPropagation = stop;
      var wrapper = mount(React.createElement( BasicComponent, null ));
      var basic = wrapper.getDOMNode();
      basic.dispatchEvent(evt);
      expect(stop).toHaveBeenCalledTimes(1);
    });

    test('calling evt.nativeEvent.stopPropagation', function () {
      var stop = jest.fn();
      var evt = new CustomEvent('pointerdown');
      evt.stopPropagation = stop;
      evt.nativeEvent = {
        stopImmediatePropagation: stop,
      };
      var wrapper = mount(React.createElement( BasicComponent, null ));
      var basic = wrapper.getDOMNode();
      basic.dispatchEvent(evt);
      expect(stop).toHaveBeenCalledTimes(2);
    });

    test('removing tm-pointer class', function () {
      document.body.classList.add('tm-pointer');
      var evt = new CustomEvent('pointerdown');
      var wrapper = mount(React.createElement( BasicComponent, null ));
      var basic = wrapper.getDOMNode();
      expect(document.body.classList.contains('tm-pointer')).toBe(true);
      basic.dispatchEvent(evt);
      expect(document.body.classList.contains('tm-pointer')).toBe(false);
    });

    test('calling stopPropagation on events from props.events', function () {
      var stop = jest.fn();
      var evt = new CustomEvent('contextmenu');
      evt.stopPropagation = stop;
      var wrapper = mount(React.createElement( BasicComponent3, null ));
      var basic = wrapper.getDOMNode();
      basic.dispatchEvent(evt);
      expect(stop).toHaveBeenCalledTimes(1);
    });
  });
});

//# sourceMappingURL=StopEvents.test.js.map