carto.js/test/spec/geo/shared-tests-for-carto-layer-group.js

var CartoDBLayer = require('../../../src/geo/map/cartodb-layer.js');
var LayersCollection = require('../../../src/geo/map/layers.js');
var CartoDBLayerGroup = require('../../../src/geo/cartodb-layer-group.js');

module.exports = function (createNativeMap, CartoLayerGroupViewClass, getTileUrl, event) {
  var nativeMap;
  var container;
  var cartoDbLayer0;
  var cartoDbLayer1;
  var layerGroupView;

  var layerGroupModelMock;
  var layersCollection;

  var engineMock = {
    on: jasmine.createSpy('on')
  };

  var mapModelMock = {
    on: jasmine.createSpy('on'),
    isFeatureInteractivityEnabled: jasmine.createSpy('isFeatureInteractivityEnabled').and.returnValue(false)
  };

  beforeEach(function () {
    container = document.createElement('div');
    nativeMap = createNativeMap(container);

    cartoDbLayer0 = new CartoDBLayer({}, { engine: engineMock });
    cartoDbLayer1 = new CartoDBLayer({}, { engine: engineMock });

    layersCollection = new LayersCollection([cartoDbLayer0, cartoDbLayer1]);

    layerGroupModelMock = new CartoDBLayerGroup({
      urls: {
        'subdomains': [0, 1, 2, 3],
        'tiles': 'http://{s}.ashbu.cartocdn.com/documentation/api/v1/map/0123456789/{layerIndexes}/{z}/{x}/{y}.png',
        'grids': [
          [
            'http://0.ashbu.cartocdn.com/documentation/api/v1/map/0123456789/0/{z}/{x}/{y}.grid.json',
            'http://1.ashbu.cartocdn.com/documentation/api/v1/map/0123456789/0/{z}/{x}/{y}.grid.json',
            'http://2.ashbu.cartocdn.com/documentation/api/v1/map/0123456789/0/{z}/{x}/{y}.grid.json',
            'http://3.ashbu.cartocdn.com/documentation/api/v1/map/0123456789/0/{z}/{x}/{y}.grid.json'
          ],
          [
            'http://0.ashbu.cartocdn.com/documentation/api/v1/map/0123456789/1/{z}/{x}/{y}.grid.json',
            'http://1.ashbu.cartocdn.com/documentation/api/v1/map/0123456789/1/{z}/{x}/{y}.grid.json',
            'http://2.ashbu.cartocdn.com/documentation/api/v1/map/0123456789/1/{z}/{x}/{y}.grid.json',
            'http://3.ashbu.cartocdn.com/documentation/api/v1/map/0123456789/1/{z}/{x}/{y}.grid.json'
          ]
        ],
        'attributes': [
          'http://ashbu.cartocdn.com/documentation/api/v1/map/0123456789/0/attributes',
          'http://ashbu.cartocdn.com/documentation/api/v1/map/0123456789/1/attributes'
        ]
      },
      indexOfLayersInWindshaft: [1, 2]
    }, {
      layersCollection: layersCollection
    });
  });

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

  it('should set the right tile url', function () {
    layerGroupView = new CartoLayerGroupViewClass(layerGroupModelMock, {
      nativeMap: nativeMap,
      mapModel: mapModelMock
    });

    var actual = getTileUrl(layerGroupView);
    var expected = 'http://0.ashbu.cartocdn.com/documentation/api/v1/map/0123456789/1,2/{z}/{x}/{y}.png';

    expect(actual).toEqual(expected);
  });

  describe('interactivity', function () {
    it('should not enable interaction when there are no interactive layers ', function () {
      layerGroupView = new CartoLayerGroupViewClass(layerGroupModelMock, {
        nativeMap: nativeMap,
        mapModel: mapModelMock
      });

      expect(layerGroupView.interaction.length).toEqual(0);
    });

    it('should enable interaction when there are no interactive layers but map model has enabled interaction ', function () {
      mapModelMock.isFeatureInteractivityEnabled.and.returnValue(true);

      layerGroupView = new CartoLayerGroupViewClass(layerGroupModelMock, {
        nativeMap: nativeMap,
        mapModel: mapModelMock
      });

      expect(layerGroupView.interaction.length).toEqual(2); // 2 interactive layers
    });

    it('should enable interaction when there are interactive layers ', function () {
      mapModelMock.isFeatureInteractivityEnabled.and.returnValue(false);
      spyOn(cartoDbLayer0, 'isInteractive').and.returnValue(true);

      layerGroupView = new CartoLayerGroupViewClass(layerGroupModelMock, {
        nativeMap: nativeMap,
        mapModel: mapModelMock
      });

      expect(layerGroupView.interaction.length).toEqual(1);
    });

    it('should disable interaction for the hidden layers', function () {
      mapModelMock.isFeatureInteractivityEnabled.and.returnValue(false);
      spyOn(cartoDbLayer0, 'isInteractive').and.returnValue(true);
      spyOn(cartoDbLayer1, 'isInteractive').and.returnValue(true);
      spyOn(cartoDbLayer1, 'isVisible').and.returnValue(false);

      layerGroupView = new CartoLayerGroupViewClass(layerGroupModelMock, {
        nativeMap: nativeMap,
        mapModel: mapModelMock
      });

      expect(layerGroupView.interaction.length).toEqual(1);
    });
  });

  describe('event firing', function () {
    beforeEach(function () {
      spyOn(cartoDbLayer0, 'isInteractive').and.returnValue(true);
      layerGroupView = new CartoLayerGroupViewClass(layerGroupModelMock, {
        nativeMap: nativeMap,
        mapModel: mapModelMock
      });
    });
    it('should trigger a "featureOver" event when interactivity class triggers a mousemove event with some data', function (done) {
      event.e.type = 'mousemove';

      layerGroupView.on('featureOver', function (event) {
        expect(event.layer).toEqual(cartoDbLayer0);
        expect(event.layerIndex).toEqual(0);
        // Skip this test since the container point is computed with a wrong window offset.
        // expect(event.position).toEqual({ x: 264, y: 309 });
        // expect(event.latlng).toEqual([42.293564192170095, -8.173828125000002]);
        expect(event.feature.name).toEqual('fakeCityName');
        expect(event.feature.cartodb_id).toEqual(123);
        done();
      });

      layerGroupView.interaction[0]._eventEmitter.dispatchEvent('mousemove', event);
    });

    it('should trigger a "featureClick" event when interactivity class triggers a "click" event', function (done) {
      event.e.type = 'click';

      layerGroupView.on('featureClick', function (event) {
        expect(event.layer).toEqual(cartoDbLayer0);
        expect(event.layerIndex).toEqual(0);
        // Skip this test since the container point is computed with a wrong window offset.
        // expect(event.position).toEqual({ x: 264, y: 309 });
        // expect(event.latlng).toEqual([42.293564192170095, -8.173828125000002]);
        expect(event.feature.name).toEqual('fakeCityName');
        expect(event.feature.cartodb_id).toEqual(123);
        done();
      });

      layerGroupView.interaction[0]._eventEmitter.dispatchEvent('click', event);
    });

    it('should trigger a "featureOut" event when interactivity triggers a featureOut event', function (done) {
      event.e.type = 'mousemove';

      layerGroupView.on('featureOut', function (event) {
        expect(event.layer).toEqual(cartoDbLayer0);
        expect(event.layerIndex).toEqual(0);
        // Skip this test since the container point is computed with a wrong window offset.
        // expect(event.position).toEqual({ x: 264, y: 309 });
        // expect(event.latlng).toEqual([42.293564192170095, -8.173828125000002]);
        done();
      });

      layerGroupView.interaction[0]._eventEmitter.dispatchEvent('featureout', event);
    });

    it('should trigger a "featureError" event when interactivity triggers a featureOut event', function (done) {
      pending('Not implemented yet');
      layerGroupView.on('featureError', function (event) {
        expect(event.layer).toEqual(cartoDbLayer0);
        expect(event.layerIndex).toEqual(0);
        // Skip this test since the container point is computed with a wrong window offset.
        // expect(event.position).toEqual({ x: 264, y: 309 });
        // expect(event.latlng).toEqual([42.293564192170095, -8.173828125000002]);
        done();
      });

      layerGroupView.interaction[0]._eventEmitter.dispatchEvent('error', event);
    });
  });

  describe('when new urls are set', function () {
    it('should set the URL template', function () {
      layerGroupModelMock.set('urls', {
        'subdomains': [0, 1, 2, 3],
        'tiles': 'http://{s}.ashbu.cartocdn.com/documentation/api/v1/map/9876543210/{layerIndexes}/{z}/{x}/{y}.png',
        'grids': [
          [
            'http://0.ashbu.cartocdn.com/documentation/api/v1/map/9876543210/0/{z}/{x}/{y}.grid.json',
            'http://1.ashbu.cartocdn.com/documentation/api/v1/map/9876543210/0/{z}/{x}/{y}.grid.json',
            'http://2.ashbu.cartocdn.com/documentation/api/v1/map/9876543210/0/{z}/{x}/{y}.grid.json',
            'http://3.ashbu.cartocdn.com/documentation/api/v1/map/9876543210/0/{z}/{x}/{y}.grid.json'
          ],
          [
            'http://0.ashbu.cartocdn.com/documentation/api/v1/map/9876543210/1/{z}/{x}/{y}.grid.json',
            'http://1.ashbu.cartocdn.com/documentation/api/v1/map/9876543210/1/{z}/{x}/{y}.grid.json',
            'http://2.ashbu.cartocdn.com/documentation/api/v1/map/9876543210/1/{z}/{x}/{y}.grid.json',
            'http://3.ashbu.cartocdn.com/documentation/api/v1/map/9876543210/1/{z}/{x}/{y}.grid.json'
          ]
        ],
        'attributes': [
          'http://ashbu.cartocdn.com/documentation/api/v1/map/9876543210/0/attributes',
          'http://ashbu.cartocdn.com/documentation/api/v1/map/9876543210/1/attributes'
        ]
      });
      layerGroupView = new CartoLayerGroupViewClass(layerGroupModelMock, {
        nativeMap: nativeMap,
        mapModel: mapModelMock
      });

      var actual = getTileUrl(layerGroupView);
      var expected = 'http://0.ashbu.cartocdn.com/documentation/api/v1/map/9876543210/1,2/{z}/{x}/{y}.png';
      expect(actual).toEqual(expected);
    });
  });

  describe("when there aren't tile URLS", function () {
    it('should fetch empty tiles', function () {
      layerGroupModelMock.set('urls', {
        'tiles': '',
        'grids': [],
        'attributes': [
          'http://ashbu.cartocdn.com/documentation/api/v1/map/9876543210/0/attributes'
        ]
      });

      layerGroupView = new CartoLayerGroupViewClass(layerGroupModelMock, {
        nativeMap: nativeMap,
        mapModel: mapModelMock
      });

      var actual = getTileUrl(layerGroupView);
      var expected = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';

      expect(actual).toEqual(expected);
    });
  });
};