Merge branch 'jestodus-monitor-ee-specs' into 'master'

Migrate ee specs for monitor from karma to jest

See merge request gitlab-org/gitlab!22926

ee/spec/javascripts/monitoring/components/dashboard_spec.js → ee/spec/frontend/monitoring/components/dashboard_spec.js

@@ -7,8 +7,8 @@ import {
   mockApiEndpoint,
   mockedQueryResultPayload,
   environmentData,
-} from 'spec/monitoring/mock_data';
-import propsData from 'spec/monitoring/components/dashboard_resize_spec';
+} from '../../../../../spec/frontend/monitoring/mock_data';
+import { propsData } from '../../../../../spec/frontend/monitoring/init_utils';
 import CustomMetricsFormFields from 'ee/custom_metrics/components/custom_metrics_form_fields.vue';
 import Tracking from '~/tracking';
 import { createStore } from '~/monitoring/stores';
@@ -27,10 +27,7 @@ describe('Dashboard', () => {
 
   const createComponent = (props = {}) => {
     wrapper = shallowMount(localVue.extend(Component), {
-      propsData: {
-        ...propsData,
-        ...props,
-      },
+      propsData: { ...propsData, ...props },
       stubs: {
         GlButton,
       },
@@ -44,18 +41,12 @@ describe('Dashboard', () => {
       <div class="prometheus-graphs"></div>
       <div class="layout-page"></div>
     `);
-
-    window.gon = {
-      ...window.gon,
-      ee: true,
-    };
-
+    window.gon = { ...window.gon, ee: true };
     store = createStore();
     mock = new MockAdapter(axios);
     mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
     Component = localVue.extend(Dashboard);
   });
-
   afterEach(() => {
     mock.restore();
   });
@@ -76,50 +67,26 @@ describe('Dashboard', () => {
   }
 
   describe('add custom metrics', () => {
-    const defaultProps = {
-      customMetricsPath: '/endpoint',
-      hasMetrics: true,
-      documentationPath: '/path/to/docs',
-      settingsPath: '/path/to/settings',
-      clustersPath: '/path/to/clusters',
-      projectPath: '/path/to/project',
-      metricsEndpoint: mockApiEndpoint,
-      tagsPath: '/path/to/tags',
-      emptyGettingStartedSvgPath: '/path/to/getting-started.svg',
-      emptyLoadingSvgPath: '/path/to/loading.svg',
-      emptyNoDataSvgPath: '/path/to/no-data.svg',
-      emptyNoDataSmallSvgPath: '/path/to/no-data-small.svg',
-      emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
-      environmentsEndpoint: '/root/hello-prometheus/environments/35',
-      currentEnvironmentName: 'production',
-      prometheusAlertsAvailable: true,
-      alertsEndpoint: '/endpoint',
-    };
-
     describe('when not available', () => {
       beforeEach(() => {
         createComponent({
-          customMetricsAvailable: false,
-          ...defaultProps,
+          hasMetrics: true,
+          customMetricsPath: '/endpoint',
         });
       });
-
       it('does not render add button on the dashboard', () => {
         expect(findAddMetricButton()).toBeUndefined();
       });
     });
-
     describe('when available', () => {
       let origPage;
-
       beforeEach(done => {
-        spyOn(Tracking, 'event');
-
+        jest.spyOn(Tracking, 'event').mockReturnValue();
         createComponent({
+          hasMetrics: true,
+          customMetricsPath: '/endpoint',
           customMetricsAvailable: true,
-          ...defaultProps,
         });
-
         setupComponentStore(wrapper);
 
         origPage = document.body.dataset.page;
@@ -127,7 +94,6 @@ describe('Dashboard', () => {
 
         wrapper.vm.$nextTick(done);
       });
-
       afterEach(() => {
         document.body.dataset.page = origPage;
       });
@@ -140,10 +106,11 @@ describe('Dashboard', () => {
         expect(wrapper.find(GlModal).exists()).toBe(true);
         expect(wrapper.find(GlModal).attributes().modalid).toBe('add-metric');
       });
-
       it('adding new metric is tracked', done => {
         const submitButton = wrapper.vm.$refs.submitCustomMetricsFormBtn;
-        wrapper.setData({ formIsValid: true });
+        wrapper.setData({
+          formIsValid: true,
+        });
         wrapper.vm.$nextTick(() => {
           submitButton.$el.click();
           wrapper.vm.$nextTick(() => {
@@ -160,7 +127,6 @@ describe('Dashboard', () => {
           });
         });
       });
-
       it('renders custom metrics form fields', () => {
         expect(wrapper.find(CustomMetricsFormFields).exists()).toBe(true);
       });

ee/spec/javascripts/monitoring/validators_spec.js → ee/spec/frontend/monitoring/validators_spec.js

@@ -7,75 +7,74 @@ describe('alertsValidator', () => {
     threshold: 5,
     metricId: '8',
   };
-
   it('requires all alerts to have an alert path', () => {
     const { operator, threshold, metricId } = validAlert;
-    const input = { [validAlert.alert_path]: { operator, threshold, metricId } };
-
+    const input = {
+      [validAlert.alert_path]: {
+        operator,
+        threshold,
+        metricId,
+      },
+    };
     expect(alertsValidator(input)).toEqual(false);
   });
-
   it('requires that the object key matches the alert path', () => {
-    const input = { undefined: validAlert };
-
+    const input = {
+      undefined: validAlert,
+    };
     expect(alertsValidator(input)).toEqual(false);
   });
-
   it('requires all alerts to have a metric id', () => {
-    const input = { [validAlert.alert_path]: { ...validAlert, metricId: undefined } };
-
+    const input = {
+      [validAlert.alert_path]: { ...validAlert, metricId: undefined },
+    };
     expect(alertsValidator(input)).toEqual(false);
   });
-
   it('requires the metricId to be a string', () => {
-    const input = { [validAlert.alert_path]: { ...validAlert, metricId: 8 } };
-
+    const input = {
+      [validAlert.alert_path]: { ...validAlert, metricId: 8 },
+    };
     expect(alertsValidator(input)).toEqual(false);
   });
-
   it('requires all alerts to have an operator', () => {
-    const input = { [validAlert.alert_path]: { ...validAlert, operator: '' } };
-
+    const input = {
+      [validAlert.alert_path]: { ...validAlert, operator: '' },
+    };
     expect(alertsValidator(input)).toEqual(false);
   });
-
   it('requires all alerts to have an numeric threshold', () => {
-    const input = { [validAlert.alert_path]: { ...validAlert, threshold: '60' } };
-
+    const input = {
+      [validAlert.alert_path]: { ...validAlert, threshold: '60' },
+    };
     expect(alertsValidator(input)).toEqual(false);
   });
-
   it('correctly identifies a valid alerts object', () => {
-    const input = { [validAlert.alert_path]: validAlert };
-
+    const input = {
+      [validAlert.alert_path]: validAlert,
+    };
     expect(alertsValidator(input)).toEqual(true);
   });
 });
-
 describe('queriesValidator', () => {
-  const validQuery = { metricId: '8', alert_path: 'alert', label: 'alert-label' };
-
+  const validQuery = {
+    metricId: '8',
+    alert_path: 'alert',
+    label: 'alert-label',
+  };
   it('requires all alerts to have a metric id', () => {
     const input = [{ ...validQuery, metricId: undefined }];
-
     expect(queriesValidator(input)).toEqual(false);
   });
-
   it('requires the metricId to be a string', () => {
     const input = [{ ...validQuery, metricId: 8 }];
-
     expect(queriesValidator(input)).toEqual(false);
   });
-
   it('requires all queries to have a label', () => {
     const input = [{ ...validQuery, label: undefined }];
-
     expect(queriesValidator(input)).toEqual(false);
   });
-
   it('correctly identifies a valid queries array', () => {
     const input = [validQuery];
-
     expect(queriesValidator(input)).toEqual(true);
   });
 });