Update functions related to gauge color and filter ratio numerator in…

… visual_builder_page
elastic · Jul 19, 2021 · a28ad13 · a28ad13
1 parent cdf14f8
commit a28ad13
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 24 deletions.
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/filter_ratio.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/filter_ratio.js
@@ -106,6 +106,7 @@ export const FilterRatioAgg = (props) => {
               query={model.numerator}
               onChange={handleNumeratorQueryChange}
               indexPatterns={[indexPattern]}
+              data-test-subj="filterRatioNumeratorInput"
             />
           </EuiFormRow>
         </EuiFlexItem>
@@ -124,6 +125,7 @@ export const FilterRatioAgg = (props) => {
               query={model.denominator}
               onChange={handleDenominatorQueryChange}
               indexPatterns={[indexPattern]}
+              data-test-subj="filterRatioDenominatorInput"
             />
           </EuiFormRow>
         </EuiFlexItem>

diff --git a/src/plugins/vis_type_timeseries/public/application/components/query_bar_wrapper.tsx b/src/plugins/vis_type_timeseries/public/application/components/query_bar_wrapper.tsx
@@ -18,9 +18,15 @@ import { fetchIndexPattern, isStringTypeIndexPattern } from '../../../common/ind
 
 type QueryBarWrapperProps = Pick<QueryStringInputProps, 'query' | 'onChange'> & {
   indexPatterns: IndexPatternValue[];
+  'data-test-subj'?: string;
 };
 
-export function QueryBarWrapper({ query, onChange, indexPatterns }: QueryBarWrapperProps) {
+export function QueryBarWrapper({
+  query,
+  onChange,
+  indexPatterns,
+  'data-test-subj': dataTestSubj,
+}: QueryBarWrapperProps) {
   const { indexPatterns: indexPatternsService } = getDataStart();
   const [indexes, setIndexes] = useState<QueryStringInputProps['indexPatterns']>([]);
 
@@ -58,6 +64,7 @@ export function QueryBarWrapper({ query, onChange, indexPatterns }: QueryBarWrap
       onChange={onChange}
       indexPatterns={indexes}
       {...coreStartContext}
+      dataTestSubj={dataTestSubj}
     />
   );
 }
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/test/functional/apps/visualize/_tsvb_chart.ts b/test/functional/apps/visualize/_tsvb_chart.ts
@@ -205,15 +205,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       describe('Color rules', () => {
         it('should apply color rules to visualization background and inner gauge circle', async () => {
           await visualBuilder.selectAggType('Filter Ratio');
-          await visualBuilder.setFilterRatioNumerator('bytes < 0');
+          await visualBuilder.setFilterRatioOption('Numerator', 'bytes < 0');
           await visualBuilder.clickPanelOptions('gauge');
           await visualBuilder.setColorRuleOperator('< less than');
           await visualBuilder.setColorRuleValue(21);
           await visualBuilder.setBackgroundColor('#FFCFDF');
           await visualBuilder.setColorPickerValue('#AD7DE6', 1);
 
           const backGroundStyle = await visualBuilder.getBackgroundStyle();
-          const gaugeInnerColor = await visualBuilder.getGaugeInnerColor();
+          const gaugeInnerColor = await visualBuilder.getGaugeColor('Inner');
 
           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
@@ -358,22 +358,12 @@ export class VisualBuilderPageObject extends FtrService {
     return await gaugeCount.getVisibleText();
   }
 
-  public async getGaugeColor(): Promise<string> {
+  public async getGaugeColor(type: undefined | 'Inner' = undefined): Promise<string> {
     await this.visChart.waitForVisualizationRenderingStabilized();
-    const [, gaugeColoredCircle] = await this.find.allByCssSelector(
-      '[data-test-subj="tvbVisGaugeContainer"] circle'
-    );
+    const gaugeColoredCircle = await this.testSubjects.find(`gaugeCircle${type ?? ''}`);
     return await gaugeColoredCircle.getAttribute('stroke');
   }
 
-  public async getGaugeInnerColor(): Promise<string> {
-    await this.visChart.waitForVisualizationRenderingStabilized();
-    const gaugeInnerCircle = await this.find.byCssSelector(
-      '[data-test-subj="tvbVisGaugeContainer"] circle'
-    );
-    return await gaugeInnerCircle.getAttribute('stroke');
-  }
-
   public async clickTopN() {
     await this.testSubjects.click('top_nTsvbTypeBtn');
   }
@@ -756,10 +746,8 @@ export class VisualBuilderPageObject extends FtrService {
     });
   }
 
-  public async setFilterRatioNumerator(numerator: string) {
-    const numeratorInput = await this.find.byCssSelector(
-      '.tvbAggRow [data-test-subj="queryInput"]'
-    );
-    await numeratorInput.type(numerator);
+  public async setFilterRatioOption(optionType: 'Numerator' | 'Denominator', query: string) {
+    const optionInput = await this.testSubjects.find(`filterRatio${optionType}Input`);
+    await optionInput.type(query);
   }
 }