diff --git a/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.test.tsx b/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.test.tsx index 695737733d2ca..a44845ad93f06 100644 --- a/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.test.tsx +++ b/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.test.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import { shallowWithI18nProvider } from '@kbn/test-jest-helpers'; +import { shallowWithI18nProvider, mountWithI18nProvider } from '@kbn/test-jest-helpers'; import { ColorFormatEditor } from './color'; import { FieldFormat, DEFAULT_CONVERTER_COLOR } from '@kbn/field-formats-plugin/common'; @@ -28,6 +28,21 @@ describe('ColorFormatEditor', () => { expect(ColorFormatEditor.formatId).toEqual('color'); }); + it('renders the color swatch icon inside the button', () => { + const component = mountWithI18nProvider( + + ); + + const button = component.find('[data-test-subj="buttonColorSwatchIcon"]').at(0); + expect(button.exists()).toBe(true); + }); + it('should render string type normally (regex field)', async () => { const component = shallowWithI18nProvider( {}} + aria-label={i18n.translate( + 'indexPatternFieldEditor.color.letteringButtonAriaLabel', + { + defaultMessage: 'Select a text color for item {index}', + values: { + index: item.index, + }, + } + )} + > + + + } + secondaryInputDisplay="bottom" /> ); }, @@ -181,6 +214,32 @@ export class ColorFormatEditor extends DefaultFormatEditor {}} + aria-label={i18n.translate( + 'indexPatternFieldEditor.color.letteringButtonAriaLabel', + { + defaultMessage: 'Select a background color for item {index}', + values: { + index: item.index, + }, + } + )} + > + + + } + secondaryInputDisplay="bottom" /> ); }, diff --git a/test/functional/apps/management/data_views/_field_formatter.ts b/test/functional/apps/management/data_views/_field_formatter.ts index 1f7cd6c23a838..bd88d96f9700a 100644 --- a/test/functional/apps/management/data_views/_field_formatter.ts +++ b/test/functional/apps/management/data_views/_field_formatter.ts @@ -403,8 +403,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { beforeSave: async () => { await testSubjects.click('colorEditorAddColor'); await testSubjects.setValue('~colorEditorKeyPattern', 'red'); - await testSubjects.setValue('~colorEditorColorPicker', '#ffffff'); - await testSubjects.setValue('~colorEditorBackgroundPicker', '#ff0000'); + await testSubjects.click('~colorEditorColorPicker'); + await testSubjects.setValue('~euiColorPickerInput_bottom', '#ffffff'); + await testSubjects.click('~colorEditorBackgroundPicker'); + await testSubjects.setValue('~euiColorPickerInput_bottom', '#ff0000'); }, expect: async (renderedValueContainer) => { const span = await renderedValueContainer.findByTagName('span'); diff --git a/test/functional/services/field_editor.ts b/test/functional/services/field_editor.ts index 07bcaf98959b5..0739159bcf913 100644 --- a/test/functional/services/field_editor.ts +++ b/test/functional/services/field_editor.ts @@ -90,9 +90,11 @@ export class FieldEditorService extends FtrService { public async setColorFormat(value: string, color: string, backgroundColor?: string) { await this.testSubjects.click('colorEditorAddColor'); await this.testSubjects.setValue('~colorEditorKeyPattern', value); - await this.testSubjects.setValue('~colorEditorColorPicker', color); + await this.testSubjects.click('~colorEditorColorPicker'); + await this.testSubjects.setValue('~euiColorPickerInput_bottom', color); if (backgroundColor) { - await this.testSubjects.setValue('~colorEditorBackgroundPicker', backgroundColor); + await this.testSubjects.click('~colorEditorBackgroundPicker'); + await this.testSubjects.setValue('~euiColorPickerInput_bottom', backgroundColor); } }