[Maps] create visual regression test for vector styling point with icons (#39363)

* [Maps] create functional test for vector styling point with icons

* clena up

* use full screen to hide kibana chrome

* collapse legend to limit UI surface area
This commit is contained in:
Nathan Reese 2019-07-09 12:16:26 -06:00 committed by GitHub
parent b306c5b8f4
commit 1d07604ac8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 217 additions and 3 deletions

View file

@ -43,6 +43,7 @@ export function maps(kibana) {
return {
showMapsInspectorAdapter: serverConfig.get('xpack.maps.showMapsInspectorAdapter'),
preserveDrawingBuffer: serverConfig.get('xpack.maps.preserveDrawingBuffer'),
isEmsEnabled: mapConfig.includeElasticMapsService,
emsTileLayerId: mapConfig.emsTileLayerId,
proxyElasticMapsServiceInMaps: mapConfig.proxyElasticMapsServiceInMaps,
@ -89,7 +90,8 @@ export function maps(kibana) {
config(Joi) {
return Joi.object({
enabled: Joi.boolean().default(true),
showMapsInspectorAdapter: Joi.boolean().default(false),
showMapsInspectorAdapter: Joi.boolean().default(false), // flag used in functional testing
preserveDrawingBuffer: Joi.boolean().default(false), // flag used in functional testing
}).default();
},

View file

@ -27,7 +27,8 @@ export async function createMbMapInstance({ node, initialView, scrollZoom }) {
layers: [],
sprite: makiUrl
},
scrollZoom
scrollZoom,
preserveDrawingBuffer: chrome.getInjected('preserveDrawingBuffer', false)
};
if (initialView) {
options.zoom = initialView.zoom;

View file

@ -44,6 +44,7 @@ exports[`LayerControl is rendered 1`] = `
aria-label="Collapse layers panel"
className="mapLayerControl__closeLayerTOCButton"
color="text"
data-test-subj="mapToggleLegendButton"
iconSize="m"
iconType="menuRight"
onClick={[Function]}
@ -144,6 +145,7 @@ exports[`LayerControl props isReadOnly 1`] = `
aria-label="Collapse layers panel"
className="mapLayerControl__closeLayerTOCButton"
color="text"
data-test-subj="mapToggleLegendButton"
iconSize="m"
iconType="menuRight"
onClick={[Function]}

View file

@ -98,6 +98,7 @@ export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, c
aria-label={i18n.translate('xpack.maps.layerControl.closeLayerTOCButtonAriaLabel', {
defaultMessage: 'Collapse layers panel'
})}
data-test-subj="mapToggleLegendButton"
/>
</EuiToolTip>
</EuiFlexItem>

View file

@ -205,6 +205,7 @@ export default async function ({ readConfigFile }) {
'--status.allowAnonymous=true',
'--server.uuid=5b2de169-2785-441b-ae8c-186a1936b17d',
'--xpack.maps.showMapsInspectorAdapter=true',
'--xpack.maps.preserveDrawingBuffer=true',
'--xpack.telemetry.banner=false',
'--xpack.reporting.queue.pollInterval=3000', // make it explicitly the default
'--xpack.reporting.csv.maxSizeBytes=2850', // small-ish limit for cutting off a 1999 byte report

View file

@ -345,3 +345,42 @@
}
}
}
{
"type": "doc",
"value": {
"id": "1",
"index": "flights",
"source": {
"location" : [-5, 5],
"heading" : 45,
"altitude" : 1000
}
}
}
{
"type": "doc",
"value": {
"id": "2",
"index": "flights",
"source": {
"location" : [5, 5],
"heading" : 180,
"altitude" : 5000
}
}
}
{
"type": "doc",
"value": {
"id": "3",
"index": "flights",
"source": {
"location" : [0,-5],
"heading" : 270,
"altitude" : 3000
}
}
}

View file

@ -79,4 +79,30 @@
}
}
}
}
}
{
"type": "index",
"value": {
"index": "flights",
"mappings": {
"properties": {
"location": {
"type": "geo_point"
},
"heading": {
"type": "integer"
},
"altitude": {
"type": "integer"
}
}
},
"settings": {
"index": {
"number_of_replicas": "0",
"number_of_shards": "1"
}
}
}
}

View file

@ -89,6 +89,26 @@
}
}
{
"type": "doc",
"value": {
"id": "index-pattern:f7fc94a0-936b-11e9-a43f-eb6ee3467b2b",
"index": ".kibana",
"source": {
"index-pattern" : {
"title" : "flights",
"fields" : "[{\"name\":\"_id\",\"type\":\"string\",\"esTypes\":[\"_id\"],\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":false},{\"name\":\"_index\",\"type\":\"string\",\"esTypes\":[\"_index\"],\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":false},{\"name\":\"_score\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"searchable\":false,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"_source\",\"type\":\"_source\",\"esTypes\":[\"_source\"],\"count\":0,\"scripted\":false,\"searchable\":false,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"_type\",\"type\":\"string\",\"esTypes\":[\"_type\"],\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":false},{\"name\":\"altitude\",\"type\":\"number\",\"esTypes\":[\"integer\"],\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"heading\",\"type\":\"number\",\"esTypes\":[\"integer\"],\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"location\",\"type\":\"geo_point\",\"esTypes\":[\"geo_point\"],\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true}]"
},
"type" : "index-pattern",
"references" : [ ],
"migrationVersion" : {
"index-pattern" : "6.5.0"
},
"updated_at" : "2019-06-20T14:59:15.348Z"
}
}
}
{
"type": "doc",
"value": {
@ -448,6 +468,62 @@
}
}
{
"type": "doc",
"value": {
"id": "map:62914770-936c-11e9-a43f-eb6ee3467b2b",
"index": ".kibana",
"source": {
"map": {
"title" : "vector styling icon demo",
"description" : "",
"mapStateJSON" : "{\"zoom\":4.13,\"center\":{\"lon\":-3.57807,\"lat\":2.04204},\"timeFilters\":{\"from\":\"now-15m\",\"to\":\"now\"},\"refreshConfig\":{\"isPaused\":false,\"interval\":0},\"query\":{\"language\":\"kuery\",\"query\":\"\"}}",
"layerListJSON" : "[{\"sourceDescriptor\":{\"id\":\"5b46884e-062f-4ff4-9dd2-bd410d9e8754\",\"type\":\"ES_SEARCH\",\"geoField\":\"location\",\"filterByMapBounds\":false,\"tooltipProperties\":[],\"useTopHits\":false,\"topHitsSize\":1,\"indexPatternRefName\":\"layer_0_source_index_pattern\"},\"id\":\"8fcb7c4b-7d6a-4b69-82c2-74f53ec0df24\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"alpha\":0.75,\"visible\":true,\"applyGlobalQuery\":true,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"DYNAMIC\",\"options\":{\"color\":\"Reds\",\"field\":{\"label\":\"altitude\",\"name\":\"altitude\",\"origin\":\"source\"}}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"DYNAMIC\",\"options\":{\"minSize\":30,\"maxSize\":64,\"field\":{\"label\":\"altitude\",\"name\":\"altitude\",\"origin\":\"source\"}}},\"iconOrientation\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"heading\",\"name\":\"heading\",\"origin\":\"source\"}}},\"symbol\":{\"options\":{\"symbolizeAs\":\"icon\",\"symbolId\":\"airport\"}}}},\"type\":\"VECTOR\"}]",
"uiStateJSON" : "{\"isLayerTOCOpen\":true,\"openTOCDetails\":[\"8fcb7c4b-7d6a-4b69-82c2-74f53ec0df24\"]}",
"bounds" : {
"type" : "polygon",
"coordinates" : [
[
[
-40.00193,
19.58063
],
[
-40.00193,
-15.68855
],
[
32.84579,
-15.68855
],
[
32.84579,
19.58063
],
[
-40.00193,
19.58063
]
]
]
}
},
"type": "map",
"references" : [
{
"name" : "layer_0_source_index_pattern",
"type" : "index-pattern",
"id" : "f7fc94a0-936b-11e9-a43f-eb6ee3467b2b"
}
],
"migrationVersion" : {
"map" : "7.2.0"
},
"updated_at" : "2019-06-20T15:02:13.095Z"
}
}
}
{
"type": "doc",
"value": {

View file

@ -270,6 +270,14 @@ export function GisPageProvider({ getService, getPageObjects }) {
await testSubjects.click('layerVisibilityToggleButton');
}
async closeLegend() {
const isOpen = await testSubjects.exists('mapLayerTOC');
if (isOpen) {
await testSubjects.click('mapToggleLegendButton');
await testSubjects.waitForDeleted('mapLayerTOC');
}
}
async clickFitToBounds(layerName) {
log.debug(`Fit to bounds, layer: ${layerName}`);
const origView = await this.getView();

View file

@ -14,6 +14,7 @@ export default async function ({ readConfigFile }) {
testFiles: [
require.resolve('./tests/login_page'),
require.resolve('./tests/maps'),
],
services: {

View file

@ -0,0 +1,32 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
export default function ({ loadTestFile, getService }) {
const kibanaServer = getService('kibanaServer');
const esArchiver = getService('esArchiver');
const browser = getService('browser');
describe('maps app visual regression', function () {
before(async () => {
await esArchiver.loadIfNeeded('logstash_functional');
await esArchiver.load('maps/data');
await esArchiver.load('maps/kibana');
await kibanaServer.uiSettings.replace({
'defaultIndex': 'logstash-*'
});
browser.setWindowSize(1600, 1000);
});
after(async () => {
await esArchiver.unload('maps/data');
await esArchiver.unload('maps/kibana');
});
this.tags('ciGroup10');
loadTestFile(require.resolve('./vector_styling'));
});
}

View file

@ -0,0 +1,25 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
export default function ({ getPageObjects, getService }) {
const PageObjects = getPageObjects(['maps']);
const visualTesting = getService('visualTesting');
describe('vector styling', () => {
describe('symbolize as icon', () => {
before(async () => {
await PageObjects.maps.loadSavedMap('vector styling icon demo');
await PageObjects.maps.enterFullScreen();
await PageObjects.maps.closeLegend();
});
it('should symbolize points as icons with expected color, size, and orientation', async () => {
await visualTesting.snapshot();
});
});
});
}