Remove karma tests from legacy maps (#74668)
This commit is contained in:
Thomas Neirynck
GitHub
parent
543109b601
commit
680516154c
|
|
@ -1,329 +0,0 @@
|
|||
/*
|
||||
* Licensed to Elasticsearch B.V. under one or more contributor
|
||||
* license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright
|
||||
* ownership. Elasticsearch B.V. licenses this file to you under
|
||||
* the Apache License, Version 2.0 (the "License"); you may
|
||||
* not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import expect from '@kbn/expect';
|
||||
import { KibanaMap } from '../../map/kibana_map';
|
||||
import { KibanaMapLayer } from '../../map/kibana_map_layer';
|
||||
|
||||
describe('kibana_map tests', function () {
|
||||
let domNode;
|
||||
let kibanaMap;
|
||||
|
||||
function createDiv(width, height) {
|
||||
const div = document.createElement('div');
|
||||
div.style.top = '0';
|
||||
div.style.left = '0';
|
||||
div.style.width = width;
|
||||
div.style.height = height;
|
||||
div.style.position = 'fixed';
|
||||
div.style['pointer-events'] = 'none';
|
||||
return div;
|
||||
}
|
||||
|
||||
function setupDOM(width, height) {
|
||||
domNode = createDiv(width, height);
|
||||
document.body.appendChild(domNode);
|
||||
}
|
||||
|
||||
function teardownDOM() {
|
||||
domNode.innerHTML = '';
|
||||
document.body.removeChild(domNode);
|
||||
}
|
||||
|
||||
describe('KibanaMap - basics', function () {
|
||||
beforeEach(async function () {
|
||||
setupDOM('512px', '512px');
|
||||
kibanaMap = new KibanaMap(domNode, {
|
||||
minZoom: 1,
|
||||
maxZoom: 10,
|
||||
center: [0, 0],
|
||||
zoom: 0,
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
kibanaMap.destroy();
|
||||
teardownDOM();
|
||||
});
|
||||
|
||||
it('should instantiate at zoom level 2', function () {
|
||||
const bounds = kibanaMap.getBounds();
|
||||
expect(bounds.bottom_right.lon).to.equal(90);
|
||||
expect(bounds.top_left.lon).to.equal(-90);
|
||||
expect(kibanaMap.getCenter().lon).to.equal(0);
|
||||
expect(kibanaMap.getCenter().lat).to.equal(0);
|
||||
expect(kibanaMap.getZoomLevel()).to.equal(2);
|
||||
});
|
||||
|
||||
it('should resize to fit container', function () {
|
||||
kibanaMap.setZoomLevel(2);
|
||||
expect(kibanaMap.getCenter().lon).to.equal(0);
|
||||
expect(kibanaMap.getCenter().lat).to.equal(0);
|
||||
|
||||
domNode.style.width = '1024px';
|
||||
domNode.style.height = '1024px';
|
||||
kibanaMap.resize();
|
||||
|
||||
expect(kibanaMap.getCenter().lon).to.equal(0);
|
||||
expect(kibanaMap.getCenter().lat).to.equal(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getBounds', function () {
|
||||
afterEach(function () {
|
||||
kibanaMap.destroy();
|
||||
teardownDOM();
|
||||
});
|
||||
|
||||
describe('extended bounds', function () {
|
||||
beforeEach(async function () {
|
||||
setupDOM('1600px', '1024px');
|
||||
kibanaMap = new KibanaMap(domNode, {
|
||||
minZoom: 1,
|
||||
maxZoom: 10,
|
||||
center: [0, 0],
|
||||
zoom: 2,
|
||||
});
|
||||
});
|
||||
|
||||
it('should get untrimmed map bounds', function () {
|
||||
const bounds = kibanaMap.getBounds();
|
||||
expect(bounds.bottom_right.lon.toFixed(2)).to.equal('281.25');
|
||||
expect(bounds.top_left.lon.toFixed(2)).to.equal('-281.25');
|
||||
});
|
||||
});
|
||||
|
||||
describe('no map height (should default to size of 1px for height)', function () {
|
||||
beforeEach(async function () {
|
||||
setupDOM('386px', '256px');
|
||||
const noHeightNode = createDiv('386px', '0px');
|
||||
domNode.appendChild(noHeightNode);
|
||||
kibanaMap = new KibanaMap(noHeightNode, {
|
||||
minZoom: 1,
|
||||
maxZoom: 10,
|
||||
center: [0, 0],
|
||||
zoom: 10,
|
||||
});
|
||||
});
|
||||
|
||||
it('should calculate map dimensions based on enforcement of single pixel min-width CSS-rule', function () {
|
||||
const bounds = kibanaMap.getBounds();
|
||||
expect(bounds).to.have.property('bottom_right');
|
||||
expect(round(bounds.bottom_right.lon, 2)).to.equal(0.27);
|
||||
expect(round(bounds.bottom_right.lat, 2)).to.equal(0);
|
||||
expect(bounds).to.have.property('top_left');
|
||||
expect(round(bounds.top_left.lon, 2)).to.equal(-0.27);
|
||||
expect(round(bounds.top_left.lat, 2)).to.equal(0);
|
||||
});
|
||||
|
||||
function round(num, dig) {
|
||||
return Math.round(num * Math.pow(10, dig)) / Math.pow(10, dig);
|
||||
}
|
||||
});
|
||||
|
||||
describe('no map width (should default to size of 1px for width)', function () {
|
||||
beforeEach(async function () {
|
||||
setupDOM('386px', '256px');
|
||||
const noWidthNode = createDiv('0px', '256px');
|
||||
domNode.appendChild(noWidthNode);
|
||||
kibanaMap = new KibanaMap(noWidthNode, {
|
||||
minZoom: 1,
|
||||
maxZoom: 10,
|
||||
center: [0, 0],
|
||||
zoom: 10,
|
||||
});
|
||||
});
|
||||
|
||||
it('should calculate map dimensions based on enforcement of single pixel min-width CSS-rule', function () {
|
||||
const bounds = kibanaMap.getBounds();
|
||||
expect(bounds).to.have.property('bottom_right');
|
||||
expect(Math.round(bounds.bottom_right.lon)).to.equal(0);
|
||||
expect(bounds.bottom_right.lat.toFixed(2)).to.equal('-0.18');
|
||||
expect(bounds).to.have.property('top_left');
|
||||
expect(Math.round(bounds.top_left.lon)).to.equal(0);
|
||||
expect(bounds.top_left.lat.toFixed(2)).to.equal('0.18');
|
||||
});
|
||||
});
|
||||
|
||||
describe('wrapping', function () {
|
||||
beforeEach(async function () {
|
||||
setupDOM('1600px', '1024px');
|
||||
kibanaMap = new KibanaMap(domNode, {
|
||||
minZoom: 1,
|
||||
maxZoom: 10,
|
||||
center: [0, -800], //swing the map over two earth-rotations west
|
||||
zoom: 2,
|
||||
});
|
||||
});
|
||||
|
||||
it('coordinates should be corrected to center the -180,180 range', function () {
|
||||
const bounds = kibanaMap.getBounds();
|
||||
expect(bounds.bottom_right.lon.toFixed(2)).to.equal('201.09');
|
||||
expect(bounds.top_left.lon.toFixed(2)).to.equal('-361.41');
|
||||
});
|
||||
});
|
||||
|
||||
describe('wrapping - zoomed in', function () {
|
||||
beforeEach(async function () {
|
||||
setupDOM('1600px', '1024px');
|
||||
kibanaMap = new KibanaMap(domNode, {
|
||||
minZoom: 1,
|
||||
maxZoom: 10,
|
||||
center: [0, -800], //swing the map over two earth-rotations west
|
||||
zoom: 8,
|
||||
});
|
||||
});
|
||||
|
||||
it('coordinates should be corrected to fall within the -180,180 range', function () {
|
||||
const bounds = kibanaMap.getBounds();
|
||||
expect(bounds.bottom_right.lon.toFixed(2)).to.equal('-75.61');
|
||||
expect(bounds.top_left.lon.toFixed(2)).to.equal('-84.40');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('KibanaMap - attributions', function () {
|
||||
beforeEach(async function () {
|
||||
setupDOM('512px', '512px');
|
||||
kibanaMap = new KibanaMap(domNode, {
|
||||
minZoom: 1,
|
||||
maxZoom: 10,
|
||||
center: [0, 0],
|
||||
zoom: 0,
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
kibanaMap.destroy();
|
||||
teardownDOM();
|
||||
});
|
||||
|
||||
function makeMockLayer(attribution) {
|
||||
const layer = new KibanaMapLayer();
|
||||
layer._attribution = attribution;
|
||||
// eslint-disable-next-line no-undef
|
||||
layer._leafletLayer = L.geoJson(null);
|
||||
return layer;
|
||||
}
|
||||
|
||||
it('should update attributions correctly', function () {
|
||||
kibanaMap.addLayer(makeMockLayer('foo|bar'));
|
||||
expect(domNode.querySelectorAll('.leaflet-control-attribution')[0].innerHTML).to.equal(
|
||||
'foo, bar'
|
||||
);
|
||||
|
||||
kibanaMap.addLayer(makeMockLayer('bar'));
|
||||
expect(domNode.querySelectorAll('.leaflet-control-attribution')[0].innerHTML).to.equal(
|
||||
'foo, bar'
|
||||
);
|
||||
|
||||
const layer = makeMockLayer('bar,stool');
|
||||
kibanaMap.addLayer(layer);
|
||||
expect(domNode.querySelectorAll('.leaflet-control-attribution')[0].innerHTML).to.equal(
|
||||
'foo, bar, stool'
|
||||
);
|
||||
|
||||
kibanaMap.removeLayer(layer);
|
||||
expect(domNode.querySelectorAll('.leaflet-control-attribution')[0].innerHTML).to.equal(
|
||||
'foo, bar'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('KibanaMap - baseLayer', function () {
|
||||
beforeEach(async function () {
|
||||
setupDOM('512px', '512px');
|
||||
kibanaMap = new KibanaMap(domNode, {
|
||||
minZoom: 1,
|
||||
maxZoom: 10,
|
||||
center: [0, 0],
|
||||
zoom: 0,
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
kibanaMap.destroy();
|
||||
teardownDOM();
|
||||
});
|
||||
|
||||
it('TMS', async function () {
|
||||
const options = {
|
||||
url:
|
||||
'https://tiles-stage.elastic.co/v2/default/{z}/{x}/{y}.png?elastic_tile_service_tos=agree&my_app_name=kibana',
|
||||
minZoom: 0,
|
||||
maxZoom: 12,
|
||||
attribution: '© [Elastic Maps Service](https://www.elastic.co/elastic-maps-service)',
|
||||
};
|
||||
|
||||
return new Promise(function (resolve) {
|
||||
kibanaMap.on('baseLayer:loaded', () => {
|
||||
resolve();
|
||||
});
|
||||
kibanaMap.setBaseLayer({
|
||||
baseLayerType: 'tms',
|
||||
options: options,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('WMS - should handle empty settings', async function () {
|
||||
const invalidOptions = {
|
||||
url: undefined,
|
||||
version: undefined,
|
||||
layers: undefined,
|
||||
format: 'image/png',
|
||||
transparent: true,
|
||||
attribution: undefined,
|
||||
styles: '',
|
||||
minZoom: 1,
|
||||
maxZoom: 18,
|
||||
};
|
||||
|
||||
kibanaMap.setBaseLayer({
|
||||
baseLayerType: 'wms',
|
||||
options: invalidOptions,
|
||||
});
|
||||
|
||||
expect(kibanaMap.getLeafletBaseLayer()).to.eql(null);
|
||||
});
|
||||
|
||||
it('WMS - should clean attribution', async function () {
|
||||
const options = {
|
||||
url: 'https://basemap.nationalmap.gov/arcgis/services/USGSTopo/MapServer/WMSServer',
|
||||
version: '1.1.0',
|
||||
layers: '0',
|
||||
format: 'image/png',
|
||||
transparent: true,
|
||||
attribution: '<div>foobar</div>',
|
||||
styles: '',
|
||||
minZoom: 1,
|
||||
maxZoom: 18,
|
||||
};
|
||||
|
||||
kibanaMap.setBaseLayer({
|
||||
baseLayerType: 'wms',
|
||||
options: options,
|
||||
});
|
||||
|
||||
expect(domNode.querySelectorAll('.leaflet-control-attribution')[0].innerHTML).to.equal(
|
||||
'<div>foobar</div>'
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 123 KiB |
|
|
@ -1,417 +0,0 @@
|
|||
/*
|
||||
* Licensed to Elasticsearch B.V. under one or more contributor
|
||||
* license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright
|
||||
* ownership. Elasticsearch B.V. licenses this file to you under
|
||||
* the Apache License, Version 2.0 (the "License"); you may
|
||||
* not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import expect from '@kbn/expect';
|
||||
import ngMock from 'ng_mock';
|
||||
import _ from 'lodash';
|
||||
|
||||
import ChoroplethLayer from '../choropleth_layer';
|
||||
import { ImageComparator } from 'test_utils/image_comparator';
|
||||
import worldJson from './world.json';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import EMS_CATALOGUE from '../../../maps_legacy/public/__tests__/map/ems_mocks/sample_manifest.json';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import EMS_FILES from '../../../maps_legacy/public/__tests__/map/ems_mocks/sample_files.json';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import EMS_TILES from '../../../maps_legacy/public/__tests__/map/ems_mocks/sample_tiles.json';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import EMS_STYLE_ROAD_MAP_BRIGHT from '../../../maps_legacy/public/__tests__/map/ems_mocks/sample_style_bright';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import EMS_STYLE_ROAD_MAP_DESATURATED from '../../../maps_legacy/public/__tests__/map/ems_mocks/sample_style_desaturated';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import EMS_STYLE_DARK_MAP from '../../../maps_legacy/public/__tests__/map/ems_mocks/sample_style_dark';
|
||||
|
||||
import initialPng from './initial.png';
|
||||
import toiso3Png from './toiso3.png';
|
||||
import afterresizePng from './afterresize.png';
|
||||
import afterdatachangePng from './afterdatachange.png';
|
||||
import afterdatachangeandresizePng from './afterdatachangeandresize.png';
|
||||
import aftercolorchangePng from './aftercolorchange.png';
|
||||
import changestartupPng from './changestartup.png';
|
||||
|
||||
import { createRegionMapVisualization } from '../region_map_visualization';
|
||||
import { createRegionMapTypeDefinition } from '../region_map_type';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import { ExprVis } from '../../../visualizations/public/expressions/vis';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import { BaseVisType } from '../../../visualizations/public/vis_types/base_vis_type';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import { ServiceSettings } from '../../../maps_legacy/public/map/service_settings';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import { BaseMapsVisualizationProvider } from '../../../maps_legacy/public/map/base_maps_visualization';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import { KibanaMap } from '../../../maps_legacy/public/map/kibana_map';
|
||||
|
||||
const THRESHOLD = 0.45;
|
||||
const PIXEL_DIFF = 96;
|
||||
|
||||
describe('RegionMapsVisualizationTests', function () {
|
||||
let domNode;
|
||||
let RegionMapsVisualization;
|
||||
let vis;
|
||||
let regionMapVisType;
|
||||
let dependencies;
|
||||
|
||||
let imageComparator;
|
||||
|
||||
const _makeJsonAjaxCallOld = ChoroplethLayer.prototype._makeJsonAjaxCall;
|
||||
|
||||
const dummyTableGroup = {
|
||||
columns: [
|
||||
{
|
||||
id: 'col-0',
|
||||
aggConfig: {
|
||||
id: '2',
|
||||
enabled: true,
|
||||
type: 'terms',
|
||||
schema: 'segment',
|
||||
params: { field: 'geo.dest', size: 5, order: 'desc', orderBy: '1' },
|
||||
},
|
||||
title: 'geo.dest: Descending',
|
||||
},
|
||||
{
|
||||
id: 'col-1',
|
||||
aggConfig: { id: '1', enabled: true, type: 'count', schema: 'metric', params: {} },
|
||||
title: 'Count',
|
||||
},
|
||||
],
|
||||
rows: [
|
||||
{ 'col-0': 'CN', 'col-1': 26 },
|
||||
{ 'col-0': 'IN', 'col-1': 17 },
|
||||
{ 'col-0': 'US', 'col-1': 6 },
|
||||
{ 'col-0': 'DE', 'col-1': 4 },
|
||||
{ 'col-0': 'BR', 'col-1': 3 },
|
||||
],
|
||||
};
|
||||
|
||||
beforeEach(ngMock.module('kibana'));
|
||||
|
||||
let getManifestStub;
|
||||
beforeEach(
|
||||
ngMock.inject(() => {
|
||||
const mapConfig = {
|
||||
emsFileApiUrl: '',
|
||||
emsTileApiUrl: '',
|
||||
emsLandingPageUrl: '',
|
||||
};
|
||||
const tilemapsConfig = {
|
||||
options: {
|
||||
attribution: '123',
|
||||
},
|
||||
};
|
||||
const serviceSettings = new ServiceSettings(mapConfig, tilemapsConfig);
|
||||
const regionmapsConfig = {
|
||||
includeElasticMapsService: true,
|
||||
layers: [],
|
||||
};
|
||||
const coreSetupMock = {
|
||||
notifications: {
|
||||
toasts: {},
|
||||
},
|
||||
uiSettings: {
|
||||
get: () => {},
|
||||
},
|
||||
injectedMetadata: {
|
||||
getInjectedVar: () => {},
|
||||
},
|
||||
};
|
||||
const BaseMapsVisualization = new BaseMapsVisualizationProvider(
|
||||
(...args) => new KibanaMap(...args),
|
||||
serviceSettings
|
||||
);
|
||||
|
||||
dependencies = {
|
||||
serviceSettings,
|
||||
regionmapsConfig,
|
||||
uiSettings: coreSetupMock.uiSettings,
|
||||
BaseMapsVisualization,
|
||||
};
|
||||
|
||||
regionMapVisType = new BaseVisType(createRegionMapTypeDefinition(dependencies));
|
||||
RegionMapsVisualization = createRegionMapVisualization(dependencies);
|
||||
|
||||
ChoroplethLayer.prototype._makeJsonAjaxCall = async function () {
|
||||
//simulate network call
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(worldJson);
|
||||
}, 10);
|
||||
});
|
||||
};
|
||||
|
||||
getManifestStub = serviceSettings.__debugStubManifestCalls(async (url) => {
|
||||
//simulate network calls
|
||||
if (url.startsWith('https://foobar')) {
|
||||
return EMS_CATALOGUE;
|
||||
} else if (url.startsWith('https://tiles.foobar')) {
|
||||
return EMS_TILES;
|
||||
} else if (url.startsWith('https://files.foobar')) {
|
||||
return EMS_FILES;
|
||||
} else if (url.startsWith('https://raster-style.foobar')) {
|
||||
if (url.includes('osm-bright-desaturated')) {
|
||||
return EMS_STYLE_ROAD_MAP_DESATURATED;
|
||||
} else if (url.includes('osm-bright')) {
|
||||
return EMS_STYLE_ROAD_MAP_BRIGHT;
|
||||
} else if (url.includes('dark-matter')) {
|
||||
return EMS_STYLE_DARK_MAP;
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
);
|
||||
|
||||
afterEach(function () {
|
||||
ChoroplethLayer.prototype._makeJsonAjaxCall = _makeJsonAjaxCallOld;
|
||||
getManifestStub.removeStub();
|
||||
});
|
||||
|
||||
describe('RegionMapVisualization - basics', function () {
|
||||
beforeEach(async function () {
|
||||
setupDOM('512px', '512px');
|
||||
|
||||
imageComparator = new ImageComparator();
|
||||
|
||||
vis = new ExprVis({
|
||||
type: regionMapVisType,
|
||||
});
|
||||
|
||||
vis.params.bucket = {
|
||||
accessor: 0,
|
||||
};
|
||||
vis.params.metric = {
|
||||
accessor: 1,
|
||||
};
|
||||
|
||||
vis.params.selectedJoinField = { name: 'iso2', description: 'Two letter abbreviation' };
|
||||
vis.params.selectedLayer = {
|
||||
attribution:
|
||||
'<p><a href="http://www.naturalearthdata.com/about/terms-of-use">Made with NaturalEarth</a> | <a href="https://www.elastic.co/elastic-maps-service">Elastic Maps Service</a></p> ',
|
||||
name: 'World Countries',
|
||||
format: 'geojson',
|
||||
url:
|
||||
'https://vector-staging.maps.elastic.co/blob/5715999101812736?elastic_tile_service_tos=agree&my_app_version=7.0.0-alpha1',
|
||||
fields: [
|
||||
{ name: 'iso2', description: 'Two letter abbreviation' },
|
||||
{
|
||||
name: 'iso3',
|
||||
description: 'Three letter abbreviation',
|
||||
},
|
||||
{ name: 'name', description: 'Country name' },
|
||||
],
|
||||
created_at: '2017-07-31T16:00:19.996450',
|
||||
id: 5715999101812736,
|
||||
layerId: 'elastic_maps_service.World Countries',
|
||||
};
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
teardownDOM();
|
||||
imageComparator.destroy();
|
||||
});
|
||||
|
||||
it('should instantiate at zoom level 2 (may fail in dev env)', async function () {
|
||||
const regionMapsVisualization = new RegionMapsVisualization(domNode, vis);
|
||||
await regionMapsVisualization.render(dummyTableGroup, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: true,
|
||||
data: true,
|
||||
uiState: false,
|
||||
});
|
||||
const mismatchedPixels = await compareImage(initialPng);
|
||||
regionMapsVisualization.destroy();
|
||||
expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF);
|
||||
});
|
||||
|
||||
it('should update after resetting join field', async function () {
|
||||
const regionMapsVisualization = new RegionMapsVisualization(domNode, vis);
|
||||
await regionMapsVisualization.render(dummyTableGroup, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: true,
|
||||
data: true,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
//this will actually create an empty image
|
||||
vis.params.selectedJoinField = { name: 'iso3', description: 'Three letter abbreviation' };
|
||||
vis.params.isDisplayWarning = false; //so we don't get notifications
|
||||
await regionMapsVisualization.render(dummyTableGroup, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: false,
|
||||
data: false,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
const mismatchedPixels = await compareImage(toiso3Png);
|
||||
regionMapsVisualization.destroy();
|
||||
expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF);
|
||||
});
|
||||
|
||||
it('should resize (may fail in dev env)', async function () {
|
||||
const regionMapsVisualization = new RegionMapsVisualization(domNode, vis);
|
||||
await regionMapsVisualization.render(dummyTableGroup, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: true,
|
||||
data: true,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
domNode.style.width = '256px';
|
||||
domNode.style.height = '128px';
|
||||
await regionMapsVisualization.render(dummyTableGroup, vis.params, {
|
||||
resize: true,
|
||||
params: false,
|
||||
aggs: false,
|
||||
data: false,
|
||||
uiState: false,
|
||||
});
|
||||
const mismatchedPixelsAfterFirstResize = await compareImage(afterresizePng);
|
||||
|
||||
domNode.style.width = '512px';
|
||||
domNode.style.height = '512px';
|
||||
await regionMapsVisualization.render(dummyTableGroup, vis.params, {
|
||||
resize: true,
|
||||
params: false,
|
||||
aggs: false,
|
||||
data: false,
|
||||
uiState: false,
|
||||
});
|
||||
const mismatchedPixelsAfterSecondResize = await compareImage(initialPng);
|
||||
|
||||
regionMapsVisualization.destroy();
|
||||
expect(mismatchedPixelsAfterFirstResize).to.be.lessThan(PIXEL_DIFF);
|
||||
expect(mismatchedPixelsAfterSecondResize).to.be.lessThan(PIXEL_DIFF);
|
||||
});
|
||||
|
||||
it('should redo data (may fail in dev env)', async function () {
|
||||
const regionMapsVisualization = new RegionMapsVisualization(domNode, vis);
|
||||
await regionMapsVisualization.render(dummyTableGroup, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: true,
|
||||
data: true,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
const newTableGroup = _.cloneDeep(dummyTableGroup);
|
||||
|
||||
newTableGroup.rows.pop(); //remove one shape
|
||||
|
||||
await regionMapsVisualization.render(newTableGroup, vis.params, {
|
||||
resize: false,
|
||||
params: false,
|
||||
aggs: false,
|
||||
data: true,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
const mismatchedPixelsAfterDataChange = await compareImage(afterdatachangePng);
|
||||
const anotherTableGroup = _.cloneDeep(newTableGroup);
|
||||
|
||||
anotherTableGroup.rows.pop(); //remove one shape
|
||||
domNode.style.width = '412px';
|
||||
domNode.style.height = '112px';
|
||||
await regionMapsVisualization.render(anotherTableGroup, vis.params, {
|
||||
resize: true,
|
||||
params: false,
|
||||
aggs: false,
|
||||
data: true,
|
||||
uiState: false,
|
||||
});
|
||||
const mismatchedPixelsAfterDataChangeAndResize = await compareImage(
|
||||
afterdatachangeandresizePng
|
||||
);
|
||||
|
||||
regionMapsVisualization.destroy();
|
||||
expect(mismatchedPixelsAfterDataChange).to.be.lessThan(PIXEL_DIFF);
|
||||
expect(mismatchedPixelsAfterDataChangeAndResize).to.be.lessThan(PIXEL_DIFF);
|
||||
});
|
||||
|
||||
it('should redo data and color ramp (may fail in dev env)', async function () {
|
||||
const regionMapsVisualization = new RegionMapsVisualization(domNode, vis);
|
||||
await regionMapsVisualization.render(dummyTableGroup, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: true,
|
||||
data: true,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
const newTableGroup = _.cloneDeep(dummyTableGroup);
|
||||
newTableGroup.rows.pop(); //remove one shape
|
||||
vis.params.colorSchema = 'Blues';
|
||||
await regionMapsVisualization.render(newTableGroup, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: false,
|
||||
data: true,
|
||||
uiState: false,
|
||||
});
|
||||
const mismatchedPixelsAfterDataAndColorChange = await compareImage(aftercolorchangePng);
|
||||
|
||||
regionMapsVisualization.destroy();
|
||||
expect(mismatchedPixelsAfterDataAndColorChange).to.be.lessThan(PIXEL_DIFF);
|
||||
});
|
||||
|
||||
it('should zoom and center elsewhere', async function () {
|
||||
vis.params.mapZoom = 4;
|
||||
vis.params.mapCenter = [36, -85];
|
||||
const regionMapsVisualization = new RegionMapsVisualization(domNode, vis);
|
||||
await regionMapsVisualization.render(dummyTableGroup, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: true,
|
||||
data: true,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
const mismatchedPixels = await compareImage(changestartupPng);
|
||||
regionMapsVisualization.destroy();
|
||||
|
||||
expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF);
|
||||
});
|
||||
});
|
||||
|
||||
async function compareImage(expectedImageSource) {
|
||||
const elementList = domNode.querySelectorAll('canvas');
|
||||
expect(elementList.length).to.equal(1);
|
||||
const firstCanvasOnMap = elementList[0];
|
||||
return imageComparator.compareImage(firstCanvasOnMap, expectedImageSource, THRESHOLD);
|
||||
}
|
||||
|
||||
function setupDOM(width, height) {
|
||||
domNode = document.createElement('div');
|
||||
domNode.style.top = '0';
|
||||
domNode.style.left = '0';
|
||||
domNode.style.width = width;
|
||||
domNode.style.height = height;
|
||||
domNode.style.position = 'fixed';
|
||||
domNode.style.border = '1px solid blue';
|
||||
domNode.style['pointer-events'] = 'none';
|
||||
document.body.appendChild(domNode);
|
||||
}
|
||||
|
||||
function teardownDOM() {
|
||||
domNode.innerHTML = '';
|
||||
document.body.removeChild(domNode);
|
||||
}
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 119 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
|
|
@ -1,356 +0,0 @@
|
|||
/*
|
||||
* Licensed to Elasticsearch B.V. under one or more contributor
|
||||
* license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright
|
||||
* ownership. Elasticsearch B.V. licenses this file to you under
|
||||
* the Apache License, Version 2.0 (the "License"); you may
|
||||
* not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import expect from '@kbn/expect';
|
||||
import ngMock from 'ng_mock';
|
||||
import { ImageComparator } from 'test_utils/image_comparator';
|
||||
import dummyESResponse from './dummy_es_response.json';
|
||||
import initial from './initial.png';
|
||||
import blues from './blues.png';
|
||||
import shadedGeohashGrid from './shaded_geohash_grid.png';
|
||||
import heatmapRaw from './heatmap_raw.png';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import EMS_CATALOGUE from '../../../maps_legacy/public/__tests__/map/ems_mocks/sample_manifest.json';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import EMS_FILES from '../../../maps_legacy/public/__tests__/map/ems_mocks/sample_files.json';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import EMS_TILES from '../../../maps_legacy/public/__tests__/map/ems_mocks/sample_tiles.json';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import EMS_STYLE_ROAD_MAP_BRIGHT from '../../../maps_legacy/public/__tests__/map/ems_mocks/sample_style_bright';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import EMS_STYLE_ROAD_MAP_DESATURATED from '../../../maps_legacy/public/__tests__/map/ems_mocks/sample_style_desaturated';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import EMS_STYLE_DARK_MAP from '../../../maps_legacy/public/__tests__/map/ems_mocks/sample_style_dark';
|
||||
|
||||
import { createTileMapVisualization } from '../tile_map_visualization';
|
||||
import { createTileMapTypeDefinition } from '../tile_map_type';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import { ExprVis } from '../../../visualizations/public/expressions/vis';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import { BaseVisType } from '../../../visualizations/public/vis_types/base_vis_type';
|
||||
import {
|
||||
getPrecision,
|
||||
getZoomPrecision,
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
} from '../../../maps_legacy/public/map/precision';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import { ServiceSettings } from '../../../maps_legacy/public/map/service_settings';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import { KibanaMap } from '../../../maps_legacy/public/map/kibana_map';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import { BaseMapsVisualizationProvider } from '../../../maps_legacy/public/map/base_maps_visualization';
|
||||
|
||||
function mockRawData() {
|
||||
const stack = [dummyESResponse];
|
||||
let node;
|
||||
do {
|
||||
node = stack.pop();
|
||||
if (typeof node === 'object') {
|
||||
// eslint-disable-next-line guard-for-in
|
||||
for (const key in node) {
|
||||
if (node.hasOwnProperty(key)) {
|
||||
if (key === 'aggConfig') {
|
||||
node[key].makeLabel = () => 'foobar';
|
||||
}
|
||||
}
|
||||
stack.push(node[key]);
|
||||
}
|
||||
}
|
||||
} while (stack.length);
|
||||
}
|
||||
mockRawData();
|
||||
|
||||
const THRESHOLD = 0.45;
|
||||
const PIXEL_DIFF = 64;
|
||||
|
||||
describe('CoordinateMapsVisualizationTest', function () {
|
||||
let domNode;
|
||||
let CoordinateMapsVisualization;
|
||||
let vis;
|
||||
let dependencies;
|
||||
let visType;
|
||||
|
||||
let imageComparator;
|
||||
|
||||
let getManifestStub;
|
||||
beforeEach(ngMock.module('kibana'));
|
||||
beforeEach(
|
||||
ngMock.inject((Private, $injector) => {
|
||||
const mapConfig = {
|
||||
emsFileApiUrl: '',
|
||||
emsTileApiUrl: '',
|
||||
emsLandingPageUrl: '',
|
||||
};
|
||||
const tilemapsConfig = {
|
||||
options: {
|
||||
attribution: '123',
|
||||
},
|
||||
};
|
||||
|
||||
const serviceSettings = new ServiceSettings(mapConfig, tilemapsConfig);
|
||||
const BaseMapsVisualization = new BaseMapsVisualizationProvider(
|
||||
(...args) => new KibanaMap(...args),
|
||||
serviceSettings
|
||||
);
|
||||
const uiSettings = $injector.get('config');
|
||||
|
||||
dependencies = {
|
||||
getZoomPrecision,
|
||||
getPrecision,
|
||||
BaseMapsVisualization,
|
||||
uiSettings,
|
||||
serviceSettings,
|
||||
};
|
||||
|
||||
visType = new BaseVisType(createTileMapTypeDefinition(dependencies));
|
||||
|
||||
CoordinateMapsVisualization = createTileMapVisualization(dependencies);
|
||||
|
||||
getManifestStub = serviceSettings.__debugStubManifestCalls(async (url) => {
|
||||
//simulate network calls
|
||||
if (url.startsWith('https://foobar')) {
|
||||
return EMS_CATALOGUE;
|
||||
} else if (url.startsWith('https://tiles.foobar')) {
|
||||
return EMS_TILES;
|
||||
} else if (url.startsWith('https://files.foobar')) {
|
||||
return EMS_FILES;
|
||||
} else if (url.startsWith('https://raster-style.foobar')) {
|
||||
if (url.includes('osm-bright-desaturated')) {
|
||||
return EMS_STYLE_ROAD_MAP_DESATURATED;
|
||||
} else if (url.includes('osm-bright')) {
|
||||
return EMS_STYLE_ROAD_MAP_BRIGHT;
|
||||
} else if (url.includes('dark-matter')) {
|
||||
return EMS_STYLE_DARK_MAP;
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
);
|
||||
|
||||
afterEach(() => {
|
||||
getManifestStub.removeStub();
|
||||
});
|
||||
|
||||
describe('CoordinateMapsVisualization - basics', function () {
|
||||
beforeEach(async function () {
|
||||
setupDOM('512px', '512px');
|
||||
|
||||
imageComparator = new ImageComparator();
|
||||
vis = new ExprVis({
|
||||
type: visType,
|
||||
});
|
||||
vis.params = {
|
||||
mapType: 'Scaled Circle Markers',
|
||||
isDesaturated: true,
|
||||
addTooltip: true,
|
||||
heatClusterSize: 1.5,
|
||||
legendPosition: 'bottomright',
|
||||
mapZoom: 2,
|
||||
mapCenter: [0, 0],
|
||||
dimensions: {
|
||||
metric: {
|
||||
accessor: 1,
|
||||
label: 'test',
|
||||
format: { id: 'string' },
|
||||
},
|
||||
bucket: {
|
||||
accessor: 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
const mockAggs = {
|
||||
byType: (type) => {
|
||||
return mockAggs.aggs.find((agg) => agg.type.type === type);
|
||||
},
|
||||
aggs: [
|
||||
{
|
||||
type: {
|
||||
type: 'metrics',
|
||||
},
|
||||
fieldFormatter: (x) => {
|
||||
return x;
|
||||
},
|
||||
makeLabel: () => {
|
||||
return 'foobar';
|
||||
},
|
||||
},
|
||||
{
|
||||
type: {
|
||||
type: 'buckets',
|
||||
},
|
||||
params: { useGeoCentroid: true },
|
||||
},
|
||||
],
|
||||
};
|
||||
vis.getAggConfig = function () {
|
||||
return mockAggs;
|
||||
};
|
||||
vis.aggs = mockAggs;
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
teardownDOM();
|
||||
imageComparator.destroy();
|
||||
});
|
||||
|
||||
it('should initialize OK (may fail in dev env)', async function () {
|
||||
const coordinateMapVisualization = new CoordinateMapsVisualization(domNode, vis);
|
||||
await coordinateMapVisualization.render(dummyESResponse, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: true,
|
||||
data: true,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
const mismatchedPixels = await compareImage(initial, 0);
|
||||
coordinateMapVisualization.destroy();
|
||||
expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF);
|
||||
});
|
||||
|
||||
it('should toggle to Heatmap OK', async function () {
|
||||
const coordinateMapVisualization = new CoordinateMapsVisualization(domNode, vis);
|
||||
await coordinateMapVisualization.render(dummyESResponse, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: true,
|
||||
data: true,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
vis.params.mapType = 'Heatmap';
|
||||
await coordinateMapVisualization.render(dummyESResponse, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: false,
|
||||
data: false,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
const mismatchedPixels = await compareImage(heatmapRaw, 1);
|
||||
coordinateMapVisualization.destroy();
|
||||
expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF);
|
||||
});
|
||||
|
||||
it('should toggle back&forth OK between mapTypes (may fail in dev env)', async function () {
|
||||
const coordinateMapVisualization = new CoordinateMapsVisualization(domNode, vis);
|
||||
await coordinateMapVisualization.render(dummyESResponse, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: true,
|
||||
data: true,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
vis.params.mapType = 'Heatmap';
|
||||
await coordinateMapVisualization.render(dummyESResponse, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: false,
|
||||
data: false,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
vis.params.mapType = 'Scaled Circle Markers';
|
||||
await coordinateMapVisualization.render(dummyESResponse, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: false,
|
||||
data: false,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
const mismatchedPixels = await compareImage(initial, 0);
|
||||
coordinateMapVisualization.destroy();
|
||||
expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF);
|
||||
});
|
||||
|
||||
it('should toggle to different color schema ok (may fail in dev env)', async function () {
|
||||
const coordinateMapVisualization = new CoordinateMapsVisualization(domNode, vis);
|
||||
await coordinateMapVisualization.render(dummyESResponse, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: true,
|
||||
data: true,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
vis.params.colorSchema = 'Blues';
|
||||
await coordinateMapVisualization.render(dummyESResponse, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: false,
|
||||
data: false,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
const mismatchedPixels = await compareImage(blues, 0);
|
||||
coordinateMapVisualization.destroy();
|
||||
expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF);
|
||||
});
|
||||
|
||||
it('should toggle to different color schema and maptypes ok', async function () {
|
||||
const coordinateMapVisualization = new CoordinateMapsVisualization(domNode, vis);
|
||||
await coordinateMapVisualization.render(dummyESResponse, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: true,
|
||||
data: true,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
vis.params.colorSchema = 'Greens';
|
||||
vis.params.mapType = 'Shaded Geohash Grid';
|
||||
await coordinateMapVisualization.render(dummyESResponse, vis.params, {
|
||||
resize: false,
|
||||
params: true,
|
||||
aggs: false,
|
||||
data: false,
|
||||
uiState: false,
|
||||
});
|
||||
|
||||
const mismatchedPixels = await compareImage(shadedGeohashGrid, 0);
|
||||
coordinateMapVisualization.destroy();
|
||||
expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF);
|
||||
});
|
||||
});
|
||||
|
||||
async function compareImage(expectedImageSource, index) {
|
||||
const elementList = domNode.querySelectorAll('canvas');
|
||||
const firstCanvasOnMap = elementList[index];
|
||||
return imageComparator.compareImage(firstCanvasOnMap, expectedImageSource, THRESHOLD);
|
||||
}
|
||||
|
||||
function setupDOM(width, height) {
|
||||
domNode = document.createElement('div');
|
||||
domNode.style.top = '0';
|
||||
domNode.style.left = '0';
|
||||
domNode.style.width = width;
|
||||
domNode.style.height = height;
|
||||
domNode.style.position = 'fixed';
|
||||
domNode.style.border = '1px solid blue';
|
||||
domNode.style['pointer-events'] = 'none';
|
||||
document.body.appendChild(domNode);
|
||||
}
|
||||
|
||||
function teardownDOM() {
|
||||
domNode.innerHTML = '';
|
||||
document.body.removeChild(domNode);
|
||||
}
|
||||
});
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,160 +0,0 @@
|
|||
/*
|
||||
* Licensed to Elasticsearch B.V. under one or more contributor
|
||||
* license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright
|
||||
* ownership. Elasticsearch B.V. licenses this file to you under
|
||||
* the Apache License, Version 2.0 (the "License"); you may
|
||||
* not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import expect from '@kbn/expect';
|
||||
import { GeohashLayer } from '../geohash_layer';
|
||||
// import heatmapPng from './heatmap.png';
|
||||
import scaledCircleMarkersPng from './scaled_circle_markers.png';
|
||||
// import shadedCircleMarkersPng from './shadedCircleMarkers.png';
|
||||
import { ImageComparator } from 'test_utils/image_comparator';
|
||||
import GeoHashSampleData from './dummy_es_response.json';
|
||||
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
|
||||
import { KibanaMap } from '../../../maps_legacy/public/map/kibana_map';
|
||||
|
||||
describe('geohash_layer', function () {
|
||||
let domNode;
|
||||
let expectCanvas;
|
||||
let kibanaMap;
|
||||
let imageComparator;
|
||||
|
||||
function setupDOM() {
|
||||
domNode = document.createElement('div');
|
||||
domNode.style.top = '0';
|
||||
domNode.style.left = '0';
|
||||
domNode.style.width = '512px';
|
||||
domNode.style.height = '512px';
|
||||
domNode.style.position = 'fixed';
|
||||
domNode.style['pointer-events'] = 'none';
|
||||
document.body.appendChild(domNode);
|
||||
|
||||
expectCanvas = document.createElement('canvas');
|
||||
document.body.appendChild(expectCanvas);
|
||||
}
|
||||
|
||||
function teardownDOM() {
|
||||
domNode.innerHTML = '';
|
||||
document.body.removeChild(domNode);
|
||||
document.body.removeChild(expectCanvas);
|
||||
}
|
||||
|
||||
describe('GeohashGridLayer', function () {
|
||||
beforeEach(async function () {
|
||||
setupDOM();
|
||||
imageComparator = new ImageComparator();
|
||||
kibanaMap = new KibanaMap(domNode, {
|
||||
minZoom: 1,
|
||||
maxZoom: 10,
|
||||
});
|
||||
kibanaMap.setZoomLevel(3);
|
||||
kibanaMap.setCenter({
|
||||
lon: -100,
|
||||
lat: 40,
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
// return;
|
||||
kibanaMap.destroy();
|
||||
teardownDOM();
|
||||
imageComparator.destroy();
|
||||
});
|
||||
|
||||
[
|
||||
{
|
||||
options: { mapType: 'Scaled Circle Markers', colorRamp: 'Yellow to Red' },
|
||||
expected: scaledCircleMarkersPng,
|
||||
},
|
||||
// https://github.com/elastic/kibana/issues/19393
|
||||
// {
|
||||
// options: { mapType: 'Shaded Circle Markers', colorRamp: 'Yellow to Red' },
|
||||
// expected: shadedCircleMarkersPng
|
||||
// },
|
||||
// FAILING: https://github.com/elastic/kibana/issues/33323
|
||||
// {
|
||||
// options: {
|
||||
// mapType: 'Heatmap',
|
||||
// heatmap: {
|
||||
// heatClusterSize: '2'
|
||||
// }
|
||||
// },
|
||||
// expected: heatmapPng
|
||||
// }
|
||||
].forEach(function (test) {
|
||||
it(`${test.options.mapType} (may fail in dev env)`, async function () {
|
||||
const geohashGridOptions = test.options;
|
||||
const geohashLayer = new GeohashLayer(
|
||||
GeoHashSampleData.featureCollection,
|
||||
GeoHashSampleData.meta,
|
||||
geohashGridOptions,
|
||||
kibanaMap.getZoomLevel(),
|
||||
kibanaMap
|
||||
);
|
||||
kibanaMap.addLayer(geohashLayer);
|
||||
|
||||
const elementList = domNode.querySelectorAll('canvas');
|
||||
expect(elementList.length).to.equal(1);
|
||||
const canvas = elementList[0];
|
||||
|
||||
const mismatchedPixels = await imageComparator.compareImage(canvas, test.expected, 0.1);
|
||||
expect(mismatchedPixels).to.be.lessThan(16);
|
||||
});
|
||||
});
|
||||
|
||||
it('should not throw when fitting on empty-data layer', function () {
|
||||
const geohashLayer = new GeohashLayer(
|
||||
{
|
||||
type: 'FeatureCollection',
|
||||
features: [],
|
||||
},
|
||||
{},
|
||||
{ mapType: 'Scaled Circle Markers', colorRamp: 'Yellow to Red' },
|
||||
kibanaMap.getZoomLevel(),
|
||||
kibanaMap
|
||||
);
|
||||
kibanaMap.addLayer(geohashLayer);
|
||||
|
||||
expect(() => {
|
||||
kibanaMap.fitToData();
|
||||
}).to.not.throwException();
|
||||
});
|
||||
|
||||
it('should not throw when resizing to 0 on heatmap', function () {
|
||||
const geohashGridOptions = {
|
||||
mapType: 'Heatmap',
|
||||
heatmap: {
|
||||
heatClusterSize: '2',
|
||||
},
|
||||
};
|
||||
|
||||
const geohashLayer = new GeohashLayer(
|
||||
GeoHashSampleData.featureCollection,
|
||||
GeoHashSampleData.meta,
|
||||
geohashGridOptions,
|
||||
kibanaMap.getZoomLevel(),
|
||||
kibanaMap
|
||||
);
|
||||
kibanaMap.addLayer(geohashLayer);
|
||||
domNode.style.width = 0;
|
||||
domNode.style.height = 0;
|
||||
expect(() => {
|
||||
kibanaMap.resize();
|
||||
}).to.not.throwException();
|
||||
});
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Loading…
Reference in a new issue