mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
Several new TileMap tests for 10 zoom levels, Fit Data Bounds, and save zoom level
This commit is contained in:
LeeDr
parent
a7942b1056
commit
069f335c0b
2 changed files with 318 additions and 27 deletions
|
|
@ -51,33 +51,6 @@ bdd.describe('visualize app', function describeIndexTests() {
|
|||
|
||||
bdd.describe('tile map chart', function indexPatternCreation() {
|
||||
|
||||
bdd.it('should save and load, take screenshot', function pageHeader() {
|
||||
var vizName1 = 'Visualization TileMap';
|
||||
|
||||
return PageObjects.visualize.saveVisualization(vizName1)
|
||||
.then(function (message) {
|
||||
PageObjects.common.debug('Saved viz message = ' + message);
|
||||
expect(message).to.be('Visualization Editor: Saved Visualization \"' + vizName1 + '\"');
|
||||
})
|
||||
.then(function testVisualizeWaitForToastMessageGone() {
|
||||
return PageObjects.visualize.waitForToastMessageGone();
|
||||
})
|
||||
.then(function () {
|
||||
return PageObjects.visualize.loadSavedVisualization(vizName1);
|
||||
})
|
||||
.then(function waitForVisualization() {
|
||||
return PageObjects.visualize.waitForVisualization();
|
||||
})
|
||||
// sleep a bit before taking the screenshot or it won't show data
|
||||
.then(function sleep() {
|
||||
return PageObjects.common.sleep(4000);
|
||||
})
|
||||
.then(function takeScreenshot() {
|
||||
PageObjects.common.debug('Take screenshot');
|
||||
PageObjects.common.saveScreenshot('Visualize-site-map');
|
||||
});
|
||||
});
|
||||
|
||||
bdd.it('should show correct tile map data', function pageHeader() {
|
||||
var expectedTableData = [ 'dn 1,429', 'dp 1,418', '9y 1,215', '9z 1,099', 'dr 1,076',
|
||||
'dj 982', '9v 938', '9q 722', '9w 475', 'cb 457', 'c2 453', '9x 420', 'dq 399',
|
||||
|
|
@ -96,8 +69,240 @@ bdd.describe('visualize app', function describeIndexTests() {
|
|||
.then(function showData(data) {
|
||||
PageObjects.common.debug(data.split('\n'));
|
||||
expect(data.trim().split('\n')).to.eql(expectedTableData);
|
||||
return PageObjects.visualize.collapseChart();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
bdd.it('should zoom out to level 1 from default level 2', function pageHeader() {
|
||||
var expectedPrecision2Circles = [ { color: '#750000', radius: 48 },
|
||||
{ color: '#750000', radius: 48 },
|
||||
{ color: '#750000', radius: 44 },
|
||||
{ color: '#a40000', radius: 42 },
|
||||
{ color: '#a40000', radius: 42 },
|
||||
{ color: '#a40000', radius: 40 },
|
||||
{ color: '#a40000', radius: 39 },
|
||||
{ color: '#b45100', radius: 34 },
|
||||
{ color: '#b67501', radius: 28 },
|
||||
{ color: '#b67501', radius: 27 },
|
||||
{ color: '#b67501', radius: 27 },
|
||||
{ color: '#b67501', radius: 26 },
|
||||
{ color: '#b67501', radius: 25 },
|
||||
{ color: '#b67501', radius: 25 },
|
||||
{ color: '#b99939', radius: 21 },
|
||||
{ color: '#b99939', radius: 21 },
|
||||
{ color: '#b99939', radius: 19 },
|
||||
{ color: '#b99939', radius: 18 },
|
||||
{ color: '#b99939', radius: 18 },
|
||||
{ color: '#b99939', radius: 16 },
|
||||
{ color: '#b99939', radius: 15 },
|
||||
{ color: '#b99939', radius: 14 },
|
||||
{ color: '#b99939', radius: 14 },
|
||||
{ color: '#b99939', radius: 12 },
|
||||
{ color: '#b99939', radius: 11 },
|
||||
{ color: '#b99939', radius: 11 },
|
||||
{ color: '#b99939', radius: 11 },
|
||||
{ color: '#b99939', radius: 10 },
|
||||
{ color: '#b99939', radius: 9 },
|
||||
{ color: '#b99939', radius: 9 },
|
||||
{ color: '#b99939', radius: 9 },
|
||||
{ color: '#b99939', radius: 9 },
|
||||
{ color: '#b99939', radius: 8 },
|
||||
{ color: '#b99939', radius: 8 },
|
||||
{ color: '#b99939', radius: 7 },
|
||||
{ color: '#b99939', radius: 7 },
|
||||
{ color: '#b99939', radius: 6 },
|
||||
{ color: '#b99939', radius: 5 },
|
||||
{ color: '#b99939', radius: 5 },
|
||||
{ color: '#b99939', radius: 5 },
|
||||
{ color: '#b99939', radius: 4 },
|
||||
{ color: '#b99939', radius: 4 },
|
||||
{ color: '#b99939', radius: 4 },
|
||||
{ color: '#b99939', radius: 3 },
|
||||
{ color: '#b99939', radius: 2 },
|
||||
{ color: '#b99939', radius: 2 }
|
||||
];
|
||||
|
||||
return PageObjects.visualize.clickMapZoomOut()
|
||||
.then(function () {
|
||||
return PageObjects.visualize.getMapZoomOutEnabled();
|
||||
})
|
||||
.then(function (enabled) {
|
||||
return PageObjects.visualize.getMapZoomLevel();
|
||||
})
|
||||
// in some cases the mapZoom level isn't in the url :-(
|
||||
// .then(function (level) {
|
||||
// expect(level).to.be('1');
|
||||
// })
|
||||
// but we can tell we're at level 1 because zoom out is disabled
|
||||
.then(function () {
|
||||
return PageObjects.visualize.getMapZoomOutEnabled();
|
||||
})
|
||||
.then(function (enabled) {
|
||||
expect(enabled).to.be(false);
|
||||
})
|
||||
.then(function () {
|
||||
return PageObjects.visualize.getTileMapData();
|
||||
})
|
||||
.then(function (data) {
|
||||
expect(data).to.eql(expectedPrecision2Circles);
|
||||
});
|
||||
});
|
||||
|
||||
bdd.it('"Fit data bounds" should zoom to level 3', function pageHeader() {
|
||||
return PageObjects.visualize.clickMapFitDataBounds()
|
||||
.then(function () {
|
||||
return PageObjects.visualize.getMapZoomLevel();
|
||||
})
|
||||
.then(function (level) {
|
||||
expect(level).to.be('3');
|
||||
});
|
||||
});
|
||||
|
||||
// this test has the same number of circles and colors but are not scaled
|
||||
// differently with respect to the map
|
||||
bdd.it('should have the correct circles on map', function pageHeader() {
|
||||
var expectedPrecision2Circles = [ { color: '#750000', radius: 192 },
|
||||
{ color: '#750000', radius: 191 },
|
||||
{ color: '#750000', radius: 177 },
|
||||
{ color: '#a40000', radius: 168 },
|
||||
{ color: '#a40000', radius: 167 },
|
||||
{ color: '#a40000', radius: 159 },
|
||||
{ color: '#a40000', radius: 156 },
|
||||
{ color: '#b45100', radius: 136 },
|
||||
{ color: '#b67501', radius: 111 },
|
||||
{ color: '#b67501', radius: 109 },
|
||||
{ color: '#b67501', radius: 108 },
|
||||
{ color: '#b67501', radius: 104 },
|
||||
{ color: '#b67501', radius: 101 },
|
||||
{ color: '#b67501', radius: 101 },
|
||||
{ color: '#b99939', radius: 84 },
|
||||
{ color: '#b99939', radius: 84 },
|
||||
{ color: '#b99939', radius: 74 },
|
||||
{ color: '#b99939', radius: 73 },
|
||||
{ color: '#b99939', radius: 73 },
|
||||
{ color: '#b99939', radius: 66 },
|
||||
{ color: '#b99939', radius: 60 },
|
||||
{ color: '#b99939', radius: 57 },
|
||||
{ color: '#b99939', radius: 57 },
|
||||
{ color: '#b99939', radius: 47 },
|
||||
{ color: '#b99939', radius: 43 },
|
||||
{ color: '#b99939', radius: 43 },
|
||||
{ color: '#b99939', radius: 43 },
|
||||
{ color: '#b99939', radius: 38 },
|
||||
{ color: '#b99939', radius: 36 },
|
||||
{ color: '#b99939', radius: 35 },
|
||||
{ color: '#b99939', radius: 34 },
|
||||
{ color: '#b99939', radius: 34 },
|
||||
{ color: '#b99939', radius: 31 },
|
||||
{ color: '#b99939', radius: 30 },
|
||||
{ color: '#b99939', radius: 28 },
|
||||
{ color: '#b99939', radius: 27 },
|
||||
{ color: '#b99939', radius: 24 },
|
||||
{ color: '#b99939', radius: 22 },
|
||||
{ color: '#b99939', radius: 19 },
|
||||
{ color: '#b99939', radius: 19 },
|
||||
{ color: '#b99939', radius: 15 },
|
||||
{ color: '#b99939', radius: 15 },
|
||||
{ color: '#b99939', radius: 15 },
|
||||
{ color: '#b99939', radius: 12 },
|
||||
{ color: '#b99939', radius: 9 },
|
||||
{ color: '#b99939', radius: 9 }
|
||||
];
|
||||
|
||||
return PageObjects.visualize.getTileMapData()
|
||||
.then(function (data) {
|
||||
expect(data).to.eql(expectedPrecision2Circles);
|
||||
});
|
||||
});
|
||||
|
||||
bdd.it('should save with zoom level and load, take screenshot', function pageHeader() {
|
||||
var vizName1 = 'Visualization TileMap';
|
||||
|
||||
return PageObjects.visualize.clickMapZoomIn()
|
||||
.then(function () {
|
||||
return PageObjects.visualize.clickMapZoomIn();
|
||||
})
|
||||
.then(function (level) {
|
||||
expect(level).to.be('5');
|
||||
})
|
||||
.then(function (message) {
|
||||
return PageObjects.visualize.saveVisualization(vizName1);
|
||||
})
|
||||
.then(function (message) {
|
||||
PageObjects.common.debug('Saved viz message = ' + message);
|
||||
expect(message).to.be('Visualization Editor: Saved Visualization \"' + vizName1 + '\"');
|
||||
})
|
||||
.then(function testVisualizeWaitForToastMessageGone() {
|
||||
return PageObjects.visualize.waitForToastMessageGone();
|
||||
})
|
||||
.then(function () {
|
||||
// zoom to level 6, and make sure we go back to the saved level 5
|
||||
return PageObjects.visualize.clickMapZoomIn();
|
||||
})
|
||||
.then(function () {
|
||||
return PageObjects.visualize.loadSavedVisualization(vizName1);
|
||||
})
|
||||
.then(function waitForVisualization() {
|
||||
return PageObjects.visualize.waitForVisualization();
|
||||
})
|
||||
// sleep a bit before taking the screenshot or it won't show data
|
||||
.then(function sleep() {
|
||||
return PageObjects.common.sleep(4000);
|
||||
})
|
||||
.then(function takeScreenshot() {
|
||||
PageObjects.common.debug('Take screenshot');
|
||||
PageObjects.common.saveScreenshot('Visualize-site-map');
|
||||
})
|
||||
.then(function () {
|
||||
return PageObjects.visualize.getMapZoomLevel();
|
||||
})
|
||||
.then(function (level) {
|
||||
expect(level).to.be('5');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
bdd.it('should zoom in to level 10', function pageHeader() {
|
||||
// 6
|
||||
return PageObjects.visualize.clickMapZoomIn()
|
||||
.then(function () {
|
||||
// 7
|
||||
return PageObjects.visualize.clickMapZoomIn();
|
||||
})
|
||||
.then(function () {
|
||||
// 8
|
||||
return PageObjects.visualize.clickMapZoomIn();
|
||||
})
|
||||
.then(function () {
|
||||
// 9
|
||||
return PageObjects.visualize.clickMapZoomIn();
|
||||
})
|
||||
.then(function (level) {
|
||||
expect(level).to.be('9');
|
||||
})
|
||||
.then(function () {
|
||||
return PageObjects.visualize.getMapZoomInEnabled();
|
||||
})
|
||||
.then(function (enabled) {
|
||||
// we are at zoom level 9 here and zoom out should still be enabled
|
||||
expect(enabled).to.be(true);
|
||||
return PageObjects.visualize.clickMapZoomIn();
|
||||
})
|
||||
.then(function (level) {
|
||||
expect(level).to.be('10');
|
||||
})
|
||||
.then(function () {
|
||||
return PageObjects.visualize.getMapZoomInEnabled();
|
||||
})
|
||||
// now we're at level 10 and zoom out should be disabled
|
||||
.then(function (enabled) {
|
||||
expect(enabled).to.be(false);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -692,4 +692,90 @@ export default class VisualizePage {
|
|||
.findByCssSelector('visualize-legend');
|
||||
}
|
||||
|
||||
getMapZoomLevel() {
|
||||
return this.remote.getCurrentUrl()
|
||||
.then((urlString) => {
|
||||
return urlString.toString().replace(/.*mapZoom:(\d+).*params:.*/,'$1');
|
||||
});
|
||||
}
|
||||
|
||||
clickMapButton(zoomSelector) {
|
||||
return this.remote
|
||||
.setFindTimeout(defaultFindTimeout)
|
||||
.findAllByCssSelector(zoomSelector)
|
||||
.click()
|
||||
.then(() => {
|
||||
return PageObjects.common.sleep(1000);
|
||||
})
|
||||
.then(() => {
|
||||
return PageObjects.header.getSpinnerDone();
|
||||
})
|
||||
.then(() => {
|
||||
return this.getMapZoomLevel();
|
||||
});
|
||||
}
|
||||
|
||||
clickMapZoomIn() {
|
||||
return this.clickMapButton('a.leaflet-control-zoom-in');
|
||||
}
|
||||
|
||||
clickMapZoomOut() {
|
||||
return this.clickMapButton('a.leaflet-control-zoom-out');
|
||||
}
|
||||
|
||||
getMapZoomEnabled(zoomSelector) {
|
||||
return this.remote
|
||||
.setFindTimeout(defaultFindTimeout)
|
||||
.findAllByCssSelector(zoomSelector)
|
||||
.getAttribute('class')
|
||||
.then((element) => {
|
||||
return !element.toString().includes('leaflet-disabled');
|
||||
});
|
||||
}
|
||||
|
||||
getMapZoomInEnabled() {
|
||||
return this.getMapZoomEnabled('a.leaflet-control-zoom-in');
|
||||
}
|
||||
|
||||
getMapZoomOutEnabled() {
|
||||
return this.getMapZoomEnabled('a.leaflet-control-zoom-out');
|
||||
}
|
||||
|
||||
clickMapFitDataBounds() {
|
||||
return this.clickMapButton('a.fa-crop');
|
||||
}
|
||||
|
||||
getTileMapData() {
|
||||
return this.remote
|
||||
.setFindTimeout(defaultFindTimeout)
|
||||
.findAllByCssSelector('path.leaflet-clickable')
|
||||
.then((chartTypes) => {
|
||||
|
||||
function getChartType(chart) {
|
||||
var color;
|
||||
var radius;
|
||||
return chart.getAttribute('stroke')
|
||||
.then((stroke) => {
|
||||
color = stroke;
|
||||
})
|
||||
.then(() => {
|
||||
return chart.getAttribute('d');
|
||||
})
|
||||
.then((d) => {
|
||||
// scale the radius up (sometimes less than 1) and then round to int
|
||||
radius = d.replace(/.*A(\d+\.\d+),.*/,'$1') * 10;
|
||||
radius = Math.round(radius);
|
||||
})
|
||||
.then(() => {
|
||||
return {color: color, radius: radius};
|
||||
});
|
||||
}
|
||||
var getChartTypesPromises = chartTypes.map(getChartType);
|
||||
return Promise.all(getChartTypesPromises);
|
||||
})
|
||||
.then((circles) => {
|
||||
return circles;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue