659 lines
19 KiB
JavaScript
659 lines
19 KiB
JavaScript
|
|
describe("Overlay", function() {
|
|
|
|
it("should register and create a type", function() {
|
|
var _data;
|
|
cdb.vis.Overlay.register('test', function(data) {
|
|
_data = data;
|
|
return new cdb.core.View();
|
|
});
|
|
|
|
var opt = {a : 1, b:2, pos: [10, 20]};
|
|
var v = cdb.vis.Overlay.create('test', null, opt);
|
|
expect(_data).toEqual(opt);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
describe("Vis", function() {
|
|
|
|
beforeEach(function(){
|
|
|
|
this.container = $('<div>').css('height', '200px');
|
|
this.mapConfig = {
|
|
updated_at: 'cachebuster',
|
|
title: "irrelevant",
|
|
url: "https://carto.com",
|
|
center: [40.044, -101.95],
|
|
bounding_box_sw: [20, -140],
|
|
bounding_box_ne: [ 55, -50],
|
|
zoom: 4,
|
|
bounds: [
|
|
[1, 2],
|
|
[3, 4],
|
|
]
|
|
};
|
|
|
|
this.vis = new cdb.vis.Vis({el: this.container});
|
|
this.vis.load(this.mapConfig);
|
|
})
|
|
|
|
it("should insert default max and minZoom values when not provided", function() {
|
|
expect(this.vis.mapView.map_leaflet.options.maxZoom).toEqual(20);
|
|
expect(this.vis.mapView.map_leaflet.options.minZoom).toEqual(0);
|
|
});
|
|
|
|
|
|
it("should insert user max and minZoom values when provided", function() {
|
|
this.container = $('<div>').css('height', '200px');
|
|
this.mapConfig.maxZoom = 10;
|
|
this.mapConfig.minZoom = 5;
|
|
this.vis.load(this.mapConfig);
|
|
|
|
expect(this.vis.mapView.map_leaflet.options.maxZoom).toEqual(10);
|
|
expect(this.vis.mapView.map_leaflet.options.minZoom).toEqual(5);
|
|
})
|
|
|
|
|
|
it("should insert the max boundaries when provided", function() {
|
|
this.container = $('<div>').css('height', '200px');
|
|
this.mapConfig.bounding_box_sw = [1,2];
|
|
this.mapConfig.bounding_box_ne = [3,5];
|
|
this.vis.load(this.mapConfig);
|
|
|
|
expect(this.vis.map.get('bounding_box_sw')).toEqual([1,2]);
|
|
expect(this.vis.map.get('bounding_box_ne')).toEqual([3,5]);
|
|
})
|
|
|
|
it("should parse center if values are correct", function() {
|
|
this.container = $('<div>').css('height', '200px');
|
|
var opts = {
|
|
center_lat: 43.3,
|
|
center_lon: "89"
|
|
}
|
|
this.vis.load(this.mapConfig, opts);
|
|
|
|
expect(this.mapConfig.center[0]).toEqual(43.3);
|
|
expect(this.mapConfig.center[1]).toEqual(89.0);
|
|
})
|
|
|
|
it("should not parse center if values are not correct", function() {
|
|
this.container = $('<div>').css('height', '200px');
|
|
var opts = {
|
|
center_lat: 43.3,
|
|
center_lon: "ham"
|
|
}
|
|
this.vis.load(this.mapConfig, opts);
|
|
|
|
expect(this.mapConfig.center[0]).not.toEqual(43.3);
|
|
expect(this.mapConfig.center[1]).not.toEqual("ham");
|
|
})
|
|
|
|
it("should parse bounds values if they are correct", function() {
|
|
this.container = $('<div>').css('height', '200px');
|
|
var opts = {
|
|
sw_lat: 43.3,
|
|
sw_lon: 12,
|
|
ne_lat: 12,
|
|
ne_lon: "0"
|
|
}
|
|
this.vis.load(this.mapConfig, opts);
|
|
|
|
expect(this.mapConfig.bounds[0][0]).toEqual(43.3);
|
|
expect(this.mapConfig.bounds[0][1]).toEqual(12);
|
|
expect(this.mapConfig.bounds[1][0]).toEqual(12);
|
|
expect(this.mapConfig.bounds[1][1]).toEqual(0);
|
|
})
|
|
|
|
it("should not parse bounds values if they are not correct", function() {
|
|
this.container = $('<div>').css('height', '200px');
|
|
var opts = {
|
|
sw_lat: 43.3,
|
|
sw_lon: 12,
|
|
ne_lat: "jamon",
|
|
ne_lon: "0"
|
|
}
|
|
this.vis.load(this.mapConfig, opts);
|
|
|
|
expect(this.mapConfig.bounds[0][0]).not.toEqual(43.3);
|
|
expect(this.mapConfig.bounds[0][1]).not.toEqual(12);
|
|
expect(this.mapConfig.bounds[1][0]).not.toEqual(12);
|
|
expect(this.mapConfig.bounds[1][1]).not.toEqual(0);
|
|
})
|
|
|
|
it("should create a google maps map when provider is google maps", function() {
|
|
this.container = $('<div>').css('height', '200px');
|
|
this.mapConfig.map_provider = "googlemaps";
|
|
this.vis.load(this.mapConfig);
|
|
expect(this.vis.mapView.map_googlemaps).not.toEqual(undefined);
|
|
});
|
|
|
|
it("should not invalidate map if map height is 0", function(done) {
|
|
var container = $('<div>').css('height', '0');
|
|
var vis = new cdb.vis.Vis({el: container});
|
|
this.mapConfig.map_provider = "googlemaps";
|
|
|
|
vis.load(this.mapConfig);
|
|
|
|
setTimeout(function () {
|
|
spyOn(vis.mapView, 'invalidateSize');
|
|
expect(vis.mapView.invalidateSize).not.toHaveBeenCalled();
|
|
done();
|
|
}, 4000);
|
|
});
|
|
|
|
it("should bind resize changes when map height is 0", function() {
|
|
var container = $('<div>').css('height', '0');
|
|
var vis = new cdb.vis.Vis({el: container});
|
|
spyOn(vis, '_onResize');
|
|
|
|
this.mapConfig.map_provider = "googlemaps";
|
|
vis.load(this.mapConfig);
|
|
$(window).trigger('resize');
|
|
expect(vis._onResize).toHaveBeenCalled();
|
|
expect(vis.mapConfig).toBeDefined();
|
|
});
|
|
|
|
it("shouldn't bind resize changes when map height is greater than 0", function() {
|
|
var container = $('<div>').css('height', '200px');
|
|
var vis = new cdb.vis.Vis({el: container});
|
|
spyOn(vis, '_onResize');
|
|
|
|
this.mapConfig.map_provider = "googlemaps";
|
|
vis.load(this.mapConfig);
|
|
$(window).trigger('resize');
|
|
expect(vis._onResize).not.toHaveBeenCalled();
|
|
expect(vis.center).not.toBeDefined();
|
|
});
|
|
|
|
|
|
it("should pass map to overlays", function() {
|
|
var _map;
|
|
cdb.vis.Overlay.register('jaja', function(data, vis){
|
|
_map = vis.map
|
|
return new cdb.core.View()
|
|
})
|
|
var vis = new cdb.vis.Vis({el: this.container});
|
|
this.mapConfig.overlays = [ {type: 'jaja'}];
|
|
vis.load(this.mapConfig);
|
|
expect(_map).not.toEqual(undefined);
|
|
});
|
|
|
|
it("when https is false all the urls should be transformed to http", function() {
|
|
this.vis.https = false;
|
|
this.mapConfig.layers = [{
|
|
kind: 'tiled',
|
|
options: {
|
|
urlTemplate: 'https://dnv9my2eseobd.cloudfront.net/v3/{z}/{x}/{y}.png'
|
|
}
|
|
}]
|
|
this.vis.load(this.mapConfig);
|
|
expect(this.vis.map.layers.at(0).get('urlTemplate')).toEqual(
|
|
'http://a.tiles.mapbox.com/v3/{z}/{x}/{y}.png'
|
|
)
|
|
});
|
|
|
|
it("should return the native map obj", function() {
|
|
expect(this.vis.getNativeMap()).toEqual(this.vis.mapView.map_leaflet);
|
|
})
|
|
|
|
it("load should call done", function(done) {
|
|
this.mapConfig.layers = [{
|
|
kind: 'tiled',
|
|
options: {
|
|
urlTemplate: 'https://dnv9my2eseobd.cloudfront.net/v3/{z}/{x}/{y}.png'
|
|
}
|
|
}]
|
|
layers = null;
|
|
|
|
this.vis.load(this.mapConfig, { }).done(function(vis, lys){ layers = lys;});
|
|
|
|
setTimeout(function() {
|
|
expect(layers.length).toEqual(1);
|
|
done();
|
|
}, 100);
|
|
|
|
});
|
|
|
|
it("should add header", function() {
|
|
|
|
this.mapConfig.title = "title";
|
|
|
|
this.vis.load(this.mapConfig, {
|
|
title: true
|
|
});
|
|
expect(this.vis.$('.cartodb-header').length).toEqual(1);
|
|
});
|
|
|
|
it("should add layer selector", function() {
|
|
this.vis.load(this.mapConfig, {
|
|
title: true,
|
|
layer_selector: true
|
|
});
|
|
expect(this.vis.$('.cartodb-layer-selector-box').length).toEqual(1);
|
|
});
|
|
|
|
it("should add share", function() {
|
|
this.vis.load(this.mapConfig, {
|
|
shareable: true
|
|
});
|
|
expect(this.vis.$('.cartodb-share').length).toEqual(1);
|
|
});
|
|
|
|
it("should add header without link in the title", function() {
|
|
var mapConfig = _.clone(this.mapConfig);
|
|
mapConfig.title = "title"
|
|
mapConfig.url = null;
|
|
|
|
this.vis.load(mapConfig, {
|
|
title: true
|
|
});
|
|
|
|
expect(this.vis.$('.cartodb-header').length).toEqual(1);
|
|
expect(this.vis.$('.cartodb-header h1 > a').length).toEqual(0);
|
|
});
|
|
|
|
it("should add zoom", function() {
|
|
this.mapConfig.overlays = [{ type: 'zoom', order: 7, options: { x: 20, y: 20 }, template: 'test' }];
|
|
this.vis.load(this.mapConfig);
|
|
expect(this.vis.$('.cartodb-zoom').length).toEqual(1);
|
|
});
|
|
|
|
it("should enable zoom if it's specified by zoomControl option", function() {
|
|
this.mapConfig.overlays = [{ type: 'zoom', order: 7, options: { x: 20, y: 20 }, template: 'test' }];
|
|
this.vis.load(this.mapConfig, {
|
|
zoomControl: true
|
|
});
|
|
expect(this.vis.$('.cartodb-zoom').length).toEqual(1);
|
|
});
|
|
|
|
it("should disable zoom if it's specified by zoomControl option", function() {
|
|
this.mapConfig.overlays = [{ type: 'zoom', order: 7, options: { x: 20, y: 20 }, template: 'test' }];
|
|
this.vis.load(this.mapConfig, {
|
|
zoomControl: false
|
|
});
|
|
expect(this.vis.$('.cartodb-zoom').length).toEqual(0);
|
|
});
|
|
|
|
it("should add search", function() {
|
|
this.mapConfig.overlays = [{ type: 'search' }];
|
|
this.vis.load(this.mapConfig);
|
|
expect(this.vis.$('.cartodb-searchbox').length).toEqual(1);
|
|
});
|
|
|
|
it("should enable search if it's specified by searchControl", function() {
|
|
this.mapConfig.overlays = [{ type: 'search' }];
|
|
this.vis.load(this.mapConfig, {
|
|
searchControl: true
|
|
});
|
|
expect(this.vis.$('.cartodb-searchbox').length).toEqual(1);
|
|
});
|
|
|
|
it("should disable search if it's specified by searchControl", function() {
|
|
this.mapConfig.overlays = [{ type: 'search' }];
|
|
this.vis.load(this.mapConfig, {
|
|
searchControl: false
|
|
});
|
|
expect(this.vis.$('.cartodb-searchbox').length).toEqual(0);
|
|
});
|
|
|
|
it("should use zoom", function() {
|
|
this.vis.load(this.mapConfig, {
|
|
zoom: 10,
|
|
bounds: [[24.206889622398023,-84.0234375],[76.9206135182968,169.1015625]]
|
|
});
|
|
expect(this.vis.map.getZoom()).toEqual(10);
|
|
});
|
|
|
|
|
|
it("should retrieve the overlays of a given type", function() {
|
|
var v = this.vis.addOverlay({
|
|
type: 'tooltip',
|
|
template: 'test',
|
|
layer: new L.CartoDBGroupLayer({
|
|
layer_definition: {version: '1.0.0', layers: [] }
|
|
})
|
|
});
|
|
var v1 = this.vis.addOverlay({
|
|
type: 'tooltip',
|
|
template: 'test',
|
|
layer: new L.CartoDBGroupLayer({
|
|
layer_definition: {version: '1.0.0', layers: [] }
|
|
})
|
|
});
|
|
var v2 = this.vis.addOverlay({
|
|
type: 'tooltip',
|
|
template: 'test',
|
|
layer: new L.CartoDBGroupLayer({
|
|
layer_definition: {version: '1.0.0', layers: [] }
|
|
})
|
|
});
|
|
|
|
var tooltips = this.vis.getOverlaysByType('tooltip');
|
|
expect(tooltips.length).toEqual(3);
|
|
expect(tooltips[0]).toEqual(v);
|
|
expect(tooltips[1]).toEqual(v1);
|
|
expect(tooltips[2]).toEqual(v2);
|
|
v.clean();
|
|
v1.clean();
|
|
v2.clean();
|
|
expect(this.vis.getOverlaysByType("tooltip").length).toEqual(0);
|
|
});
|
|
|
|
describe('addOverlay', function() {
|
|
|
|
it("should throw an error if no layers are available", function() {
|
|
expect(function() {
|
|
this.vis.addOverlay({
|
|
type: 'tooltip',
|
|
template: 'test'
|
|
})
|
|
}.bind(this)).toThrow(new Error("layer is null"));
|
|
});
|
|
|
|
it("should add an overlay to the specified layer and enable interaction", function() {
|
|
var layer = new L.CartoDBGroupLayer({
|
|
layer_definition: {version: '1.0.0', layers: [] }
|
|
});
|
|
|
|
var tooltip = this.vis.addOverlay({
|
|
type: 'tooltip',
|
|
template: 'test',
|
|
layer: layer
|
|
});
|
|
|
|
expect(tooltip.options.layer).toEqual(layer);
|
|
expect(layer.interactionEnabled).toEqual([true]);
|
|
});
|
|
|
|
it("should add an overlay to the first layer and enable interaction", function(done) {
|
|
var layer;
|
|
var vizjson = {
|
|
layers: [
|
|
{
|
|
type: 'tiled',
|
|
options: {
|
|
urlTemplate: ''
|
|
}
|
|
},
|
|
{
|
|
type: 'layergroup',
|
|
options: {
|
|
layer_definition: {
|
|
layers: []
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
cartodb.createVis('map', vizjson, {})
|
|
.done(function(vis, layers) {
|
|
var tooltip = vis.addOverlay({
|
|
type: 'tooltip',
|
|
template: 'test'
|
|
});
|
|
var layer = vis.getLayers()[1];
|
|
|
|
expect(tooltip.options.layer).toEqual(layer);
|
|
expect(layer.interactionEnabled).toEqual([true]);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
it ("should load modules", function(done) {
|
|
this.mapConfig.layers = [
|
|
{kind: 'torque', options: { tile_style: 'test', user_name: 'test', table_name: 'test'}}
|
|
];
|
|
|
|
this.vis.load(this.mapConfig);
|
|
|
|
setTimeout(function() {
|
|
var scripts = document.getElementsByTagName('script'),
|
|
torqueRe = /\/cartodb\.mod\.torque\.js/;
|
|
var found = false;
|
|
for (i = 0, len = scripts.length; i < len && !found; i++) {
|
|
src = scripts[i].src;
|
|
found = !!src.match(torqueRe);
|
|
}
|
|
expect(found).toEqual(true);
|
|
done()
|
|
}, 20);
|
|
});
|
|
|
|
it ("should force GMaps", function() {
|
|
this.mapConfig.map_provider = "leaflet";
|
|
this.mapConfig.layers = [{
|
|
kind: 'tiled',
|
|
options: {
|
|
urlTemplate: 'https://dnv9my2eseobd.cloudfront.net/v3/{z}/{x}/{y}.png'
|
|
}
|
|
}]
|
|
|
|
var opts = {
|
|
gmaps_base_type: 'dark_roadmap'
|
|
};
|
|
|
|
layers = null;
|
|
|
|
this.vis.load(this.mapConfig, opts);
|
|
expect(this.vis.map.layers.at(0).get('type')).toEqual('GMapsBase');
|
|
});
|
|
|
|
describe("dragging option", function() {
|
|
|
|
beforeEach(function() {
|
|
var container = $('<div>').css('height', '200px');
|
|
this.vis = new cdb.vis.Vis({el: container});
|
|
});
|
|
|
|
it("should be enabled with zoom overlay, scrollwheel enabled and not under a mobile device", function() {
|
|
spyOn(this.vis, 'isMobileDevice').and.returnValue(false);
|
|
var mapConfig = createMapConfig({
|
|
scrollwheel: true,
|
|
zoom: true
|
|
});
|
|
this.vis.load(mapConfig);
|
|
expect(this.vis.map.get('drag')).toBeTruthy();
|
|
});
|
|
|
|
it("should be enabled with zoom overlay, scrollwheel disabled and not under a mobile device", function() {
|
|
spyOn(this.vis, 'isMobileDevice').and.returnValue(false);
|
|
var mapConfig = createMapConfig({
|
|
scrollwheel: false,
|
|
zoom: true
|
|
});
|
|
this.vis.load(mapConfig);
|
|
expect(this.vis.map.get('drag')).toBeTruthy();
|
|
});
|
|
|
|
it("should be enabled without zoom overlay, scrollwheel enabled and not under mobile device", function() {
|
|
spyOn(this.vis, 'isMobileDevice').and.returnValue(false);
|
|
var mapConfig = createMapConfig({
|
|
scrollwheel: true,
|
|
zoom: false
|
|
});
|
|
this.vis.load(mapConfig);
|
|
expect(this.vis.map.get('drag')).toBeTruthy();
|
|
});
|
|
|
|
it("should be disabled without zoom overlay, scrollwheel disabled and not under mobile device", function() {
|
|
spyOn(this.vis, 'isMobileDevice').and.returnValue(false);
|
|
var mapConfig = createMapConfig({
|
|
scrollwheel: false,
|
|
zoom: false
|
|
});
|
|
this.vis.load(mapConfig);
|
|
expect(this.vis.map.get('drag')).toBeFalsy();
|
|
});
|
|
|
|
it("should be enabled without zoom, scrollwheel is enabled and under mobile device", function() {
|
|
spyOn(this.vis, 'isMobileDevice').and.returnValue(true);
|
|
var mapConfig = createMapConfig({
|
|
scrollwheel: true,
|
|
zoom: false
|
|
});
|
|
this.vis.load(mapConfig);
|
|
expect(this.vis.map.get('drag')).toBeTruthy();
|
|
});
|
|
|
|
it("should be enabled without zoom, scrollwheel disabled and under mobile device", function() {
|
|
spyOn(this.vis, 'isMobileDevice').and.returnValue(true);
|
|
var mapConfig = createMapConfig({
|
|
scrollwheel: false,
|
|
zoom: false
|
|
});
|
|
this.vis.load(mapConfig);
|
|
expect(this.vis.map.get('drag')).toBeTruthy();
|
|
});
|
|
|
|
it("should be enabled with zoom, scrollwheel disabled and under mobile device", function() {
|
|
spyOn(this.vis, 'isMobileDevice').and.returnValue(true);
|
|
var mapConfig = createMapConfig({
|
|
scrollwheel: false,
|
|
zoom: true
|
|
});
|
|
this.vis.load(mapConfig);
|
|
expect(this.vis.map.get('drag')).toBeTruthy();
|
|
});
|
|
|
|
it("should be enabled if all parameters are enabled or present", function() {
|
|
spyOn(this.vis, 'isMobileDevice').and.returnValue(true);
|
|
var mapConfig = createMapConfig({
|
|
scrollwheel: true,
|
|
zoom: true
|
|
});
|
|
this.vis.load(mapConfig);
|
|
expect(this.vis.map.get('drag')).toBeTruthy();
|
|
});
|
|
|
|
function createMapConfig(obj) {
|
|
var r = {
|
|
updated_at: 'cachebuster',
|
|
title: "irrelevant",
|
|
url: "https://carto.com",
|
|
center: [40.044, -101.95],
|
|
bounding_box_sw: [20, -140],
|
|
bounding_box_ne: [ 55, -50],
|
|
zoom: 4,
|
|
bounds: [[1, 2],[3, 4]],
|
|
scrollwheel: false,
|
|
overlays: []
|
|
};
|
|
if (obj.scrollwheel) {
|
|
r.scrollwheel = true;
|
|
}
|
|
if (obj.zoom) {
|
|
r.overlays = [
|
|
{
|
|
type: "zoom",
|
|
order: 6,
|
|
options: {
|
|
x: 20,
|
|
y: 20,
|
|
display: true
|
|
},
|
|
template: ""
|
|
}
|
|
];
|
|
}
|
|
return r;
|
|
}
|
|
|
|
});
|
|
|
|
describe("Legends", function() {
|
|
|
|
it('should only display legends for visible layers', function() {
|
|
this.mapConfig.layers = [
|
|
{
|
|
kind: 'tiled',
|
|
legend: {
|
|
type: "custom",
|
|
show_title: false,
|
|
title: "",
|
|
template: "",
|
|
items: [
|
|
{
|
|
name: "visible legend item",
|
|
visible: true,
|
|
value: "#cccccc",
|
|
sync: true
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
urlTemplate: 'https://dnv9my2eseobd.cloudfront.net/v3/{z}/{x}/{y}.png'
|
|
}
|
|
},
|
|
{
|
|
visible: false,
|
|
kind: 'tiled',
|
|
legend: {
|
|
type: "custom",
|
|
show_title: false,
|
|
title: "",
|
|
template: "",
|
|
items: [
|
|
{
|
|
name: "invisible legend item",
|
|
visible: true,
|
|
value: "#cccccc",
|
|
sync: true
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
urlTemplate: 'https://dnv9my2eseobd.cloudfront.net/v3/{z}/{x}/{y}.png'
|
|
}
|
|
}
|
|
]
|
|
this.vis.load(this.mapConfig);
|
|
|
|
expect(this.vis.legends.$('.cartodb-legend').length).toEqual(1);
|
|
expect(this.vis.legends.$el.html()).toContain('visible legend item');
|
|
expect(this.vis.legends.$el.html()).not.toContain('invisible legend item');
|
|
})
|
|
})
|
|
|
|
describe("Torque time slider", function() {
|
|
|
|
beforeEach(function() {
|
|
// Load torque module
|
|
cartodb.torque = torque;
|
|
})
|
|
|
|
it ("should display the time slider if a torque layer is present", function(done) {
|
|
this.mapConfig.layers = [
|
|
{
|
|
kind: 'torque',
|
|
options: { user_name: 'test', table_name: 'test', tile_style: 'Map { -torque-frame-count: 10;} #test { marker-width: 10; }'}
|
|
}
|
|
];
|
|
|
|
this.vis.load(this.mapConfig).done(function(vis, layers){
|
|
expect(vis.timeSlider).toBeDefined();
|
|
done();
|
|
});
|
|
});
|
|
|
|
it ("should NOT display the time slider if a torque layer is not visible", function(done) {
|
|
this.mapConfig.layers = [
|
|
{
|
|
kind: 'torque',
|
|
visible: false,
|
|
options: { user_name: 'test', table_name: 'test', tile_style: 'Map { -torque-frame-count: 10;} #test { marker-width: 10; }'}
|
|
}
|
|
];
|
|
|
|
this.vis.load(this.mapConfig).done(function(vis, layers){
|
|
expect(vis.timeSlider).toBeUndefined();
|
|
done();
|
|
});
|
|
});
|
|
})
|
|
});
|