From c42bd33e1efca923497bc2313a6b09bf0cf22b55 Mon Sep 17 00:00:00 2001
From: Dmitry Lemeshko <dzmitry.lemechko@elastic.co>
Date: Thu, 5 Mar 2020 14:56:25 +0200
Subject: [PATCH] Convert discover_page to ts, remove redundunt methods
 (#59312)

* convert discover_page to ts

* remove deuplicated methods, improve tests
---
 .../discover/np_ready/angular/discover.html   |   2 +-
 .../apps/discover/_discover_histogram.js      |   7 +-
 .../apps/discover/_source_filters.js          |   1 -
 .../{discover_page.js => discover_page.ts}    | 194 ++++++++----------
 test/functional/page_objects/index.ts         |   2 -
 test/functional/services/doc_table.ts         |   8 +-
 test/functional/services/elastic_chart.ts     |   9 +
 7 files changed, 100 insertions(+), 123 deletions(-)
 rename test/functional/page_objects/{discover_page.js => discover_page.ts} (58%)

diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
index 3fd3c5b5b7633..18254aeca5094 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html
@@ -23,7 +23,7 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
 
   <main class="container-fluid">
     <div class="row">
-      <div class="col-md-2 sidebar-container collapsible-sidebar" id="discover-sidebar">
+      <div class="col-md-2 sidebar-container collapsible-sidebar" id="discover-sidebar" data-test-subj="discover-sidebar">
         <div class="dscFieldChooser">
           <disc-field-chooser
             columns="state.columns"
diff --git a/test/functional/apps/discover/_discover_histogram.js b/test/functional/apps/discover/_discover_histogram.js
index 4780f36fc27c6..9310838666256 100644
--- a/test/functional/apps/discover/_discover_histogram.js
+++ b/test/functional/apps/discover/_discover_histogram.js
@@ -23,6 +23,7 @@ export default function({ getService, getPageObjects }) {
   const log = getService('log');
   const esArchiver = getService('esArchiver');
   const browser = getService('browser');
+  const elasticChart = getService('elasticChart');
   const kibanaServer = getService('kibanaServer');
   const PageObjects = getPageObjects(['settings', 'common', 'discover', 'header', 'timePicker']);
   const defaultSettings = {
@@ -64,7 +65,7 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime);
       await PageObjects.discover.setChartInterval('Monthly');
       await PageObjects.header.waitUntilLoadingHasFinished();
-      const chartCanvasExist = await PageObjects.discover.chartCanvasExist();
+      const chartCanvasExist = await elasticChart.canvasExists();
       expect(chartCanvasExist).to.be(true);
     });
     it('should visualize weekly data with within DST changes', async () => {
@@ -74,7 +75,7 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime);
       await PageObjects.discover.setChartInterval('Weekly');
       await PageObjects.header.waitUntilLoadingHasFinished();
-      const chartCanvasExist = await PageObjects.discover.chartCanvasExist();
+      const chartCanvasExist = await elasticChart.canvasExists();
       expect(chartCanvasExist).to.be(true);
     });
     it('should visualize monthly data with different years Scaled to 30d', async () => {
@@ -84,7 +85,7 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime);
       await PageObjects.discover.setChartInterval('Daily');
       await PageObjects.header.waitUntilLoadingHasFinished();
-      const chartCanvasExist = await PageObjects.discover.chartCanvasExist();
+      const chartCanvasExist = await elasticChart.canvasExists();
       expect(chartCanvasExist).to.be(true);
     });
   });
diff --git a/test/functional/apps/discover/_source_filters.js b/test/functional/apps/discover/_source_filters.js
index e9cb2f3d622a2..74d0da7cdb3e7 100644
--- a/test/functional/apps/discover/_source_filters.js
+++ b/test/functional/apps/discover/_source_filters.js
@@ -49,7 +49,6 @@ export default function({ getService, getPageObjects }) {
     });
 
     it('should not get the field referer', async function() {
-      //let  fieldNames;
       const fieldNames = await PageObjects.discover.getAllFieldNames();
       expect(fieldNames).to.not.contain('referer');
       const relatedContentFields = fieldNames.filter(
diff --git a/test/functional/page_objects/discover_page.js b/test/functional/page_objects/discover_page.ts
similarity index 58%
rename from test/functional/page_objects/discover_page.js
rename to test/functional/page_objects/discover_page.ts
index 46aadc63c64f1..f018a1ceda507 100644
--- a/test/functional/page_objects/discover_page.js
+++ b/test/functional/page_objects/discover_page.ts
@@ -18,40 +18,34 @@
  */
 
 import expect from '@kbn/expect';
+import { FtrProviderContext } from '../ftr_provider_context';
 
-export function DiscoverPageProvider({ getService, getPageObjects }) {
+export function DiscoverPageProvider({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const testSubjects = getService('testSubjects');
   const find = getService('find');
   const flyout = getService('flyout');
-  const PageObjects = getPageObjects(['header', 'common']);
+  const { header } = getPageObjects(['header']);
   const browser = getService('browser');
   const globalNav = getService('globalNav');
   const config = getService('config');
   const defaultFindTimeout = config.get('timeouts.find');
   const elasticChart = getService('elasticChart');
+  const docTable = getService('docTable');
 
   class DiscoverPage {
-    async getQueryField() {
-      return await find.byCssSelector("input[ng-model='state.query']");
-    }
-
-    async getQuerySearchButton() {
-      return await find.byCssSelector("button[aria-label='Search']");
-    }
-
-    async getChartTimespan() {
+    public async getChartTimespan() {
       const el = await find.byCssSelector('.small > label[for="dscResultsIntervalSelector"]');
       return await el.getVisibleText();
     }
 
-    async saveSearch(searchName) {
+    public async saveSearch(searchName: string) {
       log.debug('saveSearch');
       await this.clickSaveSearchButton();
       await testSubjects.setValue('savedObjectTitle', searchName);
       await testSubjects.click('confirmSaveSavedObjectButton');
-      await PageObjects.header.waitUntilLoadingHasFinished();
+      await header.waitUntilLoadingHasFinished();
       // LeeDr - this additional checking for the saved search name was an attempt
       // to cause this method to wait for the reloading of the page to complete so
       // that the next action wouldn't have to retry.  But it doesn't really solve
@@ -63,30 +57,29 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
       });
     }
 
-    async inputSavedSearchTitle(searchName) {
+    public async inputSavedSearchTitle(searchName: string) {
       await testSubjects.setValue('savedObjectTitle', searchName);
     }
 
-    async clickConfirmSavedSearch() {
+    public async clickConfirmSavedSearch() {
       await testSubjects.click('confirmSaveSavedObjectButton');
     }
 
-    async openAddFilterPanel() {
+    public async openAddFilterPanel() {
       await testSubjects.click('addFilter');
     }
 
-    async waitUntilSearchingHasFinished() {
+    public async waitUntilSearchingHasFinished() {
       const spinner = await testSubjects.find('loadingSpinner');
       await find.waitForElementHidden(spinner, defaultFindTimeout * 10);
     }
 
-    async getColumnHeaders() {
-      const headerElements = await testSubjects.findAll('docTableHeaderField');
-      return await Promise.all(headerElements.map(async el => await el.getVisibleText()));
+    public async getColumnHeaders() {
+      return await docTable.getHeaderFields('embeddedSavedSearchDocTable');
     }
 
-    async openLoadSavedSearchPanel() {
-      const isOpen = await testSubjects.exists('loadSearchForm');
+    public async openLoadSavedSearchPanel() {
+      let isOpen = await testSubjects.exists('loadSearchForm');
       if (isOpen) {
         return;
       }
@@ -95,55 +88,47 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
       // saving a search cause reloading of the page and the "Open" menu item goes stale.
       await retry.try(async () => {
         await this.clickLoadSavedSearchButton();
-        await PageObjects.header.waitUntilLoadingHasFinished();
-        const isOpen = await testSubjects.exists('loadSearchForm');
+        await header.waitUntilLoadingHasFinished();
+        isOpen = await testSubjects.exists('loadSearchForm');
         expect(isOpen).to.be(true);
       });
     }
 
-    async closeLoadSaveSearchPanel() {
+    public async closeLoadSaveSearchPanel() {
       await flyout.ensureClosed('loadSearchForm');
     }
 
-    async hasSavedSearch(searchName) {
+    public async hasSavedSearch(searchName: string) {
       const searchLink = await find.byButtonText(searchName);
-      return searchLink.isDisplayed();
+      return await searchLink.isDisplayed();
     }
 
-    async loadSavedSearch(searchName) {
+    public async loadSavedSearch(searchName: string) {
       await this.openLoadSavedSearchPanel();
       const searchLink = await find.byButtonText(searchName);
       await searchLink.click();
-      await PageObjects.header.waitUntilLoadingHasFinished();
+      await header.waitUntilLoadingHasFinished();
     }
 
-    async clickNewSearchButton() {
+    public async clickNewSearchButton() {
       await testSubjects.click('discoverNewButton');
     }
 
-    async clickSaveSearchButton() {
+    public async clickSaveSearchButton() {
       await testSubjects.click('discoverSaveButton');
     }
 
-    async clickLoadSavedSearchButton() {
+    public async clickLoadSavedSearchButton() {
       await testSubjects.moveMouseTo('discoverOpenButton');
       await testSubjects.click('discoverOpenButton');
     }
 
-    async closeLoadSavedSearchPanel() {
+    public async closeLoadSavedSearchPanel() {
       await testSubjects.click('euiFlyoutCloseButton');
     }
 
-    async getChartCanvas() {
-      return await find.byCssSelector('.echChart canvas:last-of-type');
-    }
-
-    async chartCanvasExist() {
-      return await find.existsByCssSelector('.echChart canvas:last-of-type');
-    }
-
-    async clickHistogramBar() {
-      const el = await this.getChartCanvas();
+    public async clickHistogramBar() {
+      const el = await elasticChart.getCanvas();
 
       await browser
         .getActions()
@@ -152,8 +137,8 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
         .perform();
     }
 
-    async brushHistogram() {
-      const el = await this.getChartCanvas();
+    public async brushHistogram() {
+      const el = await elasticChart.getCanvas();
 
       await browser.dragAndDrop(
         { location: el, offset: { x: 200, y: 20 } },
@@ -161,169 +146,154 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
       );
     }
 
-    async getCurrentQueryName() {
+    public async getCurrentQueryName() {
       return await globalNav.getLastBreadcrumb();
     }
 
-    async getBarChartData() {
-      let yAxisLabel = 0;
-
-      await PageObjects.header.waitUntilLoadingHasFinished();
-      const y = await find.byCssSelector(
-        'div.visAxis__splitAxes--y > div > svg > g > g:last-of-type'
-      );
-      const yLabel = await y.getVisibleText();
-      yAxisLabel = yLabel.replace(',', '');
-      log.debug('yAxisLabel = ' + yAxisLabel);
-      // #kibana-body > div.content > div > div > div > div.visEditor__canvas > visualize > div.visChart > div > div.visWrapper__column > div.visWrapper__chart > div > svg > g > g.series.\30 > rect:nth-child(1)
-      const svg = await find.byCssSelector('div.chart > svg');
-      const $ = await svg.parseDomContent();
-      const yAxisHeight = $('rect.background').attr('height');
-      log.debug('theHeight = ' + yAxisHeight);
-      const bars = $('g > g.series > rect')
-        .toArray()
-        .map(chart => {
-          const barHeight = $(chart).attr('height');
-          return Math.round((barHeight / yAxisHeight) * yAxisLabel);
-        });
-
-      return bars;
-    }
-
-    async getChartInterval() {
+    public async getChartInterval() {
       const selectedValue = await testSubjects.getAttribute('discoverIntervalSelect', 'value');
-      const selectedOption = await find.byCssSelector('option[value="' + selectedValue + '"]');
+      const selectedOption = await find.byCssSelector(`option[value="${selectedValue}"]`);
       return selectedOption.getVisibleText();
     }
 
-    async setChartInterval(interval) {
-      const optionElement = await find.byCssSelector('option[label="' + interval + '"]', 5000);
+    public async setChartInterval(interval: string) {
+      const optionElement = await find.byCssSelector(`option[label="${interval}"]`, 5000);
       await optionElement.click();
-      return await PageObjects.header.waitUntilLoadingHasFinished();
+      return await header.waitUntilLoadingHasFinished();
     }
 
-    async getHitCount() {
-      await PageObjects.header.waitUntilLoadingHasFinished();
+    public async getHitCount() {
+      await header.waitUntilLoadingHasFinished();
       return await testSubjects.getVisibleText('discoverQueryHits');
     }
 
-    async getDocHeader() {
-      const header = await find.byCssSelector('thead > tr:nth-child(1)');
-      return await header.getVisibleText();
+    public async getDocHeader() {
+      const docHeader = await find.byCssSelector('thead > tr:nth-child(1)');
+      return await docHeader.getVisibleText();
     }
 
-    async getDocTableIndex(index) {
-      const row = await find.byCssSelector('tr.kbnDocTable__row:nth-child(' + index + ')');
+    public async getDocTableIndex(index: number) {
+      const row = await find.byCssSelector(`tr.kbnDocTable__row:nth-child(${index})`);
       return await row.getVisibleText();
     }
 
-    async getDocTableField(index) {
+    public async getDocTableField(index: number) {
       const field = await find.byCssSelector(
         `tr.kbnDocTable__row:nth-child(${index}) > [data-test-subj='docTableField']`
       );
       return await field.getVisibleText();
     }
 
-    async clickDocSortDown() {
+    public async clickDocSortDown() {
       await find.clickByCssSelector('.fa-sort-down');
     }
 
-    async clickDocSortUp() {
+    public async clickDocSortUp() {
       await find.clickByCssSelector('.fa-sort-up');
     }
 
-    async getMarks() {
-      const marks = await find.allByCssSelector('mark');
-      return await Promise.all(marks.map(mark => mark.getVisibleText()));
+    public async getMarks() {
+      const table = await docTable.getTable();
+      const $ = await table.parseDomContent();
+      return $('mark')
+        .toArray()
+        .map(mark => $(mark).text());
     }
 
-    async toggleSidebarCollapse() {
+    public async toggleSidebarCollapse() {
       return await testSubjects.click('collapseSideBarButton');
     }
 
-    async getAllFieldNames() {
-      const items = await find.allByCssSelector('.sidebar-item');
-      return await Promise.all(items.map(item => item.getVisibleText()));
+    public async getAllFieldNames() {
+      const sidebar = await testSubjects.find('discover-sidebar');
+      const $ = await sidebar.parseDomContent();
+      return $('.sidebar-item[attr-field]')
+        .toArray()
+        .map(field =>
+          $(field)
+            .find('span.eui-textTruncate')
+            .text()
+        );
     }
 
-    async getSidebarWidth() {
+    public async getSidebarWidth() {
       const sidebar = await find.byCssSelector('.sidebar-list');
       return await sidebar.getAttribute('clientWidth');
     }
 
-    async hasNoResults() {
+    public async hasNoResults() {
       return await testSubjects.exists('discoverNoResults');
     }
 
-    async hasNoResultsTimepicker() {
+    public async hasNoResultsTimepicker() {
       return await testSubjects.exists('discoverNoResultsTimefilter');
     }
 
-    async clickFieldListItem(field) {
+    public async clickFieldListItem(field: string) {
       return await testSubjects.click(`field-${field}`);
     }
 
-    async clickFieldListItemAdd(field) {
+    public async clickFieldListItemAdd(field: string) {
       await testSubjects.moveMouseTo(`field-${field}`);
       await testSubjects.click(`fieldToggle-${field}`);
     }
 
-    async clickFieldListItemVisualize(field) {
+    public async clickFieldListItemVisualize(field: string) {
       return await retry.try(async () => {
         await testSubjects.click(`fieldVisualize-${field}`);
       });
     }
 
-    async expectFieldListItemVisualize(field) {
+    public async expectFieldListItemVisualize(field: string) {
       await testSubjects.existOrFail(`fieldVisualize-${field}`);
     }
 
-    async expectMissingFieldListItemVisualize(field) {
+    public async expectMissingFieldListItemVisualize(field: string) {
       await testSubjects.missingOrFail(`fieldVisualize-${field}`, { allowHidden: true });
     }
 
-    async clickFieldListPlusFilter(field, value) {
+    public async clickFieldListPlusFilter(field: string, value: string) {
       // this method requires the field details to be open from clickFieldListItem()
       // testSubjects.find doesn't handle spaces in the data-test-subj value
       await find.clickByCssSelector(`[data-test-subj="plus-${field}-${value}"]`);
-      await PageObjects.header.waitUntilLoadingHasFinished();
+      await header.waitUntilLoadingHasFinished();
     }
 
-    async clickFieldListMinusFilter(field, value) {
+    public async clickFieldListMinusFilter(field: string, value: string) {
       // this method requires the field details to be open from clickFieldListItem()
       // testSubjects.find doesn't handle spaces in the data-test-subj value
       await find.clickByCssSelector('[data-test-subj="minus-' + field + '-' + value + '"]');
-      await PageObjects.header.waitUntilLoadingHasFinished();
+      await header.waitUntilLoadingHasFinished();
     }
 
-    async selectIndexPattern(indexPattern) {
+    public async selectIndexPattern(indexPattern: string) {
       await testSubjects.click('indexPattern-switch-link');
       await find.clickByCssSelector(
         `[data-test-subj="indexPattern-switcher"] [title="${indexPattern}"]`
       );
-      await PageObjects.header.waitUntilLoadingHasFinished();
+      await header.waitUntilLoadingHasFinished();
     }
 
-    async removeHeaderColumn(name) {
+    public async removeHeaderColumn(name: string) {
       await testSubjects.moveMouseTo(`docTableHeader-${name}`);
       await testSubjects.click(`docTableRemoveHeader-${name}`);
     }
 
-    async openSidebarFieldFilter() {
+    public async openSidebarFieldFilter() {
       await testSubjects.click('toggleFieldFilterButton');
       await testSubjects.existOrFail('filterSelectionPanel');
     }
 
-    async closeSidebarFieldFilter() {
+    public async closeSidebarFieldFilter() {
       await testSubjects.click('toggleFieldFilterButton');
       await testSubjects.missingOrFail('filterSelectionPanel', { allowHidden: true });
     }
 
-    async waitForChartLoadingComplete(renderCount) {
+    public async waitForChartLoadingComplete(renderCount: number) {
       await elasticChart.waitForRenderingCount('discoverChart', renderCount);
     }
 
-    async waitForDocTableLoadingComplete() {
+    public async waitForDocTableLoadingComplete() {
       await testSubjects.waitForAttributeToChange(
         'discoverDocTable',
         'data-render-complete',
diff --git a/test/functional/page_objects/index.ts b/test/functional/page_objects/index.ts
index 4ba8ddb035913..db58c3c2c7d19 100644
--- a/test/functional/page_objects/index.ts
+++ b/test/functional/page_objects/index.ts
@@ -23,13 +23,11 @@ import { ConsolePageProvider } from './console_page';
 // @ts-ignore not TS yet
 import { ContextPageProvider } from './context_page';
 import { DashboardPageProvider } from './dashboard_page';
-// @ts-ignore not TS yet
 import { DiscoverPageProvider } from './discover_page';
 // @ts-ignore not TS yet
 import { ErrorPageProvider } from './error_page';
 // @ts-ignore not TS yet
 import { HeaderPageProvider } from './header_page';
-// @ts-ignore not TS yet
 import { HomePageProvider } from './home_page';
 // @ts-ignore not TS yet
 import { MonitoringPageProvider } from './monitoring_page';
diff --git a/test/functional/services/doc_table.ts b/test/functional/services/doc_table.ts
index 2530831e0f6f9..cb3daf20c641a 100644
--- a/test/functional/services/doc_table.ts
+++ b/test/functional/services/doc_table.ts
@@ -30,8 +30,8 @@ export function DocTableProvider({ getService, getPageObjects }: FtrProviderCont
   }
 
   class DocTable {
-    public async getTable() {
-      return await testSubjects.find('docTable');
+    public async getTable(selector?: string) {
+      return await testSubjects.find(selector ? selector : 'docTable');
     }
 
     public async getRowsText() {
@@ -106,8 +106,8 @@ export function DocTableProvider({ getService, getPageObjects }: FtrProviderCont
       );
     }
 
-    public async getHeaderFields(): Promise<string[]> {
-      const table = await this.getTable();
+    public async getHeaderFields(selector?: string): Promise<string[]> {
+      const table = await this.getTable(selector);
       const $ = await table.parseDomContent();
       return $.findTestSubjects('~docTableHeaderField')
         .toArray()
diff --git a/test/functional/services/elastic_chart.ts b/test/functional/services/elastic_chart.ts
index afae3f830b3bf..45ad157fc5c02 100644
--- a/test/functional/services/elastic_chart.ts
+++ b/test/functional/services/elastic_chart.ts
@@ -22,10 +22,19 @@ import { FtrProviderContext } from '../ftr_provider_context';
 
 export function ElasticChartProvider({ getService }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
+  const find = getService('find');
   const retry = getService('retry');
   const log = getService('log');
 
   class ElasticChart {
+    public async getCanvas() {
+      return await find.byCssSelector('.echChart canvas:last-of-type');
+    }
+
+    public async canvasExists() {
+      return await find.existsByCssSelector('.echChart canvas:last-of-type');
+    }
+
     public async waitForRenderComplete(dataTestSubj: string) {
       const chart = await testSubjects.find(dataTestSubj);
       const rendered = await chart.findAllByCssSelector('.echChart[data-ech-render-complete=true]');