[Metric] convert mocha tests to jest

src/dev/jest/config.js

@@ -58,6 +58,7 @@ export default {
     '^ui/(.*)': '<rootDir>/src/legacy/ui/public/$1',
     '^uiExports/(.*)': '<rootDir>/src/dev/jest/mocks/file_mock.js',
     '^test_utils/(.*)': '<rootDir>/src/test_utils/public/$1',
+    '^fixtures/(.*)': '<rootDir>/src/fixtures/$1',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/src/dev/jest/mocks/file_mock.js',
     '\\.(css|less|scss)$': '<rootDir>/src/dev/jest/mocks/style_mock.js',

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx

@@ -23,10 +23,12 @@ import { i18n } from '@kbn/i18n';
 
 import { RangeValues, RangesParamEditor } from 'ui/vis/editors/default/controls/ranges';
 
+export type SetColorRangeValue = (paramName: string, value: RangeValues[]) => void;
+
 interface ColorRangesProps {
   'data-test-subj'?: string;
   colorsRange: RangeValues[];
-  setValue(paramName: string, value: RangeValues[]): void;
+  setValue: SetColorRangeValue;
   setValidity?(isValid: boolean): void;
   setTouched?(isTouched: boolean): void;
 }

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx

@@ -27,6 +27,7 @@ import { ColorRanges, ColorSchemaOptions, SwitchOption } from '../../common';
 import { GaugeOptionsInternalProps } from '.';
 import { ColorSchemaVislibParams } from '../../../types';
 import { Gauge } from '../../../gauge';
+import { SetColorRangeValue } from '../../common/color_ranges';
 
 function RangesPanel({
   setGaugeValue,
@@ -68,7 +69,7 @@ function RangesPanel({
       <ColorRanges
         data-test-subj="gaugeColorRange"
         colorsRange={stateParams.gauge.colorsRange}
-        setValue={setGaugeValue}
+        setValue={setGaugeValue as SetColorRangeValue}
         setTouched={setTouched}
         setValidity={setValidity}
       />

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx

@@ -35,6 +35,7 @@ import { SetColorSchemaOptionsValue } from '../../common/color_schema';
 import { HeatmapVisParams } from '../../../heatmap';
 import { ValueAxis } from '../../../types';
 import { LabelsPanel } from './labels_panel';
+import { SetColorRangeValue } from '../../common/color_ranges';
 
 function HeatmapOptions(props: VisOptionsProps<HeatmapVisParams>) {
   const { stateParams, vis, uiState, setValue, setValidity, setTouched } = props;
@@ -170,7 +171,7 @@ function HeatmapOptions(props: VisOptionsProps<HeatmapVisParams>) {
           <ColorRanges
             data-test-subj="heatmapColorRange"
             colorsRange={stateParams.colorsRange}
-            setValue={setValue}
+            setValue={setValue as SetColorRangeValue}
             setTouched={setTouched}
             setValidity={setIsColorRangesValid}
           />

src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.test.tsx

@@ -0,0 +1,93 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { MetricVisComponent } from './metric_vis_component';
+import { Vis } from '../legacy_imports';
+
+jest.mock('ui/new_platform');
+
+type Props = MetricVisComponent['props'];
+
+const baseVisData = {
+  columns: [{ id: 'col-0', name: 'Count' }],
+  rows: [{ 'col-0': 4301021 }],
+} as any;
+
+describe('MetricVisComponent', function() {
+  const vis: Vis = {
+    params: {
+      metric: {
+        colorSchema: 'Green to Red',
+        colorsRange: [{ from: 0, to: 1000 }],
+        style: {},
+        labels: {
+          show: true,
+        },
+      },
+      dimensions: {
+        metrics: [{ accessor: 0 }],
+        bucket: null,
+      },
+    },
+  } as any;
+
+  const getComponent = (propOverrides: Partial<Props> = {} as Partial<Props>) => {
+    const props: Props = {
+      vis,
+      visParams: vis.params,
+      visData: baseVisData,
+      renderComplete: jest.fn(),
+      ...propOverrides,
+    };
+
+    return shallow(<MetricVisComponent {...props} />);
+  };
+
+  it('should render component', () => {
+    expect(getComponent().exists()).toBe(true);
+  });
+
+  it('should render correct structure for single metric', function() {
+    expect(getComponent()).toMatchSnapshot();
+  });
+
+  it('should render correct structure for multi-value metrics', function() {
+    const component = getComponent({
+      visData: {
+        columns: [
+          { id: 'col-0', name: '1st percentile of bytes' },
+          { id: 'col-1', name: '99th percentile of bytes' },
+        ],
+        rows: [{ 'col-0': 182, 'col-1': 445842.4634666484 }],
+      },
+      visParams: {
+        ...vis.params,
+        dimensions: {
+          ...vis.params.dimensions,
+          metrics: [{ accessor: 0 }, { accessor: 1 }],
+        },
+      },
+    } as any);
+
+    expect(component).toMatchSnapshot();
+  });
+});