[TSVB] markdown variables (#33324) (#33930)

* improve test coverage for TSVB markdown
* add new tests for change label, variable and rendering markdown table

test/functional/apps/visualize/_tsvb_markdown.ts

@@ -22,11 +22,20 @@ import { FtrProviderContext } from '../../ftr_provider_context';
 
 // tslint:disable-next-line:no-default-export
 export default function({ getPageObjects }: FtrProviderContext) {
-  const { visualBuilder, timePicker } = getPageObjects([
-    'visualBuilder',
-    'timePicker',
-    'visualize',
-  ]);
+  const { visualBuilder, timePicker } = getPageObjects(['visualBuilder', 'timePicker']);
+
+  async function cleanupMarkdownData(variableName: 'variable' | 'label', checkedValue: string) {
+    await visualBuilder.markdownSwitchSubTab('data');
+    await visualBuilder.setMarkdownDataVariable('', variableName);
+
+    await visualBuilder.markdownSwitchSubTab('markdown');
+    const rerenderedTable = await visualBuilder.getMarkdownTableVariables();
+    rerenderedTable.forEach(row => {
+      variableName === 'label'
+        ? expect(row.key).to.include.string(checkedValue)
+        : expect(row.key).to.not.include.string(checkedValue);
+    });
+  }
 
   describe('visual builder', function describeIndexTests() {
     describe('markdown', () => {
@@ -71,6 +80,52 @@ export default function({ getPageObjects }: FtrProviderContext) {
         const markdownText = await visualBuilder.getMarkdownText();
         expect(markdownText).to.be(expectedRenderer);
       });
+
+      it('should change label name', async () => {
+        const BASE_LABEL = 'count';
+        const LABEL = 'label';
+        await visualBuilder.markdownSwitchSubTab('data');
+
+        await visualBuilder.setMarkdownDataVariable(LABEL, LABEL);
+
+        await visualBuilder.markdownSwitchSubTab('markdown');
+        const table = await visualBuilder.getMarkdownTableVariables();
+        table.forEach(row => {
+          expect(row.key).to.contain(LABEL);
+        });
+        await cleanupMarkdownData(LABEL, BASE_LABEL);
+      });
+
+      it('should change variable name', async () => {
+        const VARIABLE = 'variable';
+        await visualBuilder.markdownSwitchSubTab('data');
+        await visualBuilder.setMarkdownDataVariable(VARIABLE, VARIABLE);
+        await visualBuilder.markdownSwitchSubTab('markdown');
+        const table = await visualBuilder.getMarkdownTableVariables();
+
+        table.forEach((row, index) => {
+          // exception: last index for variable is always: {{count.label}}
+          index === table.length - 1
+            ? expect(row.key).to.not.include.string(VARIABLE)
+            : expect(row.key).to.include.string(VARIABLE);
+        });
+
+        await cleanupMarkdownData(VARIABLE, VARIABLE);
+      });
+
+      it('should render markdown table', async () => {
+        const TABLE =
+          '| raw | formatted |\n|-|-|\n| {{count.last.raw}} | {{count.last.formatted}} |';
+        const DATA = '46';
+
+        await visualBuilder.enterMarkdown(TABLE);
+        const text = await visualBuilder.getMarkdownText();
+        const tableValues = text.split('\n').map(row => row.split(' '))[1]; // [46, 46]
+
+        tableValues.forEach(value => {
+          expect(value).to.be.equal(DATA);
+        });
+      });
     });
   });
 }

test/functional/page_objects/visual_builder_page.ts

@@ -83,7 +83,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
       await input.pressKeys(browser.keys.BACK_SPACE); // Delete all content
     }
 
-    public async getMarkdownText() {
+    public async getMarkdownText(): Promise<string> {
       const el = await find.byCssSelector('.tvbEditorVisualization');
       const text = await el.getVisibleText();
       return text;
@@ -156,6 +156,34 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
       await element.click();
     }
 
+    /**
+     * setting label for markdown visualization
+     *
+     * @param {string} variableName
+     * @param type
+     * @memberof VisualBuilderPage
+     */
+    public async setMarkdownDataVariable(variableName: string, type: 'variable' | 'label') {
+      const SELECTOR = type === 'label' ? '[placeholder="Label"]' : '[placeholder="Variable name"]';
+      const prevRenderingCount = await PageObjects.visualize.getVisualizationRenderingCount();
+      if (variableName) {
+        await find.setValue(SELECTOR, variableName);
+      } else {
+        const input = await find.byCssSelector(SELECTOR);
+        if (process.platform === 'darwin') {
+          // Mac workaround
+          for (let i = 0; i <= type.length; i++) {
+            await input.pressKeys(browser.keys.BACK_SPACE);
+          }
+        } else {
+          await input.pressKeys([browser.keys.CONTROL, 'a']); // Select all for everything else
+          await input.pressKeys(browser.keys.NULL); // Release modifier keys
+          await input.pressKeys(browser.keys.BACK_SPACE); // Delete all content
+        }
+      }
+      await PageObjects.visualize.waitForRenderingCount(prevRenderingCount + 1);
+    }
+
     public async clickSeriesOption(nth = 0) {
       const el = await testSubjects.findAll('seriesOptions');
       await el[nth].click();

test/functional/services/browser.js

@@ -22,11 +22,11 @@ import { cloneDeep } from 'lodash';
 import { modifyUrl } from '../../../src/core/utils';
 import { WebElementWrapper } from './lib/web_element_wrapper';
 
+
 export async function BrowserProvider({ getService }) {
   const { driver, Key, LegacyActionSequence } = await getService('__webdriver__').init();
 
   class BrowserService {
-
     /**
      * Keyboard events
      */
@@ -121,8 +121,8 @@ export async function BrowserProvider({ getService }) {
     async dragAndDrop(from, to) {
       let _from;
       let _to;
-      const _fromOffset = (from.offset) ? { x: from.offset.x || 0,  y: from.offset.y || 0 } : { x: 0, y: 0 };
-      const _toOffset = (to.offset) ? { x: to.offset.x || 0,  y: to.offset.y || 0 } : { x: 0, y: 0 };
+      const _fromOffset = from.offset ? { x: from.offset.x || 0, y: from.offset.y || 0 } : { x: 0, y: 0 };
+      const _toOffset = to.offset ? { x: to.offset.x || 0, y: to.offset.y || 0 } : { x: 0, y: 0 };
 
       if (from.location instanceof WebElementWrapper) {
         _from = from.location._webElement;
@@ -230,9 +230,9 @@ export async function BrowserProvider({ getService }) {
      * @return {Promise<LogEntry[]>}
      */
     async getLogsFor(...args) {
-      //The logs endpoint has not been defined in W3C Spec browsers other than Chrome don't have access to this endpoint.
-      //See: https://github.com/w3c/webdriver/issues/406
-      //See: https://w3c.github.io/webdriver/#endpoints
+      // The logs endpoint has not been defined in W3C Spec browsers other than Chrome don't have access to this endpoint.
+      // See: https://github.com/w3c/webdriver/issues/406
+      // See: https://w3c.github.io/webdriver/#endpoints
       if (driver.executor_.w3c === true) {
         return [];
       } else {
@@ -358,5 +358,5 @@ export async function BrowserProvider({ getService }) {
     }
   }
 
-  return  new BrowserService();
+  return new BrowserService();
 }

test/functional/services/remote/webdriver.ts

@@ -22,7 +22,6 @@ import { delay } from 'bluebird';
 import chromeDriver from 'chromedriver';
 // @ts-ignore types not available
 import geckoDriver from 'geckodriver';
-
 // @ts-ignore types for 4.0 not available yet
 import { Builder, By, Key, logging, until } from 'selenium-webdriver';
 // @ts-ignore types not available