From 4ad2873b7754d6a868879ab7b588895331bbed9c Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 31 Jul 2017 12:45:38 -0600
Subject: [PATCH] update spy table headers when columns update (#13130)

* update paginated table headers with columns update

* remove unneeded sleep

* update getDataTableHeaders to preffered format

* use data-test-subj attribute for functional tests instead of CSS selectors
---
 .../paginated_table/paginated_table.html      | 11 +++--
 test/functional/apps/visualize/_spy_panel.js  | 43 +++++++++++++++++++
 test/functional/apps/visualize/index.js       |  1 +
 .../functional/page_objects/visualize_page.js |  8 +++-
 4 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 test/functional/apps/visualize/_spy_panel.js

diff --git a/src/ui/public/paginated_table/paginated_table.html b/src/ui/public/paginated_table/paginated_table.html
index 69242f4fda33a..fdbc998345506 100644
--- a/src/ui/public/paginated_table/paginated_table.html
+++ b/src/ui/public/paginated_table/paginated_table.html
@@ -5,10 +5,10 @@
   class="agg-table">
   <div class="agg-table-paginated">
     <table class="table table-condensed">
-      <thead>
+      <thead data-test-subj="paginated-table-header">
         <tr>
           <th
-            ng-repeat="col in ::columns"
+            ng-repeat="col in columns"
             ng-click="paginatedTable.sortColumn($index)"
             class="{{ col.class }}">
             <span ng-bind="::col.title"></span>
@@ -25,7 +25,12 @@
           </th>
         </tr>
       </thead>
-      <tbody kbn-rows="page" kbn-rows-min="paginatedTable.rowsToShow(perPage, page.length)"></tbody>
+      <tbody
+        data-test-subj="paginated-table-body"
+        kbn-rows="page"
+        kbn-rows-min="paginatedTable.rowsToShow(perPage, page.length)"
+      >
+      </tbody>
       <tfoot ng-if="showTotal">
         <tr>
           <th ng-repeat="col in columns" class="numeric-value">{{col.total}}</th>
diff --git a/test/functional/apps/visualize/_spy_panel.js b/test/functional/apps/visualize/_spy_panel.js
new file mode 100644
index 0000000000000..046d25b569bab
--- /dev/null
+++ b/test/functional/apps/visualize/_spy_panel.js
@@ -0,0 +1,43 @@
+import expect from 'expect.js';
+
+export default function ({ getService, getPageObjects }) {
+  const log = getService('log');
+  const PageObjects = getPageObjects(['common', 'visualize', 'header']);
+
+  describe('visualize app', function describeIndexTests() {
+    before(async function () {
+      const fromTime = '2015-09-19 06:31:44.000';
+      const toTime = '2015-09-23 18:31:44.000';
+
+      await PageObjects.common.navigateToUrl('visualize', 'new');
+      await PageObjects.visualize.clickVerticalBarChart();
+      await PageObjects.visualize.clickNewSearch();
+
+      log.debug('Set absolute time range from \"' + fromTime + '\" to \"' + toTime + '\"');
+      await PageObjects.header.setAbsoluteRange(fromTime, toTime);
+      await PageObjects.visualize.clickGo();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+    });
+
+    describe('spy panel tabel', function indexPatternCreation() {
+
+      it('should update table header when columns change', async function () {
+
+        await PageObjects.visualize.openSpyPanel();
+        let headers = await PageObjects.visualize.getDataTableHeaders();
+        expect(headers.trim()).to.equal('Count');
+
+        log.debug('Add Average Metric on machine.ram field');
+        await PageObjects.visualize.clickAddMetric();
+        await PageObjects.visualize.clickBucket('Y-Axis');
+        await PageObjects.visualize.selectAggregation('Average');
+        await PageObjects.visualize.selectField('machine.ram', 'metrics');
+        await PageObjects.visualize.clickGo();
+        await PageObjects.visualize.openSpyPanel();
+
+        headers = await PageObjects.visualize.getDataTableHeaders();
+        expect(headers.trim()).to.equal('Count Average machine.ram');
+      });
+    });
+  });
+}
diff --git a/test/functional/apps/visualize/index.js b/test/functional/apps/visualize/index.js
index 945bf87876cf4..f66712109576d 100644
--- a/test/functional/apps/visualize/index.js
+++ b/test/functional/apps/visualize/index.js
@@ -14,6 +14,7 @@ export default function ({ getService, loadTestFile }) {
       await kibanaServer.uiSettings.replace({ 'dateFormat:tz': 'UTC', 'defaultIndex': 'logstash-*' });
     });
 
+    loadTestFile(require.resolve('./_spy_panel'));
     loadTestFile(require.resolve('./_chart_types'));
     loadTestFile(require.resolve('./_gauge_chart'));
     loadTestFile(require.resolve('./_area_chart'));
diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js
index 0682358bdf604..9390c90028fb9 100644
--- a/test/functional/page_objects/visualize_page.js
+++ b/test/functional/page_objects/visualize_page.js
@@ -469,10 +469,16 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
 
     async getDataTableData() {
       const dataTable = await retry.try(
-        async () => find.byCssSelector('table.table.table-condensed tbody', defaultFindTimeout * 2));
+        async () => testSubjects.find('paginated-table-body'));
       return await dataTable.getVisibleText();
     }
 
+    async getDataTableHeaders() {
+      const dataTableHeader = await retry.try(
+        async () => testSubjects.find('paginated-table-header'));
+      return await dataTableHeader.getVisibleText();
+    }
+
     async getMarkdownData() {
       const markdown = await retry.try(async () => find.byCssSelector('visualize.ng-isolate-scope'));
       return await markdown.getVisibleText();