[Visualize] Bar chart: Show missing values on chart setting (#66375) (#…

…67025) * Show missing switch button * Add functional tests Co-authored-by: Elastic Machine <[email protected]> # Conflicts: # src/plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx # test/functional/page_objects/visualize_chart_page.ts # test/functional/page_objects/visualize_editor_page.ts
elastic · May 19, 2020 · 7a7c9f9 · 7a7c9f9
1 parent f02ea8b
commit 7a7c9f9
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 1 deletion.
diff --git a/...gacy/core_plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx b/...gacy/core_plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx
@@ -66,8 +66,9 @@ function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
           />
         )}
 
-        {vis.type.type === 'histogram' && (
+        {vis.type.name === 'histogram' && (
           <SwitchOption
+            data-test-subj="showValuesOnChart"
             label={i18n.translate('visTypeVislib.editors.pointSeries.showLabels', {
               defaultMessage: 'Show values on chart',
             })}

diff --git a/test/functional/apps/visualize/_point_series_options.js b/test/functional/apps/visualize/_point_series_options.js
@@ -192,6 +192,38 @@ export default function({ getService, getPageObjects }) {
       });
     });
 
+    describe('show values on chart', () => {
+      before(async () => {
+        await PageObjects.visualize.navigateToNewVisualization();
+        await PageObjects.visualize.clickVerticalBarChart();
+        await PageObjects.visualize.clickNewSearch();
+        await PageObjects.timePicker.setDefaultAbsoluteRange();
+        log.debug('Bucket = X-axis');
+        await PageObjects.visEditor.clickBucket('X-axis');
+        log.debug('Aggregation = Terms');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        log.debug('Field = geo.src');
+        await PageObjects.visEditor.selectField('geo.src');
+        await PageObjects.visEditor.clickGo();
+        log.debug('Open Options tab');
+        await PageObjects.visEditor.clickOptionsTab();
+      });
+
+      it('should show values on bar chart', async () => {
+        await PageObjects.visEditor.toggleValuesOnChart();
+        await PageObjects.visEditor.clickGo();
+        const values = await PageObjects.visChart.getChartValues();
+        expect(values).to.eql(['2,592', '2,373', '1,194', '489', '415']);
+      });
+
+      it('should hide values on bar chart', async () => {
+        await PageObjects.visEditor.toggleValuesOnChart();
+        await PageObjects.visEditor.clickGo();
+        const values = await PageObjects.visChart.getChartValues();
+        expect(values.length).to.be(0);
+      });
+    });
+
     describe('custom labels and axis titles', function() {
       const visName = 'Visualization Point Series Test';
       const customLabel = 'myLabel';

diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts
@@ -379,6 +379,17 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
       );
       return values.filter(item => item.length > 0);
     }
+
+    public async getChartValues() {
+      const elements = await find.allByCssSelector('.series.histogram text');
+      const values = await Promise.all(
+        elements.map(async element => {
+          const text = await element.getVisibleText();
+          return text;
+        })
+      );
+      return values;
+    }
   }
 
   return new VisualizeChart();

diff --git a/test/functional/page_objects/visualize_editor_page.ts b/test/functional/page_objects/visualize_editor_page.ts
@@ -487,6 +487,10 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
       }
       await options[optionIndex].click();
     }
+
+    public async toggleValuesOnChart() {
+      return await testSubjects.click('showValuesOnChart');
+    }
   }
 
   return new VisualizeEditorPage();