[TSVB] Add more functional tests for Gauge and TopN (#105361)

* [TSVB] Add more functional tests for Gauge and TopN * Update visual_builder_page.ts * Update functions related to gauge color and filter ratio numerator in visual_builder_page * Update visual_builder_page and add some more test subjects * Update _tsvb_chart.ts Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Jul 21, 2021 · 2e0fdda · 2e0fdda
1 parent 218c9c2
commit 2e0fdda
Show file tree

Hide file tree

Showing 5 changed files with 248 additions and 110 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/gauge_vis.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/gauge_vis.js
@@ -131,15 +131,19 @@ export class GaugeVis extends Component {
     if (type === 'half') {
       svg = (
         <svg width={120.72} height={78.72}>
-          <circle {...props.circleBackground} style={styles.innerLine} />
-          <circle {...props.circle} style={styles.gaugeLine} />
+          <circle
+            {...props.circleBackground}
+            style={styles.innerLine}
+            data-test-subj="gaugeCircleInner"
+          />
+          <circle {...props.circle} style={styles.gaugeLine} data-test-subj="gaugeCircle" />
         </svg>
       );
     } else {
       svg = (
         <svg width={120.72} height={120.72}>
-          <circle {...props.circleBackground} />
-          <circle {...props.circle} />
+          <circle {...props.circleBackground} data-test-subj="gaugeCircleInner" />
+          <circle {...props.circle} data-test-subj="gaugeCircle" />
         </svg>
       );
     }

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">