[TSVB] [AT] TimeSeries refactor (elastic#36987)

* move tsvb timeseries tests into new file

src/legacy/core_plugins/metrics/public/components/vis_types/timeseries/config.js

@@ -301,6 +301,7 @@ export const TimeseriesConfig = injectI18n(function (props) {
               onChange={handleTextChange('value_template')}
               value={model.value_template}
               fullWidth
+              data-test-subj="tsvb_series_value"
             />
           </EuiFormRow>
         </EuiFlexItem>

test/functional/apps/visualize/_tsvb_chart.ts

@@ -24,7 +24,6 @@ import { FtrProviderContext } from '../../ftr_provider_context';
 export default function({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const log = getService('log');
-  const retry = getService('retry');
   const inspector = getService('inspector');
   const kibanaServer = getService('kibanaServer');
   const testSubjects = getService('testSubjects');
@@ -37,49 +36,6 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.visualBuilder.checkVisualBuilderIsPresent();
     });
 
-    describe('Time Series', () => {
-      beforeEach(async () => {
-        await PageObjects.visualBuilder.resetPage();
-      });
-
-      it('should show the correct count in the legend', async () => {
-        await retry.try(async () => {
-          const actualCount = await PageObjects.visualBuilder.getRhythmChartLegendValue();
-          expect(actualCount).to.be('156');
-        });
-      });
-
-      it('should show the correct count in the legend with 2h offset', async () => {
-        await PageObjects.visualBuilder.clickSeriesOption();
-        await PageObjects.visualBuilder.enterOffsetSeries('2h');
-        const actualCount = await PageObjects.visualBuilder.getRhythmChartLegendValue();
-        expect(actualCount).to.be('293');
-      });
-
-      it('should show the correct count in the legend with -2h offset', async () => {
-        await PageObjects.visualBuilder.clickSeriesOption();
-        await PageObjects.visualBuilder.enterOffsetSeries('-2h');
-        const actualCount = await PageObjects.visualBuilder.getRhythmChartLegendValue();
-        expect(actualCount).to.be('53');
-      });
-
-      it('should open color picker, deactivate panel and clone series', async () => {
-        await PageObjects.visualBuilder.clickColorPicker();
-        await PageObjects.visualBuilder.checkColorPickerPopUpIsPresent();
-        await PageObjects.visualBuilder.clickColorPicker();
-
-        await PageObjects.visualBuilder.changePanelPreview();
-        await PageObjects.visualBuilder.checkPreviewIsDisabled();
-        await PageObjects.visualBuilder.changePanelPreview();
-
-        await PageObjects.visualBuilder.cloneSeries();
-        const legend = await PageObjects.visualBuilder.getLegentItems();
-        const series = await PageObjects.visualBuilder.getSeries();
-        expect(legend.length).to.be(2);
-        expect(series.length).to.be(2);
-      });
-    });
-
     describe('metric', () => {
       beforeEach(async () => {
         await PageObjects.visualBuilder.resetPage();

test/functional/apps/visualize/_tsvb_time_series.ts

@@ -0,0 +1,75 @@
+/*
+ * 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 '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+// eslint-disable-next-line import/no-default-export
+export default function({ getPageObjects, getService }: FtrProviderContext) {
+  const { visualize, visualBuilder } = getPageObjects(['visualBuilder', 'visualize']);
+  const retry = getService('retry');
+
+  describe('visual builder', function describeIndexTests() {
+    beforeEach(async () => {
+      await visualize.navigateToNewVisualization();
+      await visualize.clickVisualBuilder();
+      await visualBuilder.checkVisualBuilderIsPresent();
+    });
+
+    describe('Time Series', () => {
+      beforeEach(async () => {
+        await visualBuilder.resetPage();
+      });
+
+      it('should render all necessary components', async () => {
+        await visualBuilder.checkTimeSeriesChartIsPresent();
+        await visualBuilder.checkTimeSeriesLegendIsPresent();
+      });
+
+      it('should show the correct count in the legend', async () => {
+        await retry.try(async () => {
+          const actualCount = await visualBuilder.getRhythmChartLegendValue();
+          expect(actualCount).to.be('156');
+        });
+      });
+
+      it('should show the correct count in the legend with 2h offset', async () => {
+        await visualBuilder.clickSeriesOption();
+        await visualBuilder.enterOffsetSeries('2h');
+        const actualCount = await visualBuilder.getRhythmChartLegendValue();
+        expect(actualCount).to.be('293');
+      });
+
+      it('should show the correct count in the legend with -2h offset', async () => {
+        await visualBuilder.clickSeriesOption();
+        await visualBuilder.enterOffsetSeries('-2h');
+        const actualCount = await visualBuilder.getRhythmChartLegendValue();
+        expect(actualCount).to.be('53');
+      });
+
+      it('should show the correct count in the legend with custom numeric template', async () => {
+        const expectedLegendValue = '$ 156';
+
+        await visualBuilder.clickSeriesOption();
+        await visualBuilder.enterSeriesTemplate('$ {{value}}');
+        const actualCount = await visualBuilder.getRhythmChartLegendValue();
+        expect(actualCount).to.be(expectedLegendValue);
+      });
+    });
+  });
+}

test/functional/apps/visualize/index.ts

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

test/functional/page_objects/visual_builder_page.ts

@@ -50,6 +50,17 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
       await this.checkTabIsLoaded('tvbVisEditor', 'Time Series');
     }
 
+    public async checkTimeSeriesChartIsPresent() {
+      await testSubjects.existOrFail('timeseriesChart');
+    }
+
+    public async checkTimeSeriesLegendIsPresent() {
+      const isPresent = await find.existsByCssSelector('.tvbLegend');
+      if (!isPresent) {
+        throw new Error(`TimeSeries legend is not loaded`);
+      }
+    }
+
     public async checkMetricTabIsPresent() {
       await this.checkTabIsLoaded('tsvbMetricValue', 'Metric');
     }
@@ -195,6 +206,27 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
       await el.clearValue();
     }
 
+    public async toggleAutoApplyChanges() {
+      await find.clickByCssSelector('#tsvbAutoApplyInput');
+    }
+
+    public async applyChanges() {
+      await testSubjects.clickWhenNotDisabled('applyBtn');
+    }
+
+    /**
+     * write template for aggregation row in the `option` tab
+     *
+     * @param template always should contain `{{value}}`
+     * @example
+     * await visualBuilder.enterSeriesTemplate('$ {{value}}') // add `$` symbol for value
+     */
+    public async enterSeriesTemplate(template: string) {
+      const el = await testSubjects.find('tsvb_series_value');
+      await el.clearValueWithKeyboard();
+      await el.type(template);
+    }
+
     public async enterOffsetSeries(value: string) {
       const el = await testSubjects.find('offsetTimeSeries');
       await el.clearValue();
@@ -252,14 +284,6 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
       });
     }
 
-    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);