tests added

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx

@@ -224,6 +224,33 @@ describe('LayerPanel', () => {
       const group = instance.find('.lnsLayerPanel__dimensionContainer[data-test-subj="lnsGroup"]');
       expect(group).toHaveLength(1);
     });
+    it('does not render a hidden group', async () => {
+      mockVisualization.getConfiguration.mockReturnValue({
+        groups: [
+          {
+            groupLabel: 'A',
+            groupId: 'a',
+            accessors: [],
+            filterOperations: () => true,
+            supportsMoreColumns: true,
+            dataTestSubj: 'lnsGroup',
+          },
+          {
+            groupLabel: 'B',
+            groupId: 'b',
+            accessors: [],
+            filterOperations: () => true,
+            isHidden: true,
+            supportsMoreColumns: true,
+            dataTestSubj: 'lnsGroup',
+          },
+        ],
+      });
+
+      const { instance } = await mountWithProvider(<LayerPanel {...getDefaultProps()} />);
+      const group = instance.find('.lnsLayerPanel__dimensionContainer[data-test-subj="lnsGroup"]');
+      expect(group).toHaveLength(1);
+    });
 
     it('should render the required warning when only one group is configured', async () => {
       mockVisualization.getConfiguration.mockReturnValue({

x-pack/plugins/lens/public/mocks/index.ts

@@ -6,6 +6,7 @@
  */
 
 import { DragContextState, DragContextValue } from '@kbn/dom-drag-drop';
+import { DatatableColumn } from '@kbn/expressions-plugin/common';
 import { createMockDataViewsState } from '../data_views_service/mocks';
 import { FramePublicAPI, FrameDatasourceAPI } from '../types';
 export { mockDataPlugin } from './data_plugin_mock';
@@ -85,7 +86,10 @@ export function createMockedDragDropContext(
 }
 
 export function generateActiveData(
-  json: Array<{ id: string; rows: Array<Record<string, number | null>> }>
+  json: Array<{
+    id: string;
+    rows: Array<Record<string, number | null>>;
+  }>
 ) {
   return json.reduce((memo, { id, rows }) => {
     const columns = Object.keys(rows[0]).map((columnId) => ({

x-pack/plugins/lens/public/visualizations/metric/dimension_editor.test.tsx

@@ -24,7 +24,7 @@ import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { LayoutDirection } from '@elastic/charts';
 import { act } from 'react-dom/test-utils';
 import { EuiColorPickerOutput } from '@elastic/eui/src/components/color_picker/color_picker';
-import { createMockFramePublicAPI } from '../../mocks';
+import { createMockFramePublicAPI, generateActiveData } from '../../mocks';
 import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
 import { euiLightVars } from '@kbn/ui-theme';
 import { DebouncedInput } from '@kbn/visualization-ui-components';
@@ -47,6 +47,18 @@ const SELECTORS = {
   BREAKDOWN_EDITOR: '[data-test-subj="lnsMetricDimensionEditor_breakdown"]',
 };
 
+const nonNumericMetricFrame = createMockFramePublicAPI({
+  activeData: generateActiveData([
+    {
+      id: 'first',
+      rows: Array(3).fill({
+        'metric-col-id': 'nonNumericData',
+        'max-col-id': 1000,
+      }),
+    },
+  ]),
+});
+
 // see https://github.com/facebook/jest/issues/4402#issuecomment-534516219
 const expectCalledBefore = (mock1: jest.Mock, mock2: jest.Mock) =>
   expect(mock1.mock.invocationCallOrder[0]).toBeLessThan(mock2.mock.invocationCallOrder[0]);
@@ -102,7 +114,14 @@ describe('dimension editor', () => {
       } as unknown as DatasourcePublicAPI,
       removeLayer: jest.fn(),
       addLayer: jest.fn(),
-      frame: createMockFramePublicAPI(),
+      frame: createMockFramePublicAPI({
+        activeData: generateActiveData([
+          {
+            id: 'first',
+            rows: Array(3).fill({ 'metric-col-id': 100, 'secondary-metric-col-id': 1 }),
+          },
+        ]),
+      }),
       setState: jest.fn(),
       panelRef: {} as React.MutableRefObject<HTMLDivElement | null>,
       paletteService: chartPluginMock.createPaletteRegistry(),
@@ -112,27 +131,9 @@ describe('dimension editor', () => {
   afterEach(() => jest.clearAllMocks());
 
   describe('primary metric dimension', () => {
-    const accessor = 'primary-metric-col-id';
+    const accessor = 'metric-col-id';
     const metricAccessorState = { ...fullState, metricAccessor: accessor };
 
-    beforeEach(() => {
-      props.frame.activeData = {
-        first: {
-          type: 'datatable',
-          columns: [
-            {
-              id: accessor,
-              name: 'foo',
-              meta: {
-                type: 'number',
-              },
-            },
-          ],
-          rows: [],
-        },
-      };
-    });
-
     class Harness {
       public _wrapper;
 
@@ -146,6 +147,10 @@ describe('dimension editor', () => {
         return this._wrapper.find(DimensionEditor);
       }
 
+      public get colorModeSwitch() {
+        return this._wrapper.find('EuiButtonGroup[data-test-subj="lnsMetric_color_mode_buttons"]');
+      }
+
       public get colorPicker() {
         return this._wrapper.find(EuiColorPicker);
       }
@@ -163,11 +168,16 @@ describe('dimension editor', () => {
 
     const mockSetState = jest.fn();
 
-    const getHarnessWithState = (state: MetricVisualizationState, datasource = props.datasource) =>
+    const getHarnessWithState = (
+      state: MetricVisualizationState,
+      datasource = props.datasource,
+      propsOverrides: Partial<VisualizationDimensionEditorProps<MetricVisualizationState>> = {}
+    ) =>
       new Harness(
         mountWithIntl(
           <DimensionEditor
             {...props}
+            {...propsOverrides}
             datasource={datasource}
             state={state}
             setState={mockSetState}
@@ -191,6 +201,15 @@ describe('dimension editor', () => {
       expect(component.exists(SELECTORS.BREAKDOWN_EDITOR)).toBeFalsy();
     });
 
+    it('Color mode switch is not shown when the primary metric is non-numeric', () => {
+      expect(getHarnessWithState(fullState, undefined).colorModeSwitch.exists()).toBeTruthy();
+      expect(
+        getHarnessWithState(fullState, undefined, {
+          frame: nonNumericMetricFrame,
+        }).colorModeSwitch.exists()
+      ).toBeFalsy();
+    });
+
     describe('static color controls', () => {
       it('is hidden when dynamic coloring is enabled', () => {
         const harnessWithPalette = getHarnessWithState({ ...metricAccessorState, palette });
@@ -202,6 +221,13 @@ describe('dimension editor', () => {
         });
         expect(harnessNoPalette.colorPicker.exists()).toBeTruthy();
       });
+      it('is visible when metric is non-numeric even if palette is set', () => {
+        expect(
+          getHarnessWithState(fullState, undefined, {
+            frame: nonNumericMetricFrame,
+          }).colorPicker.exists()
+        ).toBeTruthy();
+      });
 
       it('fills with default value', () => {
         const localHarness = getHarnessWithState({
@@ -240,24 +266,6 @@ describe('dimension editor', () => {
   describe('secondary metric dimension', () => {
     const accessor = 'secondary-metric-col-id';
 
-    beforeEach(() => {
-      props.frame.activeData = {
-        first: {
-          type: 'datatable',
-          columns: [
-            {
-              id: accessor,
-              name: 'foo',
-              meta: {
-                type: 'number',
-              },
-            },
-          ],
-          rows: [],
-        },
-      };
-    });
-
     it('renders when the accessor matches', () => {
       const component = shallow(
         <DimensionEditor
@@ -331,7 +339,7 @@ describe('dimension editor', () => {
         const setState = jest.fn();
         const localState = {
           ...fullState,
-          secondaryPrefix: 'foo',
+          secondaryPrefix: 'secondary-metric-col-id2',
           secondaryMetricAccessor: accessor,
         };
         const component = mount(
@@ -341,7 +349,7 @@ describe('dimension editor', () => {
         const buttonGroup = component.find(EuiButtonGroup);
 
         // make sure that if the user was to select the "custom" option, they would get the default value
-        expect(buttonGroup.props().options[1].value).toBe('foo');
+        expect(buttonGroup.props().options[1].value).toBe('secondary-metric-col-id');
 
         const newVal = 'bar';
 
@@ -461,7 +469,7 @@ describe('dimension editor', () => {
   });
 
   describe('additional section', () => {
-    const accessor = 'primary-metric-col-id';
+    const accessor = 'metric-col-id';
     const metricAccessorState = { ...fullState, metricAccessor: accessor };
 
     class Harness {
@@ -473,6 +481,10 @@ describe('dimension editor', () => {
         this._wrapper = wrapper;
       }
 
+      public get wrapper() {
+        return this._wrapper;
+      }
+
       private get rootComponent() {
         return this._wrapper.find(DimensionEditorAdditionalSection);
       }
@@ -520,11 +532,16 @@ describe('dimension editor', () => {
 
     const mockSetState = jest.fn();
 
-    const getHarnessWithState = (state: MetricVisualizationState, datasource = props.datasource) =>
+    const getHarnessWithState = (
+      state: MetricVisualizationState,
+      datasource = props.datasource,
+      propsOverrides: Partial<VisualizationDimensionEditorProps<MetricVisualizationState>> = {}
+    ) =>
       new Harness(
         mountWithIntl(
           <DimensionEditorAdditionalSection
             {...props}
+            {...propsOverrides}
             datasource={datasource}
             state={state}
             setState={mockSetState}
@@ -623,6 +640,13 @@ describe('dimension editor', () => {
           } as DatasourcePublicAPI).isDisabled('trendline')
         ).toBeTruthy();
       });
+      it('should not show a trendline button group when primary metric dimension is non-numeric', () => {
+        expect(
+          getHarnessWithState(fullState, undefined, {
+            frame: nonNumericMetricFrame,
+          }).wrapper.isEmptyRender()
+        ).toBeTruthy();
+      });
 
       describe('responding to buttons', () => {
         it('enables trendline', () => {

x-pack/plugins/lens/public/visualizations/metric/visualization.test.ts

@@ -83,7 +83,14 @@ describe('metric visualization', () => {
     ...trendlineProps,
   };
 
-  const mockFrameApi = createMockFramePublicAPI();
+  const mockFrameApi = createMockFramePublicAPI({
+    activeData: generateActiveData([
+      {
+        id: 'first',
+        rows: Array(3).fill({ 'metric-col-id': 20, 'max-metric-col-id': 100 }),
+      },
+    ]),
+  });
 
   describe('initialization', () => {
     test('returns a default state', () => {

x-pack/plugins/lens/public/visualizations/metric/visualization.tsx

@@ -93,12 +93,12 @@ const getMetricLayerConfiguration = (
   groups: VisualizationDimensionGroupConfig[];
 } => {
   const getPrimaryAccessorDisplayConfig = (): Partial<AccessorConfig> => {
-    const isMetricNumeric = Boolean(
+    const isMetricNonNumeric = Boolean(
       props.state.metricAccessor &&
-        isNumericFieldForDatatable(currentData, props.state.metricAccessor)
+        !isNumericFieldForDatatable(currentData, props.state.metricAccessor)
     );
 
-    const hasDynamicColoring = !!(isMetricNumeric && props.state.palette);
+    const hasDynamicColoring = Boolean(!isMetricNonNumeric && props.state.palette);
     const stops = props.state.palette?.params?.stops || [];
 
     return hasDynamicColoring