From 3431697a3a1055ed520de993ab82b832a98cfc8a Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 26 Mar 2020 16:26:26 -0600 Subject: [PATCH] [Maps] add functional test for category autocomplete (#61386) * [Maps] add functional test for category autocomplete * remove duplicated method --- .../components/color/color_map_select.js | 2 ++ .../color/color_stops_categorical.js | 1 + .../components/color/dynamic_color_form.js | 1 + .../styles/vector/components/field_select.js | 3 +- .../components/label/dynamic_label_form.js | 1 + .../orientation/dynamic_orientation_form.js | 1 + .../components/size/dynamic_size_form.js | 1 + .../styles/vector/components/stop_input.js | 1 + .../vector/components/style_prop_editor.js | 1 + .../components/symbol/dynamic_icon_form.js | 1 + x-pack/test/functional/apps/maps/index.js | 1 + .../functional/apps/maps/vector_styling.js | 35 +++++++++++++++++++ .../test/functional/page_objects/gis_page.js | 16 +++++++++ 13 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 x-pack/test/functional/apps/maps/vector_styling.js diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js index 0d4cf322d2a40..bf57306df5697 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js @@ -123,6 +123,7 @@ export class ColorMapSelect extends Component { { value: CUSTOM_COLOR_MAP, inputDisplay: this.props.customOptionLabel, + 'data-test-subj': `colorMapSelectOption_${CUSTOM_COLOR_MAP}`, }, ...this.props.colorMapOptions, ]; @@ -150,6 +151,7 @@ export class ColorMapSelect extends Component { onChange={this._onColorMapSelect} valueOfSelected={valueOfSelected} hasDividers={true} + data-test-subj={`colorMapSelect_${this.props.styleProperty.getStyleName()}`} /> diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_categorical.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_categorical.js index 124c2bf0cff55..edf230b0a945c 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_categorical.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_categorical.js @@ -63,6 +63,7 @@ export const ColorStopsCategorical = ({ getValueSuggestions={getValueSuggestions} value={stopValue} onChange={onStopChange} + dataTestSubj={`colorStopInput${index}`} /> ); }; diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js index c6b68b7e94409..a1c15e27c9eb3 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js @@ -123,6 +123,7 @@ export function DynamicColorForm({ { onChange({ field: selectedFields.length > 0 ? selectedFields[0].value : null, @@ -98,6 +98,7 @@ export function FieldSelect({ fields, selectedFieldName, onChange, ...rest }) { defaultMessage: 'Select a field', })} renderOption={renderOption} + data-test-subj={`styleFieldSelect_${styleName}`} {...rest} /> ); diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js index 0c9011b811f38..bbba6705f7de7 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js @@ -27,6 +27,7 @@ export function DynamicLabelForm({ ); diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js index 752e0e4213217..005bc11aa1bd8 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js @@ -77,6 +77,7 @@ export class StylePropEditor extends Component { defaultMessage: 'Select to style by fixed value or by data value', })} compressed + data-test-subj={`staticDynamicSelect_${this.props.styleProperty.getStyleName()}`} /> ); } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js index 9065102dc8bd7..6b79ac17f2e22 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js @@ -59,6 +59,7 @@ export function DynamicIconForm({ { + before(async () => { + await PageObjects.maps.loadSavedMap('document example'); + }); + + describe('categorical styling', () => { + before(async () => { + await PageObjects.maps.openLayerPanel('logstash'); + }); + + it('should provide auto complete suggestions', async () => { + await PageObjects.maps.setStyleByValue('fillColor', 'machine.os.raw'); + await PageObjects.maps.selectCustomColorRamp('fillColor'); + const suggestions = await PageObjects.maps.getCategorySuggestions(); + expect( + suggestions + .trim() + .split('\n') + .join() + ).to.equal('win 8,win xp,win 7,ios,osx'); + }); + }); + }); +} diff --git a/x-pack/test/functional/page_objects/gis_page.js b/x-pack/test/functional/page_objects/gis_page.js index ae037c3954a06..f8d1808c1ef8d 100644 --- a/x-pack/test/functional/page_objects/gis_page.js +++ b/x-pack/test/functional/page_objects/gis_page.js @@ -638,6 +638,22 @@ export function GisPageProvider({ getService, getPageObjects }) { } }); } + + async setStyleByValue(styleName, fieldName) { + await testSubjects.selectValue(`staticDynamicSelect_${styleName}`, 'DYNAMIC'); + await comboBox.set(`styleFieldSelect_${styleName}`, fieldName); + } + + async selectCustomColorRamp(styleName) { + // open super select menu + await testSubjects.click(`colorMapSelect_${styleName}`); + // Click option + await testSubjects.click(`colorMapSelectOption_CUSTOM_COLOR_MAP`); + } + + async getCategorySuggestions() { + return await comboBox.getOptionsList(`colorStopInput1`); + } } return new GisPage(); }