[TSVB] markdown variables(revert fix) (#34067) (#37197)

* add markdown tests

src/legacy/core_plugins/metrics/public/components/vis_editor_visualization.js

@@ -229,7 +229,7 @@ class VisEditorVisualizationUI extends Component {
 
         {!autoApply &&
         <EuiFlexItem grow={false}>
-          <EuiButton iconType="play" fill size="s" onClick={onCommit} disabled={!dirty}>
+          <EuiButton iconType="play" fill size="s" onClick={onCommit} disabled={!dirty} data-test-subj="applyBtn">
             <FormattedMessage
               id="tsvb.visEditorVisualization.applyChangesLabel"
               defaultMessage="Apply changes"

test/functional/apps/visualize/_tsvb_markdown.ts

@@ -22,11 +22,20 @@ import { FtrProviderContext } from '../../ftr_provider_context';
 
 // eslint-disable-next-line import/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 => {
+      // eslint-disable-next-line no-unused-expressions
+      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,38 @@ export default function({ getPageObjects }: FtrProviderContext) {
         const markdownText = await visualBuilder.getMarkdownText();
         expect(markdownText).to.be(expectedRenderer);
       });
+      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);
+        });
+      });
+
+      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}}
+          // eslint-disable-next-line no-unused-expressions
+          index === table.length - 1
+            ? expect(row.key).to.not.include.string(VARIABLE)
+            : expect(row.key).to.include.string(VARIABLE);
+        });
+
+        await cleanupMarkdownData(VARIABLE, VARIABLE);
+      });
     });
   });
 }

test/functional/page_objects/visual_builder_page.ts

@@ -95,7 +95,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
       await input.clearValueWithKeyboard();
     }
 
-    public async getMarkdownText() {
+    public async getMarkdownText(): Promise<string> {
       const el = await find.byCssSelector('.tvbEditorVisualization');
       const text = await el.getVisibleText();
       return text;
@@ -115,7 +115,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
     > {
       const testTableVariables = await testSubjects.find('tsvbMarkdownVariablesTable');
       const variablesSelector = 'tbody tr';
-      const exists = await find.existsByDisplayedByCssSelector(variablesSelector);
+      const exists = await find.existsByCssSelector(variablesSelector);
       if (!exists) {
         log.debug('variable list is empty');
         return [];
@@ -168,6 +168,23 @@ 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"]';
+      if (variableName) {
+        await find.setValue(SELECTOR, variableName);
+      } else {
+        const input = await find.byCssSelector(SELECTOR);
+        await input.clearValueWithKeyboard({ charByChar: true });
+      }
+    }
+
     public async clickSeriesOption(nth = 0) {
       const el = await testSubjects.findAll('seriesOptions');
       await el[nth].click();
@@ -235,7 +252,15 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
       });
     }
 
-    public async selectAggType(value: string, nth: number = 0): Promise<void> {
+    public async toggleAutoApplyChanges() {
+      await find.clickByCssSelector('#tsvbAutoApplyInput');
+    }
+
+    public async applyChanges() {
+      await testSubjects.click('applyBtn');
+    }
+
+    public async selectAggType(value: string, nth = 0) {
       const elements = await testSubjects.findAll('aggSelector');
       await comboBox.setElement(elements[nth], value);
       return await PageObjects.header.waitUntilLoadingHasFinished();

test/functional/services/browser.ts

@@ -21,6 +21,7 @@ import { cloneDeep } from 'lodash';
 import { IKey, logging } from 'selenium-webdriver';
 
 import { modifyUrl } from '../../../src/core/utils';
+
 import { WebElementWrapper } from './lib/web_element_wrapper';
 
 import { FtrProviderContext } from '../ftr_provider_context';

test/functional/services/lib/web_element_wrapper/web_element_wrapper.ts

@@ -160,7 +160,7 @@ export class WebElementWrapper {
   async clearValueWithKeyboard(options: TypeOptions = { charByChar: false }): Promise<void> {
     if (options.charByChar === true) {
       const value = await this.getAttribute('value');
-      for (let i = 1; i <= value.length; i++) {
+      for (let i = 0; i <= value.length; i++) {
         await this.pressKeys(this.Keys.BACK_SPACE);
         await delay(100);
       }

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
 import chrome from 'selenium-webdriver/chrome';