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

Components to build React map apps.

import 'jest-canvas-mock';
import proj4 from 'proj4';
import { register } from 'ol/proj/proj4';
import React from 'react';
import { configure, shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import ResizeObserver from 'resize-observer-polyfill';
import MapEvent from 'ol/MapEvent';
import OLLayer from 'ol/layer/Vector';
import OLMap from 'ol/Map';
import OLView from 'ol/View';
import BasicMap from './BasicMap';
import Layer from '../../layers/Layer';

proj4.defs(
  'EPSG:21781',
  '+proj=somerc +lat_0=46.95240555555556 ' +
    '+lon_0=7.439583333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel ' +
    '+towgs84=674.4,15.1,405.3,0,0,0,0 +units=m +no_defs'
);

register(proj4);

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

var extent = [0, 0, 0, 0];
var olView = new OLView();
var olMap = new OLMap({ view: olView });
var olLayers = [
  new Layer({
    name: 'foo',
    olLayer: new OLLayer({}),
    visible: true,
  }) ];

describe('BasicMap', function () {
  test('should be rendered', function () {
    var setTarget = jest.spyOn(olMap, 'setTarget');
    shallow(React.createElement( BasicMap, { map: olMap }));
    expect(setTarget).toHaveBeenCalled();
  });

  test('should be rendered with touchAction to none', function () {
    shallow(React.createElement( BasicMap, { map: olMap }));
    expect(olMap.getViewport().style.touchAction).toBe('none');
    expect(olMap.getViewport().style.msTouchAction).toBe('none');
    expect(olMap.getViewport().getAttribute('touch-action')).toBe('none');
  });

  test('uses onMapMoved function', function () {
    var spy = jest.fn(function () {});
    shallow(React.createElement( BasicMap, { map: olMap, onMapMoved: spy }));
    olMap.dispatchEvent(new MapEvent('moveend', olMap));
    expect(spy).toHaveBeenCalledTimes(1);
  });

  test('uses onFeaturesClick function', function () {
    var spy = jest.fn();
    shallow(React.createElement( BasicMap, { map: olMap, onFeaturesClick: spy }));
    olMap.dispatchEvent(new MapEvent('singleclick', olMap));
    expect(spy).toHaveBeenCalledTimes(1);
  });

  test('uses onFeaturesHover function', function () {
    var spy = jest.fn();
    shallow(React.createElement( BasicMap, { map: olMap, onFeaturesHover: spy }));
    olMap.dispatchEvent(new MapEvent('pointermove', olMap));
    expect(spy).toHaveBeenCalledTimes(1);
  });

  test('should be rendered with a default map', function () {
    var wrapper = shallow(React.createElement( BasicMap, null ));
    expect(wrapper.instance().map).toBeDefined();
  });

  test('should be rendered with layers and an extent', function () {
    var wrapper = shallow(
      React.createElement( BasicMap, {
        map: olMap, layers: olLayers, extent: extent, viewOptions: {
          minZoom: 16,
          maxZoom: 22,
          projection: 'EPSG:21781',
        } })
    );
    var inst = wrapper.instance();
    expect(inst.map).toBeDefined();
    expect(inst.map.getLayers().getLength()).toBe(1);
    expect(inst.map.getView().calculateExtent()).toEqual([
      -1.8640493388513675,
      -1.8640493388513675,
      1.8640493388513675,
      1.8640493388513675 ]);
  });

  test('center shoud be set', function () {
    var map = shallow(React.createElement( BasicMap, { map: olMap }));
    var setCenter = jest.spyOn(olMap.getView(), 'setCenter');
    map.setProps({ center: [0, 0] }).update();
    expect(setCenter).toHaveBeenCalled();
  });

  test('zoom shoud be set', function () {
    var map = shallow(React.createElement( BasicMap, { map: olMap, zoom: 5 }));
    expect(olMap.getView().getZoom()).toBe(5);
    map.setProps({ zoom: 2 }).update();
    expect(olMap.getView().getZoom()).toBe(2);
  });

  test('resolution shoud be set', function () {
    var map = shallow(React.createElement( BasicMap, { map: olMap, resolution: 100 }));
    expect(olMap.getView().getResolution()).toBe(100);
    map.setProps({ resolution: 5 }).update();
    expect(olMap.getView().getResolution()).toBe(5);
  });

  test('animation shoud be set', function () {
    var obj = {
      zoom: 4,
    };
    var map = shallow(React.createElement( BasicMap, { map: olMap }));
    var spy = jest.spyOn(olMap.getView(), 'animate');
    map.setProps({ animationOptions: obj }).update();
    expect(spy).toHaveBeenCalledWith(obj);
  });

  test('layers shoud be updated', function () {
    var addLayer = jest.spyOn(olMap, 'addLayer');
    var map = shallow(React.createElement( BasicMap, { map: olMap }));
    var layer = new Layer({ name: 'test', olLayer: new OLLayer() });
    map.setProps({ layers: [layer] }).update();
    expect(addLayer).toHaveBeenCalled();
  });

  test('should be fitted if extent is updated', function () {
    var fitExtent = jest.spyOn(OLView.prototype, 'fit');
    var map = shallow(React.createElement( BasicMap, { map: olMap }));
    map.setProps({ extent: [1, 2, 3, 4] }).update();
    expect(fitExtent).toHaveBeenCalled();
  });

  test('should be zoomed if zoom is updated', function () {
    var setZoom = jest.spyOn(OLView.prototype, 'setZoom');
    var map = shallow(React.createElement( BasicMap, { map: olMap }));
    map.setProps({ zoom: 15 }).update();
    expect(setZoom).toHaveBeenCalled();
  });

  test('size is updated when div is resized', function () {
    var spy = jest.spyOn(olMap, 'updateSize');
    var map = mount(React.createElement( BasicMap, { map: olMap }));
    var node = map.getDOMNode();
    expect(spy).toHaveBeenCalledTimes(1);
    // The mock class set the onResize property, we just have to run it to
    // simulate a resize
    ResizeObserver.onResize([
      {
        target: node,
        contentRect: {
          width: 20,
          height: 20,
        },
      } ]);
    expect(spy).toHaveBeenCalledTimes(2);
  });

  describe('#setLayers()', function () {
    test('only init layers which are not already on the map.', function () {
      var layer0 = new Layer({ key: 'test1' });
      var spyInit0 = jest.spyOn(layer0, 'init');
      var spyTerminate0 = jest.spyOn(layer0, 'terminate');
      var layer1 = new Layer({ key: 'test1' });
      var spyInit1 = jest.spyOn(layer1, 'init');
      var spyTerminate1 = jest.spyOn(layer1, 'terminate');
      var layer2 = new Layer({ key: 'test2' });
      var spyInit2 = jest.spyOn(layer2, 'init');
      var spyTerminate2 = jest.spyOn(layer2, 'terminate');
      var layer3 = new Layer({ key: 'test3' });
      var spyInit3 = jest.spyOn(layer3, 'init');
      var spyTerminate3 = jest.spyOn(layer3, 'terminate');
      var layer4 = new Layer({ key: 'test4' });
      var spyInit4 = jest.spyOn(layer4, 'init');
      var spyTerminate4 = jest.spyOn(layer4, 'terminate');
      var startLayers = [layer1, layer3];
      var map = shallow(React.createElement( BasicMap, { map: olMap, layers: startLayers }));

      expect(map.instance().layers).toBe(startLayers);
      expect(spyInit0).toHaveBeenCalledTimes(0);
      expect(spyInit1).toHaveBeenCalledTimes(1);
      expect(spyInit2).toHaveBeenCalledTimes(0);
      expect(spyInit3).toHaveBeenCalledTimes(1);
      expect(spyInit4).toHaveBeenCalledTimes(0);
      expect(spyTerminate0).toHaveBeenCalledTimes(0);
      expect(spyTerminate1).toHaveBeenCalledTimes(1);
      expect(spyTerminate2).toHaveBeenCalledTimes(0);
      expect(spyTerminate3).toHaveBeenCalledTimes(1);
      expect(spyTerminate4).toHaveBeenCalledTimes(0);
      expect(map.instance().layers).toBe(startLayers);

      var layers = [layer0, layer2, layer3, layer4];
      map.setProps({
        layers: layers,
      });

      expect(spyInit0).toHaveBeenCalledTimes(1);
      expect(spyInit1).toHaveBeenCalledTimes(1);
      expect(spyInit2).toHaveBeenCalledTimes(1);
      expect(spyInit3).toHaveBeenCalledTimes(1);
      expect(spyInit4).toHaveBeenCalledTimes(1);
      expect(spyTerminate0).toHaveBeenCalledTimes(1);
      expect(spyTerminate1).toHaveBeenCalledTimes(2);
      expect(spyTerminate2).toHaveBeenCalledTimes(1);
      expect(spyTerminate3).toHaveBeenCalledTimes(1);
      expect(spyTerminate4).toHaveBeenCalledTimes(1);
      expect(map.instance().layers).toBe(layers);
    });
  });
});

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