Initial commit
This commit is contained in:
zhongjin
@@ -0,0 +1,257 @@
|
||||
var $ = require('jquery');
|
||||
var Backbone = require('backbone');
|
||||
var createEngine = require('../fixtures/engine.fixture.js');
|
||||
var Map = require('../../../src/geo/map');
|
||||
var MapView = require('../../../src/geo/map-view');
|
||||
var TileLayer = require('../../../src/geo/map/tile-layer');
|
||||
var CartoDBLayer = require('../../../src/geo/map/cartodb-layer');
|
||||
var CartoDBLayerGroup = require('../../../src/geo/cartodb-layer-group');
|
||||
|
||||
var LayerGroupModel = CartoDBLayerGroup;
|
||||
|
||||
var fakeLayerViewFactory = {
|
||||
createLayerView: function () {
|
||||
var layerView = new Backbone.View();
|
||||
layerView.setCursor = jasmine.createSpy('setCursor');
|
||||
spyOn(layerView, 'remove');
|
||||
return layerView;
|
||||
}
|
||||
};
|
||||
|
||||
var MyMapView = MapView.extend({
|
||||
getSize: function () { return { x: 1000, y: 1000 }; },
|
||||
_getLayerViewFactory: function () {
|
||||
return fakeLayerViewFactory;
|
||||
},
|
||||
_createNativeMap: function () {}
|
||||
});
|
||||
|
||||
describe('core/geo/map-view', function () {
|
||||
var engineMock;
|
||||
beforeEach(function () {
|
||||
this.container = $('<div>').css('height', '200px');
|
||||
engineMock = createEngine();
|
||||
|
||||
this.map = new Map(null, {
|
||||
layersFactory: {}
|
||||
});
|
||||
|
||||
this.layerViewFactory = jasmine.createSpyObj('layerViewFactory', ['createLayerView']);
|
||||
this.mapView = new MyMapView({
|
||||
el: this.container,
|
||||
mapModel: this.map,
|
||||
engine: new Backbone.Model(),
|
||||
layerGroupModel: new LayerGroupModel(null, {
|
||||
layersCollection: this.map.layers
|
||||
})
|
||||
});
|
||||
spyOn(this.mapView, 'setCursor');
|
||||
spyOn(this.mapView, 'getNativeMap');
|
||||
spyOn(this.mapView, '_addLayerToMap');
|
||||
});
|
||||
|
||||
describe('.render', function () {
|
||||
it('should add layer views to the map', function () {
|
||||
var tileLayer = new TileLayer(null, { engine: {} });
|
||||
var cartoDBLayer1 = new CartoDBLayer({}, { engine: engineMock });
|
||||
var cartoDBLayer2 = new CartoDBLayer({}, { engine: engineMock });
|
||||
|
||||
this.map.layers.reset([tileLayer, cartoDBLayer1, cartoDBLayer2]);
|
||||
|
||||
this.mapView = new MyMapView({
|
||||
el: this.container,
|
||||
mapModel: this.map,
|
||||
engine: new Backbone.Model(),
|
||||
layerGroupModel: new LayerGroupModel(null, {
|
||||
windshaftMap: this.windshaftMap,
|
||||
layersCollection: this.map.layers
|
||||
})
|
||||
});
|
||||
spyOn(this.mapView, 'getNativeMap');
|
||||
spyOn(this.mapView, '_addLayerToMap');
|
||||
|
||||
this.mapView.render();
|
||||
|
||||
expect(this.mapView._addLayerToMap.calls.count()).toEqual(2);
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer1.cid)).toBeDefined();
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer2.cid)).toBeDefined();
|
||||
expect(this.mapView.getLayerViewByLayerCid(tileLayer.cid)).toBeDefined();
|
||||
|
||||
// Both CartoDBLayer layers share the same layer view
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer1.cid)).toEqual(this.mapView.getLayerViewByLayerCid(cartoDBLayer2.cid));
|
||||
|
||||
// Tile Layer has a different layer view
|
||||
expect(this.mapView.getLayerViewByLayerCid(tileLayer.cid)).not.toEqual(this.mapView.getLayerViewByLayerCid(cartoDBLayer1.cid));
|
||||
});
|
||||
});
|
||||
|
||||
describe('bindings to map', function () {
|
||||
it('should fitBounds when view bounds change', function () {
|
||||
spyOn(this.map, 'fitBounds');
|
||||
|
||||
this.map.setBounds([ [0, 0], [180, 180] ]);
|
||||
expect(this.map.fitBounds).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('bindings to map.layers', function () {
|
||||
describe('when layers of map.layers are resetted', function () {
|
||||
it('should group CartoDB layers into a single layerView and add one layerView for each non-CartoDB layer', function () {
|
||||
var tileLayer = new TileLayer(null, { engine: {} });
|
||||
var cartoDBLayer1 = new CartoDBLayer({}, { engine: engineMock });
|
||||
var cartoDBLayer2 = new CartoDBLayer({}, { engine: engineMock });
|
||||
|
||||
this.map.layers.reset([tileLayer, cartoDBLayer1, cartoDBLayer2]);
|
||||
expect(this.mapView._addLayerToMap.calls.count()).toEqual(2);
|
||||
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer1.cid)).toBeDefined();
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer2.cid)).toBeDefined();
|
||||
expect(this.mapView.getLayerViewByLayerCid(tileLayer.cid)).toBeDefined();
|
||||
|
||||
// Both CartoDBLayer layers share the same layer view
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer1.cid)).toEqual(this.mapView.getLayerViewByLayerCid(cartoDBLayer2.cid));
|
||||
|
||||
// Tile Layer has a different layer view
|
||||
expect(this.mapView.getLayerViewByLayerCid(tileLayer.cid)).not.toEqual(this.mapView.getLayerViewByLayerCid(cartoDBLayer1.cid));
|
||||
});
|
||||
|
||||
it('should trigger a "newLayerView" event for each new layerView', function () {
|
||||
var callback = jasmine.createSpy('callback');
|
||||
this.mapView.on('newLayerView', callback);
|
||||
|
||||
var tileLayer = new TileLayer(null, { engine: {} });
|
||||
var cartoDBLayer1 = new CartoDBLayer({}, { engine: engineMock });
|
||||
var cartoDBLayer2 = new CartoDBLayer({}, { engine: engineMock });
|
||||
|
||||
this.map.layers.reset([tileLayer, cartoDBLayer1, cartoDBLayer2]);
|
||||
|
||||
expect(callback.calls.count()).toEqual(2);
|
||||
expect(callback.calls.argsFor(0)[0]).toEqual(this.mapView.getLayerViewByLayerCid(tileLayer.cid));
|
||||
expect(callback.calls.argsFor(1)[0]).toEqual(this.mapView.getLayerViewByLayerCid(cartoDBLayer1.cid));
|
||||
});
|
||||
});
|
||||
|
||||
describe('when new layerModels are added to map.layers', function () {
|
||||
it('should add a new layer view to the map', function () {
|
||||
var layer1 = new CartoDBLayer({}, { engine: engineMock });
|
||||
|
||||
this.map.addLayer(layer1);
|
||||
|
||||
var layerViewForLayer1 = this.mapView.getLayerViewByLayerCid(layer1.cid);
|
||||
expect(layerViewForLayer1).toBeDefined();
|
||||
expect(Object.keys(this.mapView._layerViews).length).toEqual(1);
|
||||
expect(this.mapView._addLayerToMap).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should group CartoDB layers into a single layerView', function () {
|
||||
var tileLayer = new TileLayer(null, { engine: {} });
|
||||
var cartoDBLayer1 = new CartoDBLayer({}, { engine: engineMock });
|
||||
var cartoDBLayer2 = new CartoDBLayer({}, { engine: engineMock });
|
||||
|
||||
this.map.addLayer(tileLayer);
|
||||
expect(this.mapView._addLayerToMap).toHaveBeenCalled();
|
||||
this.mapView._addLayerToMap.calls.reset();
|
||||
|
||||
this.map.addLayer(cartoDBLayer1);
|
||||
expect(this.mapView._addLayerToMap).toHaveBeenCalled();
|
||||
this.mapView._addLayerToMap.calls.reset();
|
||||
|
||||
this.map.addLayer(cartoDBLayer2);
|
||||
expect(this.mapView._addLayerToMap).not.toHaveBeenCalled();
|
||||
|
||||
// There are only two layerViews cause the CartoDBLayers have been grouped
|
||||
expect(Object.keys(this.mapView._layerViews).length).toEqual(3);
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer1.cid)).toBeDefined();
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer2.cid)).toBeDefined();
|
||||
expect(this.mapView.getLayerViewByLayerCid(tileLayer.cid)).toBeDefined();
|
||||
|
||||
// Both CartoDBLayer layers share the same layer view
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer1.cid)).toEqual(this.mapView.getLayerViewByLayerCid(cartoDBLayer2.cid));
|
||||
|
||||
// Tile Layer has a different layer view
|
||||
expect(this.mapView.getLayerViewByLayerCid(tileLayer.cid)).not.toEqual(this.mapView.getLayerViewByLayerCid(cartoDBLayer1.cid));
|
||||
});
|
||||
|
||||
it('should trigger a "newLayerView" event for each new layerView', function () {
|
||||
var callback = jasmine.createSpy('callback');
|
||||
this.mapView.on('newLayerView', callback);
|
||||
|
||||
var tileLayer = new TileLayer(null, { engine: {} });
|
||||
var cartoDBLayer1 = new CartoDBLayer({}, { engine: engineMock });
|
||||
var cartoDBLayer2 = new CartoDBLayer({}, { engine: engineMock });
|
||||
|
||||
this.map.addLayer(tileLayer);
|
||||
this.map.addLayer(cartoDBLayer1);
|
||||
this.map.addLayer(cartoDBLayer2);
|
||||
|
||||
expect(callback.calls.count()).toEqual(2);
|
||||
expect(callback.calls.argsFor(0)[0]).toEqual(this.mapView.getLayerViewByLayerCid(tileLayer.cid));
|
||||
expect(callback.calls.argsFor(1)[0]).toEqual(this.mapView.getLayerViewByLayerCid(cartoDBLayer1.cid));
|
||||
});
|
||||
});
|
||||
|
||||
describe('when layerModels are removed from map.layers', function () {
|
||||
it('should should remove the corresponding layerView for layers that are rendered individually (not grouped)', function () {
|
||||
var tileLayer = new TileLayer(null, { engine: {} });
|
||||
|
||||
this.map.layers.reset([tileLayer]);
|
||||
|
||||
var tileLayerView = this.mapView.getLayerViewByLayerCid(tileLayer.cid);
|
||||
expect(tileLayerView).toBeDefined();
|
||||
|
||||
this.map.layers.remove(tileLayer);
|
||||
|
||||
// View for the tileLayer has been removed
|
||||
expect(tileLayerView.remove).toHaveBeenCalled();
|
||||
expect(this.mapView.getLayerViewByLayerCid(tileLayer.cid)).not.toBeDefined();
|
||||
});
|
||||
|
||||
it('should should only remove a group layerView when all grouped layerModels have been removed', function () {
|
||||
var cartoDBLayer1 = new CartoDBLayer({}, { engine: engineMock });
|
||||
var cartoDBLayer2 = new CartoDBLayer({}, { engine: engineMock });
|
||||
|
||||
this.map.layers.reset([cartoDBLayer1, cartoDBLayer2]);
|
||||
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer1.cid)).toBeDefined();
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer2.cid)).toBeDefined();
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer1.cid)).toEqual(this.mapView.getLayerViewByLayerCid(cartoDBLayer2.cid));
|
||||
|
||||
var cartoDBLayerGroupView = this.mapView.getLayerViewByLayerCid(cartoDBLayer1.cid);
|
||||
|
||||
this.map.layers.remove(cartoDBLayer1);
|
||||
|
||||
// There's one more CartoDBLayer so the layer view has not been removed
|
||||
// this.mapView.getLayerViewByLayerCid(cartoDBLayer1.cid)
|
||||
expect(cartoDBLayerGroupView.remove).not.toHaveBeenCalled();
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer1.cid)).not.toBeDefined();
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer2.cid)).toBeDefined();
|
||||
|
||||
this.map.layers.remove(cartoDBLayer2);
|
||||
|
||||
// There's one more CartoDBLayer so the layer view has not been removed
|
||||
expect(cartoDBLayerGroupView.remove).toHaveBeenCalled();
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer2.cid)).not.toBeDefined();
|
||||
});
|
||||
|
||||
it('should be able to add a layer after removing it', function () {
|
||||
var cartoDBLayer = new CartoDBLayer({}, { engine: engineMock });
|
||||
|
||||
this.map.layers.reset([cartoDBLayer]);
|
||||
|
||||
var cartodbLayerView = this.mapView.getLayerViewByLayerCid(cartoDBLayer.cid);
|
||||
expect(cartodbLayerView).toBeDefined();
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer.cid)).toBeDefined();
|
||||
|
||||
// Remove the layer
|
||||
this.map.layers.remove(cartoDBLayer);
|
||||
|
||||
// View for the cartodbLayer has been removed
|
||||
expect(cartodbLayerView.remove).toHaveBeenCalled();
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer.cid)).not.toBeDefined();
|
||||
|
||||
this.map.layers.add(cartoDBLayer);
|
||||
expect(this.mapView.getLayerViewByLayerCid(cartoDBLayer.cid)).toBeDefined();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user