[TSVB]: initial markdown test implementation

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

@@ -169,7 +169,7 @@ class MarkdownEditor extends Component {
               />
             </p>
           </EuiText>
-          <table className="table">
+          <table className="table" data-test-subj="tsvbMarkdownVariablesTable">
             <thead>
               <tr>
                 <th scope="col">
@@ -190,7 +190,7 @@ class MarkdownEditor extends Component {
           </table>
 
           {rows.length === 0 && (
-            <EuiTitle size="xxs" className="tvbMarkdownEditor__noVariables">
+            <EuiTitle size="xxs" className="tsvbMarkdownVariablesTable__noVariables" data-test-subj="tvbMarkdownEditor__noVariables">
               <span>
                 <FormattedMessage
                   id="tsvb.markdownEditor.noVariablesAvailableDescription"

src/legacy/core_plugins/metrics/public/components/panel_config/markdown.js

@@ -279,11 +279,12 @@ class MarkdownPanelConfigUi extends Component {
           <EuiTab
             isSelected={selectedTab === 'markdown'}
             onClick={() => this.switchTab('markdown')}
+            data-test-subj="markdown-subtab"
           >
             Markdown
           </EuiTab>
           <EuiTab
-            data-test-subj="markdownDataBtn"
+            data-test-subj="data-subtab"
             isSelected={selectedTab === 'data'}
             onClick={() => this.switchTab('data')}
           >
@@ -295,6 +296,7 @@ class MarkdownPanelConfigUi extends Component {
           <EuiTab
             isSelected={selectedTab === 'options'}
             onClick={() => this.switchTab('options')}
+            data-test-subj="options-subtab"
           >
             <FormattedMessage
               id="tsvb.markdown.optionsTab.panelOptionsButtonLabel"

test/functional/apps/visualize/_tsvb_chart.ts

@@ -152,58 +152,6 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
       });
     });
 
-    describe('markdown', () => {
-      before(async () => {
-        await PageObjects.visualBuilder.resetPage();
-        await PageObjects.visualBuilder.clickMarkdown();
-        await PageObjects.timePicker.setAbsoluteRange(
-          '2015-09-22 06:00:00.000',
-          '2015-09-22 11:00:00.000'
-        );
-      });
-
-      it('should allow printing raw timestamp of data', async () => {
-        await retry.try(async () => {
-          await PageObjects.visualBuilder.enterMarkdown('{{ count.data.raw.[0].[0] }}');
-          const text = await PageObjects.visualBuilder.getMarkdownText();
-          expect(text).to.be('1442901600000');
-        });
-      });
-
-      it('should allow printing raw value of data', async () => {
-        await PageObjects.visualBuilder.enterMarkdown('{{ count.data.raw.[0].[1] }}');
-        const text = await PageObjects.visualBuilder.getMarkdownText();
-        expect(text).to.be('6');
-      });
-
-      describe('allow time offsets', () => {
-        before(async () => {
-          await PageObjects.visualBuilder.enterMarkdown(
-            '{{ count.data.raw.[0].[0] }}#{{ count.data.raw.[0].[1] }}'
-          );
-          await PageObjects.visualBuilder.clickMarkdownData();
-          await PageObjects.visualBuilder.clickSeriesOption();
-        });
-
-        it('allow positive time offsets', async () => {
-          await PageObjects.visualBuilder.enterOffsetSeries('2h');
-          await PageObjects.header.waitUntilLoadingHasFinished();
-          const text = await PageObjects.visualBuilder.getMarkdownText();
-          const [timestamp, value] = text.split('#');
-          expect(timestamp).to.be('1442901600000');
-          expect(value).to.be('3');
-        });
-
-        it('allow negative time offsets', async () => {
-          await PageObjects.visualBuilder.enterOffsetSeries('-2h');
-          await PageObjects.header.waitUntilLoadingHasFinished();
-          const text = await PageObjects.visualBuilder.getMarkdownText();
-          const [timestamp, value] = text.split('#');
-          expect(timestamp).to.be('1442901600000');
-          expect(value).to.be('23');
-        });
-      });
-    });
     // add a table sanity timestamp
     describe('table', () => {
       before(async () => {

test/functional/apps/visualize/_tsvb_markdown.ts

@@ -0,0 +1,76 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import expect from 'expect.js';
+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',
+  ]);
+
+  describe('visual builder', function describeIndexTests() {
+    describe('markdown', () => {
+      before(async () => {
+        await visualBuilder.resetPage();
+        await visualBuilder.clickMarkdown();
+        await timePicker.setAbsoluteRange('2015-09-22 06:00:00.000', '2015-09-22 11:00:00.000');
+      });
+
+      it('should render subtabs and table variables markdown components', async () => {
+        const tabs = await visualBuilder.getSubTabs();
+        expect(tabs).to.have.length(3);
+
+        const variables = await visualBuilder.getMarkdownTableVariables();
+        expect(variables).not.to.be.empty();
+        expect(variables).to.have.length(5);
+      });
+
+      it('should allow printing raw timestamp of data', async () => {
+        await visualBuilder.enterMarkdown('{{ count.data.raw.[0].[0] }}');
+        const text = await visualBuilder.getMarkdownText();
+        expect(text).to.be('1442901600000');
+      });
+
+      it('should allow printing raw value of data', async () => {
+        await visualBuilder.enterMarkdown('{{ count.data.raw.[0].[1] }}');
+        const text = await visualBuilder.getMarkdownText();
+        expect(text).to.be('6');
+      });
+
+      it('should render html as plain text', async () => {
+        const html = '<h1>hello world</h1>';
+        await visualBuilder.enterMarkdown(html);
+        const markdownText = await visualBuilder.getMarkdownText();
+        expect(markdownText).to.be(html);
+      });
+
+      it('should render mustache list', async () => {
+        const list = '{{#each _all}}\n{{ data.formatted.[0] }} {{ data.raw.[0] }}\n{{/each}}';
+        const expectedRenderer = 'Sep 22, 2015 @ 06:00:00.000,6 1442901600000,6';
+        await visualBuilder.enterMarkdown(list);
+        const markdownText = await visualBuilder.getMarkdownText();
+        expect(markdownText).to.be(expectedRenderer);
+      });
+    });
+  });
+}

test/functional/apps/visualize/index.js

@@ -76,6 +76,7 @@ export default function ({ getService, loadTestFile }) {
       loadTestFile(require.resolve('./_vertical_bar_chart'));
       loadTestFile(require.resolve('./_vertical_bar_chart_nontimeindex'));
       loadTestFile(require.resolve('./_tsvb_chart'));
+      loadTestFile(require.resolve('./_tsvb_markdown'));
       loadTestFile(require.resolve('./_vega_chart'));
     });
   });

test/functional/page_objects/index.ts

@@ -45,7 +45,6 @@ import { ShieldPageProvider } from './shield_page';
 import { TimePickerPageProvider } from './time_picker';
 // @ts-ignore not TS yet
 import { TimelionPageProvider } from './timelion_page';
-// @ts-ignore not TS yet
 import { VisualBuilderPageProvider } from './visual_builder_page';
 // @ts-ignore not TS yet
 import { VisualizePageProvider } from './visualize_page';