344 lines
9.4 KiB
JavaScript
344 lines
9.4 KiB
JavaScript
var Backbone = require('backbone');
|
|
var Map = require('../../../src/geo/map');
|
|
var CartoDBLayer = require('../../../src/geo/map/cartodb-layer');
|
|
var CartoDBLayerGroup = require('../../../src/geo/cartodb-layer-group');
|
|
var TooltipModel = require('../../../src/geo/ui/tooltip-model');
|
|
var InfowindowModel = require('../../../src/geo/ui/infowindow-model');
|
|
var TooltipManager = require('../../../src/vis/tooltip-manager');
|
|
var createEngine = require('../fixtures/engine.fixture.js');
|
|
|
|
var simulateFeatureOverEvent = function (layerView, data) {
|
|
layerView.trigger('featureOver', {
|
|
layer: layerView.model.getLayerInLayerGroupAt(data.layerIndex),
|
|
layerIndex: data.layerIndex,
|
|
latlng: [100, 200],
|
|
position: data.position || { x: 20, y: 30 },
|
|
feature: data.data
|
|
});
|
|
};
|
|
|
|
var simulateFeatureOutEvent = function (layerView, data) {
|
|
layerView.trigger('featureOut', {
|
|
layer: layerView.model.getLayerInLayerGroupAt(data.layerIndex),
|
|
layerIndex: data.layerIndex
|
|
});
|
|
};
|
|
|
|
describe('src/vis/tooltip-manager.js', function () {
|
|
var engineMock;
|
|
|
|
beforeEach(function () {
|
|
this.map = new Map(null, { layersFactory: {} });
|
|
this.layerView = new Backbone.View({
|
|
model: new CartoDBLayerGroup({}, {
|
|
layersCollection: this.map.layers
|
|
})
|
|
});
|
|
|
|
engineMock = createEngine();
|
|
|
|
this.tooltipModel = new TooltipModel();
|
|
this.infowindowModel = new InfowindowModel();
|
|
|
|
this.tooltipManager = new TooltipManager({ // eslint-disable-line
|
|
engine: engineMock,
|
|
mapModel: this.map,
|
|
tooltipModel: this.tooltipModel,
|
|
infowindowModel: this.infowindowModel
|
|
});
|
|
});
|
|
|
|
it('should show the tooltip when a feature is hovered', function () {
|
|
var layer1 = new CartoDBLayer({
|
|
tooltip: {
|
|
template: 'template1',
|
|
template_type: 'underscore',
|
|
fields: [{
|
|
'name': 'name',
|
|
'title': true,
|
|
'position': 1
|
|
}],
|
|
alternative_names: 'alternative_names1'
|
|
}
|
|
}, { engine: engineMock });
|
|
var layer2 = new CartoDBLayer({
|
|
tooltip: {
|
|
template: 'template2',
|
|
template_type: 'underscore',
|
|
fields: [{
|
|
'name': 'description',
|
|
'title': true,
|
|
'position': 1
|
|
}],
|
|
alternative_names: 'alternative_names2'
|
|
}
|
|
}, { engine: engineMock });
|
|
|
|
this.tooltipManager.start(this.layerView);
|
|
|
|
this.map.layers.reset([ layer1, layer2 ]);
|
|
|
|
simulateFeatureOverEvent(this.layerView, {
|
|
layerIndex: 0,
|
|
position: { x: 100, y: 200 },
|
|
data: { cartodb_id: 10, name: 'CARTO' }
|
|
});
|
|
|
|
expect(this.tooltipModel.get('position')).toEqual({ x: 100, y: 200 });
|
|
expect(this.tooltipModel.get('fields')).toEqual([{
|
|
'name': 'name',
|
|
'title': true,
|
|
'position': 1
|
|
}]);
|
|
expect(this.tooltipModel.get('template')).toEqual('template1');
|
|
expect(this.tooltipModel.get('alternative_names')).toEqual('alternative_names1');
|
|
expect(this.tooltipModel.isVisible()).toBeTruthy();
|
|
|
|
simulateFeatureOverEvent(this.layerView, {
|
|
layerIndex: 1,
|
|
position: { x: 200, y: 300 },
|
|
data: { cartodb_id: 10 }
|
|
});
|
|
|
|
expect(this.tooltipModel.get('position')).toEqual({ x: 200, y: 300 });
|
|
expect(this.tooltipModel.get('fields')).toEqual([{
|
|
'name': 'description',
|
|
'title': true,
|
|
'position': 1
|
|
}]);
|
|
expect(this.tooltipModel.get('template')).toEqual('template2');
|
|
expect(this.tooltipModel.get('alternative_names')).toEqual('alternative_names2');
|
|
expect(this.tooltipModel.isVisible()).toBeTruthy();
|
|
});
|
|
|
|
it('should NOT show the tooltip when a feature is hovered and infowindow is opened', function () {
|
|
var layer1 = new CartoDBLayer({
|
|
tooltip: {
|
|
template: 'template1',
|
|
template_type: 'underscore',
|
|
fields: [{
|
|
'name': 'name',
|
|
'title': true,
|
|
'position': 1
|
|
}],
|
|
alternative_names: 'alternative_names1'
|
|
}
|
|
}, { engine: engineMock });
|
|
|
|
this.tooltipManager.start(this.layerView);
|
|
|
|
this.map.layers.reset([ layer1 ]);
|
|
|
|
simulateFeatureOverEvent(this.layerView, {
|
|
layerIndex: 0,
|
|
data: { cartodb_id: 10, name: 'CARTO' }
|
|
});
|
|
|
|
expect(this.tooltipModel.isVisible()).toBeTruthy();
|
|
|
|
simulateFeatureOutEvent(this.layerView, {
|
|
layerIndex: 0
|
|
});
|
|
|
|
expect(this.tooltipModel.isVisible()).toBeFalsy();
|
|
|
|
// Infowindow for layer1 is now visible
|
|
this.infowindowModel.setInfowindowTemplate(layer1.infowindow);
|
|
this.infowindowModel.setCurrentFeatureId(10);
|
|
this.infowindowModel.show();
|
|
|
|
simulateFeatureOverEvent(this.layerView, {
|
|
layerIndex: 0,
|
|
data: { cartodb_id: 10, name: 'CARTO' }
|
|
});
|
|
|
|
expect(this.tooltipModel.isVisible()).toBeFalsy();
|
|
});
|
|
|
|
it('should hide the tooltip when a feature is not hovered anymore', function () {
|
|
var layer1 = new CartoDBLayer({
|
|
tooltip: {
|
|
template: 'template1',
|
|
template_type: 'underscore',
|
|
fields: [{
|
|
'name': 'name',
|
|
'title': true,
|
|
'position': 1
|
|
}],
|
|
alternative_names: 'alternative_names1'
|
|
}
|
|
}, { engine: engineMock });
|
|
|
|
this.tooltipManager.start(this.layerView);
|
|
|
|
this.map.layers.reset([ layer1 ]);
|
|
|
|
simulateFeatureOverEvent(this.layerView, {
|
|
layerIndex: 0,
|
|
data: { cartodb_id: 10, name: 'CARTO' }
|
|
});
|
|
|
|
expect(this.tooltipModel.isVisible()).toBeTruthy();
|
|
|
|
simulateFeatureOutEvent(this.layerView, {
|
|
layerIndex: 0
|
|
});
|
|
|
|
expect(this.tooltipModel.isVisible()).toBeFalsy();
|
|
});
|
|
|
|
it('should hide the tooltip when the layer is hidden', function () {
|
|
var layer1 = new CartoDBLayer({
|
|
tooltip: {
|
|
template: 'template1',
|
|
template_type: 'underscore',
|
|
fields: [{
|
|
'name': 'name',
|
|
'title': true,
|
|
'position': 1
|
|
}],
|
|
alternative_names: 'alternative_names1'
|
|
}
|
|
}, { engine: engineMock });
|
|
|
|
this.tooltipManager.start(this.layerView);
|
|
|
|
this.map.layers.reset([ layer1 ]);
|
|
|
|
simulateFeatureOverEvent(this.layerView, {
|
|
layerIndex: 0,
|
|
data: { cartodb_id: 10, name: 'CARTO' }
|
|
});
|
|
|
|
expect(this.tooltipModel.isVisible()).toBeTruthy();
|
|
|
|
layer1.hide();
|
|
|
|
expect(this.tooltipModel.isVisible()).toBeFalsy();
|
|
});
|
|
|
|
it('should NOT hide the tooltip when a feature is being featured over and other features are outered', function () {
|
|
var layer1 = new CartoDBLayer({
|
|
tooltip: {
|
|
template: 'template1',
|
|
template_type: 'underscore',
|
|
fields: [{
|
|
'name': 'name',
|
|
'title': true,
|
|
'position': 1
|
|
}],
|
|
alternative_names: 'alternative_names1'
|
|
}
|
|
}, { engine: engineMock });
|
|
var layer2 = new CartoDBLayer({
|
|
tooltip: {
|
|
template: 'template2',
|
|
template_type: 'underscore',
|
|
fields: [{
|
|
'name': 'name',
|
|
'title': true,
|
|
'position': 1
|
|
}],
|
|
alternative_names: 'alternative_names1'
|
|
}
|
|
}, { engine: engineMock });
|
|
|
|
this.tooltipManager.start(this.layerView);
|
|
|
|
this.map.layers.reset([ layer1, layer2 ]);
|
|
|
|
simulateFeatureOverEvent(this.layerView, {
|
|
layerIndex: 0,
|
|
data: { cartodb_id: 10, name: 'CARTO' }
|
|
});
|
|
|
|
expect(this.tooltipModel.isVisible()).toBeTruthy();
|
|
|
|
// A feature from a different layer is not overed anymore
|
|
simulateFeatureOutEvent(this.layerView, {
|
|
layerIndex: 1
|
|
});
|
|
|
|
expect(this.tooltipModel.isVisible()).toBeTruthy();
|
|
});
|
|
|
|
it('should NOT show the tooltip if popups are disabled', function () {
|
|
var layer1 = new CartoDBLayer({
|
|
tooltip: {
|
|
template: 'template1',
|
|
template_type: 'underscore',
|
|
fields: [{
|
|
'name': 'name',
|
|
'title': true,
|
|
'position': 1
|
|
}],
|
|
alternative_names: 'alternative_names1'
|
|
}
|
|
}, { engine: engineMock });
|
|
|
|
this.tooltipManager.start(this.layerView);
|
|
|
|
this.map.layers.reset([ layer1 ]);
|
|
this.map.disablePopups();
|
|
|
|
simulateFeatureOverEvent(this.layerView, {
|
|
layerIndex: 0,
|
|
data: { cartodb_id: 10, name: 'CARTO' }
|
|
});
|
|
expect(this.tooltipModel.isVisible()).toBeFalsy();
|
|
});
|
|
|
|
it('should NOT show the tooltip if tooltip has no template', function () {
|
|
var layer1 = new CartoDBLayer({
|
|
tooltip: {
|
|
template: '',
|
|
template_type: 'underscore',
|
|
fields: [{
|
|
'name': 'name',
|
|
'title': true,
|
|
'position': 1
|
|
}],
|
|
alternative_names: 'alternative_names1'
|
|
}
|
|
}, { engine: engineMock });
|
|
|
|
this.tooltipManager.start(this.layerView);
|
|
|
|
this.map.layers.reset([ layer1 ]);
|
|
|
|
simulateFeatureOverEvent(this.layerView, {
|
|
layerIndex: 0,
|
|
data: { cartodb_id: 10, name: 'CARTO' }
|
|
});
|
|
|
|
expect(this.tooltipModel.isVisible()).toBeFalsy();
|
|
});
|
|
|
|
it('should NOT show the tooltipView if the layerModel doesn\'t have tooltip data', function () {
|
|
var layer1 = new CartoDBLayer({}, { engine: engineMock });
|
|
var layer2 = new CartoDBLayer({
|
|
tooltip: {
|
|
template: 'template2',
|
|
template_type: 'underscore',
|
|
fields: [{
|
|
'name': 'description',
|
|
'title': true,
|
|
'position': 1
|
|
}],
|
|
alternative_names: 'alternative_names2'
|
|
}
|
|
}, { engine: engineMock });
|
|
|
|
this.tooltipManager.start(this.layerView);
|
|
|
|
this.map.layers.reset([ layer1, layer2 ]);
|
|
|
|
simulateFeatureOverEvent(this.layerView, {
|
|
layerIndex: 0,
|
|
data: { cartodb_id: 10, name: 'CARTO' }
|
|
});
|
|
|
|
expect(this.tooltipModel.isVisible()).toBeFalsy();
|
|
});
|
|
});
|