[Lens] Test field formatters for keyword fields (#155491)

## Summary

Part of https://github.com/elastic/kibana/issues/147428

Adds field formatters test for keyword fields

[Flaky runner 50 times
https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2155

](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2157)
### Checklist

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>

test/functional/services/field_editor.ts

@@ -12,6 +12,7 @@ export class FieldEditorService extends FtrService {
   private readonly browser = this.ctx.getService('browser');
   private readonly testSubjects = this.ctx.getService('testSubjects');
   private readonly retry = this.ctx.getService('retry');
+  private readonly find = this.ctx.getService('find');
 
   public async setName(name: string, clearFirst = false, typeCharByChar = false) {
     await this.testSubjects.setValue('nameField > input', name, {
@@ -50,6 +51,47 @@ export class FieldEditorService extends FtrService {
     await this.testSubjects.click('fieldSaveButton');
   }
 
+  async setUrlFieldFormat(template: string) {
+    const urlTemplateField = await this.find.byCssSelector(
+      'input[data-test-subj="urlEditorUrlTemplate"]'
+    );
+    await urlTemplateField.type(template);
+  }
+
+  public async setStaticLookupFormat(oldValue: string, newValue: string) {
+    await this.testSubjects.click('staticLookupEditorAddEntry');
+    await this.testSubjects.setValue('~staticLookupEditorKey', oldValue);
+    await this.testSubjects.setValue('~staticLookupEditorValue', newValue);
+  }
+
+  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);
+    if (backgroundColor) {
+      await this.testSubjects.setValue('~colorEditorBackgroundPicker', backgroundColor);
+    }
+  }
+
+  public async setStringFormat(transform: string) {
+    await this.testSubjects.selectValue('stringEditorTransform', transform);
+  }
+
+  public async setTruncateFormatLength(length: string) {
+    await this.testSubjects.setValue('truncateEditorLength', length);
+  }
+
+  public async setFieldFormat(format: string) {
+    await this.find.clickByCssSelector(
+      'select[data-test-subj="editorSelectedFormatId"] > option[value="' + format + '"]'
+    );
+  }
+
+  public async setFormat(format: string) {
+    await this.testSubjects.setEuiSwitch('formatRow > toggle', 'check');
+    await this.setFieldFormat(format);
+  }
+
   public async confirmSave() {
     await this.retry.try(async () => {
       await this.testSubjects.setValue('saveModalConfirmText', 'change');

x-pack/test/functional/apps/lens/group1/field_formatters.ts

@@ -0,0 +1,122 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import expect from '@kbn/expect';
+import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const PageObjects = getPageObjects([
+    'visualize',
+    'lens',
+    'header',
+    'dashboard',
+    'common',
+    'settings',
+  ]);
+  const retry = getService('retry');
+  const fieldEditor = getService('fieldEditor');
+
+  describe('lens fields formatters tests', () => {
+    before(async () => {
+      await PageObjects.visualize.navigateToNewVisualization();
+      await PageObjects.visualize.clickVisType('lens');
+      await PageObjects.lens.goToTimeRange();
+      await PageObjects.lens.switchToVisualization('lnsDatatable');
+    });
+
+    afterEach(async () => {
+      await PageObjects.lens.clickField('runtimefield');
+      await PageObjects.lens.removeField('runtimefield');
+      await fieldEditor.confirmDelete();
+      await PageObjects.lens.waitForFieldMissing('runtimefield');
+    });
+
+    it('should display url formatter correctly', async () => {
+      await retry.try(async () => {
+        await PageObjects.lens.clickAddField();
+        await fieldEditor.setName('runtimefield');
+        await fieldEditor.enableValue();
+        await fieldEditor.typeScript("emit(doc['geo.dest'].value)");
+        await fieldEditor.setFormat(FIELD_FORMAT_IDS.URL);
+        await fieldEditor.setUrlFieldFormat('https://www.elastic.co?{{value}}');
+        await fieldEditor.save();
+        await PageObjects.header.waitUntilLoadingHasFinished();
+        await PageObjects.lens.searchField('runtime');
+        await PageObjects.lens.waitForField('runtimefield');
+        await PageObjects.lens.dragFieldToWorkspace('runtimefield');
+      });
+      await PageObjects.lens.waitForVisualization();
+      expect(await PageObjects.lens.getDatatableHeaderText(0)).to.equal(
+        'Top 5 values of runtimefield'
+      );
+      expect(await PageObjects.lens.getDatatableCellText(0, 0)).to.eql('https://www.elastic.co?CN');
+    });
+
+    it('should display static lookup formatter correctly', async () => {
+      await retry.try(async () => {
+        await PageObjects.lens.clickAddField();
+        await fieldEditor.setName('runtimefield');
+        await fieldEditor.enableValue();
+        await fieldEditor.typeScript("emit(doc['geo.dest'].value)");
+        await fieldEditor.setFormat(FIELD_FORMAT_IDS.STATIC_LOOKUP);
+        await fieldEditor.setStaticLookupFormat('CN', 'China');
+        await fieldEditor.save();
+        await PageObjects.header.waitUntilLoadingHasFinished();
+      });
+      await PageObjects.lens.waitForVisualization();
+      expect(await PageObjects.lens.getDatatableCellText(0, 0)).to.eql('China');
+    });
+
+    it('should display color formatter correctly', async () => {
+      await retry.try(async () => {
+        await PageObjects.lens.clickAddField();
+        await fieldEditor.setName('runtimefield');
+        await fieldEditor.enableValue();
+        await fieldEditor.typeScript("emit(doc['geo.dest'].value)");
+        await fieldEditor.setFormat(FIELD_FORMAT_IDS.COLOR);
+        await fieldEditor.setColorFormat('CN', '#ffffff', '#ff0000');
+        await fieldEditor.save();
+        await PageObjects.header.waitUntilLoadingHasFinished();
+      });
+      await PageObjects.lens.waitForVisualization();
+      const styleObj = await PageObjects.lens.getDatatableCellSpanStyle(0, 0);
+      expect(styleObj['background-color']).to.be('rgb(255, 0, 0)');
+      expect(styleObj.color).to.be('rgb(255, 255, 255)');
+    });
+
+    it('should display string formatter correctly', async () => {
+      await retry.try(async () => {
+        await PageObjects.lens.clickAddField();
+        await fieldEditor.setName('runtimefield');
+        await fieldEditor.enableValue();
+        await fieldEditor.typeScript("emit(doc['geo.dest'].value)");
+        await fieldEditor.setFormat(FIELD_FORMAT_IDS.STRING);
+        await fieldEditor.setStringFormat('lower');
+        await fieldEditor.save();
+        await PageObjects.header.waitUntilLoadingHasFinished();
+      });
+      await PageObjects.lens.waitForVisualization();
+      expect(await PageObjects.lens.getDatatableCellText(0, 0)).to.eql('cn');
+    });
+
+    it('should display truncate string formatter correctly', async () => {
+      await retry.try(async () => {
+        await PageObjects.lens.clickAddField();
+        await fieldEditor.setName('runtimefield');
+        await fieldEditor.enableValue();
+        await fieldEditor.typeScript("emit(doc['links.raw'].value)");
+        await fieldEditor.setFormat(FIELD_FORMAT_IDS.TRUNCATE);
+        await fieldEditor.setTruncateFormatLength('3');
+        await fieldEditor.save();
+        await PageObjects.header.waitUntilLoadingHasFinished();
+      });
+      await PageObjects.lens.waitForVisualization();
+      expect(await PageObjects.lens.getDatatableCellText(0, 0)).to.eql('dal...');
+    });
+  });
+}

x-pack/test/functional/apps/lens/group1/index.ts

@@ -83,6 +83,7 @@ export default ({ getService, loadTestFile, getPageObjects }: FtrProviderContext
       loadTestFile(require.resolve('./text_based_languages'));
       loadTestFile(require.resolve('./fields_list'));
       loadTestFile(require.resolve('./layer_actions'));
+      loadTestFile(require.resolve('./field_formatters'));
     }
   });
 };

x-pack/test/functional/page_objects/lens_page.ts

@@ -1045,6 +1045,18 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
       }, {});
     },
 
+    async getDatatableCellSpanStyle(rowIndex = 0, colIndex = 0) {
+      const el = await (await this.getDatatableCell(rowIndex, colIndex)).findByCssSelector('span');
+      const styleString = await el.getAttribute('style');
+      return styleString.split(';').reduce<Record<string, string>>((memo, cssLine) => {
+        const [prop, value] = cssLine.split(':');
+        if (prop && value) {
+          memo[prop.trim()] = value.trim();
+        }
+        return memo;
+      }, {});
+    },
+
     async getCountOfDatatableColumns() {
       const table = await find.byCssSelector('.euiDataGrid');
       const $ = await table.parseDomContent();

x-pack/test/tsconfig.json

@@ -122,5 +122,6 @@
     "@kbn/securitysolution-io-ts-alerting-types",
     "@kbn/alerting-state-types",
     "@kbn/assetManager-plugin",
+    "@kbn/field-formats-plugin",
   ]
 }