cdb
This commit is contained in:
zhongjin
@@ -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