✅ Add component testing for value labels visibility

elastic · Aug 20, 2020 · dfd9d78 · dfd9d78
1 parent a2219f5
commit dfd9d78
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 7 deletions.
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
@@ -6,10 +6,16 @@
 
 import React from 'react';
 import { mountWithIntl as mount, shallowWithIntl as shallow } from 'test_utils/enzyme_helpers';
-import { EuiButtonGroupProps, EuiSuperSelect, EuiButtonGroup } from '@elastic/eui';
-import { LayerContextMenu, XyToolbar } from './xy_config_panel';
+import {
+  EuiButtonGroupProps,
+  EuiSuperSelect,
+  EuiButtonGroup,
+  EuiSwitch,
+  EuiSwitchProps,
+} from '@elastic/eui';
+import { LayerContextMenu, XyToolbar, DimensionEditor } from './xy_config_panel';
 import { FramePublicAPI } from '../types';
-import { State } from './types';
+import { State, SeriesType } from './types';
 import { Position } from '@elastic/charts';
 import { createMockFramePublicAPI, createMockDatasource } from '../editor_frame_service/mocks';
 
@@ -195,4 +201,76 @@ describe('XY Config panels', () => {
       expect(selections!).toEqual({ x: true, y: true });
     });
   });
+
+  describe('Dimension Editor', () => {
+    test('should show the value labels option for the bar chart', () => {
+      const state = testState();
+      const testAccessor = state.layers[0].accessors[0];
+
+      const component = mount(
+        <DimensionEditor
+          layerId={state.layers[0].layerId}
+          frame={frame}
+          setState={jest.fn()}
+          state={{
+            ...state,
+            layers: [
+              {
+                ...state.layers[0],
+                splitAccessor: undefined,
+                seriesType: 'bar_horizontal',
+                yConfig: [{ forAccessor: testAccessor, showValueLabels: true }],
+              },
+            ],
+          }}
+          groupId=""
+          accessor={testAccessor}
+        />
+      );
+
+      const valueLabelsCheck = component
+        .find(EuiSwitch)
+        .first()
+        .prop('checked') as EuiSwitchProps['checked'];
+
+      expect(valueLabelsCheck).toBe(true);
+    });
+
+    test('should not show the value labels switch for the other types of charts', () => {
+      const state = testState();
+      const testAccessor = state.layers[0].accessors[0];
+
+      const componentsConfig = [
+        { type: 'bar_horizontal' as SeriesType, multiseries: true },
+        { type: 'bar' as SeriesType, multiseries: true },
+        { type: 'line' as SeriesType, multiseries: false },
+        { type: 'area' as SeriesType, multiseries: false },
+      ];
+
+      for (const { type, multiseries } of componentsConfig) {
+        const component = mount(
+          <DimensionEditor
+            layerId={state.layers[0].layerId}
+            frame={frame}
+            setState={jest.fn()}
+            state={{
+              ...state,
+              layers: [
+                {
+                  ...state.layers[0],
+                  ...(!multiseries && { splitAccessor: undefined }),
+                  seriesType: type,
+                  yConfig: [{ forAccessor: testAccessor, showValueLabels: true }],
+                },
+              ],
+            }}
+            groupId=""
+            accessor={testAccessor}
+          />
+        );
+
+        expect(component.find(EuiSwitch).length).toBe(0);
+      }
+    });
+  });
 });
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
@@ -501,8 +501,9 @@ export function DimensionEditor(props: VisualizationDimensionEditorProps<State>)
     forAccessor: accessor,
   };
   const axisMode = layerConfig?.axisMode || 'auto';
-  const shouldShowValueLabels =
-    (horizontalOnly && !chartHasMoreThanOneSeries && layerConfig?.showValueLabels) ?? false;
+  const shouldShowValueLabels = horizontalOnly && !chartHasMoreThanOneSeries;
+
+  const showValueLabels = (shouldShowValueLabels && layerConfig?.showValueLabels) ?? false;
 
   const createNewYAxisConfigsWithValue = useCallback(
     <K extends keyof YConfig, V extends YConfig[K]>(prop: K, newValue: V) => {
@@ -569,7 +570,7 @@ export function DimensionEditor(props: VisualizationDimensionEditorProps<State>)
           }}
         />
       </EuiFormRow>
-      {horizontalOnly && (
+      {shouldShowValueLabels && (
         <EuiFormRow
           display="columnCompressedSwitch"
           fullWidth
@@ -590,7 +591,7 @@ export function DimensionEditor(props: VisualizationDimensionEditorProps<State>)
               );
               setState(updateLayer(state, { ...layer, yConfig: newYAxisConfigs }, index));
             }}
-            checked={shouldShowValueLabels}
+            checked={showValueLabels}
           />
         </EuiFormRow>
       )}