Initial commit
This commit is contained in:
zhongjin
@@ -0,0 +1,45 @@
|
||||
describe('common', function() {
|
||||
|
||||
var common;
|
||||
|
||||
beforeEach(function() {
|
||||
common = new CartoDBLayerCommon();
|
||||
common.options = {
|
||||
tiler_domain: "carto.com",
|
||||
tiler_port: "8081",
|
||||
tiler_protocol: "http",
|
||||
user_name: 'rambo',
|
||||
table_name: 'test'
|
||||
}
|
||||
});
|
||||
|
||||
it("when query_wrapper is present the query should be wrapped", function() {
|
||||
common.options = {
|
||||
table_name: 'test',
|
||||
tiler_domain: "carto.com",
|
||||
tiler_port: "8081",
|
||||
tiler_protocol: "http",
|
||||
tile_style: "TEST",
|
||||
query: 'select jaja',
|
||||
query_wrapper: 'select * from (<%=sql%>)',
|
||||
tile_style: '#test { polygon-fill: red; }',
|
||||
interactivity: 'jaja'
|
||||
}
|
||||
var t = common._getLayerDefinition();
|
||||
expect(t.sql).toEqual('select * from (select jaja)');
|
||||
expect(t.cartocss).toEqual('#layer0 { polygon-fill: red; }');
|
||||
expect(t.interactivity).toEqual('jaja');
|
||||
|
||||
common.options = {
|
||||
table_name: 'test',
|
||||
tiler_domain: "carto.com",
|
||||
tiler_port: "8081",
|
||||
tiler_protocol: "http",
|
||||
tile_style: "TEST",
|
||||
query: null,
|
||||
query_wrapper: 'select * from (<%=sql%>)'
|
||||
};
|
||||
t = common._getLayerDefinition();
|
||||
expect(t.sql).toEqual('select * from (select * from test)');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
describe("Geometry", function() {
|
||||
it("isPoint should return true when is a point", function() {
|
||||
var geojsonFeature = {
|
||||
"type": "Point",
|
||||
"coordinates": [-104.99404, 39.75621]
|
||||
};
|
||||
var g = new cdb.geo.Geometry({
|
||||
geojson: geojsonFeature
|
||||
});
|
||||
expect(g.isPoint()).toEqual(true);
|
||||
g.set('geojson', {type: 'Polygon'});
|
||||
expect(g.isPoint()).toEqual(false);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,255 @@
|
||||
|
||||
describe('GoogleMapsMapView', function() {
|
||||
var mapView;
|
||||
var map;
|
||||
var spy;
|
||||
var container;
|
||||
beforeEach(function() {
|
||||
container = $('<div>').css('height', '200px');
|
||||
//$('body').append(container);
|
||||
map = new cdb.geo.Map();
|
||||
mapView = new cdb.geo.GoogleMapsMapView({
|
||||
el: container,
|
||||
map: map
|
||||
});
|
||||
|
||||
layerURL = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png';
|
||||
layer = new cdb.geo.TileLayer({ urlTemplate: layerURL });
|
||||
|
||||
spy = {
|
||||
zoomChanged: function(){},
|
||||
centerChanged: function(){},
|
||||
scrollWheelChanged: function(){}
|
||||
};
|
||||
|
||||
spyOn(spy, 'zoomChanged');
|
||||
spyOn(spy, 'centerChanged');
|
||||
spyOn(spy, 'scrollWheelChanged');
|
||||
|
||||
map.bind('change:zoom', spy.zoomChanged);
|
||||
map.bind('change:center', spy.centerChanged);
|
||||
map.bind('change:scrollwheel', spy.scrollWheelChanged);
|
||||
});
|
||||
|
||||
it("should change bounds when center is set", function() {
|
||||
var s = sinon.spy();
|
||||
spyOn(map, 'getViewBounds');
|
||||
map.bind('change:view_bounds_ne', s);
|
||||
map.set('center', [10, 10]);
|
||||
expect(s.called).toEqual(true);
|
||||
expect(map.getViewBounds).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should change center and zoom when bounds are changed", function(done) {
|
||||
var s = sinon.spy();
|
||||
mapView.getSize = function() { return {x: 200, y: 200}; }
|
||||
map.bind('change:center', s);
|
||||
spyOn(mapView, '_setCenter');
|
||||
mapView._bindModel();
|
||||
|
||||
map.set({
|
||||
'view_bounds_ne': [1, 1],
|
||||
'view_bounds_sw': [-0.3, -1.2]
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
expect(mapView._setCenter).toHaveBeenCalled();
|
||||
done();
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
it("should allow to disable the scroll wheel", function() {
|
||||
map.disableScrollWheel();
|
||||
expect(spy.scrollWheelChanged).toHaveBeenCalled();
|
||||
expect(map.get("scrollwheel")).toEqual(false);
|
||||
});
|
||||
|
||||
it("should change zoom", function() {
|
||||
mapView._setZoom(null, 10);
|
||||
expect(spy.zoomChanged).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should allow adding a layer", function() {
|
||||
map.addLayer(layer);
|
||||
expect(map.layers.length).toEqual(1);
|
||||
});
|
||||
|
||||
it("should add layers on reset", function() {
|
||||
map.layers.reset([
|
||||
layer
|
||||
]);
|
||||
expect(map.layers.length).toEqual(1);
|
||||
});
|
||||
|
||||
it("should create a layer view when adds a model", function() {
|
||||
var spy = { c: function() {} };
|
||||
spyOn(spy, 'c');
|
||||
mapView.bind('newLayerView', spy.c);
|
||||
map.addLayer(layer);
|
||||
expect(map.layers.length).toEqual(1);
|
||||
expect(_.size(mapView.layers)).toEqual(1);
|
||||
expect(spy.c).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should allow removing a layer", function() {
|
||||
map.addLayer(layer);
|
||||
map.removeLayer(layer);
|
||||
expect(map.layers.length).toEqual(0);
|
||||
expect(_.size(mapView.layers)).toEqual(0);
|
||||
});
|
||||
|
||||
it("should allow removing a layer by index", function() {
|
||||
map.addLayer(layer);
|
||||
map.removeLayerAt(0);
|
||||
expect(map.layers.length).toEqual(0);
|
||||
});
|
||||
|
||||
it("should allow removing a layer by Cid", function() {
|
||||
var cid = map.addLayer(layer);
|
||||
map.removeLayerByCid(cid);
|
||||
expect(map.layers.length).toEqual(0);
|
||||
});
|
||||
|
||||
it("should create a TiledLayerView when the layer is Tiled", function() {
|
||||
var lyr = map.addLayer(layer);
|
||||
var layerView = mapView.getLayerByCid(lyr);
|
||||
expect(cdb.geo.GMapsTiledLayerView.prototype.isPrototypeOf(layerView)).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should create a CartoDBLayer when the layer is cartodb", function() {
|
||||
layer = new cdb.geo.CartoDBLayer({
|
||||
table_name: 'test',
|
||||
user_name: 'testuser',
|
||||
tile_style: 'teststyle'
|
||||
});
|
||||
map.addLayer(new cdb.geo.PlainLayer({}));
|
||||
var lyr = map.addLayer(layer);
|
||||
var layerView = mapView.getLayerByCid(lyr);
|
||||
expect(cdb.geo.GMapsCartoDBLayerView.prototype.isPrototypeOf(layerView)).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should create a CartoDBGroupLayer when the layer is layergroup", function() {
|
||||
layer = new cdb.geo.CartoDBGroupLayer({
|
||||
layer_definition: {
|
||||
version: '1.0.0',
|
||||
layers: [{
|
||||
type: 'cartodb',
|
||||
options: {
|
||||
sql: "select * from european_countries_export",
|
||||
cartocss: '#layer { polygon-fill: #000; polygon-opacity: 0.8;}',
|
||||
cartocss_version : '2.0.0',
|
||||
interactivity: ['test2', 'cartodb_id2']
|
||||
}
|
||||
}]
|
||||
}
|
||||
});
|
||||
map.addLayer(new cdb.geo.PlainLayer({}));
|
||||
var lyr = map.addLayer(layer);
|
||||
var layerView = mapView.getLayerByCid(lyr);
|
||||
expect(cdb.geo.GMapsCartoDBLayerGroupView.prototype.isPrototypeOf(layerView)).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should create a cartodb logo when layer is cartodb", function(done) {
|
||||
layer = new cdb.geo.CartoDBLayer({ table_name: "INVENTADO", tile_style: 'test', user_name: 'test'});
|
||||
var lyr = map.addLayer(layer);
|
||||
var layerView = mapView.getLayerByCid(lyr);
|
||||
|
||||
setTimeout(function() {
|
||||
expect(container.find("div.cartodb-logo").length).toEqual(1);
|
||||
done();
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
it("should create a PlaiLayer when the layer is cartodb", function() {
|
||||
layer = new cdb.geo.PlainLayer({});
|
||||
var lyr = map.addLayer(layer);
|
||||
var layerView = mapView.getLayerByCid(lyr);
|
||||
expect(layerView.__proto__.constructor).toEqual(cdb.geo.GMapsPlainLayerView);
|
||||
});
|
||||
|
||||
var geojsonFeature = {
|
||||
"type": "Point",
|
||||
"coordinates": [-104.99404, 39.75621]
|
||||
};
|
||||
|
||||
|
||||
var multipoly = {"type":"MultiPolygon","coordinates": [
|
||||
[
|
||||
[[40, 40], [20, 45], [45, 30], [40, 40]]
|
||||
],
|
||||
[
|
||||
[[20, 35], [45, 20], [30, 5], [10, 10], [10, 30], [20, 35]],
|
||||
[[30, 20], [20, 25], [20, 15], [30, 20]]
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
function testGeom(g) {
|
||||
var geo = new cdb.geo.Geometry({
|
||||
geojson: g
|
||||
});
|
||||
map.addGeometry(geo);
|
||||
expect(_.size(mapView.geometries)).toEqual(1);
|
||||
geo.destroy();
|
||||
expect(_.size(mapView.geometries)).toEqual(0);
|
||||
}
|
||||
|
||||
it("should add and remove a geometry", function() {
|
||||
testGeom(geojsonFeature);
|
||||
});
|
||||
|
||||
it("should add and remove a polygon", function() {
|
||||
testGeom(multipoly);
|
||||
});
|
||||
|
||||
it("should edit a geometry", function() {
|
||||
var geo = new cdb.geo.Geometry({
|
||||
geojson: geojsonFeature
|
||||
});
|
||||
map.addGeometry(geo);
|
||||
var v = mapView.geometries[geo.cid];
|
||||
v.trigger('dragend', null, [10, 20]);
|
||||
expect(geo.get('geojson')).toEqual({
|
||||
"type": "Point",
|
||||
"coordinates": [20, 10]
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
it("should convert to geojson", function() {
|
||||
var geo = new cdb.geo.Geometry({
|
||||
geojson: multipoly
|
||||
});
|
||||
map.addGeometry(geo);
|
||||
var v = mapView.geometries[geo.cid];
|
||||
var geojson = cdb.geo.gmaps.PathView.getGeoJSON(v.geom, 'MultiPolygon');
|
||||
expect(geojson).toEqual(multipoly);
|
||||
});
|
||||
|
||||
it("should swicth layer", function(done) {
|
||||
map.addLayer(layer);
|
||||
layer.set({'type': 'torque', 'cartocss': 'Map{ -torque-frame-count: 10; }'});
|
||||
setTimeout(function() {
|
||||
expect(mapView.layers[layer.cid] instanceof cdb.geo.GMapsTorqueLayerView).toEqual(true);
|
||||
done();
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
it("should disable gmaps dragging and double click zooming when the map has drag disabled", function() {
|
||||
var container = $('<div>').css({
|
||||
'height': '200px',
|
||||
'width': '200px'
|
||||
});
|
||||
var map = new cdb.geo.Map({
|
||||
drag: false
|
||||
});
|
||||
var mapView = new cdb.geo.GoogleMapsMapView({
|
||||
el: container,
|
||||
map: map
|
||||
});
|
||||
|
||||
expect(mapView.map_googlemaps.get('draggable')).toBeFalsy();
|
||||
expect(mapView.map_googlemaps.get('disableDoubleClickZoom')).toBeTruthy();
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,85 @@
|
||||
describe('Hide functionality', function() {
|
||||
var div, map, cdb_layer;
|
||||
|
||||
beforeEach(function() {
|
||||
div = document.createElement('div');
|
||||
div.setAttribute("id","map");
|
||||
div.style.height = "100px";
|
||||
div.style.width = "100px";
|
||||
|
||||
map = new google.maps.Map(div, {
|
||||
center: new google.maps.LatLng(51.505, -0.09),
|
||||
disableDefaultUI: false,
|
||||
zoom: 13,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
||||
mapTypeControl: false
|
||||
});
|
||||
|
||||
cdb_layer = new cdb.geo.CartoDBLayerGMaps({
|
||||
map: map,
|
||||
user_name:"examples",
|
||||
tile_style: 'test',
|
||||
table_name: 'earthquakes',
|
||||
query: "SELECT * FROM {{table_name}}",
|
||||
tile_style: "#{{table_name}}{marker-fill:#E25B5B}",
|
||||
opacity:0.8,
|
||||
interactivity: "cartodb_id, magnitude",
|
||||
featureOver: function(ev,latlng,pos,data) {},
|
||||
featureOut: function() {},
|
||||
featureClick: function(ev,latlng,pos,data) {},
|
||||
debug: true
|
||||
});
|
||||
|
||||
map.overlayMapTypes.setAt(0, cdb_layer);
|
||||
|
||||
});
|
||||
|
||||
|
||||
it('if hides layers should work', function(done) {
|
||||
|
||||
setTimeout(function () {
|
||||
cdb_layer.hide();
|
||||
|
||||
setTimeout(function() {
|
||||
var $tile = $(div).find("img[gtilekey]").first()
|
||||
, opacity = cdb_layer.options.opacity
|
||||
, before_opacity = cdb_layer.options.previous_opacity;
|
||||
|
||||
expect(cdb_layer.visible).toBeFalsy();
|
||||
expect($tile.css("opacity")).toEqual('0');
|
||||
expect(opacity).toEqual(0);
|
||||
expect(before_opacity).not.toEqual(0);
|
||||
done();
|
||||
}, 500);
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('If sets opacity to 0, layer should be visible', function(done) {
|
||||
setTimeout(function () {
|
||||
cdb_layer.setOpacity(0);
|
||||
expect(cdb_layer.options.visible).toBeTruthy();
|
||||
done();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('toggle layer from a visible state should work', function(done) {
|
||||
|
||||
setTimeout(function () {
|
||||
cdb_layer.hide();
|
||||
visibility = cdb_layer.toggle();
|
||||
|
||||
setTimeout(function() {
|
||||
var $tile = $(div).find("img[gtilekey]").first()
|
||||
, opacity = cdb_layer.options.opacity;
|
||||
|
||||
expect(visibility).toBeTruthy();
|
||||
expect(cdb_layer.visible).toBeTruthy();
|
||||
expect($tile.css("opacity")).toEqual('0.99');
|
||||
expect(opacity).toEqual(0.99);
|
||||
done();
|
||||
}, 500);
|
||||
|
||||
}, 500);
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,46 @@
|
||||
describe('Interaction functionality', function() {
|
||||
var div, map, cdb_layer;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
div = document.createElement('div');
|
||||
div.setAttribute("id","map");
|
||||
div.style.height = "100px";
|
||||
div.style.width = "100px";
|
||||
|
||||
map = new google.maps.Map(div, {
|
||||
center: new google.maps.LatLng(51.505, -0.09),
|
||||
disableDefaultUI: false,
|
||||
zoom: 13,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
||||
mapTypeControl: false
|
||||
});
|
||||
|
||||
cdb_layer = new cdb.geo.CartoDBLayerGMaps({
|
||||
map: map,
|
||||
user_name:"examples",
|
||||
table_name: 'country_colors',
|
||||
tile_style: 'test',
|
||||
opacity:0.8,
|
||||
interactivity: "cartodb_id",
|
||||
debug: true,
|
||||
interaction: true
|
||||
});
|
||||
|
||||
map.overlayMapTypes.setAt(0, cdb_layer);
|
||||
});
|
||||
|
||||
it('If there is no interaction defined, shouldn\'t work and failed', function() {
|
||||
// Fake a mouseover
|
||||
$(div).trigger('mouseover');
|
||||
expect(cdb_layer._manageOnEvents).toThrow();
|
||||
|
||||
// Fake a mouseout
|
||||
$(div).trigger('mouseout');
|
||||
expect(cdb_layer._manageOffEvents).toThrow();
|
||||
|
||||
// Fake a click
|
||||
$(div).trigger('click');
|
||||
expect(cdb_layer._manageOffEvents).toThrow();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,94 @@
|
||||
describe('Opacity interaction', function() {
|
||||
var div, map, cdb_layer;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
div = document.createElement('div');
|
||||
div.setAttribute("id","map");
|
||||
div.style.height = "100px";
|
||||
div.style.width = "100px";
|
||||
|
||||
map = new google.maps.Map(div, {
|
||||
center: new google.maps.LatLng(51.505, -0.09),
|
||||
disableDefaultUI: false,
|
||||
zoom: 13,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
||||
mapTypeControl: false
|
||||
});
|
||||
|
||||
cdb_layer = new cdb.geo.CartoDBLayerGMaps({
|
||||
map: map,
|
||||
user_name:"examples",
|
||||
table_name: 'earthquakes',
|
||||
query: "SELECT * FROM {{table_name}}",
|
||||
tile_style: "#{{table_name}}{marker-fill:#E25B5B}",
|
||||
opacity: 0.8,
|
||||
interactivity: "cartodb_id, magnitude",
|
||||
featureOver: function(ev,latlng,pos,data) {},
|
||||
featureOut: function() {},
|
||||
featureClick: function(ev,latlng,pos,data) {},
|
||||
debug: true
|
||||
});
|
||||
map.overlayMapTypes.setAt(0, cdb_layer);
|
||||
|
||||
});
|
||||
|
||||
xit('Layer opacity should be 0.8', function() {
|
||||
|
||||
waits(500);
|
||||
|
||||
runs(function () {
|
||||
var $layer = $(div).find("img[gtilekey]").first()
|
||||
, opacity = cdb_layer.options.opacity;
|
||||
|
||||
expect(cdb_layer.options.visible).toBeTruthy();
|
||||
expect($layer.css("opacity")).toEqual('0.8');//opacity.toString());
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
xit('Opacity shouldn\'t change if it is not visible', function() {
|
||||
|
||||
waits(500);
|
||||
|
||||
runs(function() {
|
||||
cdb_layer.hide();
|
||||
cdb_layer.setOpacity(0.3);
|
||||
map.overlayMapTypes.setAt(0, cdb_layer);
|
||||
});
|
||||
|
||||
waits(500);
|
||||
|
||||
runs(function () {
|
||||
var $layer = $(div).find("img[gtilekey]").first()
|
||||
, opacity = cdb_layer.options.opacity
|
||||
, before_opacity = cdb_layer.options.previous_opacity;
|
||||
|
||||
expect(cdb_layer.options.visible).toBeFalsy();
|
||||
expect($layer.css("opacity")).toEqual('0.3');
|
||||
expect(before_opacity).toEqual(0.8);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// it('Opacity should change if layer is visible', function() {
|
||||
// cdb_layer.setOpacity(0.3);
|
||||
|
||||
// var $layer = $(div).find(".leaflet-layer")
|
||||
// , opacity = cdb_layer.options.opacity;
|
||||
|
||||
// expect(cdb_layer.options.visible).toBeTruthy();
|
||||
// expect($layer.css("opacity")).toEqual('0.3');
|
||||
// });
|
||||
|
||||
|
||||
// it('If sets opacity to 0, the layer is still visible', function() {
|
||||
// cdb_layer.setOpacity(0);
|
||||
|
||||
// var $layer = $(div).find(".leaflet-layer")
|
||||
// , opacity = cdb_layer.options.opacity;
|
||||
|
||||
// expect(cdb_layer.options.visible).toBeTruthy();
|
||||
// expect($layer.css("opacity")).toEqual('0');
|
||||
// });
|
||||
});
|
||||
@@ -0,0 +1,83 @@
|
||||
describe('Show functionality', function() {
|
||||
var div, map, cdb_layer;
|
||||
|
||||
beforeEach(function() {
|
||||
div = document.createElement('div');
|
||||
div.setAttribute("id","map");
|
||||
div.style.height = "100px";
|
||||
div.style.width = "100px";
|
||||
|
||||
map = new google.maps.Map(div, {
|
||||
center: new google.maps.LatLng(51.505, -0.09),
|
||||
disableDefaultUI: false,
|
||||
zoom: 13,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
||||
mapTypeControl: false
|
||||
});
|
||||
|
||||
cdb_layer = new cdb.geo.CartoDBLayerGMaps({
|
||||
map: map,
|
||||
user_name:"examples",
|
||||
table_name: 'earthquakes',
|
||||
query: "SELECT * FROM {{table_name}}",
|
||||
tile_style: "#{{table_name}}{marker-fill:#E25B5B}",
|
||||
opacity:0.8,
|
||||
interactivity: "cartodb_id, magnitude",
|
||||
featureOver: function(ev,latlng,pos,data) {},
|
||||
featureOut: function() {},
|
||||
featureClick: function(ev,latlng,pos,data) {},
|
||||
debug: true
|
||||
});
|
||||
map.overlayMapTypes.setAt(0, cdb_layer);
|
||||
|
||||
});
|
||||
|
||||
|
||||
it('If layer is visible, show shouldn\'t do anything', function(done) {
|
||||
setTimeout(function () {
|
||||
expect(cdb_layer.show).toThrow();
|
||||
var opacity = cdb_layer.options.opacity;
|
||||
expect(cdb_layer.options.visible).toBeTruthy();
|
||||
done();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('Shows layer after hide it', function(done) {
|
||||
setTimeout(function () {
|
||||
cdb_layer.hide();
|
||||
cdb_layer.show();
|
||||
expect(cdb_layer.options.visible).toBeTruthy();
|
||||
done();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('If hides layer and set an opacity greater than 0, layer shouln\'t be visible', function(done) {
|
||||
setTimeout(function () {
|
||||
cdb_layer.hide();
|
||||
cdb_layer.setOpacity(0.2);
|
||||
expect(cdb_layer.visible).toBeFalsy();
|
||||
done();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('toggle layer from hidden state should work', function(done) {
|
||||
setTimeout(function () {
|
||||
cdb_layer.show();
|
||||
visibility = cdb_layer.toggle();
|
||||
|
||||
setTimeout(function() {
|
||||
var $tile = $(div).find("img[gtilekey]").first()
|
||||
, opacity = cdb_layer.options.opacity
|
||||
, before_opacity = cdb_layer.options.previous_opacity;
|
||||
|
||||
expect(cdb_layer.visible).toBeFalsy();
|
||||
expect(visibility).toBeFalsy();
|
||||
expect($tile.css("opacity")).toEqual('0');
|
||||
expect(opacity).toEqual(0);
|
||||
expect(before_opacity).not.toEqual(0);
|
||||
done();
|
||||
}, 500);
|
||||
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,516 @@
|
||||
describe('LeafletMapView', function() {
|
||||
var mapView;
|
||||
var map;
|
||||
var spy;
|
||||
var container;
|
||||
beforeEach(function() {
|
||||
container = $('<div>').css({
|
||||
'height': '200px',
|
||||
'width': '200px'
|
||||
});
|
||||
map = new cdb.geo.Map();
|
||||
mapView = new cdb.geo.LeafletMapView({
|
||||
el: container,
|
||||
map: map
|
||||
});
|
||||
|
||||
layerURL = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png';
|
||||
layer = new cdb.geo.TileLayer({ urlTemplate: layerURL });
|
||||
|
||||
spy = {
|
||||
zoomChanged: function(){},
|
||||
keyboardChanged: function(){},
|
||||
centerChanged: function(){},
|
||||
changed: function() {}
|
||||
};
|
||||
|
||||
spyOn(spy, 'zoomChanged');
|
||||
spyOn(spy, 'keyboardChanged');
|
||||
spyOn(spy, 'centerChanged');
|
||||
spyOn(spy, 'changed');
|
||||
map.bind('change:zoom', spy.zoomChanged);
|
||||
map.bind('change:keyboard', spy.keyboardChanged);
|
||||
map.bind('change:center', spy.centerChanged);
|
||||
map.bind('change', spy.changed);
|
||||
});
|
||||
|
||||
it("should change bounds when center is set", function() {
|
||||
var s = sinon.spy();
|
||||
spyOn(map, 'getViewBounds');
|
||||
map.bind('change:view_bounds_ne', s);
|
||||
map.set('center', [10, 10]);
|
||||
expect(s.called).toEqual(true);
|
||||
expect(map.getViewBounds).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should change center and zoom when bounds are changed", function(done) {
|
||||
var s = sinon.spy();
|
||||
mapView.getSize = function() { return {x: 200, y: 200}; }
|
||||
map.bind('change:center', s);
|
||||
spyOn(mapView, '_setCenter');
|
||||
mapView._bindModel();
|
||||
|
||||
map.set({
|
||||
'view_bounds_ne': [1, 1],
|
||||
'view_bounds_sw': [-0.3, -1.2]
|
||||
})
|
||||
|
||||
setTimeout(function() {
|
||||
expect(mapView._setCenter).toHaveBeenCalled();
|
||||
done();
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
it("should allow adding a layer", function() {
|
||||
map.addLayer(layer);
|
||||
expect(map.layers.length).toEqual(1);
|
||||
});
|
||||
|
||||
it("should add layers on reset", function() {
|
||||
map.layers.reset([
|
||||
layer
|
||||
]);
|
||||
expect(map.layers.length).toEqual(1);
|
||||
});
|
||||
|
||||
it("should create a layer view when adds a model", function() {
|
||||
var spy = { c: function() {} };
|
||||
spyOn(spy, 'c');
|
||||
mapView.bind('newLayerView', spy.c);
|
||||
map.addLayer(layer);
|
||||
expect(map.layers.length).toEqual(1);
|
||||
expect(_.size(mapView.layers)).toEqual(1);
|
||||
expect(spy.c).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should allow removing a layer", function() {
|
||||
map.addLayer(layer);
|
||||
map.removeLayer(layer);
|
||||
expect(map.layers.length).toEqual(0);
|
||||
expect(_.size(mapView.layers)).toEqual(0);
|
||||
});
|
||||
|
||||
it("should allow removing a layer by index", function() {
|
||||
map.addLayer(layer);
|
||||
map.removeLayerAt(0);
|
||||
expect(map.layers.length).toEqual(0);
|
||||
});
|
||||
|
||||
it("should allow removing a layer by Cid", function() {
|
||||
var cid = map.addLayer(layer);
|
||||
map.removeLayerByCid(cid);
|
||||
expect(map.layers.length).toEqual(0);
|
||||
});
|
||||
|
||||
it("should create a TiledLayerView when the layer is Tiled", function() {
|
||||
var lyr = map.addLayer(layer);
|
||||
var layerView = mapView.getLayerByCid(lyr);
|
||||
expect(cdb.geo.LeafLetTiledLayerView.prototype.isPrototypeOf(layerView)).isPrototypeOf();
|
||||
});
|
||||
|
||||
it("should create a CartoDBLayer when the layer is cartodb", function() {
|
||||
layer = new cdb.geo.CartoDBLayer({
|
||||
table_name: 'test',
|
||||
user_name: 'test',
|
||||
tile_style: 'test'
|
||||
});
|
||||
var lyr = map.addLayer(layer);
|
||||
var layerView = mapView.getLayerByCid(lyr);
|
||||
expect(layerView.setQuery).not.toEqual(undefined);
|
||||
});
|
||||
|
||||
it("should create a CartoDBLayerGroup when the layer is LayerGroup", function() {
|
||||
layer = new cdb.geo.CartoDBGroupLayer({
|
||||
layer_definition: {
|
||||
version: '1.0.0',
|
||||
layers: [{
|
||||
type: 'cartodb',
|
||||
options: {
|
||||
sql: 'select * from ne_10m_populated_places_simple',
|
||||
cartocss: '#layer { marker-fill: red; }',
|
||||
interactivity: ['test', 'cartodb_id']
|
||||
}
|
||||
}]
|
||||
}
|
||||
});
|
||||
var lyr = map.addLayer(layer);
|
||||
var layerView = mapView.getLayerByCid(lyr);
|
||||
expect(layerView.getLayerCount()).toEqual(1);
|
||||
});
|
||||
|
||||
it("should create the cartodb logo", function(done) {
|
||||
layer = new cdb.geo.CartoDBLayer({
|
||||
table_name: "INVENTADO",
|
||||
user_name: 'test',
|
||||
tile_style: 'test'
|
||||
});
|
||||
var lyr = map.addLayer(layer);
|
||||
var layerView = mapView.getLayerByCid(lyr);
|
||||
|
||||
setTimeout(function() {
|
||||
expect(container.find("div.cartodb-logo").length).toEqual(1);
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
|
||||
it("should not add the cartodb logo when cartodb_logo = false", function(done) {
|
||||
layer = new cdb.geo.CartoDBLayer({
|
||||
table_name: "INVENTADO",
|
||||
user_name: 'test',
|
||||
tile_style: 'test',
|
||||
cartodb_logo: false
|
||||
});
|
||||
var lyr = map.addLayer(layer);
|
||||
var layerView = mapView.getLayerByCid(lyr);
|
||||
|
||||
setTimeout(function() {
|
||||
expect(container.find("div.cartodb-logo").length).toEqual(0);
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
|
||||
it("should create a PlaiLayer when the layer is cartodb", function() {
|
||||
layer = new cdb.geo.PlainLayer({});
|
||||
var lyr = map.addLayer(layer);
|
||||
var layerView = mapView.getLayerByCid(lyr);
|
||||
expect(layerView.setQuery).not.toEqual(cdb.geo.LeafLetPlainLayerView);
|
||||
});
|
||||
|
||||
it("should insert layers in specified order", function() {
|
||||
var layer = new cdb.geo.CartoDBLayer({
|
||||
table_name: "INVENTADO",
|
||||
user_name: 'test',
|
||||
tile_style: 'test'
|
||||
});
|
||||
map.addLayer(layer);
|
||||
|
||||
spyOn(mapView.map_leaflet,'addLayer');
|
||||
var b = new cdb.geo.TileLayer({urlTemplate: 'test' });
|
||||
map.addLayer(b, {at: 0});
|
||||
|
||||
expect(mapView.getLayerByCid(layer.cid).options.zIndex).toEqual(1);
|
||||
expect(mapView.getLayerByCid(b.cid).options.zIndex).toEqual(0);
|
||||
//expect(mapView.map_leaflet.addLayer).toHaveBeenCalledWith(mapView.layers[layer.cid].leafletLayer, true);
|
||||
});
|
||||
|
||||
it("shoule remove all layers when map view is cleaned", function() {
|
||||
|
||||
var id1 = map.addLayer(new cdb.geo.CartoDBLayer({
|
||||
table_name: "INVENTADO",
|
||||
user_name: 'test',
|
||||
tile_style: 'test'
|
||||
}));
|
||||
var id2 = map.addLayer(new cdb.geo.CartoDBLayer({
|
||||
table_name: "INVENTADO",
|
||||
user_name: 'test',
|
||||
tile_style: 'test'
|
||||
}));
|
||||
|
||||
expect(_.size(mapView.layers)).toEqual(2);
|
||||
var layer = mapView.getLayerByCid(id1);
|
||||
var layer2 = mapView.getLayerByCid(id2);
|
||||
spyOn(layer, 'remove');
|
||||
spyOn(layer2, 'remove');
|
||||
mapView.clean();
|
||||
expect(_.size(mapView.layers)).toEqual(0);
|
||||
expect(layer.remove).toHaveBeenCalled();
|
||||
expect(layer2.remove).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should not all a layer when it can't be creadted", function() {
|
||||
var layer = new cdb.geo.TileLayer({type: 'rambo'});
|
||||
map.addLayer(layer);
|
||||
expect(_.size(mapView.layers)).toEqual(0);
|
||||
});
|
||||
|
||||
var geojsonFeature = {
|
||||
"type": "Point",
|
||||
"coordinates": [-104.99404, 39.75621]
|
||||
};
|
||||
|
||||
it("should add and remove a geometry", function() {
|
||||
var geo = new cdb.geo.Geometry({
|
||||
geojson: geojsonFeature
|
||||
});
|
||||
map.addGeometry(geo);
|
||||
expect(_.size(mapView.geometries)).toEqual(1);
|
||||
geo.destroy();
|
||||
expect(_.size(mapView.geometries)).toEqual(0);
|
||||
});
|
||||
|
||||
it("should edit a geometry", function() {
|
||||
var geo = new cdb.geo.Geometry({
|
||||
geojson: geojsonFeature
|
||||
});
|
||||
map.addGeometry(geo);
|
||||
var v = mapView.geometries[geo.cid];
|
||||
v.trigger('dragend', null, [10, 20]);
|
||||
expect(geo.get('geojson')).toEqual({
|
||||
"type": "Point",
|
||||
"coordinates": [20, 10]
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it("should save automatically when the zoom or center changes", function(done) {
|
||||
spyOn(map, 'save');
|
||||
mapView.setAutoSaveBounds();
|
||||
map.set('center', [1,2]);
|
||||
|
||||
setTimeout(function() {
|
||||
expect(map.save).toHaveBeenCalled();
|
||||
done();
|
||||
}, 1500);
|
||||
|
||||
});
|
||||
|
||||
it("should set z-order", function() {
|
||||
var layer1 = new cdb.geo.TileLayer({ urlTemplate:'test1'});
|
||||
var layer2 = new cdb.geo.TileLayer({ urlTemplate:'test2'});
|
||||
var layerView1 = mapView.getLayerByCid(map.addLayer(layer1));
|
||||
var layerView2 = mapView.getLayerByCid(map.addLayer(layer2, { at: 0 }));
|
||||
expect(layerView1.options.zIndex > layerView2.options.zIndex).toEqual(true);
|
||||
});
|
||||
|
||||
it("should switch layer", function() {
|
||||
map.addLayer(layer);
|
||||
layer.set('type', 'torque');
|
||||
expect(mapView.layers[layer.cid] instanceof L.TorqueLayer).toEqual(true);
|
||||
});
|
||||
|
||||
it("should reuse layer view", function() {
|
||||
var layer1 = new cdb.geo.TorqueLayer({ type: 'torque', sql: 'select * from table', cartocss: '#test {}' });
|
||||
map.addLayer(layer1);
|
||||
expect(mapView.layers[layer1.cid] instanceof L.TorqueLayer).toEqual(true);
|
||||
mapView.layers[layer1.cid].check = 'testing';
|
||||
var newLayer = layer1.clone();
|
||||
newLayer.set({ sql: 'select * from table', cartocss: '#test {}' });
|
||||
map.layers.reset([newLayer]);
|
||||
expect(mapView.layers[newLayer.cid] instanceof L.TorqueLayer).toEqual(true);
|
||||
expect(mapView.layers[newLayer.cid].model).toEqual(newLayer)
|
||||
expect(mapView.layers[newLayer.cid].check).toEqual('testing');
|
||||
});
|
||||
|
||||
// Test cases for gmaps substitutes since the support is deprecated.
|
||||
_({ // GMaps basemap base_type: expected substitute data
|
||||
//empty = defaults to gray_roadmap
|
||||
"": {
|
||||
tiles: {
|
||||
providedBy: "cartocdn",
|
||||
type: "light"
|
||||
},
|
||||
subdomains: ['a','b','c','d'],
|
||||
minZoom: 0,
|
||||
maxZoom: 18,
|
||||
attribution: 'Map designs by <a href="http://stamen.com/">Stamen</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, Provided by <a href="https://carto.com">CARTO</a>'
|
||||
},
|
||||
dark_roadmap: {
|
||||
tiles: {
|
||||
providedBy: "cartocdn",
|
||||
type: "dark"
|
||||
},
|
||||
subdomains: ['a','b','c','d'],
|
||||
minZoom: 0,
|
||||
maxZoom: 18,
|
||||
attribution: 'Map designs by <a href="http://stamen.com/">Stamen</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, Provided by <a href="https://carto.com">CARTO</a>'
|
||||
},
|
||||
roadmap: {
|
||||
tiles: {
|
||||
providedBy: "nokia",
|
||||
type: "normal.day"
|
||||
},
|
||||
subdomains: ['1','2','3','4'],
|
||||
minZoom: 0,
|
||||
maxZoom: 21,
|
||||
attribution: '©2012 Nokia <a href="http://here.net/services/terms" target="_blank">Terms of use</a>'
|
||||
},
|
||||
hybrid: {
|
||||
tiles: {
|
||||
providedBy: "nokia",
|
||||
type: "hybrid.day"
|
||||
},
|
||||
subdomains: ['1','2','3','4'],
|
||||
minZoom: 0,
|
||||
maxZoom: 21,
|
||||
attribution: '©2012 Nokia <a href="http://here.net/services/terms" target="_blank">Terms of use</a>'
|
||||
},
|
||||
terrain: {
|
||||
tiles: {
|
||||
providedBy: "nokia",
|
||||
type: "terrain.day"
|
||||
},
|
||||
subdomains: ['1','2','3','4'],
|
||||
minZoom: 0,
|
||||
maxZoom: 21,
|
||||
attribution: '©2012 Nokia <a href="http://here.net/services/terms" target="_blank">Terms of use</a>'
|
||||
},
|
||||
satellite: { // Nokia Satellite Day
|
||||
tiles: {
|
||||
providedBy: "nokia",
|
||||
type: "satellite.day"
|
||||
},
|
||||
subdomains: ['1','2','3','4'],
|
||||
minZoom: 0,
|
||||
maxZoom: 21,
|
||||
attribution: '©2012 Nokia <a href="http://here.net/services/terms" target="_blank">Terms of use</a>'
|
||||
}
|
||||
}).map(function(substitute, baseType) {
|
||||
var layerOpts;
|
||||
var testContext;
|
||||
|
||||
if (baseType) {
|
||||
layerOpts = { base_type: baseType};
|
||||
testContext = 'with basemap "'+ baseType +'"';
|
||||
} else {
|
||||
testContext = 'with default basemap "gray_roadmap"';
|
||||
}
|
||||
|
||||
describe("given a GMaps layer model "+ testContext, function () {
|
||||
var view;
|
||||
|
||||
beforeEach(function() {
|
||||
var layer = new cdb.geo.GMapsBaseLayer(layerOpts);
|
||||
view = mapView.createLayer(layer);
|
||||
});
|
||||
|
||||
it("should have a tileUrl based on substitute's template URL", function() {
|
||||
var tileUrl = view.getTileUrl({ x: 101, y: 202, z: 303 });
|
||||
|
||||
expect(tileUrl).toContain(substitute.tiles.providedBy);
|
||||
expect(tileUrl).toContain(substitute.tiles.type);
|
||||
});
|
||||
|
||||
it("should have substitute's attribution", function() {
|
||||
expect(view.options.attribution).toEqual(substitute.attribution);
|
||||
});
|
||||
|
||||
it("should have substitute's minZoom", function() {
|
||||
expect(view.options.minZoom).toEqual(substitute.minZoom);
|
||||
});
|
||||
|
||||
it("should have substitute's maxZoom", function() {
|
||||
expect(view.options.maxZoom).toEqual(substitute.maxZoom);
|
||||
});
|
||||
|
||||
it("shouldn't have any opacity since gmaps basemap didn't have any", function() {
|
||||
expect(view.options.opacity).toEqual(1);
|
||||
});
|
||||
|
||||
it("should match substitute's subdomains", function() {
|
||||
expect(view.options.subdomains).toEqual(substitute.subdomains);
|
||||
});
|
||||
|
||||
it("shouldn't have an errorTileUrl since gmaps didn't have any", function() {
|
||||
expect(view.options.errorTileUrl).toEqual('');
|
||||
});
|
||||
|
||||
it("shouldn't use osgeo's TMS setting", function() {
|
||||
expect(view.options.tms).toEqual(false);
|
||||
});
|
||||
|
||||
xit("should change keyboard", function() {
|
||||
mapView._setKeyboard(null, false);
|
||||
expect(spy.keyboardChanged).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
describe('attributions', function() {
|
||||
|
||||
var container;
|
||||
|
||||
beforeEach(function() {
|
||||
container = $('<div>').css({
|
||||
'height': '200px',
|
||||
'width': '200px'
|
||||
});
|
||||
});
|
||||
|
||||
it('should render the right attributions', function() {
|
||||
var attributions = mapView.$el.find('.leaflet-control-attribution').text();
|
||||
expect(attributions).toEqual('© CARTO');
|
||||
|
||||
layer = new cdb.geo.CartoDBLayer({
|
||||
attribution: 'custom attribution'
|
||||
});
|
||||
map.addLayer(layer);
|
||||
|
||||
var attributions = mapView.$el.find('.leaflet-control-attribution').text();
|
||||
expect(attributions).toEqual('custom attribution, © CARTO');
|
||||
});
|
||||
|
||||
it('should respect the attribution of existing Leaflet layers', function() {
|
||||
var leafletMap = new L.Map(container[0], {
|
||||
center: [43, 0],
|
||||
zoom: 3
|
||||
});
|
||||
|
||||
// Add a tile layer with some attribution
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(leafletMap);
|
||||
|
||||
mapView = new cdb.geo.LeafletMapView({
|
||||
el: container,
|
||||
map: map,
|
||||
map_object: leafletMap
|
||||
});
|
||||
|
||||
// Add a CartoDB layer with some custom attribution
|
||||
layer = new cdb.geo.CartoDBLayer({
|
||||
attribution: 'custom attribution'
|
||||
});
|
||||
map.addLayer(layer);
|
||||
|
||||
var attributions = mapView.$el.find('.leaflet-control-attribution').text();
|
||||
expect(attributions).toEqual('Leaflet | Stamen, custom attribution, © CARTO');
|
||||
});
|
||||
|
||||
it('should render attributions when the Leaflet map has attributionControl disabled', function() {
|
||||
var leafletMap = new L.Map(container[0], {
|
||||
center: [43, 0],
|
||||
zoom: 3,
|
||||
attributionControl: false
|
||||
});
|
||||
|
||||
// Add a tile layer with some attribution
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(leafletMap);
|
||||
|
||||
mapView = new cdb.geo.LeafletMapView({
|
||||
el: container,
|
||||
map: map,
|
||||
map_object: leafletMap
|
||||
});
|
||||
|
||||
// Add a CartoDB layer with some custom attribution
|
||||
layer = new cdb.geo.CartoDBLayer({
|
||||
attribution: 'custom attribution'
|
||||
});
|
||||
map.addLayer(layer);
|
||||
|
||||
var attributions = mapView.$el.find('.leaflet-control-attribution').text();
|
||||
expect(attributions).toEqual('Stamen, custom attribution, © CARTO');
|
||||
});
|
||||
});
|
||||
|
||||
it("should disable leaflet dragging and double click zooming when the map has drag disabled", function() {
|
||||
var container = $('<div>').css({
|
||||
'height': '200px',
|
||||
'width': '200px'
|
||||
});
|
||||
var map = new cdb.geo.Map({
|
||||
drag: false
|
||||
});
|
||||
var mapView = new cdb.geo.LeafletMapView({
|
||||
el: container,
|
||||
map: map
|
||||
});
|
||||
|
||||
expect(mapView.map_leaflet.dragging.enabled()).toBeFalsy();
|
||||
expect(mapView.map_leaflet.doubleClickZoom.enabled()).toBeFalsy();
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,330 @@
|
||||
|
||||
describe("geo.map", function() {
|
||||
|
||||
describe('cdb.geo.MapLayer', function() {
|
||||
var layer;
|
||||
|
||||
beforeEach(function() {
|
||||
layer = new cdb.geo.MapLayer();
|
||||
layer.url = function() {return true};
|
||||
layer.sync = function() {return true};
|
||||
});
|
||||
});
|
||||
|
||||
describe('GMapsBaseLayer', function() {
|
||||
it("should be type GMapsBase", function() {
|
||||
var layer = new cdb.geo.GMapsBaseLayer();
|
||||
expect(layer.get('type')).toEqual("GMapsBase");
|
||||
});
|
||||
});
|
||||
|
||||
describe('TileLayer', function() {
|
||||
it("should be type tiled", function() {
|
||||
var layer = new cdb.geo.TileLayer();
|
||||
expect(layer.get('type')).toEqual("Tiled");
|
||||
});
|
||||
});
|
||||
|
||||
describe('CartoDBLayer', function() {
|
||||
it("should be type CartoDB", function() {
|
||||
var layer = new cdb.geo.CartoDBLayer();
|
||||
expect(layer.get('type')).toEqual("CartoDB");
|
||||
});
|
||||
});
|
||||
|
||||
describe('CartoDBGroupLayer', function() {
|
||||
it("should be type layergroup", function() {
|
||||
var layer = new cdb.geo.CartoDBGroupLayer();
|
||||
expect(layer.get('type')).toEqual("layergroup");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Layers", function() {
|
||||
var layers;
|
||||
|
||||
beforeEach(function() {
|
||||
layers = new cdb.geo.Layers();
|
||||
});
|
||||
|
||||
it("should compare equal layers correctly", function() {
|
||||
var layer1 = new cdb.geo.PlainLayer({ name: 'Positron' });
|
||||
var layer2 = new cdb.geo.PlainLayer({});
|
||||
var layer3 = new cdb.geo.PlainLayer({});
|
||||
var layer4 = new cdb.geo.PlainLayer({});
|
||||
|
||||
expect(layer3.isEqual(layer4)).toBeTruthy();
|
||||
expect(layer1.isEqual(layer2)).not.toBeTruthy();
|
||||
|
||||
layers.add(layer4);
|
||||
layers.add(layer3);
|
||||
|
||||
expect(layer3.isEqual(layer4)).toBeTruthy();
|
||||
})
|
||||
|
||||
it("should compare TileLayers", function() {
|
||||
var layer1 = new cdb.geo.TileLayer({ urlTemplate: 'urlTemplate', name: 'layer1', other: 'something' });
|
||||
var layer2 = new cdb.geo.TileLayer({ urlTemplate: 'urlTemplate', name: 'layer2', other: 'else' });
|
||||
|
||||
expect(layer1.isEqual(layer2)).toBeFalsy();
|
||||
|
||||
layer2.set({ name: 'layer1' }, { silent: true});
|
||||
|
||||
expect(layer1.isEqual(layer2)).toBeTruthy();
|
||||
})
|
||||
|
||||
it("should re-assign order when new layers are added to the collection", function() {
|
||||
var baseLayer = new cdb.geo.TileLayer();
|
||||
var layer1 = new cdb.geo.CartoDBLayer();
|
||||
var layer2 = new cdb.geo.CartoDBLayer();
|
||||
var layer3 = new cdb.geo.CartoDBLayer();
|
||||
|
||||
// Sets the order to 0
|
||||
layers.add(baseLayer);
|
||||
|
||||
expect(baseLayer.get('order')).toEqual(0);
|
||||
|
||||
// Sets the order to 1
|
||||
layers.add(layer1);
|
||||
layers.add(layer2);
|
||||
|
||||
expect(baseLayer.get('order')).toEqual(0);
|
||||
expect(layer1.get('order')).toEqual(1);
|
||||
expect(layer2.get('order')).toEqual(2);
|
||||
|
||||
// Sets the order to 1 and re-orders the rest of the layers
|
||||
layers.add(layer3, { at: 1});
|
||||
|
||||
expect(baseLayer.get('order')).toEqual(0);
|
||||
expect(layer1.get('order')).toEqual(2);
|
||||
expect(layer2.get('order')).toEqual(3);
|
||||
expect(layer3.get('order')).toEqual(1);
|
||||
|
||||
var torqueLayer = new cdb.geo.TorqueLayer({});
|
||||
|
||||
// Torque layer should be at the top
|
||||
layers.add(torqueLayer);
|
||||
|
||||
expect(baseLayer.get('order')).toEqual(0);
|
||||
expect(layer1.get('order')).toEqual(2);
|
||||
expect(layer2.get('order')).toEqual(3);
|
||||
expect(layer3.get('order')).toEqual(1);
|
||||
expect(torqueLayer.get('order')).toEqual(4);
|
||||
|
||||
var tiledLayer = new cdb.geo.TileLayer({});
|
||||
|
||||
// Tiled layer should be at the top
|
||||
layers.add(tiledLayer);
|
||||
|
||||
expect(baseLayer.get('order')).toEqual(0);
|
||||
expect(layer1.get('order')).toEqual(2);
|
||||
expect(layer2.get('order')).toEqual(3);
|
||||
expect(layer3.get('order')).toEqual(1);
|
||||
expect(torqueLayer.get('order')).toEqual(4);
|
||||
expect(tiledLayer.get('order')).toEqual(5);
|
||||
|
||||
var layer4 = new cdb.geo.CartoDBLayer({});
|
||||
layers.add(layer4);
|
||||
|
||||
expect(baseLayer.get('order')).toEqual(0);
|
||||
expect(layer1.get('order')).toEqual(2);
|
||||
expect(layer2.get('order')).toEqual(3);
|
||||
expect(layer3.get('order')).toEqual(1);
|
||||
expect(layer4.get('order')).toEqual(4);
|
||||
expect(torqueLayer.get('order')).toEqual(5);
|
||||
expect(tiledLayer.get('order')).toEqual(6);
|
||||
});
|
||||
|
||||
it("should re-assign order when new layers are removed from the collection", function() {
|
||||
var baseLayer = new cdb.geo.TileLayer();
|
||||
var layer1 = new cdb.geo.CartoDBLayer();
|
||||
var layer2 = new cdb.geo.CartoDBLayer();
|
||||
var torqueLayer = new cdb.geo.TorqueLayer({});
|
||||
var labelsLayer = new cdb.geo.TileLayer();
|
||||
|
||||
// Sets the order to 0
|
||||
layers.add(baseLayer);
|
||||
layers.add(layer1);
|
||||
layers.add(layer2);
|
||||
layers.add(torqueLayer);
|
||||
layers.add(labelsLayer);
|
||||
|
||||
expect(baseLayer.get('order')).toEqual(0);
|
||||
expect(layer1.get('order')).toEqual(1);
|
||||
expect(layer2.get('order')).toEqual(2);
|
||||
expect(torqueLayer.get('order')).toEqual(3);
|
||||
expect(labelsLayer.get('order')).toEqual(4);
|
||||
|
||||
layers.remove(layer1);
|
||||
|
||||
expect(baseLayer.get('order')).toEqual(0);
|
||||
expect(layer2.get('order')).toEqual(1);
|
||||
expect(torqueLayer.get('order')).toEqual(2);
|
||||
expect(labelsLayer.get('order')).toEqual(3);
|
||||
|
||||
layers.remove(torqueLayer);
|
||||
|
||||
expect(baseLayer.get('order')).toEqual(0);
|
||||
expect(layer2.get('order')).toEqual(1);
|
||||
expect(labelsLayer.get('order')).toEqual(2);
|
||||
|
||||
layers.remove(labelsLayer);
|
||||
|
||||
expect(baseLayer.get('order')).toEqual(0);
|
||||
expect(layer2.get('order')).toEqual(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Map", function() {
|
||||
var map;
|
||||
|
||||
beforeEach(function() {
|
||||
map = new cdb.geo.Map();
|
||||
});
|
||||
|
||||
it("should raise only one change event on setBounds", function() {
|
||||
var c = 0;
|
||||
map.bind('change:view_bounds_ne', function() {
|
||||
c++;
|
||||
});
|
||||
map.setBounds([[1,2],[1,2]]);
|
||||
expect(c).toEqual(1);
|
||||
});
|
||||
|
||||
it("should not change center or zoom when the bounds are not ok", function() {
|
||||
var c = 0;
|
||||
map.bind('change:center', function() {
|
||||
c++;
|
||||
});
|
||||
map.setBounds([[1,2],[1,2]]);
|
||||
expect(c).toEqual(0);
|
||||
});
|
||||
|
||||
it("should not change bounds when map size is 0", function() {
|
||||
map.set('zoom', 10);
|
||||
var bounds = [[43.100982876188546, 35.419921875], [60.23981116999893, 69.345703125]]
|
||||
map.fitBounds(bounds, {x: 0, y: 0});
|
||||
expect(map.get('zoom')).toEqual(10);
|
||||
});
|
||||
|
||||
it("should adjust zoom to layer", function() {
|
||||
expect(map.get('maxZoom')).toEqual(40);
|
||||
expect(map.get('minZoom')).toEqual(0);
|
||||
|
||||
var layer = new cdb.geo.PlainLayer({ minZoom: 5, maxZoom: 20 });
|
||||
map.layers.reset(layer);
|
||||
expect(map.get('maxZoom')).toEqual(20);
|
||||
expect(map.get('minZoom')).toEqual(5);
|
||||
|
||||
var layer = new cdb.geo.PlainLayer({ minZoom: "7", maxZoom: "31" });
|
||||
map.layers.reset(layer);
|
||||
expect(map.get('maxZoom')).toEqual(31);
|
||||
expect(map.get('minZoom')).toEqual(7);
|
||||
});
|
||||
|
||||
it("shouldn't set a NaN zoom", function() {
|
||||
var layer = new cdb.geo.PlainLayer({ minZoom: NaN, maxZoom: NaN });
|
||||
map.layers.reset(layer);
|
||||
expect(map.get('maxZoom')).toEqual(40);
|
||||
expect(map.get('minZoom')).toEqual(0);
|
||||
});
|
||||
|
||||
it('should update the attributions of the map when layers are reset/added/removed', function() {
|
||||
|
||||
map = new cdb.geo.Map();
|
||||
var DEFAULT_CARTO_ATTRIBUTION = '© <a href="https://carto.com/attributions" target="_blank">CARTO</a>';
|
||||
|
||||
// Map has the default CARTO attribution
|
||||
expect(map.get('attribution')).toEqual([
|
||||
cdb.core.sanitize.html("© <a href='https://carto.com/attributions' target='_blank'>CARTO</a>")
|
||||
]);
|
||||
|
||||
var layer1 = new cdb.geo.CartoDBLayer({ attribution: 'attribution1' });
|
||||
var layer2 = new cdb.geo.CartoDBLayer({ attribution: 'attribution1' });
|
||||
var layer3 = new cdb.geo.CartoDBLayer({ attribution: 'wadus' });
|
||||
var layer4 = new cdb.geo.CartoDBLayer({ attribution: '' });
|
||||
|
||||
map.layers.reset([ layer1, layer2, layer3, layer4 ]);
|
||||
|
||||
// Attributions have been updated removing duplicated and empty attributions
|
||||
expect(map.get('attribution')).toEqual([
|
||||
"attribution1",
|
||||
"wadus",
|
||||
DEFAULT_CARTO_ATTRIBUTION
|
||||
]);
|
||||
|
||||
var layer = new cdb.geo.CartoDBLayer({ attribution: 'attribution2' });
|
||||
|
||||
map.layers.add(layer);
|
||||
|
||||
// The attribution of the new layer has been appended before the default CARTO attribution
|
||||
expect(map.get('attribution')).toEqual([
|
||||
"attribution1",
|
||||
"wadus",
|
||||
"attribution2",
|
||||
DEFAULT_CARTO_ATTRIBUTION
|
||||
]);
|
||||
|
||||
layer.set('attribution', 'new attribution');
|
||||
|
||||
// The attribution of the layer has been updated in the map
|
||||
expect(map.get('attribution')).toEqual([
|
||||
"attribution1",
|
||||
"wadus",
|
||||
"new attribution",
|
||||
DEFAULT_CARTO_ATTRIBUTION
|
||||
]);
|
||||
|
||||
map.layers.remove(layer);
|
||||
|
||||
expect(map.get('attribution')).toEqual([
|
||||
"attribution1",
|
||||
"wadus",
|
||||
DEFAULT_CARTO_ATTRIBUTION
|
||||
]);
|
||||
|
||||
// Addind a layer with the default attribution
|
||||
var layer = new cdb.geo.CartoDBLayer();
|
||||
|
||||
map.layers.add(layer, { at: 0 });
|
||||
|
||||
// Default CARTO only appears once and it's the last one
|
||||
expect(map.get('attribution')).toEqual([
|
||||
"attribution1",
|
||||
"wadus",
|
||||
DEFAULT_CARTO_ATTRIBUTION
|
||||
]);
|
||||
})
|
||||
});
|
||||
|
||||
describe('MapView', function() {
|
||||
|
||||
beforeEach(function() {
|
||||
this.container = $('<div>').css('height', '200px');
|
||||
|
||||
this.map = new cdb.geo.Map();
|
||||
this.mapView = new cdb.geo.MapView({
|
||||
el: this.container,
|
||||
map: this.map
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to add a infowindow', function() {
|
||||
var infow = new cdb.geo.ui.Infowindow({mapView: this.mapView, model: new Backbone.Model()});
|
||||
this.mapView.addInfowindow(infow);
|
||||
|
||||
expect(this.mapView._subviews[infow.cid]).toBeTruthy()
|
||||
expect(this.mapView._subviews[infow.cid] instanceof cdb.geo.ui.Infowindow).toBeTruthy()
|
||||
});
|
||||
|
||||
it('should be able to retrieve the infowindows', function() {
|
||||
var infow = new cdb.geo.ui.Infowindow({mapView: this.mapView, model: new Backbone.Model()});
|
||||
this.mapView._subviews['irrelevant'] = new Backbone.View();
|
||||
this.mapView.addInfowindow(infow);
|
||||
|
||||
var infowindows = this.mapView.getInfoWindows()
|
||||
|
||||
expect(infowindows.length).toEqual(1);
|
||||
expect(infowindows[0]).toEqual(infow);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,230 @@
|
||||
describe("cdb.geo.ui.Annotation", function() {
|
||||
|
||||
var data, view, map, mapView;
|
||||
|
||||
describe("Annotation unbinding", function() {
|
||||
|
||||
var spy;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
map = new cdb.geo.Map();
|
||||
|
||||
container = $('<div>').css('height', '200px');
|
||||
|
||||
mapView = new cdb.geo.GoogleMapsMapView({
|
||||
el: container,
|
||||
map: map
|
||||
});
|
||||
|
||||
spy = spyOn(cdb.geo.ui.Annotation.prototype, '_place');
|
||||
|
||||
view = new cdb.geo.ui.Annotation({
|
||||
text: "You are <strong>here</strong>",
|
||||
latlng: [40, 2],
|
||||
mapView: mapView,
|
||||
minZoom: 0,
|
||||
maxZoom: 40,
|
||||
});
|
||||
|
||||
mapView.$el.append(view.render().$el);
|
||||
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
view.clean();
|
||||
container.remove();
|
||||
});
|
||||
|
||||
it("should unbind from the map", function(done) {
|
||||
|
||||
mapView.map.bind('change', spy, view);
|
||||
|
||||
view.clean();
|
||||
|
||||
mapView.map.set('center', [10, 10]);
|
||||
|
||||
setTimeout(function(){
|
||||
expect(spy.calls.count()).toEqual(1);
|
||||
done();
|
||||
}, 1000);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("Annotation movement", function() {
|
||||
|
||||
var spy;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
map = new cdb.geo.Map();
|
||||
|
||||
container = $('<div>').css('height', '200px');
|
||||
|
||||
mapView = new cdb.geo.GoogleMapsMapView({
|
||||
el: container,
|
||||
map: map
|
||||
});
|
||||
|
||||
spy = spyOn(cdb.geo.ui.Annotation.prototype, '_place');
|
||||
|
||||
view = new cdb.geo.ui.Annotation({
|
||||
text: "You are <strong>here</strong>",
|
||||
latlng: [40, 2],
|
||||
mapView: mapView,
|
||||
minZoom: 0,
|
||||
maxZoom: 40,
|
||||
});
|
||||
|
||||
mapView.$el.append(view.render().$el);
|
||||
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
view.clean();
|
||||
container.remove();
|
||||
});
|
||||
|
||||
it("should move when the map moves", function(done) {
|
||||
|
||||
mapView.map.bind('change', spy);
|
||||
mapView.map.set('center', [10, 10]);
|
||||
|
||||
setTimeout(function(){
|
||||
expect(spy.calls.count()).toEqual(2);
|
||||
done();
|
||||
}, 200);
|
||||
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
describe("Annotation rendering", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
map = new cdb.geo.Map();
|
||||
|
||||
container = $('<div>').css('height', '200px');
|
||||
|
||||
mapView = new cdb.geo.GoogleMapsMapView({
|
||||
el: container,
|
||||
map: map
|
||||
});
|
||||
|
||||
view = new cdb.geo.ui.Annotation({
|
||||
text: "This is <a href='http://www.carto.com'>a link</a> and this <a href='http://www.carto.com'>too</a>",
|
||||
latlng: [40, 2],
|
||||
mapView: mapView,
|
||||
minZoom: 0,
|
||||
maxZoom: 40,
|
||||
style: {
|
||||
textAlign: "left",
|
||||
zIndex: 1000,
|
||||
textAlign: "right",
|
||||
"font-size": "13",
|
||||
fontFamilyName: "Helvetica",
|
||||
"box-color": "#F84F40",
|
||||
boxOpacity: 0.7,
|
||||
boxPadding: 10,
|
||||
"line-width": 50
|
||||
}
|
||||
});
|
||||
|
||||
mapView.$el.append(view.render().$el);
|
||||
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
view.clean();
|
||||
container.remove();
|
||||
});
|
||||
|
||||
it("should render the right links", function(done) {
|
||||
setTimeout(function() {
|
||||
expect(view.$el.find(".text a:first-child").attr("target")).toEqual("_top");
|
||||
expect(view.$el.find(".text a:last-child").attr("target")).toEqual("_top");
|
||||
done();
|
||||
}, 700);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("Annotation setters", function() {
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
map = new cdb.geo.Map();
|
||||
|
||||
container = $('<div>').css('height', '200px');
|
||||
|
||||
mapView = new cdb.geo.GoogleMapsMapView({
|
||||
el: container,
|
||||
map: map
|
||||
});
|
||||
|
||||
view = new cdb.geo.ui.Annotation({
|
||||
text: "You are <strong>here</strong>",
|
||||
latlng: [40, 2],
|
||||
mapView: mapView,
|
||||
minZoom: 0,
|
||||
maxZoom: 40,
|
||||
style: {
|
||||
textAlign: "left",
|
||||
zIndex: 1000,
|
||||
textAlign: "right",
|
||||
"font-size": "13",
|
||||
fontFamilyName: "Helvetica",
|
||||
"box-color": "#F84F40",
|
||||
boxOpacity: 0.7,
|
||||
boxPadding: 10,
|
||||
"line-width": 50
|
||||
}
|
||||
});
|
||||
|
||||
mapView.$el.append(view.render().$el);
|
||||
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
view.clean();
|
||||
container.remove();
|
||||
});
|
||||
|
||||
it("should render", function(done) {
|
||||
setTimeout(function() {
|
||||
expect(view.$el.find(".text").html()).toEqual("You are <strong>here</strong>");
|
||||
expect(view.$el.css("background-color").indexOf('rgba(248, 79, 64')).toEqual(0);
|
||||
expect(view.$el.find(".stick").css("background-color")).toEqual('rgb(51, 51, 51)');
|
||||
expect(view.$el.find(".text").css("color")).toEqual('rgb(255, 255, 255)');
|
||||
done();
|
||||
}, 700);
|
||||
});
|
||||
|
||||
it("should allow to change the text", function() {
|
||||
expect(view.model.set("text", "Now you are here"));
|
||||
expect(view.$el.find(".text").html()).toEqual("Now you are here");
|
||||
});
|
||||
|
||||
it("should allow to change the text", function() {
|
||||
expect(view.setText("I'm here"));
|
||||
expect(view.$el.find(".text").text()).toEqual("I'm here");
|
||||
});
|
||||
|
||||
it("should allow to change the style", function() {
|
||||
expect(view.setStyle("color", "#000000"));
|
||||
expect(view.$el.find(".text").css("color")).toEqual('rgb(0, 0, 0)');
|
||||
});
|
||||
|
||||
it("should generate a standard name for a property", function() {
|
||||
expect(view._getStandardPropertyName("")).toEqual(undefined);
|
||||
expect(view._getStandardPropertyName("color")).toEqual("color");
|
||||
expect(view._getStandardPropertyName("font-size")).toEqual("fontSize");
|
||||
expect(view._getStandardPropertyName("font-family-name")).toEqual("fontFamilyName");
|
||||
expect(view._getStandardPropertyName("z-index")).toEqual("zIndex");
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,572 @@
|
||||
describe('Sublayers', function() {
|
||||
var layerDefinition, sublayer;
|
||||
|
||||
beforeEach(function() {
|
||||
var layer_definition = {
|
||||
version: '1.0.0',
|
||||
stat_tag: 'vis_id',
|
||||
layers: [
|
||||
{
|
||||
type: 'cartodb',
|
||||
options: {
|
||||
sql: 'select * from ne_10m_populated_places_simple',
|
||||
cartocss: '#layer { marker-fill: red; }',
|
||||
interactivity: ['test', 'cartodb_id']
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'cartodb',
|
||||
options: {
|
||||
sql: "select * from european_countries_export",
|
||||
cartocss: '#layer { polygon-fill: #000; polygon-opacity: 0.8;}',
|
||||
cartocss_version : '2.0.0',
|
||||
interactivity: [' test2 ', 'cartodb_id2']
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
_.extend(LayerDefinition.prototype, Backbone.Events);
|
||||
|
||||
layerDefinition = new LayerDefinition(layer_definition, {});
|
||||
|
||||
sublayer = layerDefinition.getSubLayer(0);
|
||||
});
|
||||
|
||||
describe('SubLayerFactory', function() {
|
||||
|
||||
it('should return a CartoDBSublayer', function() {
|
||||
var sublayer = SubLayerFactory.createSublayer('', layerDefinition, 0);
|
||||
expect(sublayer instanceof CartoDBSubLayer).toBeTruthy();
|
||||
|
||||
var sublayer = SubLayerFactory.createSublayer('mapnik', layerDefinition, 0);
|
||||
expect(sublayer instanceof CartoDBSubLayer).toBeTruthy();
|
||||
|
||||
var sublayer = SubLayerFactory.createSublayer('cartodb', layerDefinition, 0);
|
||||
expect(sublayer instanceof CartoDBSubLayer).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should return an HttpSublayer', function() {
|
||||
var sublayer = SubLayerFactory.createSublayer('http', layerDefinition, 0);
|
||||
expect(sublayer instanceof HttpSubLayer).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should be case insensitive', function() {
|
||||
var sublayer = SubLayerFactory.createSublayer('cARToDB', layerDefinition, 0);
|
||||
expect(sublayer instanceof CartoDBSubLayer).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should throw an error if type is not supported', function() {
|
||||
expect(function() {
|
||||
SubLayerFactory.createSublayer('unsupported type');
|
||||
}).toThrow('Sublayer type not supported');
|
||||
})
|
||||
});
|
||||
|
||||
describe('SublayerBase', function() {
|
||||
|
||||
describe('.remove', function() {
|
||||
|
||||
it('should throw and error if layer was already removed', function() {
|
||||
sublayer.remove()
|
||||
|
||||
// Try to remove again
|
||||
expect(function() {
|
||||
sublayer.remove();
|
||||
}).toThrow('sublayer was removed');
|
||||
|
||||
});
|
||||
|
||||
it('should remove itself from the layer', function() {
|
||||
sublayer.remove()
|
||||
|
||||
expect(layerDefinition.getSubLayerCount()).toEqual(1);
|
||||
expect(layerDefinition.getSubLayer(0)).not.toEqual(sublayer);
|
||||
});
|
||||
|
||||
it('should unbind the interaction', function() {
|
||||
spyOn(sublayer, '_unbindInteraction');
|
||||
|
||||
sublayer.remove();
|
||||
|
||||
expect(sublayer._unbindInteraction).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should trigger a "remove" event', function(done) {
|
||||
var callback = function(subl) {
|
||||
expect(subl).toEqual(sublayer);
|
||||
done();
|
||||
};
|
||||
|
||||
sublayer.on('remove', callback);
|
||||
|
||||
sublayer.remove();
|
||||
});
|
||||
});
|
||||
|
||||
describe('.toggle', function() {
|
||||
|
||||
it('should show or hide the sublayer', function() {
|
||||
sublayer.set('hidden', false);
|
||||
|
||||
sublayer.toggle();
|
||||
|
||||
expect(sublayer.get('hidden')).toEqual(true);
|
||||
|
||||
sublayer.toggle();
|
||||
|
||||
expect(sublayer.get('hidden')).toEqual(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('.show', function() {
|
||||
|
||||
it('should show the layer', function() {
|
||||
sublayer.set('hidden', true);
|
||||
|
||||
sublayer.show();
|
||||
|
||||
expect(sublayer.get('hidden')).toBeUndefined();
|
||||
})
|
||||
});
|
||||
|
||||
describe('.hide', function() {
|
||||
|
||||
it('should hide the layer', function() {
|
||||
sublayer.set('hidden', false);
|
||||
|
||||
sublayer.hide();
|
||||
|
||||
expect(sublayer.get('hidden')).toEqual(true);
|
||||
})
|
||||
});
|
||||
|
||||
describe('.isVisible', function() {
|
||||
|
||||
it('should return true if sublayer is visible', function() {
|
||||
sublayer.set({'hidden': undefined});
|
||||
|
||||
expect(sublayer.isVisible()).toBeTruthy();
|
||||
|
||||
sublayer.set({'hidden': false});
|
||||
|
||||
expect(sublayer.isVisible()).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should return false if sublayer is hidden', function() {
|
||||
sublayer.set({'hidden': true});
|
||||
|
||||
expect(sublayer.isVisible()).toBeFalsy();
|
||||
});
|
||||
})
|
||||
|
||||
describe('.set', function() {
|
||||
|
||||
it('should throw an error if the sublayer was removed', function() {
|
||||
sublayer.remove();
|
||||
|
||||
expect(function() {
|
||||
sublayer.set({ wadus: true });
|
||||
}).toThrow('sublayer was removed');
|
||||
});
|
||||
|
||||
it('should set the attribute', function() {
|
||||
sublayer.set({ wadus: true });
|
||||
|
||||
expect(sublayer.get('wadus')).toEqual(true);
|
||||
});
|
||||
|
||||
it('should trigger a "change:visibility" event if the visibility has changed', function(done) {
|
||||
var callback = function(subl, hidden) {
|
||||
expect(subl).toEqual(sublayer);
|
||||
expect(hidden).toEqual(true);
|
||||
done();
|
||||
}
|
||||
|
||||
sublayer.on('change:visibility', callback);
|
||||
|
||||
sublayer.set({ hidden: true });
|
||||
});
|
||||
});
|
||||
|
||||
describe('.unset', function() {
|
||||
|
||||
it('should delete an attribute', function() {
|
||||
sublayer.set({ wadus: true });
|
||||
expect(sublayer.get('wadus')).toEqual(true);
|
||||
|
||||
sublayer.unset('wadus');
|
||||
|
||||
expect(sublayer.get('wadus')).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('.get', function() {
|
||||
|
||||
it('should throw and error if layer was already removed', function() {
|
||||
sublayer.remove()
|
||||
|
||||
// Try to remove again
|
||||
expect(function() {
|
||||
sublayer.get('wadus');
|
||||
}).toThrow('sublayer was removed');
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('CartoDBSubLayer', function() {
|
||||
|
||||
describe('toJSON', function() {
|
||||
|
||||
it('should serialize the sublayer', function() {
|
||||
expect(sublayer.toJSON()).toEqual({
|
||||
type: 'cartodb',
|
||||
options: {
|
||||
sql: 'select * from ne_10m_populated_places_simple',
|
||||
cartocss: '#layer { marker-fill: red; }',
|
||||
cartocss_version: '2.1.0',
|
||||
interactivity: ['test', 'cartodb_id']
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('should include the cartocss_version if present', function() {
|
||||
sublayer.set({
|
||||
cartocss_version: 'X.X.X',
|
||||
});
|
||||
|
||||
expect(sublayer.toJSON().options.cartocss_version).toEqual('X.X.X');
|
||||
}),
|
||||
|
||||
it('should set the default cartocss_version if not present', function() {
|
||||
expect(sublayer.toJSON().options.cartocss_version).toEqual('2.1.0');
|
||||
}),
|
||||
|
||||
it('should include attributes option if interactivity is present', function() {
|
||||
sublayer.set({
|
||||
interactivity: [],
|
||||
attributes: ['column1', 'column2']
|
||||
});
|
||||
|
||||
expect(sublayer.toJSON().options.attributes).toBeUndefined();
|
||||
|
||||
sublayer.set({
|
||||
interactivity: ['column1'],
|
||||
attributes: ['column1', 'column2']
|
||||
});
|
||||
|
||||
expect(sublayer.toJSON().options.attributes).toEqual({
|
||||
id: 'cartodb_id',
|
||||
columns: ['column1', 'column2']
|
||||
});
|
||||
});
|
||||
|
||||
it('should include attributes option when there are attributes', function() {
|
||||
sublayer.set({
|
||||
interactivity: ['column1'],
|
||||
attributes: undefined
|
||||
});
|
||||
|
||||
expect(sublayer.toJSON().options.attributes).toBeUndefined();
|
||||
})
|
||||
|
||||
it('should include geometry options if raster option is true', function() {
|
||||
sublayer.set({raster: true});
|
||||
|
||||
expect(sublayer.toJSON().options.geom_column).toEqual("the_raster_webmercator");
|
||||
expect(sublayer.toJSON().options.geom_type).toEqual("raster");
|
||||
expect(sublayer.toJSON().options.cartocss_version).toEqual('2.3.0');
|
||||
expect(sublayer.toJSON().options.raster_band).toEqual(0);
|
||||
});
|
||||
|
||||
it('should include geometry options with a given cartocss_version if raster option is true', function() {
|
||||
sublayer.set({
|
||||
raster: true,
|
||||
raster_band: 2,
|
||||
cartocss_version: '2.4.0'
|
||||
});
|
||||
|
||||
expect(sublayer.toJSON().options.geom_column).toEqual("the_raster_webmercator");
|
||||
expect(sublayer.toJSON().options.geom_type).toEqual("raster");
|
||||
expect(sublayer.toJSON().options.cartocss_version).toEqual('2.4.0');
|
||||
expect(sublayer.toJSON().options.raster_band).toEqual(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('isValid', function() {
|
||||
|
||||
it('should return true if the required options are present', function() {
|
||||
expect(sublayer.isValid()).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should return false if any of the required options are not present', function() {
|
||||
var cartocss = sublayer.get('cartocss');
|
||||
|
||||
sublayer.set({ cartocss: undefined });
|
||||
expect(sublayer.isValid()).toBeFalsy();
|
||||
|
||||
sublayer.set({
|
||||
sql: undefined,
|
||||
cartocss: cartocss,
|
||||
});
|
||||
|
||||
expect(sublayer.isValid()).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('event binding', function() {
|
||||
|
||||
var events = [
|
||||
['featureOver'],
|
||||
['featureOut'],
|
||||
['featureClick'],
|
||||
['layermouseover', 'mouseover'],
|
||||
['layermouseout', 'mouseout']
|
||||
];
|
||||
|
||||
events.forEach(function(event) {
|
||||
var signal = event[0];
|
||||
var alias = event[1] || signal;
|
||||
|
||||
it("should respond to " + signal + " events on the layer if the position matches", function(done) {
|
||||
sublayer.on(alias, function(index) {
|
||||
expect(index).toEqual(0);
|
||||
done();
|
||||
});
|
||||
|
||||
layerDefinition.trigger(signal, 0);
|
||||
});
|
||||
|
||||
it("should NOT respond to " + signal + " events on the layer if the position doesn't match", function() {
|
||||
var callback = jasmine.createSpy('callback');
|
||||
|
||||
sublayer.on(alias, function(){
|
||||
callback();
|
||||
});
|
||||
|
||||
layerDefinition.trigger(signal, 1);
|
||||
|
||||
expect(callback).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('.infowindow', function() {
|
||||
|
||||
it('should be a Backbone model with the infowindow', function() {
|
||||
var fields = [
|
||||
{
|
||||
position: 1,
|
||||
name: "city",
|
||||
title: true
|
||||
}
|
||||
];
|
||||
layerDefinition.layers[0].infowindow = {
|
||||
fields: fields
|
||||
}
|
||||
|
||||
// Force the initialization of the sublayer
|
||||
layerDefinition.layers[0].sub = undefined;
|
||||
|
||||
var sublayer = layerDefinition.getSubLayer(0);
|
||||
|
||||
expect(sublayer.infowindow instanceof Backbone.Model).toBeTruthy();
|
||||
expect(sublayer.infowindow.get('fields')).toEqual(fields);
|
||||
});
|
||||
|
||||
it('should update the infowindow in the layer definition if the infowindow changes', function() {
|
||||
sublayer.infowindow.set({fields: 'wadus'});
|
||||
|
||||
expect(sublayer._parent.getLayer(sublayer._position).infowindow).toEqual({
|
||||
fields: 'wadus'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('.setSQL', function() {
|
||||
|
||||
it('should set the SQL attribute', function() {
|
||||
sublayer.setSQL('wadus');
|
||||
|
||||
expect(sublayer.get('sql')).toEqual('wadus');
|
||||
expect(sublayer.getSQL()).toEqual('wadus');
|
||||
});
|
||||
});
|
||||
|
||||
describe('.setCartoCSS', function() {
|
||||
|
||||
it('should set the cartocss attribute', function() {
|
||||
sublayer.setCartoCSS('wadus');
|
||||
|
||||
expect(sublayer.get('cartocss')).toEqual('wadus');
|
||||
expect(sublayer.getCartoCSS()).toEqual('wadus');
|
||||
});
|
||||
});
|
||||
|
||||
describe('.setInteractivity', function() {
|
||||
|
||||
it('should set the interactivity attribute', function() {
|
||||
sublayer.setInteractivity('wadus');
|
||||
|
||||
expect(sublayer.get('interactivity')).toEqual('wadus');
|
||||
})
|
||||
});
|
||||
|
||||
describe('.getInteractivity', function() {
|
||||
|
||||
it('should return undefined when no interactivity is present', function() {
|
||||
sublayer.setInteractivity(undefined);
|
||||
|
||||
expect(sublayer.getInteractivity()).toBeUndefined();
|
||||
});
|
||||
|
||||
it('should convert string with fields to array', function() {
|
||||
sublayer.setInteractivity('field1, field2');
|
||||
|
||||
expect(sublayer.getInteractivity()).toEqual(['field1', 'field2']);
|
||||
});
|
||||
|
||||
it('should remove whitespaces from field names', function() {
|
||||
sublayer.setInteractivity([' field1 ', ' field2']);
|
||||
|
||||
expect(sublayer.getInteractivity()).toEqual(['field1', 'field2']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('.getAttributes', function() {
|
||||
|
||||
it('should return the attributes from the definition if present and remove whitespaces from columns', function() {
|
||||
sublayer.set({
|
||||
attributes: [' field1 ', 'field2']
|
||||
});
|
||||
|
||||
expect(sublayer.getAttributes()).toEqual(['field1', 'field2']);
|
||||
});
|
||||
|
||||
it('should return the attributes from the infowindow fields', function() {
|
||||
sublayer.infowindow.set('fields', [ { name: 'field1 '}, { name: ' field2 '}]);
|
||||
|
||||
expect(sublayer.getAttributes()).toEqual(['field1', 'field2']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('.setInteraction', function() {
|
||||
|
||||
it('should set the interactivity attribute', function() {
|
||||
sublayer.setInteractivity('wadus');
|
||||
|
||||
expect(sublayer.get('interactivity')).toEqual('wadus');
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
describe('HttpSubLayer', function() {
|
||||
|
||||
beforeEach(function() {
|
||||
var layer_definition = {
|
||||
version: '1.0.0',
|
||||
stat_tag: 'vis_id',
|
||||
layers: [
|
||||
{
|
||||
type: 'http',
|
||||
options: {
|
||||
urlTemplate: "http://{s}.example.com/{z}/{x}/{y}.png",
|
||||
subdomains: ['a', 'b', 'c'],
|
||||
tms: false
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
layerDefinition = new LayerDefinition(layer_definition, {});
|
||||
|
||||
sublayer = layerDefinition.getSubLayer(0);
|
||||
});
|
||||
|
||||
describe('toJSON', function() {
|
||||
|
||||
it('should serialize the sublayer', function() {
|
||||
expect(sublayer.toJSON()).toEqual({
|
||||
type: 'http',
|
||||
options: {
|
||||
urlTemplate: "http://{s}.example.com/{z}/{x}/{y}.png",
|
||||
subdomains: ['a', 'b', 'c'],
|
||||
tms: false
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
it('should not include optional params if not present', function() {
|
||||
sublayer.set({
|
||||
subdomains: undefined,
|
||||
tms: undefined
|
||||
});
|
||||
|
||||
expect(sublayer.toJSON()).toEqual({
|
||||
type: 'http',
|
||||
options: {
|
||||
urlTemplate: "http://{s}.example.com/{z}/{x}/{y}.png"
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
describe('isValid', function() {
|
||||
|
||||
it('should return true if the required options are present', function() {
|
||||
expect(sublayer.isValid()).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should return false if any of the required options are not present', function() {
|
||||
sublayer.set({ urlTemplate: undefined });
|
||||
expect(sublayer.isValid()).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('event binding', function() {
|
||||
|
||||
it("should NOT respond to events on the layer", function() {
|
||||
var callback = jasmine.createSpy('callback');
|
||||
|
||||
sublayer.on('featureOver', function(){
|
||||
callback();
|
||||
});
|
||||
|
||||
layerDefinition.trigger('featureOver', 0);
|
||||
|
||||
expect(callback).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('.setURLTemplate', function(){
|
||||
|
||||
it('should set the urlTemplate attribute', function() {
|
||||
sublayer.setURLTemplate('template');
|
||||
|
||||
expect(sublayer.get('urlTemplate')).toEqual('template');
|
||||
expect(sublayer.getURLTemplate()).toEqual('template');
|
||||
});
|
||||
});
|
||||
|
||||
describe('.setSubdomains', function() {
|
||||
|
||||
it('should set the subdomains attribute', function() {
|
||||
sublayer.setSubdomains('subdomains');
|
||||
|
||||
expect(sublayer.get('subdomains')).toEqual('subdomains');
|
||||
expect(sublayer.getSubdomains()).toEqual('subdomains');
|
||||
});
|
||||
});
|
||||
|
||||
describe('.setTms', function() {
|
||||
|
||||
it('should set the tmps attribute', function() {
|
||||
sublayer.setTms('tms');
|
||||
|
||||
expect(sublayer.get('tms')).toEqual('tms');
|
||||
expect(sublayer.getTms()).toEqual('tms');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,87 @@
|
||||
describe("common.geo.ui.Header", function() {
|
||||
|
||||
var header, template;
|
||||
|
||||
afterEach(function() {
|
||||
header.clean();
|
||||
});
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
template = cdb.core.Template.compile(
|
||||
' \
|
||||
<div class="content">\
|
||||
<div class="title">{{{ title }}}</div>\
|
||||
<div class="description">{{{ description }}}</div>\
|
||||
</div>',
|
||||
'mustache'
|
||||
);
|
||||
|
||||
header = new cdb.geo.ui.Header({
|
||||
model: new cdb.core.Model({
|
||||
extra: {
|
||||
title: 'Title',
|
||||
description: 'Description <a href="http://test.es">Test</a>',
|
||||
show_title: true,
|
||||
show_descriptin: true
|
||||
}
|
||||
}),
|
||||
template: template
|
||||
});
|
||||
});
|
||||
|
||||
it("should render description links with target attribute included", function() {
|
||||
header.render();
|
||||
expect(header.$('.description a').attr('target')).toBe('_blank');
|
||||
|
||||
// Overwritting target attribute if exists
|
||||
var h1 = new cdb.geo.ui.Header({
|
||||
model: new cdb.core.Model({
|
||||
extra: {
|
||||
title: 'Title',
|
||||
description: "Description <a href='http://test.es' target='_parent'>Test</a>",
|
||||
show_title: true,
|
||||
show_descriptin: true
|
||||
}
|
||||
}),
|
||||
template: template
|
||||
});
|
||||
|
||||
h1.render();
|
||||
expect(h1.$('.description a').attr('target')).toBe('_blank');
|
||||
|
||||
// Working with simple and double quotes
|
||||
var h2 = new cdb.geo.ui.Header({
|
||||
model: new cdb.core.Model({
|
||||
extra: {
|
||||
title: 'Title',
|
||||
description: "Description <a href='http://test.es'>Test</a>",
|
||||
show_title: true,
|
||||
show_descriptin: true
|
||||
}
|
||||
}),
|
||||
template: template
|
||||
});
|
||||
|
||||
h2.render();
|
||||
expect(h2.$('.description a').attr('target')).toBe('_blank');
|
||||
|
||||
// Don't remove other attributes
|
||||
var h1 = new cdb.geo.ui.Header({
|
||||
model: new cdb.core.Model({
|
||||
extra: {
|
||||
title: 'Title',
|
||||
description: "Description <a href='http://test.es' target='_parent' name='naaaamed'>Test</a>",
|
||||
show_title: true,
|
||||
show_descriptin: true
|
||||
}
|
||||
}),
|
||||
template: template
|
||||
});
|
||||
|
||||
h1.render();
|
||||
expect(h1.$('.description a').attr('target')).toBe('_blank');
|
||||
expect(h1.$('.description a').attr('name')).toBe('naaaamed');
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,45 @@
|
||||
describe('infobox', function() {
|
||||
var view;
|
||||
var layer;
|
||||
beforeEach(function() {
|
||||
layer = new Backbone.Model();
|
||||
view = new cdb.geo.ui.InfoBox({
|
||||
template: '#{{test}}#',
|
||||
position: 'top|right',
|
||||
pos_margin: 30,
|
||||
layer: layer
|
||||
});
|
||||
});
|
||||
|
||||
it("should render with template", function() {
|
||||
view.render({ test: 'jaja' });
|
||||
expect(view.$el.html()).toEqual('#jaja#');
|
||||
});
|
||||
|
||||
it("should render in position", function() {
|
||||
view.render({ test: 'jaja' });
|
||||
expect(view.$el.css('top')).toEqual('30px');
|
||||
expect(view.$el.css('right')).toEqual('30px');
|
||||
});
|
||||
|
||||
it("should render on layer hover", function() {
|
||||
layer.trigger('featureOver', null, null, null, {
|
||||
test: '1234'
|
||||
});
|
||||
expect(view.$el.html()).toEqual('#1234#');
|
||||
});
|
||||
|
||||
it("should disable/enable", function() {
|
||||
view.disable();
|
||||
layer.trigger('featureOver', null, null, null, {
|
||||
test: '1234'
|
||||
});
|
||||
expect(view.$el.html()).toEqual('');
|
||||
view.enable();
|
||||
layer.trigger('featureOver', null, null, null, {
|
||||
test: '1234'
|
||||
});
|
||||
expect(view.$el.html()).toEqual('#1234#');
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,577 @@
|
||||
|
||||
describe("cdb.geo.ui.infowindow", function() {
|
||||
|
||||
describe("model", function() {
|
||||
var model;
|
||||
beforeEach(function() {
|
||||
model = new cdb.geo.ui.InfowindowModel();
|
||||
});
|
||||
|
||||
it("should allow adding an alternative name", function() {
|
||||
|
||||
model.addField('the_name');
|
||||
model.addField('the_description');
|
||||
|
||||
model.setAlternativeName('the_name', 'nombre');
|
||||
model.setAlternativeName('the_description', 'descripción');
|
||||
|
||||
n = model.getAlternativeName('the_name');
|
||||
d = model.getAlternativeName('the_description');
|
||||
|
||||
expect(n).toEqual("nombre");
|
||||
expect(d).toEqual("descripción");
|
||||
|
||||
});
|
||||
|
||||
it("should add a field", function() {
|
||||
expect(model.containsField('test')).toEqual(false);
|
||||
model.addField('test');
|
||||
model.addField('test2');
|
||||
expect(model.containsField('test')).toEqual(true);
|
||||
model.removeField('test');
|
||||
expect(model.containsField('test')).toEqual(false);
|
||||
expect(model.containsField('test2')).toEqual(true);
|
||||
model.clearFields();
|
||||
expect(model.containsField('test2')).toEqual(false);
|
||||
});
|
||||
|
||||
it("should add a field in order", function() {
|
||||
model.addField('test', 1);
|
||||
model.addField('test2', 0);
|
||||
expect(model.get('fields')[0].name).toEqual('test2');
|
||||
expect(model.get('fields')[1].name).toEqual('test');
|
||||
});
|
||||
|
||||
it("should allow modify field properties", function() {
|
||||
var spy = sinon.spy();
|
||||
model.addField('test');
|
||||
var t = model.getFieldProperty('test', 'title');
|
||||
expect(t).toEqual(true);
|
||||
model.bind('change:fields', spy);
|
||||
expect(spy.called).toEqual(false);
|
||||
model.setFieldProperty('test', 'title', false);
|
||||
t = model.getFieldProperty('test', 'title');
|
||||
expect(t).toEqual(false);
|
||||
expect(spy.called).toEqual(true);
|
||||
});
|
||||
|
||||
it("should save and restore fields", function() {
|
||||
model.addField('test', 1);
|
||||
model.addField('test2', 0);
|
||||
model.addField('test3', 3);
|
||||
model.saveFields();
|
||||
expect(model.get('old_fields')).toEqual(model.get('fields'));
|
||||
model.clearFields();
|
||||
model.restoreFields();
|
||||
expect(model.get('old_fields')).toEqual(undefined);
|
||||
expect(model.get('fields')[0].name).toEqual('test2');
|
||||
expect(model.get('fields')[1].name).toEqual('test');
|
||||
expect(model.get('fields')[2].name).toEqual('test3');
|
||||
});
|
||||
});
|
||||
|
||||
describe("view", function() {
|
||||
var model, view;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
var container = $('<div>').css('height', '200px');
|
||||
|
||||
map = new cdb.geo.Map();
|
||||
|
||||
mapView = new cdb.geo.MapView({
|
||||
el: container,
|
||||
map: map
|
||||
});
|
||||
|
||||
model = new cdb.geo.ui.InfowindowModel({
|
||||
fields: [
|
||||
{ name: 'test1', position: 1, title: true},
|
||||
{ name: 'test2', position: 2, title: true}
|
||||
]
|
||||
});
|
||||
|
||||
view = new cdb.geo.ui.Infowindow({
|
||||
model: model,
|
||||
mapView: mapView
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it("should add render when template changes", function() {
|
||||
spyOn(view, 'render');
|
||||
model.set('template', 'jaja');
|
||||
expect(view.render).toHaveBeenCalled()
|
||||
});
|
||||
|
||||
it("should change width of the popup when width attribute changes", function() {
|
||||
spyOn(view, 'render');
|
||||
view.model.set({
|
||||
'template': '<div class="cartodb-popup"></div>',
|
||||
'width': 100
|
||||
});
|
||||
expect(view.$('.cartodb-popup').css('width')).toBe('100px');
|
||||
});
|
||||
|
||||
it("shouldn't change width of the popup when width attribute is undefined", function() {
|
||||
spyOn(view, 'render');
|
||||
view.model.set({
|
||||
'template': '<div class="cartodb-popup v2"></div>'
|
||||
})
|
||||
view.model.unset('width');
|
||||
expect(view.$('.cartodb-popup').css('width')).toBe(undefined);
|
||||
});
|
||||
|
||||
it("should change maxHeight of the popup when maxHeight attribute changes", function() {
|
||||
spyOn(view, 'render');
|
||||
view.model.set({
|
||||
'template': '<div class="cartodb-popup"><div class="cartodb-popup-content"></div></div>',
|
||||
'maxHeight': 100
|
||||
});
|
||||
expect(view.$('.cartodb-popup-content').css('max-height')).toBe('100px');
|
||||
});
|
||||
|
||||
it("should render without alternative_name set", function() {
|
||||
var template = '<div class="cartodb-popup">\
|
||||
<a href="#close" class="cartodb-popup-close-button close">x</a>\
|
||||
<div class="cartodb-popup-content-wrapper">\
|
||||
<div class="cartodb-popup-content">\
|
||||
<ul id="mylist"></ul>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="cartodb-popup-tip-container"></div>\
|
||||
</div>';
|
||||
|
||||
model.unset('alternative_names');
|
||||
model.set({
|
||||
content: {
|
||||
fields: [ { title:'test', value:true, position:0, index:0 } ]
|
||||
},
|
||||
template_name:'infowindow_light',
|
||||
template: template
|
||||
});
|
||||
|
||||
expect(view.render().$el.html().length).not.toBe(0);
|
||||
});
|
||||
|
||||
it("should convert value to string when it is a number", function() {
|
||||
model.set({
|
||||
content: {
|
||||
fields: [{
|
||||
title: 'jamon1', value: 0, index:0
|
||||
}, {
|
||||
title: 'jamon2', value: 1, index:1
|
||||
}]
|
||||
},
|
||||
template_name: 'jaja'
|
||||
}, {silent: true});
|
||||
|
||||
var render_fields = view._fieldsToString(model.attributes.content.fields, model.attributes.template_name);
|
||||
|
||||
expect(render_fields[0].value).toEqual("0");
|
||||
expect(render_fields[1].value).toEqual("1");
|
||||
});
|
||||
|
||||
it("should convert value to '' when it is undefined", function() {
|
||||
model.set({
|
||||
content: { fields: [{ title: 'jamon', value: undefined}] },
|
||||
template_name: 'jaja'
|
||||
}, {silent: true});
|
||||
|
||||
var render_fields = view._fieldsToString(model.attributes.content.fields, model.attributes.template_name);
|
||||
expect(render_fields[0].value).toEqual('');
|
||||
});
|
||||
|
||||
it("should convert value to '' when it is null", function() {
|
||||
model.set('content', { fields: [{ title: 'jamon', value: null}] }, {silent: true});
|
||||
|
||||
var render_fields = view._fieldsToString(model.attributes.content.fields, model.attributes.template_name);
|
||||
expect(render_fields[0].value).toEqual('');
|
||||
});
|
||||
|
||||
it("shouldn't convert the value if it is empty", function() {
|
||||
model.set('content', { fields: [{ title: 'jamon', value: ''}] }, {silent: true});
|
||||
|
||||
var render_fields = view._fieldsToString(model.attributes.content.fields, model.attributes.template_name);
|
||||
expect(render_fields[0].value).toEqual('');
|
||||
});
|
||||
|
||||
it("should leave a string as it is", function() {
|
||||
model.set('content', { fields: [{ title: 'jamon', value: "jamon is testing"}] }, {silent: true});
|
||||
|
||||
var render_fields = view._fieldsToString(model.attributes.content.fields, model.attributes.template_name);
|
||||
expect(render_fields[0].value).toEqual("jamon is testing");
|
||||
});
|
||||
|
||||
it("should convert value to string when it is a boolean", function() {
|
||||
model.set('content', { fields: [{ title: 'jamon1', value: false}, { title: 'jamon2', value: true}] }, {silent: true});
|
||||
|
||||
var render_fields = view._fieldsToString(model.attributes.content.fields, model.attributes.template_name);
|
||||
|
||||
expect(render_fields[0].value).toEqual("false");
|
||||
expect(render_fields[1].value).toEqual("true");
|
||||
});
|
||||
|
||||
it("should be null when there isn't any field", function() {
|
||||
spyOn(view, 'render');
|
||||
model.set('fields', []);
|
||||
expect(view.render).not.toHaveBeenCalled();
|
||||
expect(view.$el.html()).toEqual('');
|
||||
});
|
||||
});
|
||||
|
||||
describe("contentForFields", function() {
|
||||
|
||||
it('should return the title and value of each field', function() {
|
||||
var attributes = { field1: 'value1' };
|
||||
var fields = [{ name: 'field1', title: true }];
|
||||
var content = cdb.geo.ui.InfowindowModel.contentForFields(attributes, fields, {})
|
||||
|
||||
expect(content.fields.length).toEqual(1);
|
||||
expect(content.fields[0].title).toEqual('field1');
|
||||
expect(content.fields[0].value).toEqual('value1');
|
||||
});
|
||||
|
||||
it('should not return the title if not specified', function() {
|
||||
var attributes = { field1: 'value1' };
|
||||
var fields = [{ name: 'field1' }]; // Field doesn't have a title attribute
|
||||
var content = cdb.geo.ui.InfowindowModel.contentForFields(attributes, fields, {})
|
||||
|
||||
expect(content.fields.length).toEqual(1);
|
||||
expect(content.fields[0].title).toEqual(null);
|
||||
});
|
||||
|
||||
it('should return the index of each field', function() {
|
||||
var attributes = { field1: 'value1', field2: 'value2' };
|
||||
var fields = [{ name: 'field1' }, { name: 'field2' }];
|
||||
var content = cdb.geo.ui.InfowindowModel.contentForFields(attributes, fields, {})
|
||||
|
||||
expect(content.fields.length).toEqual(2);
|
||||
expect(content.fields[0].index).toEqual(0);
|
||||
expect(content.fields[1].index).toEqual(1);
|
||||
});
|
||||
|
||||
it('should return empty fields', function() {
|
||||
var attributes = { field1: 'value1' };
|
||||
var fields = [{ name: 'field1' }, { name: 'field2' }];
|
||||
var options = { empty_fields: true };
|
||||
var content = cdb.geo.ui.InfowindowModel.contentForFields(attributes, fields, options)
|
||||
|
||||
expect(content.fields.length).toEqual(2);
|
||||
expect(content.fields[0]).toEqual({
|
||||
title: null,
|
||||
value: 'value1',
|
||||
index: 0
|
||||
});
|
||||
expect(content.fields[1]).toEqual({
|
||||
title: null,
|
||||
value: undefined,
|
||||
index: 1
|
||||
});
|
||||
});
|
||||
|
||||
it('should not return empty fields', function() {
|
||||
var attributes = { field1: 'value1' };
|
||||
var fields = [{ name: 'field1' }, { name: 'field2' }];
|
||||
var options = { empty_fields: false };
|
||||
var content = cdb.geo.ui.InfowindowModel.contentForFields(attributes, fields, options)
|
||||
|
||||
expect(content.fields.length).toEqual(1);
|
||||
expect(content.fields[0]).toEqual({
|
||||
title: null,
|
||||
value: 'value1',
|
||||
index: 0
|
||||
});
|
||||
});
|
||||
|
||||
it('should not return fields with a null value', function() {
|
||||
var attributes = { field1: 'wadus', field2: null };
|
||||
var fields = [{ name: 'field1' }, { name: 'field2' }];
|
||||
var content = cdb.geo.ui.InfowindowModel.contentForFields(attributes, fields, {})
|
||||
|
||||
expect(content.fields.length).toEqual(1);
|
||||
expect(content.fields[0]).toEqual({
|
||||
title: null,
|
||||
value: 'wadus',
|
||||
index: 0
|
||||
});
|
||||
});
|
||||
|
||||
it('should return the attributes as data', function() {
|
||||
var attributes = { field1: 'value1' };
|
||||
var fields = [{ name: 'field1' }];
|
||||
var content = cdb.geo.ui.InfowindowModel.contentForFields(attributes, fields, {})
|
||||
|
||||
expect(content.data).toEqual(attributes);
|
||||
});
|
||||
|
||||
it('should return an empty field when no data is available', function() {
|
||||
var attributes = {};
|
||||
var fields = [{ name: 'field1' }, { name: 'field2' }];
|
||||
var content = cdb.geo.ui.InfowindowModel.contentForFields(attributes, fields, {})
|
||||
|
||||
expect(content.fields.length).toEqual(1);
|
||||
expect(content.fields[0]).toEqual({
|
||||
title: null,
|
||||
value: 'No data available',
|
||||
index: 0,
|
||||
type: 'empty'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe("loading state", function() {
|
||||
var model, view;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
var container = $('<div>').css('height', '200px');
|
||||
|
||||
map = new cdb.geo.Map();
|
||||
|
||||
mapView = new cdb.geo.MapView({
|
||||
el: container,
|
||||
map: map
|
||||
});
|
||||
|
||||
model = new cdb.geo.ui.InfowindowModel({
|
||||
fields: [
|
||||
{ value: 'Loading content...', index: null, title: null, type: 'loading'}
|
||||
]
|
||||
});
|
||||
|
||||
view = new cdb.geo.ui.Infowindow({
|
||||
model: model,
|
||||
mapView: mapView
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it("should show loading state", function() {
|
||||
spyOn(view, '_startSpinner');
|
||||
model.set({
|
||||
'template': 'jaja',
|
||||
'content': {
|
||||
fields: [
|
||||
{ value: 'Loading content...', index: null, title: null, type: 'loading'}
|
||||
]
|
||||
}
|
||||
});
|
||||
expect(view._startSpinner).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should hide loading state", function() {
|
||||
model.set({
|
||||
'template': 'jaja',
|
||||
'content': {
|
||||
fields: [
|
||||
{ value: 'Loading content...', index: null, title: null, type: 'loading'}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
spyOn(view, '_stopSpinner');
|
||||
model.set({
|
||||
'template': 'jaja',
|
||||
'content': {
|
||||
fields: [
|
||||
{ value: 'Any kind of value', index: 0, title: 'TITLE'}
|
||||
]
|
||||
}
|
||||
});
|
||||
expect(view._stopSpinner).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("shouldn't show the loader if there are several fields", function() {
|
||||
spyOn(view, '_stopSpinner');
|
||||
spyOn(view, '_startSpinner');
|
||||
model.set({
|
||||
'template': 'jaja',
|
||||
'content': {
|
||||
fields: [
|
||||
{ value: 'Loading content...', index: null, title: null, type: 'loading'},
|
||||
{ value: 'Loading content...', index: null, title: null, type: 'loading'}
|
||||
]
|
||||
}
|
||||
});
|
||||
expect(view._stopSpinner).toHaveBeenCalled();
|
||||
expect(view._startSpinner).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe("custom template", function() {
|
||||
var model, view;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
var container = $('<div>').css('height', '200px');
|
||||
|
||||
map = new cdb.geo.Map();
|
||||
|
||||
mapView = new cdb.geo.MapView({
|
||||
el: container,
|
||||
map: map
|
||||
});
|
||||
|
||||
model = new cdb.geo.ui.InfowindowModel({
|
||||
template: '<div>{{ test1 }}</div>',
|
||||
fields: [
|
||||
{ title: 'test1', position: 1, value: "x" },
|
||||
{ title: 'test2', position: 2, value: "b" }
|
||||
]
|
||||
});
|
||||
|
||||
view = new cdb.geo.ui.Infowindow({
|
||||
model: model,
|
||||
mapView: mapView
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it("should compile the template when changes", function() {
|
||||
view.model.set('template', '<div>{{test1}}</div>');
|
||||
expect(view.template({ test1: 'new' })).toEqual('<div>new</div>');
|
||||
});
|
||||
|
||||
it("should render properly when there is only a field without title", function() {
|
||||
model.set({
|
||||
fields: [
|
||||
{ name: 'test1', position: 0, title: false },
|
||||
],
|
||||
content: {
|
||||
fields: [
|
||||
{ title: 'test1', position: 0, value: 'jamon' },
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
var new_view = new cdb.geo.ui.Infowindow({
|
||||
model: model,
|
||||
mapView: mapView
|
||||
});
|
||||
|
||||
expect(new_view.render().$el.html()).toBe('<div>jamon</div>');
|
||||
});
|
||||
|
||||
it("shouldn't sanitize the fields", function() {
|
||||
spyOn(view, '_sanitizeField');
|
||||
view.render();
|
||||
expect(view._sanitizeField).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should sanitize the template output by default', function() {
|
||||
view.model.set('template', 'no <iframe src="" onload="document.body.appendChild(document.createElement(\'script\')).src=\'http://localhost/xss.js\'"/> no');
|
||||
view.render();
|
||||
expect(view.$el.html()).toEqual('no ');
|
||||
});
|
||||
|
||||
it('should allow to override sanitization', function() {
|
||||
view.model.set({
|
||||
template: 'no <iframe src="" onload="document.body.appendChild(document.createElement(\'script\')).src=\'http://localhost/xss.js\'"/> no',
|
||||
sanitizeTemplate: false
|
||||
});
|
||||
view.render();
|
||||
expect(view.$el.html()).toEqual('no <iframe src="" onload="document.body.appendChild(document.createElement(\'script\')).src=\'http://localhost/xss.js\'"></iframe> no');
|
||||
|
||||
view.model.set('sanitizeTemplate', null);
|
||||
view.render();
|
||||
expect(view.$el.html()).toEqual('no <iframe src="" onload="document.body.appendChild(document.createElement(\'script\')).src=\'http://localhost/xss.js\'"></iframe> no');
|
||||
|
||||
customSanitizeSpy = jasmine.createSpy('sanitizeTemplateSpy').and.returnValue('<p>custom sanitizied result</p>');
|
||||
view.model.set('sanitizeTemplate', customSanitizeSpy);
|
||||
expect(customSanitizeSpy).toHaveBeenCalledWith('no <iframe src="" onload="document.body.appendChild(document.createElement(\'script\')).src=\'http://localhost/xss.js\'"/> no');
|
||||
view.render();
|
||||
expect(view.$el.html()).toEqual('<p>custom sanitizied result</p>');
|
||||
|
||||
view.model.set('sanitizeTemplate', undefined);
|
||||
view.render();
|
||||
expect(view.$el.html()).toEqual('no ');
|
||||
});
|
||||
});
|
||||
|
||||
describe("image template", function() {
|
||||
var model, view, container, fields, fieldsWithoutURL, url;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
url = "http://assets.javierarce.com/lion.png";
|
||||
|
||||
container = $('<div>').css('height', '200px');
|
||||
|
||||
fields = [
|
||||
{ title: 'test1', position: 1, value: url },
|
||||
{ title: 'test2', position: 2, value: "b"}
|
||||
];
|
||||
|
||||
fieldsWithoutURL = [
|
||||
{ title: 'test1', position: 1, value: "x" },
|
||||
{ title: 'test2', position: 2, value: "b"}
|
||||
];
|
||||
|
||||
map = new cdb.geo.Map();
|
||||
|
||||
mapView = new cdb.geo.MapView({
|
||||
el: container,
|
||||
map: map
|
||||
});
|
||||
|
||||
model = new cdb.geo.ui.InfowindowModel({
|
||||
content: {
|
||||
fields: fields
|
||||
}
|
||||
});
|
||||
|
||||
view = new cdb.geo.ui.Infowindow({
|
||||
model: model,
|
||||
mapView: mapView
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it("should get the cover url", function() {
|
||||
expect(view._getCoverURL()).toEqual(url);
|
||||
});
|
||||
|
||||
it("should validate the cover url", function() {
|
||||
var url = view._getCoverURL();
|
||||
expect(view._isValidURL(url)).toEqual(true);
|
||||
});
|
||||
|
||||
it("should accept google chart URLS in the cover", function() {
|
||||
var url = "http://chart.googleapis.com/chart?chxl=0:|1990%2F92|2001%2F03|2011%2F13&chxr=1,0,75&chxs=0,676767,11.5,0.5,lt,676767&chxt=x,y&chs=279x210&cht=lc&chco=FF0000&chds=0,69&chd=t:9.5,12.8,15.1,14.6,12.9,10.2,9.5,8.2,7.4,6.2,6,6.5,7.1,7.5,7.9,8,8.2,7.9,7.5,6.9,6.3,5.6&chg=-1,0,0,4&chls=1&chma=0,0,0,25&chm=B,EFEFEF,0,0,0&chtt=Malnourishment+in+&chts=676767,14";
|
||||
expect(view._isValidURL(url)).toEqual(true);
|
||||
});
|
||||
|
||||
it("should detect if the infowindow has a cover", function() {
|
||||
model.set('template', '<div class="cartodb-popup header" data-cover="true"><div class="cover"></div></div>');
|
||||
expect(view._containsCover()).toEqual(true);
|
||||
});
|
||||
|
||||
it("should append the image", function() {
|
||||
model.set('template', '<div class="cartodb-popup header" data-cover="true"><div class="cover"></div></div>');
|
||||
expect(view.$el.find("img").length).toEqual(1);
|
||||
});
|
||||
|
||||
it("if the image is invalid it shouldn't append it", function() {
|
||||
model.set("content", { fields: fieldsWithoutURL });
|
||||
model.set('template', '<div class="cartodb-popup header" data-cover="true"><div class="cover"></div></div>');
|
||||
expect(view.$el.find("img").length).toEqual(0);
|
||||
});
|
||||
|
||||
it("if the them has a cover and the image is invalid it should hide it", function() {
|
||||
model.set("content", { fields: fieldsWithoutURL });
|
||||
model.set('template', '<div class="cartodb-popup header" data-cover="true"><div class="cover"><img src="{{ wadus }}"/></div></div>');
|
||||
expect(view.$el.find("img").css('display')).toEqual('none');
|
||||
});
|
||||
|
||||
it("if the theme doesn't have cover don't append the image", function() {
|
||||
model.set("content", { fields: fields });
|
||||
model.set('template', '<div class="cover"></div>');
|
||||
expect(view.$el.find("img").length).toEqual(0);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,155 @@
|
||||
describe("cdb.geo.ui.LayerSelector", function() {
|
||||
|
||||
var layerSelector, layerSelector2, layerGroup;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
var map = new cdb.geo.Map();
|
||||
var map2 = new cdb.geo.Map();
|
||||
|
||||
// Layers
|
||||
var l1 = new cdb.geo.CartoDBLayer({ type: "Tiled", visible: true, urlTemplate: "https://maps.nlp.nokia.com/maptiler/v2/maptile/newest/normal.day/{z}/{x}/{y}/256/png8?lg=eng&token=foo&app_id=bar", name: "Nokia Day", className: "nokia_day", attribution: "©2012 Nokia <a href='http://here.net/services/terms' target='_blank'>Terms of use</a>", kind: "tiled", infowindow: null, id: 1226, order: 0 });
|
||||
var l2 = new cdb.geo.CartoDBLayer({ type: "CartoDB", attribution: "CartoDB <a href='https://carto.com/attributions' target='_blank'>attribution</a>", active: true, query: null, opacity: 0.99, interactivity: "cartodb_id", interaction: true, debug: false, tiler_domain: "localhost.lan", tiler_port: "8181", tiler_protocol: "http", sql_api_domain: "development.localhost.lan", sql_api_port: 8080, sql_api_protocol: "http", extra_params: { cache_policy: "persist", cache_buster: 1369995364392 }, cdn_url: "", maxZoom: 28, auto_bound: false, visible: true, sql_domain: "localhost.lan", sql_port: "8080", sql_protocol: "http", tile_style_history: [ "#untitled_table1 { // polygons [mapnik-geometry-type=polygons] { marker-fill: #FF6600; marker-opacity: 1; marker-width: 12; marker-line-color: white; marker-line-width: 3; marker-line-opacity: 0.9; marker-placement: point; marker-type: ellipse;marker-allow-overlap: true; } //lines [mapnik-geometry-type=linestring] { line-color: #FF6600; line-width: 2; line-opacity: 0.7; } //polygons [mapnik-geometry-type=polygon] { polygon-fill:#FF6600; polygon-opacity: 0.7; line-opacity:1; line-color: #FFFFFF; } }" ], style_version: "2.1.1", table_name: "points", user_name: "development", tile_style: "#untitled_table { // points [mapnik-geometry-type=point] { marker-fill: #FF6600; marker-opacity: 1; marker-width: 12; marker-line-color: white; marker-line-width: 3; marker-line-opacity: 0.9; marker-placement: point; marker-type: ellipse;marker-allow-overlap: true; } //lines [mapnik-geometry-type=linestring] { line-color: #FF6600; line-width: 2; line-opacity: 0.7; } //polygons [mapnik-geometry-type=polygon] { polygon-fill:#FF6600; polygon-opacity: 0.7; line-opacity:1; line-color: #FFFFFF; } }", use_server_style: true, query_history: [ ], sql_api_endpoint: "/api/v1/sql", no_cdn: true, order: 2, kind: "carto", template_name: "table/views/infowindow_light" , id: 231, order: 1 });
|
||||
var l3 = new cdb.geo.CartoDBLayer({ type: "CartoDB", attribution: "CartoDB <a href='https://carto.com/attributions' target='_blank'>attribution</a>", active: true, query: null, opacity: 0.99, interactivity: "cartodb_id", interaction: true, debug: false, tiler_domain: "localhost.lan", tiler_port: "8181", tiler_protocol: "http", sql_api_domain: "development.localhost.lan", sql_api_port: 8080, sql_api_protocol: "http", extra_params: { cache_policy: "persist", cache_buster: 1369995364392 }, cdn_url: "", maxZoom: 28, auto_bound: false, visible: true, sql_domain: "localhost.lan", sql_port: "8080", sql_protocol: "http", tile_style_history: [ "#untitled_table { // points [mapnik-geometry-type=point] { marker-fill: #FF6600; marker-opacity: 1; marker-width: 12; marker-line-color: white; marker-line-width: 3; marker-line-opacity: 0.9; marker-placement: point; marker-type: ellipse;marker-allow-overlap: true; } //lines [mapnik-geometry-type=linestring] { line-color: #FF6600; line-width: 2; line-opacity: 0.7; } //polygons [mapnik-geometry-type=polygon] { polygon-fill:#FF6600; polygon-opacity: 0.7; line-opacity:1; line-color: #FFFFFF; } }" ], style_version: "2.1.1", table_name: "polygons", user_name: "development", tile_style: "#untitled_table { // points [mapnik-geometry-type=point] { marker-fill: #FF6600; marker-opacity: 1; marker-width: 12; marker-line-color: white; marker-line-width: 3; marker-line-opacity: 0.9; marker-placement: point; marker-type: ellipse;marker-allow-overlap: true; } //lines [mapnik-geometry-type=linestring] { line-color: #FF6600; line-width: 2; line-opacity: 0.7; } //polygons [mapnik-geometry-type=polygon] { polygon-fill:#FF6600; polygon-opacity: 0.7; line-opacity:1; line-color: #FFFFFF; } }", use_server_style: true, query_history: [ ], sql_api_endpoint: "/api/v1/sql", no_cdn: true, order: 2, kind: "carto", template_name: "table/views/infowindow_light" , id: 1231, order: 2 });
|
||||
|
||||
layerGroup = new cdb.geo.CartoDBGroupLayer({
|
||||
layer_definition: {
|
||||
version: '1.0.0',
|
||||
layers: [{
|
||||
type: 'cartodb',
|
||||
options: {
|
||||
sql: "select * from european_countries_export",
|
||||
cartocss: '#layer { polygon-fill: #000; polygon-opacity: 0.8;}',
|
||||
cartocss_version : '2.0.0',
|
||||
layer_name: "european_countries_export",
|
||||
interactivity: ['created_at', 'cartodb_id']
|
||||
}
|
||||
},{
|
||||
type: 'cartodb',
|
||||
options: {
|
||||
sql: "select * from jamon_countries",
|
||||
cartocss: '#layer { polygon-fill: #000; polygon-opacity: 0.8;}',
|
||||
cartocss_version : '2.0.0',
|
||||
layer_name: "jamon_countries",
|
||||
interactivity: ['description', 'cartodb_id']
|
||||
}
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
map.layers = new cdb.geo.Layers([l1, l2, l3]);
|
||||
map2.layers = new cdb.geo.Layers([l1, layerGroup]);
|
||||
|
||||
|
||||
var mapView = new cdb.geo.LeafletMapView({
|
||||
el: $("<div>"),
|
||||
map: map
|
||||
});
|
||||
|
||||
var mapView2 = new cdb.geo.LeafletMapView({
|
||||
el: $("<div>"),
|
||||
map: map2
|
||||
});
|
||||
|
||||
layerSelector = new cdb.geo.ui.LayerSelector({
|
||||
mapView: mapView,
|
||||
template: cdb.core.Template.compile('<a href="#/change-visibility" class="layers">Visible layers<div class="count"></div></a>','underscore'),
|
||||
dropdown_template: cdb.core.Template.compile('<ul></ul><div class="tail"><span class="border"></span></div>','underscore')
|
||||
});
|
||||
|
||||
layerSelector2 = new cdb.geo.ui.LayerSelector({
|
||||
mapView: mapView2,
|
||||
template: cdb.core.Template.compile('<a href="#/change-visibility" class="layers">Visible layers<div class="count"></div></a>','underscore'),
|
||||
dropdown_template: cdb.core.Template.compile('<ul></ul><div class="tail"><span class="border"></span></div>','underscore')
|
||||
});
|
||||
});
|
||||
|
||||
describe("with CartoDB layers", function() {
|
||||
|
||||
it("should render properly", function() {
|
||||
layerSelector.render();
|
||||
expect(layerSelector.$('a.layers').size()).toBe(1);
|
||||
expect(layerSelector.$('a.layer').size()).toBe(2);
|
||||
expect(layerSelector.$('a.layer:eq(0)').text()).not.toBe("");
|
||||
expect(layerSelector.$('a.layer:eq(1)').text()).not.toBe("");
|
||||
expect(layerSelector.$('div.count').text()).toBe("2")
|
||||
});
|
||||
|
||||
it("should render the dropdown correctly", function() {
|
||||
layerSelector.render();
|
||||
expect(layerSelector.dropdown.$('li').size()).toBe(2);
|
||||
});
|
||||
|
||||
it("should store two layers", function() {
|
||||
layerSelector.render();
|
||||
expect(layerSelector.layers.length).toBe(2);
|
||||
});
|
||||
|
||||
it("should open the dropdown when clicks over it", function() {
|
||||
layerSelector.render();
|
||||
layerSelector.$('a.layers').click();
|
||||
expect(layerSelector.dropdown.$el.css('display')).toBe('block');
|
||||
});
|
||||
|
||||
it("should change the select status when the switch button is clicked and trigger and event", function() {
|
||||
layerSelector.render();
|
||||
|
||||
for(var key in layerSelector._subviews) break;
|
||||
var view = layerSelector._subviews[key];
|
||||
|
||||
view.$el.find(".switch").click();
|
||||
expect(view.model.get("visible")).toBeFalsy();
|
||||
|
||||
view.$el.find(".switch").click();
|
||||
expect(view.model.get("visible")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should trigger a switchChanged event when the switch button is clicked", function() {
|
||||
layerSelector.render();
|
||||
for(var key in layerSelector._subviews) break;
|
||||
var view = layerSelector._subviews[key];
|
||||
spyOn(view, 'trigger');
|
||||
view.$el.find(".switch").click();
|
||||
expect(view.trigger).toHaveBeenCalledWith('switchChanged');
|
||||
});
|
||||
|
||||
it("should toggle the enabled/disabled classes when the switch button is clicked", function() {
|
||||
layerSelector.render();
|
||||
for(var key in layerSelector._subviews) break;
|
||||
var view = layerSelector._subviews[key];
|
||||
|
||||
view.$el.find(".switch").click();
|
||||
expect(view.$el.find(".switch").hasClass("enabled")).toBeFalsy();
|
||||
expect(view.$el.find(".switch").hasClass("disabled")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe("with a CartoDB LayerGroup", function() {
|
||||
it("should render properly", function() {
|
||||
layerSelector2.render();
|
||||
expect(layerSelector2.$('a.layers').size()).toBe(1);
|
||||
expect(layerSelector2.$('a.layer').size()).toBe(2);
|
||||
expect(layerSelector2.$('a.layer:eq(0)').text()).not.toBe("");
|
||||
expect(layerSelector2.$('a.layer:eq(1)').text()).not.toBe("");
|
||||
expect(layerSelector2.$('div.count').text()).toBe("2")
|
||||
});
|
||||
|
||||
it("should store two layers", function() {
|
||||
layerSelector2.render();
|
||||
expect(layerSelector2.layers.length).toBe(2);
|
||||
});
|
||||
|
||||
it("should hide the layer when the switch button is clicked", function() {
|
||||
layerSelector2.render();
|
||||
var switcher = $(layerSelector2.$('li')[0]);
|
||||
switcher.find(".switch").click();
|
||||
var layerGroupView = layerSelector2.mapView.getLayerByCid(layerGroup.cid);
|
||||
|
||||
expect(layerGroupView.getSubLayer(0).get('hidden')).toEqual(true);
|
||||
expect(!layerGroupView.getSubLayer(1).get('hidden')).toEqual(true);
|
||||
expect(layerSelector2.$('div.count').text()).toBe("1")
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,953 @@
|
||||
describe("common.geo.ui.Legend", function() {
|
||||
|
||||
describe("Legend", function() {
|
||||
|
||||
var data, legend, map;
|
||||
|
||||
afterEach(function() {
|
||||
legend.clean();
|
||||
});
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
map = new cdb.geo.Map();
|
||||
|
||||
data = [
|
||||
{ name: "Category 1", value: "#f1f1f1" },
|
||||
{ name: "Category 2", value: "red" },
|
||||
{ name: "Category 3", value: "#f1f1f1" },
|
||||
{ name: "Category 4", value: "#ccc" },
|
||||
];
|
||||
|
||||
legend = new cdb.geo.ui.Legend({
|
||||
data: data,
|
||||
map: map
|
||||
});
|
||||
|
||||
$("body").append(legend.render().$el);
|
||||
|
||||
});
|
||||
|
||||
it("should have a 'none' type set by default", function() {
|
||||
expect(legend.model.get("type")).toEqual("none");
|
||||
});
|
||||
|
||||
it("should use the provided model", function() {
|
||||
|
||||
var legend = new cdb.geo.ui.Legend({
|
||||
data: data,
|
||||
map: map
|
||||
});
|
||||
|
||||
expect(legend.model).toBeDefined();
|
||||
expect(legend.model.get("type")).toEqual("none");
|
||||
|
||||
});
|
||||
|
||||
it("should generate a model if no model is provided", function() {
|
||||
|
||||
expect(legend.model).toBeDefined();
|
||||
expect(legend.model.get("type")).toEqual("none");
|
||||
|
||||
});
|
||||
|
||||
it("should allow to change type", function() {
|
||||
legend.model.set({ type: "bubble" });
|
||||
expect(legend.model.get("type")).toEqual('bubble');
|
||||
});
|
||||
|
||||
it("should have a collection", function() {
|
||||
expect(legend.items instanceof cdb.geo.ui.LegendItems).toEqual(true);
|
||||
});
|
||||
|
||||
it("should populate the collection", function() {
|
||||
legend.model.set("type", "custom");
|
||||
expect(legend.model.items.length).toEqual(4);
|
||||
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
expect(legend.model.items.at(i).get("name")).toEqual(data[i].name);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
it("should set the type of the legend in the element", function() {
|
||||
legend.model.set({ type: "bubble" });
|
||||
legend.render();
|
||||
expect(legend.$el.hasClass("bubble")).toEqual(true);
|
||||
});
|
||||
|
||||
it("should create the specific legend based on the type", function() {
|
||||
legend.model.set({ type: "bubble" });
|
||||
expect(legend.view instanceof cdb.geo.ui.BubbleLegend).toEqual(true);
|
||||
expect(legend.$el.hasClass("bubble")).toEqual(true);
|
||||
expect(legend.$el.hasClass("custom")).toEqual(false);
|
||||
});
|
||||
|
||||
it("shouldn't create the legend if the type is unknown", function() {
|
||||
legend.model.set({ type: "the_legend_of_santana" });
|
||||
expect(legend.view instanceof cdb.geo.ui.CustomLegend).toEqual(false);
|
||||
expect(legend.$el.hasClass("custom")).toEqual(false);
|
||||
});
|
||||
|
||||
it("should update the legend when the name of an item is changed", function() {
|
||||
legend.render();
|
||||
legend.model.set({ type: "custom" });
|
||||
expect(legend.$el.find("li:first-child").text().trim()).toEqual('Category 1');
|
||||
|
||||
legend.items.at(0).set("name", "New Category 1")
|
||||
expect(legend.$el.find("li:first-child").text().trim()).toEqual('New Category 1');
|
||||
});
|
||||
|
||||
it("should update the legend when the value of an item is changed", function() {
|
||||
legend.render();
|
||||
legend.model.set({ type: "custom" });
|
||||
expect(legend.$el.find("li:first-child .bullet").css("background-color")).toEqual('rgb(241, 241, 241)');
|
||||
|
||||
legend.items.at(0).set("value", "red")
|
||||
expect(legend.$el.find("li:first-child .bullet").css("background-color")).toEqual('rgb(255, 0, 0)');
|
||||
});
|
||||
|
||||
|
||||
it("should have a title defined", function() {
|
||||
expect(legend.model.get("title")).toBeDefined();
|
||||
});
|
||||
|
||||
it("should have a show_title defined", function() {
|
||||
legend.model.set({ type: "custom" });
|
||||
expect(legend.model.get("show_title")).toBeDefined();
|
||||
});
|
||||
|
||||
it("should show the legend", function() {
|
||||
legend.model.set({ type: "custom" });
|
||||
legend.show();
|
||||
expect(legend.$el.css('display')).toEqual('block');
|
||||
});
|
||||
it("shouldn't show the 'none' legend", function() {
|
||||
legend.show();
|
||||
expect(legend.$el.css('display')).toEqual('none');
|
||||
});
|
||||
|
||||
it("should hide the legend", function(done) {
|
||||
|
||||
legend.model.set({ type: "bubble" });
|
||||
|
||||
legend.show();
|
||||
legend.hide();
|
||||
|
||||
setTimeout(function () {
|
||||
expect(legend.$el.css('display')).toEqual('none');
|
||||
done();
|
||||
}, 300);
|
||||
|
||||
});
|
||||
|
||||
it("should show/hide the legend when the visible attribute changes", function() {
|
||||
legend.model.set({ type: "custom" });
|
||||
|
||||
legend.render();
|
||||
|
||||
expect(legend.$el.css('display')).toEqual('block');
|
||||
|
||||
legend.model.set({ visible: false });
|
||||
|
||||
expect(legend.$el.css('display')).toEqual('none');
|
||||
|
||||
legend.model.set({ visible: true });
|
||||
|
||||
expect(legend.$el.css('display')).toEqual('block');
|
||||
});
|
||||
|
||||
it("should render the title if title and show_title are set", function() {
|
||||
var title = "Hi, I'm a title";
|
||||
legend.model.set({ type: "custom", title: title, show_title: true });
|
||||
expect(legend.$el.find('.legend-title').text()).toEqual(title);
|
||||
|
||||
legend.model.set({ type: "bubble", title: title, show_title: true });
|
||||
expect(legend.$el.find('.legend-title').text()).toEqual(title);
|
||||
|
||||
legend.model.set({ type: "density", title: title, show_title: true });
|
||||
expect(legend.$el.find('.legend-title').text()).toEqual(title);
|
||||
|
||||
legend.model.set({ type: "intensity", title: title, show_title: true });
|
||||
expect(legend.$el.find('.legend-title').text()).toEqual(title);
|
||||
|
||||
legend.model.set({ type: "color", title: title, show_title: true });
|
||||
expect(legend.$el.find('.legend-title').text()).toEqual(title);
|
||||
|
||||
legend.model.set({ type: "category", title: title, show_title: true });
|
||||
expect(legend.$el.find('.legend-title').text()).toEqual(title);
|
||||
|
||||
legend.model.set({ type: "choropleth", title: title, show_title: true });
|
||||
expect(legend.$el.find('.legend-title').text()).toEqual(title);
|
||||
});
|
||||
|
||||
it("shouldn't render the title if show_title is not true", function() {
|
||||
var title = "Hi, I'm a title";
|
||||
legend.model.set({ type: "custom", title: title, show_title: false });
|
||||
expect(legend.$el.find('.legend-title').text()).not.toEqual(title);
|
||||
|
||||
legend.model.set({ type: "bubble", title: title, show_title: false });
|
||||
expect(legend.$el.find('.legend-title').text()).not.toEqual(title);
|
||||
|
||||
legend.model.set({ type: "density", title: title, show_title: false });
|
||||
expect(legend.$el.find('.legend-title').text()).not.toEqual(title);
|
||||
|
||||
legend.model.set({ type: "intensity", title: title, show_title: false });
|
||||
expect(legend.$el.find('.legend-title').text()).not.toEqual(title);
|
||||
|
||||
legend.model.set({ type: "color", title: title, show_title: false });
|
||||
expect(legend.$el.find('.legend-title').text()).not.toEqual(title);
|
||||
|
||||
legend.model.set({ type: "category", title: title, show_title: false });
|
||||
expect(legend.$el.find('.legend-title').text()).not.toEqual(title);
|
||||
|
||||
legend.model.set({ type: "choropleth", title: title, show_title: false });
|
||||
expect(legend.$el.find('.legend-title').text()).not.toEqual(title);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("StackedLegend", function() {
|
||||
|
||||
var data, legends, legendA, legendB, stackedLegend;
|
||||
|
||||
afterEach(function() {
|
||||
stackedLegend.clean();
|
||||
});
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
data = [
|
||||
{ name: "Category 1", value: "#f1f1f1" },
|
||||
{ name: "Category 2", value: "red" },
|
||||
{ name: "Category 3", value: "#f1f1f1" },
|
||||
{ name: "Category 4", value: "#ccc" },
|
||||
];
|
||||
|
||||
legendA = new cdb.geo.ui.Legend({
|
||||
data: data
|
||||
});
|
||||
|
||||
legendB = new cdb.geo.ui.Legend({
|
||||
data: data
|
||||
});
|
||||
|
||||
legends = [ legendA, legendB ];
|
||||
|
||||
stackedLegend = new cdb.geo.ui.StackedLegend({
|
||||
legends: legends
|
||||
});
|
||||
|
||||
$("body").append(stackedLegend.render().$el);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("ColorLegend", function() {
|
||||
var legend;
|
||||
beforeEach(function() {
|
||||
var data = [
|
||||
{ name: true, value: "red" },
|
||||
{ name: false, value: "red" },
|
||||
{ name: "#f1f1f1", value: "red" },
|
||||
{ name: null, value: "red" },
|
||||
];
|
||||
|
||||
var model = new cdb.core.Model({
|
||||
type: "color",
|
||||
title: "title",
|
||||
show_title: false,
|
||||
});
|
||||
model.items = new Backbone.Collection(data)
|
||||
|
||||
legend = new cdb.geo.ui.ColorLegend({
|
||||
model: model
|
||||
});
|
||||
});
|
||||
|
||||
it("should render boolean values and nulls", function() {
|
||||
legend.render();
|
||||
var bullets = legend.$('li');
|
||||
expect(bullets.length).toEqual(4);
|
||||
expect($(bullets[0]).text()).toEqual(" true");
|
||||
expect($(bullets[1]).text()).toEqual(" false");
|
||||
expect($(bullets[2]).text()).toEqual(" #f1f1f1");
|
||||
expect($(bullets[3]).text()).toEqual(" null");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe("Legend (public interface)", function() {
|
||||
|
||||
var custom_data;
|
||||
|
||||
afterEach(function() {
|
||||
$(".legend_playground").remove();
|
||||
});
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
custom_data = [
|
||||
{ name: "Natural Parks", value: "#58A062" },
|
||||
{ name: "Villages", value: "https://carto.com/assets/logos/logos_full_cartodb_light.png", type: "image" },
|
||||
{ name: "Rivers", value: "#54BFDE" },
|
||||
{ name: "Fields", value: "#9BC562" },
|
||||
{ name: "Caves", value: "#FABB5C" }
|
||||
];
|
||||
|
||||
});
|
||||
|
||||
it("should allow to show/hide the title", function() {
|
||||
|
||||
var title = "Custom title";
|
||||
|
||||
var legend = new cdb.geo.ui.Legend.Custom({
|
||||
title: title,
|
||||
data: custom_data
|
||||
});
|
||||
|
||||
legend.render();
|
||||
legend.model.set("show_title", false);
|
||||
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual(null);
|
||||
|
||||
legend.model.set("show_title", true);
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual(title);
|
||||
|
||||
legend.hideTitle();
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual(null);
|
||||
|
||||
legend.showTitle();
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual(title);
|
||||
|
||||
});
|
||||
|
||||
it("should have a method to render the legend", function() {
|
||||
|
||||
$("body").append("<div class='legend_playground' />");
|
||||
|
||||
var legend = new cdb.geo.ui.Legend.Custom({
|
||||
title: "Custom title",
|
||||
data: custom_data
|
||||
});
|
||||
|
||||
legend.addTo(".legend_playground");
|
||||
expect($(".legend_playground .cartodb-legend").length).toEqual(1);
|
||||
});
|
||||
|
||||
it("should render the title", function() {
|
||||
|
||||
var legend = new cdb.geo.ui.Legend.Custom({
|
||||
title: "Custom title",
|
||||
data: custom_data
|
||||
});
|
||||
|
||||
legend.render();
|
||||
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual("Custom title");
|
||||
|
||||
});
|
||||
|
||||
it("shouldn't render the title if it's not provided", function() {
|
||||
|
||||
var legend = new cdb.geo.ui.Legend.Custom({
|
||||
data: custom_data
|
||||
});
|
||||
|
||||
legend.render();
|
||||
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual(null);
|
||||
|
||||
});
|
||||
|
||||
|
||||
describe("Custom Legend", function() {
|
||||
|
||||
var properties, legend;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
properties = { title: "Custom title", data: custom_data };
|
||||
legend = new cdb.geo.ui.Legend.Custom( properties );
|
||||
|
||||
legend.render();
|
||||
|
||||
});
|
||||
|
||||
it("should generate a legend", function() {
|
||||
expect(legend.model.get("type")).toEqual("custom");
|
||||
});
|
||||
|
||||
it("should show the items", function() {
|
||||
expect(legend.items.length).toEqual(custom_data.length);
|
||||
expect(legend.items.at(0).get("name")).toEqual(custom_data[0].name);
|
||||
expect(legend.items.at(0).get("value")).toEqual(custom_data[0].value);
|
||||
|
||||
expect(legend.$el.find("li:first-child").text().trim()).toEqual(custom_data[0].name);
|
||||
expect(legend.$el.find("li:first-child .bullet").css("background")).toEqual("rgb(88, 160, 98)");
|
||||
});
|
||||
|
||||
it("should show a title", function() {
|
||||
expect(legend.model.get("title")).toEqual(properties.title);
|
||||
expect(legend.$el.find(".legend-title").text()).toEqual(properties.title);
|
||||
});
|
||||
|
||||
it("should allow to change the title", function() {
|
||||
legend.setTitle("New title");
|
||||
expect(legend.model.get("show_title")).toEqual(true);
|
||||
expect(legend.$el.find(".legend-title").text().trim()).toEqual("New title");
|
||||
});
|
||||
|
||||
it("should allow to change the items", function() {
|
||||
|
||||
var new_data = [
|
||||
{ name: "One", value: "#F1F1F1" },
|
||||
{ name: "Too", value: "#FF00FF" }
|
||||
];
|
||||
|
||||
legend.setData(new_data);
|
||||
|
||||
expect(legend.items.length).toEqual(new_data.length);
|
||||
|
||||
expect(legend.items.at(0).get("name")).toEqual(new_data[0].name);
|
||||
expect(legend.items.at(0).get("value")).toEqual(new_data[0].value);
|
||||
|
||||
expect(legend.$el.find("li:first-child").text().trim()).toEqual(new_data[0].name);
|
||||
expect(legend.$el.find("li:first-child .bullet").css("background")).toEqual("rgb(241, 241, 241)");
|
||||
|
||||
expect(legend.$el.find("li:last-child").text().trim()).toEqual(new_data[1].name);
|
||||
expect(legend.$el.find("li:last-child .bullet").css("background")).toEqual("rgb(255, 0, 255)");
|
||||
});
|
||||
|
||||
it("should allow to specify a custom template for the items", function() {
|
||||
|
||||
var title = "Custom title";
|
||||
|
||||
var legend = new cdb.geo.ui.Legend.Custom({
|
||||
title: title,
|
||||
data: custom_data,
|
||||
itemTemplate: '<div class="myCustomClass" style="background:#f1f1f1;"></div><%= name %>: <%= value %>'
|
||||
});
|
||||
|
||||
legend.render();
|
||||
|
||||
expect(legend.$el.find("li:first-child").html()).toEqual('<div class="myCustomClass" style="background:#f1f1f1;"></div>Natural Parks: #58A062');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("Category Legend", function() {
|
||||
|
||||
var properties, legend;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
properties = { title: "Category title", data: custom_data };
|
||||
legend = new cdb.geo.ui.Legend.Category( properties );
|
||||
legend.render();
|
||||
|
||||
});
|
||||
|
||||
it("should generate the legend", function() {
|
||||
expect(legend.model.get("type")).toEqual("category");
|
||||
});
|
||||
|
||||
it("should show the items", function() {
|
||||
expect(legend.items.length).toEqual(custom_data.length);
|
||||
expect(legend.items.at(0).get("name")).toEqual(custom_data[0].name);
|
||||
expect(legend.items.at(0).get("value")).toEqual(custom_data[0].value);
|
||||
|
||||
expect(legend.$el.find("li:first-child").text().trim()).toEqual(custom_data[0].name);
|
||||
expect(legend.$el.find("li:first-child .bullet").css("background")).toEqual("rgb(88, 160, 98)");
|
||||
|
||||
expect(legend.$el.find("li:nth-child(2)").text().trim()).toEqual(custom_data[1].name);
|
||||
expect(legend.$el.find("li:nth-child(2) .bullet").css("background")).toEqual("url(https://carto.com/assets/logos/logos_full_cartodb_light.png)");
|
||||
});
|
||||
|
||||
it("should show a title", function() {
|
||||
expect(legend.model.get("title")).toEqual(properties.title);
|
||||
expect(legend.$el.find(".legend-title").text().trim()).toEqual(properties.title);
|
||||
});
|
||||
|
||||
it("should allow to change the title", function() {
|
||||
legend.setTitle("New title");
|
||||
expect(legend.model.get("show_title")).toEqual(true);
|
||||
expect(legend.$el.find(".legend-title").text().trim()).toEqual("New title");
|
||||
});
|
||||
|
||||
it("shouldn't evaluate name 0 to null", function() {
|
||||
custom_data = [
|
||||
{ name: 0, value: "#58A062" },
|
||||
{ name: 2, value: "#54BFDE" },
|
||||
{ name: 3, value: "#9BC562" },
|
||||
{ name: 4, value: "#FABB5C" }
|
||||
];
|
||||
properties = { title: "Category title", data: custom_data };
|
||||
legend = new cdb.geo.ui.Legend.Category( properties );
|
||||
legend.render();
|
||||
expect(legend.$el.find("li:first-child").text().trim()).toEqual("" + custom_data[0].name);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("Bubble Legend", function() {
|
||||
|
||||
var properties, legend;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
properties = { title: "Bubble legend", type: "bubble", color: "#FF0000", min: 1, max: 120 };
|
||||
legend = new cdb.geo.ui.Legend.Bubble( properties );
|
||||
|
||||
legend.render();
|
||||
|
||||
});
|
||||
|
||||
it("should generate the legend", function() {
|
||||
expect(legend.model.get("type")).toEqual(properties.type);
|
||||
});
|
||||
|
||||
it("should show a graph with the right color", function() {
|
||||
expect(legend.$el.find(".graph").css("background-color")).toEqual("rgb(255, 0, 0)");
|
||||
});
|
||||
|
||||
it("should show min and max values", function() {
|
||||
expect(legend.model.get("min")).toEqual(properties.min);
|
||||
expect(legend.model.get("max")).toEqual(properties.max);
|
||||
});
|
||||
|
||||
it("should show a title", function() {
|
||||
expect(legend.model.get("title")).toEqual(properties.title);
|
||||
expect(legend.$el.find(".legend-title").text().trim()).toEqual(properties.title);
|
||||
});
|
||||
|
||||
it("should allow to change the title", function() {
|
||||
legend.setTitle("New title");
|
||||
expect(legend.model.get("show_title")).toEqual(true);
|
||||
expect(legend.$el.find(".legend-title").text().trim()).toEqual("New title");
|
||||
});
|
||||
|
||||
it("should allow to show the title", function() {
|
||||
legend.hideTitle();
|
||||
legend.showTitle();
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual(properties.title);
|
||||
});
|
||||
|
||||
it("should allow to hide the title", function() {
|
||||
legend.hideTitle();
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual(null);
|
||||
});
|
||||
|
||||
it("should allow to change the color", function() {
|
||||
legend.setColor("#CCC");
|
||||
expect(legend.$el.find(".graph").css("background-color")).toEqual("rgb(204, 204, 204)");
|
||||
});
|
||||
|
||||
it("should allow to change the min value", function() {
|
||||
var value = "3";
|
||||
|
||||
legend.setMinValue(value)
|
||||
expect(legend.model.get("min")).toEqual(value);
|
||||
expect(legend.$el.find("ul li:nth-child(1)").text().trim()).toEqual(value);
|
||||
});
|
||||
|
||||
it("should allow to change the max value", function() {
|
||||
var value = "10000";
|
||||
|
||||
legend.setMaxValue(value)
|
||||
expect(legend.model.get("max")).toEqual(value);
|
||||
expect(legend.$el.find("ul li:nth-child(3)").text().trim()).toEqual(value);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("Choropleth Legend", function() {
|
||||
|
||||
var properties, legend;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
properties = { title: "Choropleth title", type: "choropleth", colors: ["#DDD", "#FF000", "#F1F1F1"], left: "Left value", right: "Right value" };
|
||||
legend = new cdb.geo.ui.Legend.Choropleth(properties);
|
||||
legend.render();
|
||||
|
||||
});
|
||||
|
||||
it("should generate a legend", function() {
|
||||
expect(legend.model.get("type")).toEqual(properties.type);
|
||||
});
|
||||
|
||||
it("should show left and right values", function() {
|
||||
expect(legend.model.get("leftLabel")).toEqual(properties.left);
|
||||
expect(legend.model.get("rightLabel")).toEqual(properties.right);
|
||||
});
|
||||
|
||||
it("should show colors", function() {
|
||||
expect(legend.model.get("colors").length).toEqual(properties.colors.length);
|
||||
expect(legend.$el.find(".quartile").length).toEqual(properties.colors.length);
|
||||
});
|
||||
|
||||
it("should show a title", function() {
|
||||
expect(legend.model.get("title")).toEqual(properties.title);
|
||||
expect(legend.$el.find(".legend-title").text().trim()).toEqual(properties.title);
|
||||
});
|
||||
|
||||
it("should allow to change the title", function() {
|
||||
legend.setTitle("New title");
|
||||
expect(legend.model.get("show_title")).toEqual(true);
|
||||
expect(legend.$el.find(".legend-title").text().trim()).toEqual("New title");
|
||||
});
|
||||
|
||||
it("should allow to hide the title", function() {
|
||||
legend.hideTitle();
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual(null);
|
||||
});
|
||||
|
||||
it("should allow to show the title", function() {
|
||||
legend.hideTitle();
|
||||
legend.showTitle();
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual(properties.title);
|
||||
});
|
||||
|
||||
it("should allow change colors", function() {
|
||||
var newColors = ["red", "white", "blue"];
|
||||
|
||||
legend.setColors(newColors);
|
||||
expect(legend.model.get("colors").length).toEqual(newColors.length);
|
||||
expect(legend.$el.find(".quartile").length).toEqual(newColors.length);
|
||||
});
|
||||
|
||||
it("should allow change the left label", function() {
|
||||
var label = "New left label";
|
||||
|
||||
legend.setLeftLabel(label)
|
||||
expect(legend.model.get("leftLabel")).toEqual(label);
|
||||
expect(legend.$el.find("li:nth-child(1)").text().trim()).toEqual(label);
|
||||
});
|
||||
|
||||
it("should allow change the right label", function() {
|
||||
var label = "New right label";
|
||||
|
||||
legend.setRightLabel(label)
|
||||
expect(legend.model.get("rightLabel")).toEqual(label);
|
||||
expect(legend.$el.find("li:nth-child(2)").text().trim()).toEqual(label);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("Density Legend", function() {
|
||||
|
||||
var properties, legend;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
properties = { title: "Density title", type: "density", colors: ["#DDD", "#FF000", "#F1F1F1"], left: "Left value", right: "Right value" };
|
||||
legend = new cdb.geo.ui.Legend.Density(properties);
|
||||
legend.render();
|
||||
|
||||
});
|
||||
|
||||
it("should generate a legend", function() {
|
||||
expect(legend.model.get("type")).toEqual(properties.type);
|
||||
});
|
||||
|
||||
it("should show left and right values", function() {
|
||||
expect(legend.model.get("leftLabel")).toEqual(properties.left);
|
||||
expect(legend.model.get("rightLabel")).toEqual(properties.right);
|
||||
});
|
||||
|
||||
it("should show colors", function() {
|
||||
expect(legend.model.get("colors").length).toEqual(properties.colors.length);
|
||||
expect(legend.$el.find(".quartile").length).toEqual(properties.colors.length);
|
||||
});
|
||||
|
||||
it("should show a title", function() {
|
||||
expect(legend.model.get("title")).toEqual(properties.title);
|
||||
expect(legend.$el.find(".legend-title").text().trim()).toEqual(properties.title);
|
||||
});
|
||||
|
||||
it("should allow to change the title", function() {
|
||||
legend.setTitle("New title");
|
||||
expect(legend.model.get("show_title")).toEqual(true);
|
||||
expect(legend.$el.find(".legend-title").text().trim()).toEqual("New title");
|
||||
});
|
||||
|
||||
it("should allow to hide the title", function() {
|
||||
legend.hideTitle();
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual(null);
|
||||
});
|
||||
|
||||
it("should allow to show the title", function() {
|
||||
legend.hideTitle();
|
||||
legend.showTitle();
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual(properties.title);
|
||||
});
|
||||
|
||||
it("should allow change colors", function() {
|
||||
var newColors = ["red", "white", "blue"];
|
||||
|
||||
legend.setColors(newColors);
|
||||
expect(legend.model.get("colors").length).toEqual(newColors.length);
|
||||
expect(legend.$el.find(".quartile").length).toEqual(newColors.length);
|
||||
});
|
||||
|
||||
it("should allow change the left label", function() {
|
||||
legend.setLeftLabel("Hello!")
|
||||
expect(legend.model.get("leftLabel")).toEqual("Hello!");
|
||||
expect(legend.$el.find("li:nth-child(1)").text().trim()).toEqual("Hello!");
|
||||
});
|
||||
|
||||
it("should allow change the right label", function() {
|
||||
legend.setRightLabel("Hi!")
|
||||
expect(legend.model.get("rightLabel")).toEqual("Hi!");
|
||||
expect(legend.$el.find("li:nth-child(2)").text().trim()).toEqual("Hi!");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("Intensity Legend", function() {
|
||||
|
||||
var properties, legend;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
properties = { title: "Intensity legend", type: "intensity", color: "#FF0000", min: 1, max: 120 };
|
||||
legend = new cdb.geo.ui.Legend.Intensity( properties );
|
||||
|
||||
legend.render();
|
||||
|
||||
});
|
||||
|
||||
it("should generate the legend", function() {
|
||||
expect(legend.model.get("type")).toEqual(properties.type);
|
||||
});
|
||||
|
||||
it("should show a graph with the right color", function() {
|
||||
var gradient = "-webkit-linear-gradient(left, rgb(255, 0, 0) 0%, rgb(255, 0, 0) 100%)";
|
||||
expect(legend.$el.find(".graph").css("background")).toEqual(gradient);
|
||||
});
|
||||
|
||||
it("should show left and right values", function() {
|
||||
expect(legend.model.get("leftLabel")).toEqual(properties.left);
|
||||
expect(legend.model.get("rightLabel")).toEqual(properties.right);
|
||||
});
|
||||
|
||||
it("should show a title", function() {
|
||||
expect(legend.model.get("title")).toEqual(properties.title);
|
||||
expect(legend.$el.find(".legend-title").text().trim()).toEqual(properties.title);
|
||||
});
|
||||
|
||||
it("should allow to change the title", function() {
|
||||
legend.setTitle("New title");
|
||||
expect(legend.model.get("show_title")).toEqual(true);
|
||||
expect(legend.$el.find(".legend-title").text().trim()).toEqual("New title");
|
||||
});
|
||||
|
||||
it("should allow to show the title", function() {
|
||||
legend.hideTitle();
|
||||
legend.showTitle();
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual(properties.title);
|
||||
});
|
||||
|
||||
it("should allow to hide the title", function() {
|
||||
legend.hideTitle();
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual(null);
|
||||
});
|
||||
|
||||
it("should allow to change the color", function() {
|
||||
legend.setColor("#CCC");
|
||||
var gradient = "-webkit-linear-gradient(left, rgb(204, 204, 204) 0%, rgb(255, 255, 255) 100%)";
|
||||
expect(legend.$el.find(".graph").css("background")).toEqual(gradient);
|
||||
});
|
||||
|
||||
it("should allow change the left label", function() {
|
||||
var label = "New left label";
|
||||
|
||||
legend.setLeftLabel(label)
|
||||
expect(legend.model.get("leftLabel")).toEqual(label);
|
||||
expect(legend.$el.find("li:nth-child(1)").text().trim()).toEqual(label);
|
||||
});
|
||||
|
||||
it("should allow change the right label", function() {
|
||||
var label = "New right label";
|
||||
|
||||
legend.setRightLabel(label)
|
||||
expect(legend.model.get("rightLabel")).toEqual(label);
|
||||
expect(legend.$el.find("li:nth-child(2)").text().trim()).toEqual(label);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("Stacked Legend (using data)", function() {
|
||||
|
||||
afterEach(function() {
|
||||
$(".legend_playground").remove();
|
||||
});
|
||||
|
||||
var stacked, properties, legendA, legendB, custom_data;
|
||||
|
||||
var custom_data = [
|
||||
{ name: "Natural Parks", value: "#58A062" },
|
||||
{ name: "Villages", value: "#F07971" },
|
||||
{ name: "Rivers", value: "#54BFDE" },
|
||||
{ name: "Fields", value: "#9BC562" },
|
||||
{ name: "Caves", value: "#FABB5C" }
|
||||
];
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
var legendA = { title: "Intensity legend", type: "intensity", color: "#FF0000", min: 1, max: 120 };
|
||||
var legendB = { title: "Custom title", type:"custom", data: custom_data };
|
||||
|
||||
stacked = new cdb.geo.ui.Legend.Stacked({ data: [legendA, legendB] });
|
||||
|
||||
stacked.render();
|
||||
|
||||
});
|
||||
|
||||
it("should have a method to render the stacked legend", function() {
|
||||
|
||||
$("body").append("<div class='legend_playground' />");
|
||||
|
||||
var legendA = { title: "Intensity legend", type: "intensity", color: "#FF0000", min: 1, max: 120 };
|
||||
var legendB = { title: "Custom title", type:"custom", data: custom_data };
|
||||
|
||||
var stacked = new cdb.geo.ui.Legend.Stacked({ data: [legendA, legendB] });
|
||||
|
||||
stacked.addTo(".legend_playground");
|
||||
expect($(".legend_playground .cartodb-legend-stack").length).toEqual(1);
|
||||
});
|
||||
|
||||
it("should render", function() {
|
||||
expect(stacked.legends.length).toEqual(2);
|
||||
expect(stacked.$el.find(".cartodb-legend").length).toEqual(2);
|
||||
expect(stacked.$el.find(".cartodb-legend.intensity").length).toEqual(1);
|
||||
expect(stacked.$el.find(".cartodb-legend.custom").length).toEqual(1);
|
||||
});
|
||||
|
||||
it("should allow to add a legend", function() {
|
||||
|
||||
var properties = { title: "Density title", type: "density", colors: ["#DDD", "#FF000", "#F1F1F1"], left: "Left value", right: "Right value" };
|
||||
|
||||
stacked.addLegend(properties);
|
||||
|
||||
expect(stacked.legends.length).toEqual(3);
|
||||
|
||||
expect(stacked.$el.find(".cartodb-legend").length).toEqual(3);
|
||||
expect(stacked.$el.find(".cartodb-legend.intensity").length).toEqual(1);
|
||||
expect(stacked.$el.find(".cartodb-legend.custom").length).toEqual(1);
|
||||
expect(stacked.$el.find(".cartodb-legend.density").length).toEqual(1);
|
||||
|
||||
});
|
||||
|
||||
it("should allow to remove a legend", function() {
|
||||
|
||||
stacked.removeLegendAt(0);
|
||||
|
||||
expect(stacked.legends.length).toEqual(1);
|
||||
|
||||
expect(stacked.$el.find(".cartodb-legend").length).toEqual(1);
|
||||
expect(stacked.$el.find(".cartodb-legend.intensity").length).toEqual(0);
|
||||
expect(stacked.$el.find(".cartodb-legend.custom").length).toEqual(1);
|
||||
|
||||
});
|
||||
|
||||
it("should allow to get a legend", function() {
|
||||
|
||||
var legend = stacked.getLegendAt(1);
|
||||
|
||||
expect(legend.model.get("title")).toEqual("Custom title");
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual("Custom title");
|
||||
|
||||
var legend = stacked.legends[0];
|
||||
|
||||
expect(legend.model.get("title")).toEqual("Intensity legend");
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual("Intensity legend");
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("Stacked Legend (using legends)", function() {
|
||||
|
||||
var stacked, properties, legendA, legendB, custom_data;
|
||||
|
||||
var custom_data = [
|
||||
{ name: "Natural Parks", value: "#58A062" },
|
||||
{ name: "Villages", value: "#F07971" },
|
||||
{ name: "Rivers", value: "#54BFDE" },
|
||||
{ name: "Fields", value: "#9BC562" },
|
||||
{ name: "Caves", value: "#FABB5C" }
|
||||
];
|
||||
|
||||
var customLegend = new cdb.geo.ui.Legend.Custom({
|
||||
title: "Custom Legend",
|
||||
data: custom_data
|
||||
});
|
||||
|
||||
var intensityLegend = new cdb.geo.ui.Legend.Intensity({
|
||||
title: "Intensity Legend",
|
||||
left: "10", right: "20", color: "#f1f1f1"
|
||||
});
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
stacked = new cdb.geo.ui.Legend.Stacked({ legends: [ customLegend, intensityLegend ] });
|
||||
stacked.render();
|
||||
|
||||
});
|
||||
|
||||
it("should render", function() {
|
||||
expect(stacked.legends.length).toEqual(2);
|
||||
expect(stacked.$el.find(".cartodb-legend").length).toEqual(2);
|
||||
expect(stacked.$el.find(".cartodb-legend.intensity").length).toEqual(1);
|
||||
expect(stacked.$el.find(".cartodb-legend.custom").length).toEqual(1);
|
||||
});
|
||||
|
||||
it("should allow to add a legend", function() {
|
||||
|
||||
var properties = { title: "Density title", type: "density", colors: ["#DDD", "#FF000", "#F1F1F1"], left: "Left value", right: "Right value" };
|
||||
|
||||
stacked.addLegend(properties);
|
||||
|
||||
expect(stacked.legends.length).toEqual(3);
|
||||
|
||||
expect(stacked.$el.find(".cartodb-legend").length).toEqual(3);
|
||||
expect(stacked.$el.find(".cartodb-legend.intensity").length).toEqual(1);
|
||||
expect(stacked.$el.find(".cartodb-legend.custom").length).toEqual(1);
|
||||
expect(stacked.$el.find(".cartodb-legend.density").length).toEqual(1);
|
||||
|
||||
});
|
||||
|
||||
it("should allow to remove a legend", function() {
|
||||
|
||||
stacked.removeLegendAt(0);
|
||||
|
||||
expect(stacked.legends.length).toEqual(1);
|
||||
|
||||
expect(stacked.$el.find(".cartodb-legend").length).toEqual(1);
|
||||
expect(stacked.$el.find(".cartodb-legend.intensity").length).toEqual(1);
|
||||
expect(stacked.$el.find(".cartodb-legend.custom").length).toEqual(0);
|
||||
|
||||
});
|
||||
|
||||
it("should allow to get a legend", function() {
|
||||
|
||||
var legend = stacked.getLegendAt(0);
|
||||
|
||||
expect(legend.model.get("title")).toEqual("Custom Legend");
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual("Custom Legend");
|
||||
|
||||
var legend = stacked.legends[1];
|
||||
|
||||
expect(legend.model.get("title")).toEqual("Intensity Legend");
|
||||
expect(legend.$el.find(".legend-title").html()).toEqual("Intensity Legend");
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,861 @@
|
||||
describe("cdb.geo.ui.Mobile", function() {
|
||||
|
||||
var mobile, map, layerGroup, container, mapView, template, overlays, l1, l2, torque;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
map = new cdb.geo.Map();
|
||||
|
||||
torque = new cdb.geo.TorqueLayer({ type: "torque", visible: false, urlTemplate: "https://maps.nlp.nokia.com/maptiler/v2/maptile/newest/normal.day/{z}/{x}/{y}/256/png8?lg=eng&token=foo&app_id=bar", name: "Nokia Day", className: "nokia_day", attribution: "©2012 Nokia <a href='http://here.net/services/terms' target='_blank'>Terms of use</a>", kind: "tiled", infowindow: null, id: 1226, order: 0 });
|
||||
|
||||
l1 = new cdb.geo.CartoDBLayer({ type: "Tiled", visible: true, urlTemplate: "https://maps.nlp.nokia.com/maptiler/v2/maptile/newest/normal.day/{z}/{x}/{y}/256/png8?lg=eng&token=foo&app_id=bar", name: "Nokia Day", className: "nokia_day", attribution: "©2012 Nokia <a href='http://here.net/services/terms' target='_blank'>Terms of use</a>", kind: "tiled", infowindow: null, id: 1226, order: 0 });
|
||||
|
||||
l2 = new cdb.geo.CartoDBLayer({ type: "CartoDB", attribution: "© <a href='https://carto.com/attributions' target='_blank'>CARTO</a>", active: true, query: null, opacity: 0.99, interactivity: "cartodb_id", interaction: true, debug: false, tiler_domain: "localhost.lan", tiler_port: "8181", tiler_protocol: "http", sql_api_domain: "development.localhost.lan", sql_api_port: 8080, sql_api_protocol: "http", extra_params: { cache_policy: "persist", cache_buster: 1369995364392 }, cdn_url: "", maxZoom: 28, auto_bound: false, visible: true, sql_domain: "localhost.lan", sql_port: "8080", sql_protocol: "http", tile_style_history: [ "#untitled_table1 { // polygons [mapnik-geometry-type=polygons] { marker-fill: #FF6600; marker-opacity: 1; marker-width: 12; marker-line-color: white; marker-line-width: 3; marker-line-opacity: 0.9; marker-placement: point; marker-type: ellipse;marker-allow-overlap: true; } //lines [mapnik-geometry-type=linestring] { line-color: #FF6600; line-width: 2; line-opacity: 0.7; } //polygons [mapnik-geometry-type=polygon] { polygon-fill:#FF6600; polygon-opacity: 0.7; line-opacity:1; line-color: #FFFFFF; } }" ], style_version: "2.1.1", table_name: "points", user_name: "development", tile_style: "#untitled_table { // points [mapnik-geometry-type=point] { marker-fill: #FF6600; marker-opacity: 1; marker-width: 12; marker-line-color: white; marker-line-width: 3; marker-line-opacity: 0.9; marker-placement: point; marker-type: ellipse;marker-allow-overlap: true; } //lines [mapnik-geometry-type=linestring] { line-color: #FF6600; line-width: 2; line-opacity: 0.7; } //polygons [mapnik-geometry-type=polygon] { polygon-fill:#FF6600; polygon-opacity: 0.7; line-opacity:1; line-color: #FFFFFF; } }", use_server_style: true, query_history: [ ], sql_api_endpoint: "/api/v1/sql", no_cdn: true, order: 2, kind: "carto", template_name: "table/views/infowindow_light" , id: 231, order: 1 });
|
||||
|
||||
layerGroup = new cdb.geo.CartoDBGroupLayer({
|
||||
layer_definition: {
|
||||
version: '1.0.0',
|
||||
layers: [{
|
||||
type: 'cartodb',
|
||||
visible: false,
|
||||
options: {
|
||||
sql: "select * from european_countries_export",
|
||||
cartocss: '#layer { polygon-fill: #000; polygon-opacity: 0.8;}',
|
||||
cartocss_version : '2.0.0',
|
||||
layer_name: "european_countries_export",
|
||||
interactivity: ['created_at', 'cartodb_id']
|
||||
}
|
||||
},{
|
||||
type: 'cartodb',
|
||||
visible: false,
|
||||
options: {
|
||||
sql: "select * from jamon_countries",
|
||||
cartocss: '#layer { polygon-fill: #000; polygon-opacity: 0.8;}',
|
||||
cartocss_version : '2.0.0',
|
||||
layer_name: "jamon_countries",
|
||||
interactivity: ['description', 'cartodb_id']
|
||||
}
|
||||
},{
|
||||
type: 'cartodb',
|
||||
visible: true,
|
||||
options: {
|
||||
sql: "select * from jamon_countries",
|
||||
cartocss: '#layer { polygon-fill: #000; polygon-opacity: 0.8;}',
|
||||
cartocss_version : '2.0.0',
|
||||
layer_name: "layer_with_legend",
|
||||
interactivity: ['description', 'cartodb_id'],
|
||||
},
|
||||
legend: {
|
||||
type: "custom",
|
||||
title: "Little legend",
|
||||
show_title: true,
|
||||
data: [
|
||||
{ name: "Natural Parks", value: "#58A062" },
|
||||
{ name: "Villages", value: "#F07971" },
|
||||
{ name: "Rivers", value: "#54BFDE" },
|
||||
{ name: "Fields", value: "#9BC562" },
|
||||
{ name: "Caves", value: "#FABB5C" }
|
||||
]
|
||||
}
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
map.layers.reset([l1, layerGroup]);
|
||||
|
||||
template = cdb.core.Template.compile('\<div class="backdrop"></div>\
|
||||
<div class="cartodb-header">\
|
||||
<div class="content">\
|
||||
<a href="#" class="fullscreen"></a>\
|
||||
<a href="#" class="toggle"></a>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="aside">\
|
||||
<div class="layer-container">\
|
||||
<div class="scrollpane"><ul class="layers"></ul></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="cartodb-attribution"></div>\
|
||||
<a href="#" class="cartodb-attribution-button"></a>\
|
||||
<div class="torque"></div>\
|
||||
', 'mustache');
|
||||
|
||||
container = $('<div>').css('height', '200px');
|
||||
|
||||
mapView = new cdb.geo.GoogleMapsMapView({
|
||||
el: container,
|
||||
map: map
|
||||
});
|
||||
|
||||
overlays = [];
|
||||
|
||||
overlays.push({
|
||||
order: 2,
|
||||
type: "zoom",
|
||||
url: null
|
||||
});
|
||||
|
||||
overlays.push({
|
||||
options: {
|
||||
extra: {
|
||||
description: null,
|
||||
title: "Hello!",
|
||||
show_title: true,
|
||||
show_description: false
|
||||
},
|
||||
},
|
||||
order: 1,
|
||||
shareable: false,
|
||||
type: "header",
|
||||
url: null
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("with legends, with layer selector, without search", function() {
|
||||
|
||||
var mobile;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
mobile = new cdb.geo.ui.Mobile({
|
||||
template: template,
|
||||
mapView: mapView,
|
||||
overlays: overlays,
|
||||
torqueLayer: null,
|
||||
map: map,
|
||||
visibility_options: {
|
||||
search: false,
|
||||
legends: true,
|
||||
layer_selector: true
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it("should render properly", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".aside").length).toBe(1);
|
||||
});
|
||||
|
||||
it("should render the title", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".title").text()).toBe("Hello!");
|
||||
});
|
||||
|
||||
it("shouldn't render the description", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".description").length).toBe(0);
|
||||
});
|
||||
|
||||
it("should render the layers", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.hasClass("with-layers")).toBe(true);
|
||||
expect(mobile.$el.find(".layer-container > h3").text()).toBe("3 layers");
|
||||
expect(mobile.$el.find(".layers > li").length).toBe(3);
|
||||
|
||||
// There's one layer with legend
|
||||
expect(mobile.$el.find(".layers > li:nth-child(3) .cartodb-legend").length).toBe(1);
|
||||
|
||||
expect(mobile.$el.find(".layers > li:nth-child(1) h3").text()).toBe("european_countries_exp…");
|
||||
expect(mobile.$el.find(".layers > li:nth-child(2) h3").text()).toBe("jamon_countries");
|
||||
expect(mobile.$el.find(".layers > li:nth-child(3) h3").text()).toBe("layer_with_legend");
|
||||
});
|
||||
|
||||
it("shouldn't render the search", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.hasClass("with-search")).toBe(false);
|
||||
expect(mobile.$el.find(".cartodb-searchbox").length).toBe(0);
|
||||
});
|
||||
|
||||
it("should render the attribution", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-attribution-button").length).toBe(1);
|
||||
expect(mobile.$el.find(".cartodb-attribution").html()).toBe('<li>©2012 Nokia <a href="http://here.net/services/terms" target="_blank">Terms of use</a></li><li>© <a href="https://carto.com/attributions" target="_blank">CARTO</a></li>');
|
||||
});
|
||||
|
||||
it("should has the attribution hidden by default", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-attribution").css("display")).toBe("");
|
||||
});
|
||||
|
||||
it("should show the zoom", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-zoom").length).toBe(1);
|
||||
});
|
||||
|
||||
it("should show the toggle button", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-header .content .toggle").length).toBe(1);
|
||||
});
|
||||
|
||||
it("should show the attribution", function() {
|
||||
mobile.render();
|
||||
mobile.$el.find(".cartodb-attribution-button").click();
|
||||
expect(mobile.$el.find(".cartodb-attribution").css("display")).toBe("block");
|
||||
});
|
||||
|
||||
it("should render the legend", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".layers .cartodb-mobile-layer.has-legend .cartodb-legend .legend-title").text()).toBe("Little legend");
|
||||
expect(mobile.$el.find(".layers .cartodb-mobile-layer.has-legend").length).toBe(1);
|
||||
});
|
||||
|
||||
//it("should hide the attribution when clicking on the backdrop", function() {
|
||||
//mobile.render();
|
||||
//mobile.$el.find(".cartodb-attribution-button").click();
|
||||
//mobile.$el.find(".cartodb-attribution-button .backdrop").click();
|
||||
|
||||
//setTimeout(function() {
|
||||
//expect(mobile.$el.find(".cartodb-attribution").css("display")).toBe("");
|
||||
//}, 450);
|
||||
|
||||
//});
|
||||
|
||||
});
|
||||
|
||||
describe("without layer_selector, without legends, without search", function() {
|
||||
|
||||
var mobile;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
mobile = new cdb.geo.ui.Mobile({
|
||||
template: template,
|
||||
mapView: mapView,
|
||||
overlays: overlays,
|
||||
torqueLayer: null,
|
||||
map: map,
|
||||
visibility_options: {
|
||||
search:false,
|
||||
legends: false,
|
||||
layer_selector: false
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it("should render properly", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".aside").length).toBe(1);
|
||||
});
|
||||
|
||||
it("should render the title", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".title").text()).toBe("Hello!");
|
||||
});
|
||||
|
||||
it("should set the right classes", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.hasClass("with-header")).toBe(true);
|
||||
expect(mobile.$el.hasClass("with-layers")).toBe(false);
|
||||
expect(mobile.$el.hasClass("with-search")).toBe(false);
|
||||
});
|
||||
|
||||
it("shouldn't render the layers", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".layers > li").length).toBe(0);
|
||||
});
|
||||
|
||||
|
||||
it("should render the attribution", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-attribution-button").length).toBe(1);
|
||||
expect(mobile.$el.find(".cartodb-attribution").html()).toBe('<li>©2012 Nokia <a href="http://here.net/services/terms" target="_blank">Terms of use</a></li><li>© <a href="https://carto.com/attributions" target="_blank">CARTO</a></li>');
|
||||
});
|
||||
|
||||
it("should has the attribution hidden by default", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-attribution").css("display")).toBe("");
|
||||
});
|
||||
|
||||
it("should show the zoom", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-zoom").length).toBe(1);
|
||||
});
|
||||
|
||||
it("should show the attribution", function() {
|
||||
mobile.render();
|
||||
mobile.$el.find(".cartodb-attribution-button").click();
|
||||
expect(mobile.$el.find(".cartodb-attribution").css("display")).toBe("block");
|
||||
});
|
||||
|
||||
it("shouldn't render the legend", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".layers .cartodb-mobile-layer.has-legend").length).toBe(0);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("with legends, without layer selector, without search", function() {
|
||||
|
||||
var mobile;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
mobile = new cdb.geo.ui.Mobile({
|
||||
template: template,
|
||||
mapView: mapView,
|
||||
overlays: overlays,
|
||||
torqueLayer: null,
|
||||
map: map,
|
||||
visibility_options: {
|
||||
search: false,
|
||||
legends: true,
|
||||
layer_selector: false
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it("should render properly", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".aside").length).toBe(1);
|
||||
});
|
||||
|
||||
it("should render the title", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".title").text()).toBe("Hello!");
|
||||
});
|
||||
|
||||
it("should render only the layers with legends", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.hasClass("with-layers")).toBe(true);
|
||||
expect(mobile.$el.find(".layers > li h3").length).toBe(0); // don't show titles
|
||||
expect(mobile.$el.find(".layers > li").length).toBe(1);
|
||||
expect(mobile.$el.find(".layer-container h3").text()).toBe("1 layer");
|
||||
});
|
||||
|
||||
it("shouldn't render the search", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.hasClass("with-search")).toBe(false);
|
||||
expect(mobile.$el.find(".cartodb-searchbox").length).toBe(0);
|
||||
});
|
||||
|
||||
it("should render the attribution", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-attribution-button").length).toBe(1);
|
||||
expect(mobile.$el.find(".cartodb-attribution").html()).toBe('<li>©2012 Nokia <a href="http://here.net/services/terms" target="_blank">Terms of use</a></li><li>© <a href="https://carto.com/attributions" target="_blank">CARTO</a></li>');
|
||||
});
|
||||
|
||||
it("should has the attribution hidden by default", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-attribution").css("display")).toBe("");
|
||||
});
|
||||
|
||||
it("should show the zoom", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-zoom").length).toBe(1);
|
||||
});
|
||||
|
||||
it("should show the toggle button", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-header .content .toggle").length).toBe(1);
|
||||
});
|
||||
|
||||
it("should show the attribution", function() {
|
||||
mobile.render();
|
||||
mobile.$el.find(".cartodb-attribution-button").click();
|
||||
expect(mobile.$el.find(".cartodb-attribution").css("display")).toBe("block");
|
||||
});
|
||||
|
||||
it("should render the legend", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".layers .cartodb-mobile-layer.has-legend .cartodb-legend .legend-title").text()).toBe("Little legend");
|
||||
expect(mobile.$el.find(".layers .cartodb-mobile-layer.has-legend").length).toBe(1);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("with layer_selector, without legends, without search", function() {
|
||||
|
||||
var mobile;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
mobile = new cdb.geo.ui.Mobile({
|
||||
template: template,
|
||||
mapView: mapView,
|
||||
overlays: overlays,
|
||||
torqueLayer: null,
|
||||
map: map,
|
||||
visibility_options: {
|
||||
search: false,
|
||||
legends: false,
|
||||
layer_selector: true
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it("should render properly", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".aside").length).toBe(1);
|
||||
});
|
||||
|
||||
it("should render the title", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".title").text()).toBe("Hello!");
|
||||
});
|
||||
|
||||
it("shouldn't render the search", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.hasClass("with-search")).toBe(false);
|
||||
});
|
||||
|
||||
it("should render the layers", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.hasClass("with-header")).toBe(true);
|
||||
expect(mobile.$el.hasClass("with-layers")).toBe(true);
|
||||
expect(mobile.$el.find(".layers > li").length).toBe(3);
|
||||
expect(mobile.$el.find(".layers > li:first-child").hasClass("has-toggle")).toBe(true);
|
||||
});
|
||||
|
||||
it("shouldn't render the legend", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".layers .cartodb-mobile-layer.has-legend").length).toBe(0);
|
||||
});
|
||||
|
||||
it("should render the attribution", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-attribution-button").length).toBe(1);
|
||||
expect(mobile.$el.find(".cartodb-attribution").html()).toBe('<li>©2012 Nokia <a href="http://here.net/services/terms" target="_blank">Terms of use</a></li><li>© <a href="https://carto.com/attributions" target="_blank">CARTO</a></li>');
|
||||
});
|
||||
|
||||
it("should has the attribution hidden by default", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-attribution").css("display")).toBe("");
|
||||
});
|
||||
|
||||
it("should show the zoom", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-zoom").length).toBe(1);
|
||||
});
|
||||
|
||||
it("should show the attribution", function() {
|
||||
mobile.render();
|
||||
mobile.$el.find(".cartodb-attribution-button").click();
|
||||
expect(mobile.$el.find(".cartodb-attribution").css("display")).toBe("block");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("with search, without layer_selector, without legends", function() {
|
||||
|
||||
var mobile;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
mobile = new cdb.geo.ui.Mobile({
|
||||
template: template,
|
||||
mapView: mapView,
|
||||
overlays: overlays,
|
||||
torqueLayer: null,
|
||||
map: map,
|
||||
visibility_options: {
|
||||
search:true,
|
||||
legends: false,
|
||||
layer_selector: false
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it("should render properly", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".aside").length).toBe(1);
|
||||
});
|
||||
|
||||
it("should render the title", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".title").text()).toBe("Hello!");
|
||||
});
|
||||
|
||||
it("should render the search", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.hasClass("with-search")).toBe(true);
|
||||
});
|
||||
|
||||
it("shouldn't render the layers", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.hasClass("with-header")).toBe(true);
|
||||
expect(mobile.$el.hasClass("with-layers")).toBe(false);
|
||||
expect(mobile.$el.find(".layers > li").length).toBe(0);
|
||||
});
|
||||
|
||||
it("should render the attribution", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-attribution-button").length).toBe(1);
|
||||
expect(mobile.$el.find(".cartodb-attribution").html()).toBe('<li>©2012 Nokia <a href="http://here.net/services/terms" target="_blank">Terms of use</a></li><li>© <a href="https://carto.com/attributions" target="_blank">CARTO</a></li>');
|
||||
});
|
||||
|
||||
it("should has the attribution hidden by default", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-attribution").css("display")).toBe("");
|
||||
});
|
||||
|
||||
it("should show the zoom", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-zoom").length).toBe(1);
|
||||
});
|
||||
|
||||
it("should show the attribution", function() {
|
||||
mobile.render();
|
||||
mobile.$el.find(".cartodb-attribution-button").click();
|
||||
expect(mobile.$el.find(".cartodb-attribution").css("display")).toBe("block");
|
||||
});
|
||||
|
||||
it("shouldn't render the legend", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".layers .cartodb-mobile-layer.has-legend").length).toBe(0);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("without anything", function() {
|
||||
|
||||
var mobile;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
mobile = new cdb.geo.ui.Mobile({
|
||||
template: template,
|
||||
mapView: mapView,
|
||||
overlays: [],
|
||||
torqueLayer: null,
|
||||
map: map,
|
||||
visibility_options: {
|
||||
legends: false,
|
||||
layer_selector: false
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it("should render properly", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".aside").length).toBe(1);
|
||||
});
|
||||
|
||||
it("shouldn't render the title", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".title").text()).toBe("");
|
||||
});
|
||||
|
||||
it("should set the right classes", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.hasClass("with-header")).toBe(false);
|
||||
expect(mobile.$el.hasClass("with-layers")).toBe(false);
|
||||
expect(mobile.$el.hasClass("with-search")).toBe(false);
|
||||
});
|
||||
|
||||
it("shouldn't render the layers", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.hasClass("with-layers")).toBe(false);
|
||||
expect(mobile.$el.find(".layers > li").length).toBe(0);
|
||||
});
|
||||
|
||||
|
||||
it("should render the attribution", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-attribution-button").length).toBe(1);
|
||||
expect(mobile.$el.find(".cartodb-attribution").html()).toBe('<li>©2012 Nokia <a href="http://here.net/services/terms" target="_blank">Terms of use</a></li><li>© <a href="https://carto.com/attributions" target="_blank">CARTO</a></li>');
|
||||
});
|
||||
|
||||
it("should has the attribution hidden by default", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-attribution").css("display")).toBe("");
|
||||
});
|
||||
|
||||
it("shouldn't show the zoom", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-zoom").length).toBe(0);
|
||||
});
|
||||
|
||||
it("should show the attribution", function() {
|
||||
mobile.render();
|
||||
mobile.$el.find(".cartodb-attribution-button").click();
|
||||
expect(mobile.$el.find(".cartodb-attribution").css("display")).toBe("block");
|
||||
});
|
||||
|
||||
it("shouldn't render the legend", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".layers .cartodb-mobile-layer.has-legend").length).toBe(0);
|
||||
});
|
||||
|
||||
//it("should hide the attribution when clicking on the backdrop", function() {
|
||||
//mobile.render();
|
||||
//mobile.$el.find(".cartodb-attribution-button").click();
|
||||
//mobile.$el.find(".cartodb-attribution-button .backdrop").click();
|
||||
|
||||
//setTimeout(function() {
|
||||
//expect(mobile.$el.find(".cartodb-attribution").css("display")).toBe("");
|
||||
//}, 350);
|
||||
|
||||
//});
|
||||
|
||||
});
|
||||
|
||||
describe("with some disabled layers", function() {
|
||||
|
||||
var mobile, layerGroup2;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
layerGroup = new cdb.geo.CartoDBGroupLayer({
|
||||
layer_definition: {
|
||||
version: '1.0.0',
|
||||
layers: [{
|
||||
type: 'cartodb',
|
||||
options: {
|
||||
sql: "select * from european_countries_export",
|
||||
cartocss: '#layer { polygon-fill: #000; polygon-opacity: 0.8;}',
|
||||
cartocss_version : '2.0.0',
|
||||
layer_name: "european_countries_export",
|
||||
interactivity: ['created_at', 'cartodb_id']
|
||||
}
|
||||
},{
|
||||
type: 'cartodb',
|
||||
options: {
|
||||
sql: "select * from jamon_countries",
|
||||
cartocss: '#layer { polygon-fill: #000; polygon-opacity: 0.8;}',
|
||||
cartocss_version : '2.0.0',
|
||||
layer_name: "jamon_countries",
|
||||
interactivity: ['description', 'cartodb_id']
|
||||
}
|
||||
},{
|
||||
type: 'cartodb',
|
||||
options: {
|
||||
visible: false,
|
||||
sql: "select * from jamon_countries",
|
||||
cartocss: '#layer { polygon-fill: #000; polygon-opacity: 0.8;}',
|
||||
cartocss_version : '2.0.0',
|
||||
layer_name: "layer_with_legend",
|
||||
interactivity: ['description', 'cartodb_id'],
|
||||
},
|
||||
legend: {
|
||||
type: "custom",
|
||||
title: "Little legend",
|
||||
show_title: true,
|
||||
data: [
|
||||
{ name: "Natural Parks", value: "#58A062" },
|
||||
{ name: "Villages", value: "#F07971" },
|
||||
{ name: "Rivers", value: "#54BFDE" },
|
||||
{ name: "Fields", value: "#9BC562" },
|
||||
{ name: "Caves", value: "#FABB5C" }
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
map.layers.reset([l1, layerGroup]);
|
||||
|
||||
|
||||
mapView = new cdb.geo.GoogleMapsMapView({
|
||||
el: container,
|
||||
map: map
|
||||
});
|
||||
|
||||
mobile = new cdb.geo.ui.Mobile({
|
||||
template: template,
|
||||
mapView: mapView,
|
||||
overlays: overlays,
|
||||
torqueLayer: null,
|
||||
map: map,
|
||||
visibility_options: {
|
||||
layer_selector: true
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it("should render properly", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".aside").length).toBe(1);
|
||||
});
|
||||
|
||||
it("should render the title", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".title").text()).toBe("Hello!");
|
||||
});
|
||||
|
||||
it("should render the layers", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.hasClass("with-layers")).toBe(true);
|
||||
expect(mobile.$el.find(".layer-container > h3").text()).toBe("3 layers");
|
||||
expect(mobile.$el.find(".layers > li").length).toBe(3);
|
||||
|
||||
// There's one hidden layer
|
||||
expect(mobile.$el.find(".layers > li:nth-child(3)").hasClass("hidden")).toBe(true);
|
||||
|
||||
expect(mobile.$el.find(".layers > li:nth-child(1) h3").text()).toBe("european_countries_exp…");
|
||||
expect(mobile.$el.find(".layers > li:nth-child(2) h3").text()).toBe("jamon_countries");
|
||||
expect(mobile.$el.find(".layers > li:nth-child(3) h3").text()).toBe("layer_with_legend");
|
||||
});
|
||||
|
||||
it("shouldn't render the search", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.hasClass("with-search")).toBe(false);
|
||||
expect(mobile.$el.find(".cartodb-searchbox").length).toBe(0);
|
||||
});
|
||||
|
||||
it("should render the attribution", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-attribution-button").length).toBe(1);
|
||||
expect(mobile.$el.find(".cartodb-attribution").html()).toBe('<li>©2012 Nokia <a href="http://here.net/services/terms" target="_blank">Terms of use</a></li><li>© <a href="https://carto.com/attributions" target="_blank">CARTO</a></li>');
|
||||
});
|
||||
|
||||
it("should has the attribution hidden by default", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-attribution").css("display")).toBe("");
|
||||
});
|
||||
|
||||
it("should show the zoom", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-zoom").length).toBe(1);
|
||||
});
|
||||
|
||||
it("should show the toggle button", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-header .content .toggle").length).toBe(1);
|
||||
});
|
||||
|
||||
it("should show the attribution", function() {
|
||||
mobile.render();
|
||||
mobile.$el.find(".cartodb-attribution-button").click();
|
||||
expect(mobile.$el.find(".cartodb-attribution").css("display")).toBe("block");
|
||||
});
|
||||
|
||||
it("should render the legend", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".layers .cartodb-mobile-layer.has-legend .cartodb-legend .legend-title").text()).toBe("Little legend");
|
||||
expect(mobile.$el.find(".layers .cartodb-mobile-layer.has-legend").length).toBe(1);
|
||||
});
|
||||
|
||||
it("should hide the attribution when clicking on the backdrop", function(done) {
|
||||
mobile.render();
|
||||
mobile.$el.find(".cartodb-attribution-button").click();
|
||||
|
||||
setTimeout(function() {
|
||||
expect(mobile.$el.find(".backdrop").css("display")).toBe("block");
|
||||
|
||||
spyOn($.fn, 'fadeOut');
|
||||
|
||||
mobile.$el.find(".backdrop").click();
|
||||
|
||||
setTimeout(function() {
|
||||
// FadeOut tests are the hell!!
|
||||
expect($.fn.fadeOut).toHaveBeenCalled();
|
||||
expect($.fn.fadeOut.calls.count()).toBe(2);
|
||||
|
||||
var elements_class = ['backdrop', 'cartodb-attribution'];
|
||||
expect(
|
||||
_.every($.fn.fadeOut.calls.all(), function(item, pos) {
|
||||
return _.contains(elements_class, $(item.object).attr('class'))
|
||||
})
|
||||
).toBeTruthy();
|
||||
|
||||
done();
|
||||
}, 500);
|
||||
|
||||
}, 500);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("disabling the title and the description", function() {
|
||||
|
||||
var mobile;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
mobile = new cdb.geo.ui.Mobile({
|
||||
template: template,
|
||||
mapView: mapView,
|
||||
overlays: overlays,
|
||||
torqueLayer: null,
|
||||
map: map,
|
||||
visibility_options: {
|
||||
title: false,
|
||||
description: false,
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it("should render properly", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".aside").length).toBe(1);
|
||||
});
|
||||
|
||||
it("shoulnd't render the title", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".title").length).toBe(0);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("search overlay", function() {
|
||||
|
||||
var mobile;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
mobile = new cdb.geo.ui.Mobile({
|
||||
template: template,
|
||||
mapView: mapView,
|
||||
overlays: [{
|
||||
order: 3,
|
||||
type: "search",
|
||||
template: null
|
||||
}],
|
||||
torqueLayer: null,
|
||||
map: map,
|
||||
visibility_options: {
|
||||
layer_selector:false,
|
||||
legends:false,
|
||||
title: false,
|
||||
description: false,
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it("should render the search", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.hasClass("with-search")).toBe(true);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
describe("with a hidden torque layer", function() {
|
||||
|
||||
var mobile;
|
||||
|
||||
beforeEach(function() {
|
||||
|
||||
torque.options = { steps: 3 };
|
||||
torque.hidden = true;
|
||||
torque.getStep = function() {};
|
||||
|
||||
mobile = new cdb.geo.ui.Mobile({
|
||||
template: template,
|
||||
mapView: mapView,
|
||||
overlays: overlays,
|
||||
torqueLayer: torque,
|
||||
map: map
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it("should hide the timeslider", function() {
|
||||
mobile.render();
|
||||
expect(mobile.$el.find(".cartodb-timeslider").length).toBe(1);
|
||||
expect(mobile.$el.find(".cartodb-timeslider").css("display")).toBe("none");
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,269 @@
|
||||
describe('cdb.geo.ui.Search', function() {
|
||||
|
||||
beforeEach(function() {
|
||||
this.$el = $("<div>")
|
||||
.attr('id', 'map')
|
||||
.height(500)
|
||||
.width(500);
|
||||
$('body').append(this.$el);
|
||||
this.map = new cdb.geo.Map();
|
||||
var template = cdb.core.Template.compile(
|
||||
'\
|
||||
<form>\
|
||||
<span class="loader"></span>\
|
||||
<input type="text" class="text" value="" />\
|
||||
<input type="submit" class="submit" value="" />\
|
||||
</form>\
|
||||
',
|
||||
'mustache'
|
||||
);
|
||||
this.mapView = new cdb.geo.LeafletMapView({
|
||||
el: this.$el,
|
||||
map: this.map
|
||||
});
|
||||
|
||||
this.view = new cdb.geo.ui.Search({
|
||||
template: template,
|
||||
model: this.map,
|
||||
mapView: this.mapView
|
||||
});
|
||||
this.view.render();
|
||||
});
|
||||
|
||||
it('should render properly', function() {
|
||||
expect(this.view.$('form').length).toBe(1);
|
||||
expect(this.view.$('input[type="text"]').length).toBe(1);
|
||||
expect(this.view.$('input[type="submit"]').length).toBe(1);
|
||||
expect(this.view.$('span.loader').length).toBe(1);
|
||||
});
|
||||
|
||||
describe('onSubmit', function() {
|
||||
beforeEach(function(){
|
||||
var self = this;
|
||||
this.result = {
|
||||
lat: 43.0,
|
||||
lon: -3.0,
|
||||
boundingbox: {
|
||||
south: 6.0,
|
||||
north: 4.0,
|
||||
west: 6.0,
|
||||
east: 4.0
|
||||
},
|
||||
type: undefined
|
||||
};
|
||||
cdb.geo.geocoder[this.view.GEOCODER_SERVICE].geocode = function(address, callback) {
|
||||
callback([ self.result ]);
|
||||
};
|
||||
|
||||
this.view.$('input.text').val('Madrid, Spain');
|
||||
});
|
||||
|
||||
it('should search with geocoder when form is submit', function() {
|
||||
spyOn(cdb.geo.geocoder[this.view.GEOCODER_SERVICE], 'geocode');
|
||||
this.view.$('form').submit();
|
||||
expect(cdb.geo.geocoder[this.view.GEOCODER_SERVICE].geocode).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should change map center when geocoder returns any result', function() {
|
||||
var onBoundsChanged = jasmine.createSpy("onBoundsChange");
|
||||
this.map.bind('change:view_bounds_sw', onBoundsChanged, this.view);
|
||||
this.view.$('form').submit();
|
||||
expect(onBoundsChanged).toHaveBeenCalled();
|
||||
this.map.unbind('change:view_bounds_sw', onBoundsChanged, this.view);
|
||||
});
|
||||
|
||||
it('should center map to lat,lon when bbox is not defined', function() {
|
||||
this.result = {
|
||||
lat: 43.0,
|
||||
lon: -3.0
|
||||
};
|
||||
this.view.$('form').submit();
|
||||
var center = this.map.get('center');
|
||||
expect(center[0]).toBe(43.0);
|
||||
expect(center[1]).toBe(-3.0);
|
||||
});
|
||||
|
||||
it('should center map whith bbox when it is defined', function() {
|
||||
this.view.$('form').submit();
|
||||
var ne = this.map.get('view_bounds_ne');
|
||||
var sw = this.map.get('view_bounds_sw');
|
||||
expect(ne[0].toFixed(0)).toBe('6');
|
||||
expect(ne[1].toFixed(0)).toBe('6');
|
||||
expect(sw[0].toFixed(0)).toBe('4');
|
||||
expect(sw[1].toFixed(0)).toBe('4');
|
||||
var center = this.map.get('center');
|
||||
expect(center[0]).not.toBe(43.0);
|
||||
expect(center[1]).not.toBe(-3.0);
|
||||
});
|
||||
|
||||
describe('result zoom', function() {
|
||||
|
||||
it('should zoom to 18 when search result is building type', function() {
|
||||
this.result = {
|
||||
lat: 43.0,
|
||||
lon: -3.0,
|
||||
type: 'building'
|
||||
};
|
||||
this.view.$('form').submit();
|
||||
expect(this.map.get('zoom')).toBe(18);
|
||||
});
|
||||
|
||||
it('should zoom to 15 when search result is postal-area type', function() {
|
||||
this.result = {
|
||||
lat: 43.0,
|
||||
lon: -3.0,
|
||||
type: 'postal-area'
|
||||
};
|
||||
this.view.$('form').submit();
|
||||
expect(this.map.get('zoom')).toBe(15);
|
||||
});
|
||||
|
||||
it('should zoom to 18 when search result is venue type', function() {
|
||||
this.result = {
|
||||
lat: 43.0,
|
||||
lon: -3.0,
|
||||
type: 'venue'
|
||||
};
|
||||
this.view.$('form').submit();
|
||||
expect(this.map.get('zoom')).toBe(18);
|
||||
});
|
||||
|
||||
it('should zoom to 8 when search result is region type', function() {
|
||||
this.result = {
|
||||
lat: 43.0,
|
||||
lon: -3.0,
|
||||
type: 'region'
|
||||
};
|
||||
this.view.$('form').submit();
|
||||
expect(this.map.get('zoom')).toBe(8);
|
||||
});
|
||||
|
||||
it('should zoom to 5 when search result is country type', function() {
|
||||
this.result = {
|
||||
lat: 43.0,
|
||||
lon: -3.0,
|
||||
type: 'country'
|
||||
};
|
||||
this.view.$('form').submit();
|
||||
expect(this.map.get('zoom')).toBe(5);
|
||||
});
|
||||
|
||||
it('should zoom to 8 when search result is county type', function() {
|
||||
this.result = {
|
||||
lat: 43.0,
|
||||
lon: -3.0,
|
||||
type: 'county'
|
||||
};
|
||||
this.view.$('form').submit();
|
||||
expect(this.map.get('zoom')).toBe(8);
|
||||
});
|
||||
|
||||
it('should zoom to 18 when search result is address type', function() {
|
||||
this.result = {
|
||||
lat: 43.0,
|
||||
lon: -3.0,
|
||||
type: 'address'
|
||||
};
|
||||
this.view.$('form').submit();
|
||||
expect(this.map.get('zoom')).toBe(18);
|
||||
});
|
||||
|
||||
it('should zoom to 12 when search result is locality type', function() {
|
||||
this.result = {
|
||||
lat: 43.0,
|
||||
lon: -3.0,
|
||||
type: 'locality'
|
||||
};
|
||||
this.view.$('form').submit();
|
||||
expect(this.map.get('zoom')).toBe(12);
|
||||
});
|
||||
|
||||
it('should zoom to 11 when search result is localadmin type', function() {
|
||||
this.result = {
|
||||
lat: 43.0,
|
||||
lon: -3.0,
|
||||
type: 'localadmin'
|
||||
};
|
||||
this.view.$('form').submit();
|
||||
expect(this.map.get('zoom')).toBe(11);
|
||||
});
|
||||
|
||||
it('should zoom to 15 when search result is neighbourhood type', function() {
|
||||
this.result = {
|
||||
lat: 43.0,
|
||||
lon: -3.0,
|
||||
type: 'neighbourhood'
|
||||
};
|
||||
this.view.$('form').submit();
|
||||
expect(this.map.get('zoom')).toBe(15);
|
||||
});
|
||||
|
||||
it('should zoom to 12 when search result is unknown type', function() {
|
||||
this.result = {
|
||||
lat: 43.0,
|
||||
lon: -3.0,
|
||||
type: 'whatever'
|
||||
};
|
||||
this.view.$('form').submit();
|
||||
expect(this.map.get('zoom')).toBe(12);
|
||||
});
|
||||
});
|
||||
|
||||
describe('searchPin', function() {
|
||||
beforeEach(function() {
|
||||
this.view.options.searchPin = true;
|
||||
this.view.$('form').submit();
|
||||
});
|
||||
|
||||
it('should add a pin and an infowindow when search is completed', function() {
|
||||
expect(this.view._searchPin).toBeDefined();
|
||||
expect(this.view._searchInfowindow).toBeDefined();
|
||||
});
|
||||
|
||||
it('should place pin in the lat,lon if it is provided', function() {
|
||||
this.result = {
|
||||
lat: 43.0,
|
||||
lon: -3.0
|
||||
};
|
||||
var center = this.view._searchPin.model.get('geojson').coordinates;
|
||||
expect(center[0]).toBe(-3.0);
|
||||
expect(center[1]).toBe(43.0);
|
||||
});
|
||||
|
||||
it('should place pin in the middle of the bbox if lat,lon is not provided', function() {
|
||||
this.result = {
|
||||
boundingbox: {
|
||||
south: 6.0,
|
||||
north: 4.0,
|
||||
west: 6.0,
|
||||
east: 4.0
|
||||
}
|
||||
};
|
||||
this.view.$('form').submit();
|
||||
var center = this.view._searchPin.model.get('geojson').coordinates;
|
||||
expect(center[0]).toBe(5.0);
|
||||
expect(center[1]).toBe(5.0);
|
||||
});
|
||||
|
||||
it('should display address in the search infowindow', function() {
|
||||
expect(this.view._searchInfowindow.$('.cartodb-popup-content-wrapper p').text()).toBe('Madrid, Spain');
|
||||
});
|
||||
|
||||
it('should destroy/hide search pin when map is clicked', function(done) {
|
||||
expect(this.view._searchPin).toBeDefined();
|
||||
expect(this.view._searchInfowindow).toBeDefined();
|
||||
this.mapView.trigger('click');
|
||||
setTimeout(function() {
|
||||
expect(this.view._searchPin).toBeUndefined();
|
||||
expect(this.view._searchInfowindow).toBeUndefined();
|
||||
done();
|
||||
}, 1500);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
this.$el.remove();
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,107 @@
|
||||
describe('cdb.geo.ui.TimeSlider', function() {
|
||||
var view;
|
||||
var layer;
|
||||
|
||||
beforeEach(function() {
|
||||
layer = new Backbone.Model();
|
||||
view = new cdb.geo.ui.TimeSlider({
|
||||
layer: layer,
|
||||
width: "auto"
|
||||
});
|
||||
});
|
||||
|
||||
describe(".formatterForRange", function() {
|
||||
var formatter;
|
||||
|
||||
/**
|
||||
* @param {String} str (Optional) e.g. "2014-11-19T13:17:42Z" ATTENTION! This format must be used for Dates to be
|
||||
* created as expected when running the tests on PhantomJS, you can find the report here:
|
||||
* https://code.google.com/p/phantomjs/issues/detail?id=187 until the fix is included in the same version we use
|
||||
* we must use dates this way.
|
||||
* @return {Number} a Unix timestamp
|
||||
*/
|
||||
var time = function time(str) {
|
||||
return Date.parse(str)
|
||||
};
|
||||
|
||||
describe("given a range is within the same day", function() {
|
||||
beforeEach(function() {
|
||||
var start = time("2014-11-19T09:13:00Z");
|
||||
var end = time("2014-11-19T18:37:00Z");
|
||||
formatter = view.formatterForRange(start, end)
|
||||
});
|
||||
|
||||
it("should return a formatter function that renders the local time of given moment", function() {
|
||||
var moment = new Date("2014-11-19T15:04:00Z");
|
||||
expect(formatter(moment).match(/\d?\d:\d\d/g).length > 0).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("given a range is within the same year", function() {
|
||||
beforeEach(function() {
|
||||
var start = time("2014-11-19T12:00:00Z");
|
||||
var end = Date.parse("Dec 24, 2014 12:00 GMT+01");
|
||||
formatter = view.formatterForRange(start, end)
|
||||
});
|
||||
|
||||
it("should return a formatter function that renders the month/day/year (US format) of given moment", function() {
|
||||
var moment = new Date("2014-11-20T12:00:00Z");
|
||||
expect(formatter(moment)).toEqual("11/20/2014");
|
||||
});
|
||||
});
|
||||
|
||||
describe("given a range is more than a year", function() {
|
||||
beforeEach(function() {
|
||||
var start = time("2014-01-19T12:00:00Z");
|
||||
var end = time("2015-02-01T12:00:00Z");
|
||||
formatter = view.formatterForRange(start, end)
|
||||
});
|
||||
|
||||
it("should return a formatter function that renders the month and year of given moment", function() {
|
||||
var moment = new Date("2014-11-27T12:00:00Z");
|
||||
expect(formatter(moment)).toEqual("11/2014")
|
||||
});
|
||||
});
|
||||
|
||||
describe("given a step that spans more than 48 hours", function() {
|
||||
beforeEach(function() {
|
||||
var start = 1423699205000;
|
||||
var end = 1424649534000;
|
||||
view.torqueLayer.getTimeBounds = function(){return {start: start, end: end}};
|
||||
view.torqueLayer.options = {steps: 5};
|
||||
formatter = view.formatterForRange(start, end);
|
||||
});
|
||||
it("should return a formatter function that defines a two-date range", function() {
|
||||
var moment = new Date(1424269402400);
|
||||
expect(formatter(moment, view.torqueLayer)).toEqual("Feb 18 - Feb 20");
|
||||
});
|
||||
});
|
||||
|
||||
describe("given a step that spans more than 48 hours, but within a period of more than a year", function() {
|
||||
beforeEach(function() {
|
||||
var start = 1423699205000;
|
||||
var end = 1460419200000;
|
||||
view.torqueLayer.getTimeBounds = function(){return {start: start, end: end}};
|
||||
view.torqueLayer.options = {steps: 5};
|
||||
formatter = view.formatterForRange(start, end);
|
||||
});
|
||||
it("should return a formatter function that defines a two-date range", function() {
|
||||
var moment = new Date(1424269402400);
|
||||
expect(formatter(moment, view.torqueLayer).indexOf(" - ")).toEqual(-1);
|
||||
});
|
||||
});
|
||||
|
||||
describe("given a range is less than a day but spanning two dates", function() {
|
||||
beforeEach(function() {
|
||||
var start = time("2014-11-19T23:33:00Z");
|
||||
var end = time("2014-11-20T09:42:00Z");
|
||||
formatter = view.formatterForRange(start, end)
|
||||
});
|
||||
|
||||
it("should return a formatter function that renders both date and local time", function() {
|
||||
var moment = new Date("2014-11-20T01:16:00Z");
|
||||
expect(formatter(moment).match(/\d?\d:\d\d/g).length > 0).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,198 @@
|
||||
describe('cdb.geo.Tooltip', function() {
|
||||
|
||||
var tooltip, layer, container, mapView;
|
||||
beforeEach(function() {
|
||||
container = $("<div id='map'>").css('height', '1000px');
|
||||
$('body').append(container)
|
||||
var map = new cdb.geo.Map();
|
||||
mapView = new cdb.geo.LeafletMapView({
|
||||
el: $('#map'),
|
||||
map: map
|
||||
});
|
||||
|
||||
layer = new Backbone.Model();
|
||||
tooltip = new cdb.geo.ui.Tooltip({
|
||||
template: '{{#fields}}{{{ value }}},{{/fields}}',
|
||||
layer: layer,
|
||||
mapView: mapView
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
$('#map').remove();
|
||||
});
|
||||
|
||||
it ("should render fields in specified order", function() {
|
||||
tooltip.setFields([{
|
||||
name:'test2'
|
||||
}, {
|
||||
name:'test1'
|
||||
}, {
|
||||
name: 'huracan'
|
||||
}]);
|
||||
tooltip.enable();
|
||||
layer.trigger('mouseover', new $.Event('e'), [0,0], [0, 0], {
|
||||
test1: 'test1',
|
||||
test2: 'test2',
|
||||
huracan: 'huracan'
|
||||
});
|
||||
expect(tooltip.$el.html()).toEqual('test2,test1,huracan,');
|
||||
tooltip.options.columns_order = null;
|
||||
layer.trigger('mouseover', new $.Event('e'), [0,0], [0, 0], {
|
||||
test1: 'test1',
|
||||
test2: 'test2',
|
||||
huracan: 'hurecan'
|
||||
});
|
||||
expect(tooltip.$el.html()).not.toEqual('test2,test1,huracan,');
|
||||
});
|
||||
|
||||
it("should not show the tooltip if there are no fields", function() {
|
||||
tooltip.setFields([]);
|
||||
tooltip.enable();
|
||||
|
||||
layer.trigger('mouseover', new $.Event('e'), [0, 0], [0, 0], {});
|
||||
|
||||
// Tooltip is hidden
|
||||
expect(tooltip.showing).toBeFalsy();
|
||||
});
|
||||
|
||||
it("should hide the tooltip if it was visible and there are no fields now", function() {
|
||||
tooltip.setFields([{
|
||||
name:'test2'
|
||||
}]);
|
||||
tooltip.enable();
|
||||
|
||||
// mouseover a layer whose tooltip has fields
|
||||
layer.trigger('mouseover', new $.Event('e'), [0, 0], [0, 0], { name: 'wadus' });
|
||||
|
||||
// Tooltip is visible
|
||||
expect(tooltip.showing).toBeTruthy();
|
||||
|
||||
tooltip.setFields([]);
|
||||
|
||||
// mouseover a layer whose tooltip doesn NOT has fields
|
||||
layer.trigger('mouseover', new $.Event('e'), [0, 0], [0, 0], {});
|
||||
|
||||
// Tooltip is hidden
|
||||
expect(tooltip.showing).toBeFalsy();
|
||||
})
|
||||
|
||||
it ("should use alternate_names ", function() {
|
||||
tooltip.setTemplate('{{#fields}}{{{ title }}},{{/fields}}');
|
||||
tooltip.setFields([{
|
||||
name:'test2',
|
||||
title: true
|
||||
}, {
|
||||
name:'test1',
|
||||
title: true
|
||||
}, {
|
||||
name: 'huracan',
|
||||
title: true
|
||||
}]);
|
||||
tooltip.options.alternative_names = {
|
||||
'test1': 'testnamed'
|
||||
};
|
||||
tooltip.enable();
|
||||
layer.trigger('mouseover', new $.Event('e'), [0,0], [0, 0], {
|
||||
test1: 'test1',
|
||||
test2: 'test2',
|
||||
huracan: 'huracan'
|
||||
});
|
||||
expect(tooltip.$el.html()).toEqual('test2,testnamed,huracan,');
|
||||
});
|
||||
|
||||
it ("should position the element correctly", function() {
|
||||
tooltip.$el.css('width', '200px');
|
||||
tooltip.$el.css('height', '20px');
|
||||
var data = { cartodb_id: 2, description: 'test' };
|
||||
|
||||
tooltip.options.position = 'bottom|right';
|
||||
tooltip.show({ x:10, y:10 }, data);
|
||||
expect(tooltip.$el.css('top')).toBe('10px');
|
||||
expect(tooltip.$el.css('left')).toBe('10px');
|
||||
|
||||
tooltip.options.position = 'top|left';
|
||||
tooltip.show({ x:210, y:40 }, data);
|
||||
expect(tooltip.$el.css('top')).toBe('20px');
|
||||
expect(tooltip.$el.css('left')).toBe('10px');
|
||||
|
||||
tooltip.options.position = 'middle|center';
|
||||
tooltip.show({ x:150, y:30 }, data);
|
||||
expect(tooltip.$el.css('top')).toBe('20px');
|
||||
expect(tooltip.$el.css('left')).toBe('50px');
|
||||
|
||||
// With offsets
|
||||
tooltip.options.position = 'middle|center';
|
||||
tooltip.options.vertical_offset = -10;
|
||||
tooltip.options.horizontal_offset = -10;
|
||||
tooltip.show({ x:150, y:30 }, data);
|
||||
expect(tooltip.$el.css('top')).toBe('10px');
|
||||
expect(tooltip.$el.css('left')).toBe('40px');
|
||||
});
|
||||
|
||||
describe('overflow positioning', function() {
|
||||
var data;
|
||||
|
||||
beforeEach(function() {
|
||||
data = { cartodb_id: 2, description: 'test' };
|
||||
$('#map').css('height', '100px');
|
||||
$('#map').css('width', '100px');
|
||||
tooltip.$el.css('height', '80px');
|
||||
tooltip.$el.css('width', '80px');
|
||||
mapView.invalidateSize();
|
||||
});
|
||||
|
||||
it('should position the element on top when bottom overflow occurs', function() {
|
||||
tooltip.options.position = 'bottom|right';
|
||||
|
||||
tooltip.show({ x:0, y:90 }, data);
|
||||
expect(tooltip.$el.css('top')).toBe('10px');
|
||||
});
|
||||
|
||||
it('should position the element on the bottom when top overflow occurs', function() {
|
||||
tooltip.options.position = 'top|right';
|
||||
|
||||
tooltip.show({ x:0, y:10 }, data);
|
||||
expect(tooltip.$el.css('top')).toBe('10px');
|
||||
});
|
||||
|
||||
it('should position the element on top/bottom when overflow vertically centered and overflow occurs', function() {
|
||||
tooltip.options.position = 'middle|right';
|
||||
|
||||
tooltip.show({ x:0, y:90 }, data);
|
||||
expect(tooltip.$el.css('top')).toBe('10px');
|
||||
|
||||
tooltip.options.position = 'middle|right';
|
||||
|
||||
tooltip.show({ x:0, y:10 }, data);
|
||||
expect(tooltip.$el.css('top')).toBe('10px');
|
||||
})
|
||||
|
||||
it('should position the element on the left when right overflow occurs', function() {
|
||||
tooltip.options.position = 'top|right';
|
||||
|
||||
tooltip.show({ x:90, y:10 }, data);
|
||||
expect(tooltip.$el.css('left')).toBe('10px');
|
||||
});
|
||||
|
||||
it('should position the element on the right when left overflow occurs', function() {
|
||||
tooltip.options.position = 'top|left';
|
||||
|
||||
tooltip.show({ x:10, y:10 }, data);
|
||||
expect(tooltip.$el.css('left')).toBe('10px');
|
||||
});
|
||||
|
||||
it('should position the element on the left/right when horizontally centered and overflow occurs', function() {
|
||||
tooltip.options.position = 'top|center';
|
||||
|
||||
tooltip.show({ x:10, y:10 }, data);
|
||||
expect(tooltip.$el.css('left')).toBe('10px');
|
||||
|
||||
tooltip.options.position = 'top|center';
|
||||
|
||||
tooltip.show({ x:90, y:10 }, data);
|
||||
expect(tooltip.$el.css('left')).toBe('10px');
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user