Update visual_builder_page and add some more test subjects

elastic · Jul 20, 2021 · cb77140 · cb77140
1 parent cc2a239
commit cb77140
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 13 deletions.
diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/gauge.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/gauge.js
@@ -108,10 +108,15 @@ export class Gauge extends Component {
           ref={(el) => (this.inner = el)}
           style={styles.inner}
         >
-          <div className="tvbVisGauge__label" ref="title">
+          <div className="tvbVisGauge__label" ref="title" data-test-subj="gaugeLabel">
             {title}
           </div>
-          <div className="tvbVisGauge__value" style={styles.valueColor} ref="label">
+          <div
+            className="tvbVisGauge__value"
+            style={styles.valueColor}
+            ref="label"
+            data-test-subj="gaugeValue"
+          >
             {formatter(value)}
           </div>
           {additionalLabel}
@@ -124,10 +129,15 @@ export class Gauge extends Component {
           ref={(el) => (this.inner = el)}
           style={styles.inner}
         >
-          <div className="tvbVisGauge__value" style={styles.valueColor} ref="label">
+          <div
+            className="tvbVisGauge__value"
+            style={styles.valueColor}
+            ref="label"
+            data-test-subj="gaugeValue"
+          >
             {formatter(value)}
           </div>
-          <div className="tvbVisGauge__label" ref="title">
+          <div className="tvbVisGauge__label" ref="title" data-test-subj="gaugeLabel">
             {title}
           </div>
           {additionalLabel}

diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/top_n.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/top_n.js
@@ -135,7 +135,7 @@ export class TopN extends Component {
           </td>
           <td width="100%" className="tvbVisTopN__bar">
             <div className="tvbVisTopN__innerBar" style={styles.innerBar}>
-              <div style={styles.innerBarValue} />
+              <div style={styles.innerBarValue} data-test-subj="topNInnerBar" />
             </div>
           </td>
           <td className="tvbVisTopN__value" data-test-subj="tsvbTopNValue">

diff --git a/test/functional/apps/visualize/_tsvb_chart.ts b/test/functional/apps/visualize/_tsvb_chart.ts
@@ -213,7 +213,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
           await visualBuilder.setColorPickerValue('#AD7DE6', 1);
 
           const backGroundStyle = await visualBuilder.getBackgroundStyle();
-          const gaugeInnerColor = await visualBuilder.getGaugeColor('Inner');
+          const gaugeInnerColor = await visualBuilder.getGaugeColor(true);
 
           expect(backGroundStyle).to.eql('background-color: rgb(255, 207, 223);');
           expect(gaugeInnerColor).to.eql('rgba(173,125,230,1)');

diff --git a/test/functional/page_objects/visual_builder_page.ts b/test/functional/page_objects/visual_builder_page.ts
@@ -349,18 +349,18 @@ export class VisualBuilderPageObject extends FtrService {
   }
 
   public async getGaugeLabel() {
-    const gaugeLabel = await this.find.byCssSelector('.tvbVisGauge__label');
+    const gaugeLabel = await this.testSubjects.find('gaugeLabel');
     return await gaugeLabel.getVisibleText();
   }
 
   public async getGaugeCount() {
-    const gaugeCount = await this.find.byCssSelector('.tvbVisGauge__value');
+    const gaugeCount = await this.testSubjects.find('gaugeValue');
     return await gaugeCount.getVisibleText();
   }
 
-  public async getGaugeColor(type: undefined | 'Inner' = undefined): Promise<string> {
+  public async getGaugeColor(isInner = false): Promise<string> {
     await this.visChart.waitForVisualizationRenderingStabilized();
-    const gaugeColoredCircle = await this.testSubjects.find(`gaugeCircle${type ?? ''}`);
+    const gaugeColoredCircle = await this.testSubjects.find(`gaugeCircle${isInner ? 'Inner' : ''}`);
     return await gaugeColoredCircle.getAttribute('stroke');
   }
 
@@ -380,7 +380,7 @@ export class VisualBuilderPageObject extends FtrService {
 
   public async getTopNBarStyle(nth: number = 0): Promise<string> {
     await this.visChart.waitForVisualizationRenderingStabilized();
-    const topNBars = await this.find.allByCssSelector('.tvbVisTopN__innerBar div');
+    const topNBars = await this.testSubjects.findAll('topNInnerBar');
     return await topNBars[nth].getAttribute('style');
   }
 
@@ -619,13 +619,13 @@ export class VisualBuilderPageObject extends FtrService {
 
   public async getMetricValueStyle(): Promise<string> {
     await this.visChart.waitForVisualizationRenderingStabilized();
-    const metricValue = await this.find.byCssSelector('[data-test-subj="tsvbMetricValue"]');
+    const metricValue = await this.testSubjects.find('tsvbMetricValue');
     return await metricValue.getAttribute('style');
   }
 
   public async getGaugeValueStyle(): Promise<string> {
     await this.visChart.waitForVisualizationRenderingStabilized();
-    const metricValue = await this.find.byCssSelector('.tvbVisGauge__value');
+    const metricValue = await this.testSubjects.find('gaugeValue');
     return await metricValue.getAttribute('style');
   }