[Metric] convert mocha tests to jest (#54054)

* Add fixtures/* alias to tsconfig and jest config
* Convert metric tests to jest
* Convert remaining js files to ts

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/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();
+  });
+});