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();
}