Add functional test for cell expanded content popover

Author: DianaDerevyankina

test/functional/apps/discover/_data_grid_doc_table.ts

@@ -10,11 +10,13 @@ import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const find = getService('find');
   const dataGrid = getService('dataGrid');
   const log = getService('log');
   const retry = getService('retry');
   const esArchiver = getService('esArchiver');
   const kibanaServer = getService('kibanaServer');
+  const monacoEditor = getService('monacoEditor');
   const PageObjects = getPageObjects(['common', 'discover', 'header', 'timePicker']);
   const defaultSettings = {
     defaultIndex: 'logstash-*',
@@ -56,6 +58,24 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.timePicker.setDefaultAbsoluteRange();
     });
 
+    it('should show popover with expanded cell content by click on expand button', async () => {
+      log.debug('open popover with expanded cell content to get json from the editor');
+      const documentCell = await dataGrid.getCellElement(1, 3);
+      await documentCell.click();
+      const expandCellContentButton = await documentCell.findByClassName(
+        'euiDataGridRowCell__expandButtonIcon'
+      );
+      await expandCellContentButton.click();
+      const popoverJson = await monacoEditor.getCodeEditorValue();
+
+      log.debug('open expanded document flyout to get json');
+      await dataGrid.clickRowToggle();
+      await find.clickByCssSelectorWhenNotDisabled('#kbn_doc_viewer_tab_1');
+      const flyoutJson = await monacoEditor.getCodeEditorValue();
+
+      expect(popoverJson).to.be(flyoutJson);
+    });
+
     describe('expand a document row', function () {
       const rowToInspect = 1;
 

test/functional/apps/visualize/_inspector.ts

@@ -14,6 +14,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const inspector = getService('inspector');
   const filterBar = getService('filterBar');
+  const monacoEditor = getService('monacoEditor');
   const testSubjects = getService('testSubjects');
   const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'timePicker']);
 
@@ -42,7 +43,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await inspector.openInspectorRequestsView();
         const requestTab = await inspector.getOpenRequestDetailRequestButton();
         await requestTab.click();
-        const requestJSON = JSON.parse(await inspector.getCodeEditorValue());
+        const requestJSON = JSON.parse(await monacoEditor.getCodeEditorValue());
 
         expect(requestJSON.aggs['2'].max).property('missing', 10);
       });

test/functional/page_objects/tile_map_page.ts

@@ -14,6 +14,7 @@ export function TileMapPageProvider({ getService, getPageObjects }: FtrProviderC
   const retry = getService('retry');
   const log = getService('log');
   const inspector = getService('inspector');
+  const monacoEditor = getService('monacoEditor');
   const { header } = getPageObjects(['header']);
 
   class TileMapPage {
@@ -40,7 +41,7 @@ export function TileMapPageProvider({ getService, getPageObjects }: FtrProviderC
       await testSubjects.click('inspectorViewChooserRequests');
       await testSubjects.click('inspectorRequestDetailRequest');
 
-      return await inspector.getCodeEditorValue();
+      return await monacoEditor.getCodeEditorValue();
     }
 
     public async getMapBounds(): Promise<object> {

test/functional/services/index.ts

@@ -46,6 +46,7 @@ import { ListingTableProvider } from './listing_table';
 import { SavedQueryManagementComponentProvider } from './saved_query_management_component';
 import { KibanaSupertestProvider } from './supertest';
 import { MenuToggleProvider } from './menu_toggle';
+import { MonacoEditorProvider } from './monaco_editor';
 
 export const services = {
   ...commonServiceProviders,
@@ -81,5 +82,6 @@ export const services = {
   elasticChart: ElasticChartProvider,
   supertest: KibanaSupertestProvider,
   managementMenu: ManagementMenuProvider,
+  monacoEditor: MonacoEditorProvider,
   MenuToggle: MenuToggleProvider,
 };

test/functional/services/inspector.ts

@@ -235,18 +235,6 @@ export function InspectorProvider({ getService }: FtrProviderContext) {
     public getOpenRequestDetailResponseButton() {
       return testSubjects.find('inspectorRequestDetailResponse');
     }
-
-    public async getCodeEditorValue() {
-      let request: string = '';
-
-      await retry.try(async () => {
-        request = await browser.execute(
-          () => (window as any).MonacoEnvironment.monaco.editor.getModels()[0].getValue() as string
-        );
-      });
-
-      return request;
-    }
   }
 
   return new Inspector();

test/functional/services/monaco_editor.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { FtrProviderContext } from '../ftr_provider_context';
+
+export function MonacoEditorProvider({ getService }: FtrProviderContext) {
+  const retry = getService('retry');
+  const browser = getService('browser');
+
+  return new (class MonacoEditor {
+    public async getCodeEditorValue() {
+      let request: string = '';
+
+      await retry.try(async () => {
+        request = await browser.execute(
+          () => (window as any).MonacoEnvironment.monaco.editor.getModels()[0].getValue() as string
+        );
+      });
+
+      return request;
+    }
+  })();
+}

x-pack/test/functional/apps/maps/documents_source/docvalue_fields.js

@@ -10,6 +10,7 @@ import expect from '@kbn/expect';
 export default function ({ getPageObjects, getService }) {
   const PageObjects = getPageObjects(['maps']);
   const inspector = getService('inspector');
+  const monacoEditor = getService('monacoEditor');
   const testSubjects = getService('testSubjects');
   const security = getService('security');
 
@@ -27,7 +28,7 @@ export default function ({ getPageObjects, getService }) {
       await inspector.open();
       await inspector.openInspectorRequestsView();
       await testSubjects.click('inspectorRequestDetailResponse');
-      const responseBody = await inspector.getCodeEditorValue();
+      const responseBody = await monacoEditor.getCodeEditorValue();
       await inspector.close();
       return JSON.parse(responseBody);
     }