Merge branch 'vs-migrate-insights-to-jest' into 'master'

Migrate ee/insights to jest

Closes #194290

See merge request gitlab-org/gitlab!29072

ee/spec/javascripts/insights/components/insights_chart_error_spec.js → ee/spec/frontend/insights/components/insights_chart_error_spec.js

@@ -20,11 +20,11 @@ describe('Insights chart error component', () => {
   });
 
   it('renders the component', () => {
-    expect(wrapper.find('.content-title').text()).toEqual(`${title}: "${chartName}"`);
+    expect(wrapper.find('.content-title').text()).toBe(`${title}: "${chartName}"`);
 
     const summaries = wrapper.findAll('.content-summary');
 
-    expect(summaries.at(0).text()).toEqual(summary);
-    expect(summaries.at(1).text()).toEqual(error);
+    expect(summaries.at(0).text()).toBe(summary);
+    expect(summaries.at(1).text()).toBe(error);
   });
 });

ee/spec/javascripts/insights/components/insights_chart_spec.js → ee/spec/frontend/insights/components/insights_chart_spec.js

 import { GlColumnChart, GlLineChart, GlStackedColumnChart } from '@gitlab/ui/dist/charts';
 import { shallowMount } from '@vue/test-utils';
 
-import { chartInfo, barChartData, lineChartData, stackedBarChartData } from '../mock_data';
+import {
+  chartInfo,
+  barChartData,
+  lineChartData,
+  stackedBarChartData,
+} from 'ee_jest/insights/mock_data';
 import InsightsChart from 'ee/insights/components/insights_chart.vue';
 import InsightsChartError from 'ee/insights/components/insights_chart_error.vue';
 import { CHART_TYPES } from 'ee/insights/constants';

ee/spec/javascripts/insights/components/insights_config_warning_spec.js → ee/spec/frontend/insights/components/insights_config_warning_spec.js

@@ -27,7 +27,7 @@ describe('Insights config warning component', () => {
         .attributes('src'),
     ).toContain(image);
 
-    expect(wrapper.find('.content-title').text()).toEqual(title);
-    expect(wrapper.find('.content-summary').text()).toEqual(summary);
+    expect(wrapper.find('.content-title').text()).toBe(title);
+    expect(wrapper.find('.content-summary').text()).toBe(summary);
   });
 });

ee/spec/javascripts/insights/components/insights_page_spec.js → ee/spec/frontend/insights/components/insights_page_spec.js

 import Vue from 'vue';
 import InsightsPage from 'ee/insights/components/insights_page.vue';
 import { createStore } from 'ee/insights/stores';
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { chartInfo, pageInfo, pageInfoNoCharts } from '../mock_data';
+import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { TEST_HOST } from 'helpers/test_constants';
+import { chartInfo, pageInfo, pageInfoNoCharts } from 'ee_jest/insights/mock_data';
 
 describe('Insights page component', () => {
   let component;
@@ -11,7 +12,7 @@ describe('Insights page component', () => {
 
   beforeEach(() => {
     store = createStore();
-    spyOn(store, 'dispatch').and.stub();
+    jest.spyOn(store, 'dispatch').mockImplementation(() => {});
     Component = Vue.extend(InsightsPage);
   });
 
@@ -20,17 +21,16 @@ describe('Insights page component', () => {
   });
 
   describe('no chart config available', () => {
-    it('shows an empty state', done => {
+    it('shows an empty state', () => {
       component = mountComponentWithStore(Component, {
         store,
         props: {
-          queryEndpoint: `${gl.TEST_HOST}/query`,
+          queryEndpoint: `${TEST_HOST}/query`,
           pageConfig: pageInfoNoCharts,
         },
       });
 
       expect(component.$el.querySelector('.js-empty-state')).not.toBe(null);
-      done();
     });
   });
 
@@ -39,18 +39,17 @@ describe('Insights page component', () => {
       component = mountComponentWithStore(Component, {
         store,
         props: {
-          queryEndpoint: `${gl.TEST_HOST}/query`,
+          queryEndpoint: `${TEST_HOST}/query`,
           pageConfig: pageInfo,
         },
       });
     });
 
-    it('fetches chart data when mounted', done => {
+    it('fetches chart data when mounted', () => {
       expect(store.dispatch).toHaveBeenCalledWith('insights/fetchChartData', {
-        endpoint: `${gl.TEST_HOST}/query`,
+        endpoint: `${TEST_HOST}/query`,
         chart: chartInfo,
       });
-      done();
     });
 
     describe('when charts loading', () => {
@@ -58,35 +57,29 @@ describe('Insights page component', () => {
         component.$store.state.insights.pageLoading = true;
       });
 
-      it('renders loading state', done => {
-        Vue.nextTick(() => {
+      it('renders loading state', () => {
+        return component.$nextTick(() => {
           expect(
             component.$el.querySelector('.js-insights-page-container .insights-chart-loading'),
           ).not.toBe(null);
-          done();
         });
       });
 
-      it('does not display chart area', done => {
-        Vue.nextTick(() => {
+      it('does not display chart area', () => {
+        return component.$nextTick(() => {
           expect(component.$el.querySelector('.js-insights-page-container .insights-charts')).toBe(
             null,
           );
-          done();
         });
       });
     });
 
     describe('pageConfig changes', () => {
-      it('reflects new state', done => {
-        // Establish rendered state
-        component.$nextTick();
-
+      it('reflects new state', () => {
         component.pageConfig = pageInfoNoCharts;
 
-        component.$nextTick(() => {
+        return component.$nextTick(() => {
           expect(component.$el.querySelector('.js-empty-state')).not.toBe(null);
-          done();
         });
       });
     });

ee/spec/javascripts/insights/components/insights_spec.js → ee/spec/frontend/insights/components/insights_spec.js

 import Vue from 'vue';
+import { TEST_HOST } from 'helpers/test_constants';
 import Insights from 'ee/insights/components/insights.vue';
 import { createStore } from 'ee/insights/stores';
 import createRouter from 'ee/insights/insights_router';
-import { pageInfo } from '../mock_data';
+import { pageInfo } from 'ee_jest/insights/mock_data';
 
 describe('Insights component', () => {
   let vm;
@@ -13,14 +14,14 @@ describe('Insights component', () => {
 
   beforeEach(() => {
     store = createStore();
-    spyOn(store, 'dispatch').and.stub();
+    jest.spyOn(store, 'dispatch').mockImplementation(() => {});
 
     mountComponent = data => {
       const el = null;
 
       const props = data || {
-        endpoint: gl.TEST_HOST,
-        queryEndpoint: `${gl.TEST_HOST}/query`,
+        endpoint: TEST_HOST,
+        queryEndpoint: `${TEST_HOST}/query`,
       };
 
       return new Component({
@@ -34,22 +35,21 @@ describe('Insights component', () => {
   });
 
   afterEach(() => {
+    store.dispatch.mockReset();
     vm.$destroy();
   });
 
-  it('fetches config data when mounted', done => {
-    expect(store.dispatch).toHaveBeenCalledWith('insights/fetchConfigData', gl.TEST_HOST);
-    done();
+  it('fetches config data when mounted', () => {
+    expect(store.dispatch).toHaveBeenCalledWith('insights/fetchConfigData', TEST_HOST);
   });
 
   describe('when loading config', () => {
-    it('renders config loading state', done => {
+    it('renders config loading state', () => {
       vm.$store.state.insights.configLoading = true;
 
-      vm.$nextTick(() => {
+      return vm.$nextTick(() => {
         expect(vm.$el.querySelector('.insights-config-loading')).not.toBe(null);
         expect(vm.$el.querySelector('.insights-wrapper')).toBe(null);
-        done();
       });
     });
   });
@@ -68,13 +68,12 @@ describe('Insights component', () => {
       };
     });
 
-    it('has the correct nav tabs', done => {
-      vm.$nextTick(() => {
+    it('has the correct nav tabs', () => {
+      return vm.$nextTick(() => {
         expect(vm.$el.querySelector('.js-insights-dropdown')).not.toBe(null);
         expect(vm.$el.querySelector('.js-insights-dropdown .dropdown-item').innerText.trim()).toBe(
           title,
         );
-        done();
       });
     });
 
@@ -83,12 +82,11 @@ describe('Insights component', () => {
         vm.$store.state.insights.pageLoading = true;
       });
 
-      it('disables the tab selector', done => {
-        vm.$nextTick(() => {
+      it('disables the tab selector', () => {
+        return vm.$nextTick(() => {
           expect(
             vm.$el.querySelector('.js-insights-dropdown > button').getAttribute('disabled'),
           ).toBe('disabled');
-          done();
         });
       });
     });
@@ -100,12 +98,11 @@ describe('Insights component', () => {
       vm.$store.state.insights.configData = null;
     });
 
-    it('it displays a warning', done => {
-      vm.$nextTick(() => {
+    it('it displays a warning', () => {
+      return vm.$nextTick(() => {
         expect(vm.$el.querySelector('.js-empty-state').innerText.trim()).toContain(
           'Invalid Insights config file detected',
         );
-        done();
       });
     });
   });
@@ -128,22 +125,24 @@ describe('Insights component', () => {
       window.location.hash = '';
     });
 
-    it('selects the first tab if invalid', done => {
+    it('selects the first tab if invalid', () => {
       window.location.hash = '#/invalid';
 
-      vm.$nextTick(() => {
+      jest.runOnlyPendingTimers();
+
+      return vm.$nextTick(() => {
         expect(store.dispatch).toHaveBeenCalledWith('insights/setActiveTab', defaultKey);
       });
-      done();
     });
 
-    it('selects the specified tab if valid', done => {
+    it('selects the specified tab if valid', () => {
       window.location.hash = `#/${selectedKey}`;
 
-      vm.$nextTick(() => {
+      jest.runOnlyPendingTimers();
+
+      return vm.$nextTick(() => {
         expect(store.dispatch).toHaveBeenCalledWith('insights/setActiveTab', selectedKey);
       });
-      done();
     });
   });
 });

ee/spec/javascripts/insights/insights_router_spec.js → ee/spec/frontend/insights/insights_router_spec.js

@@ -11,7 +11,7 @@ describe('insights router', () => {
   it(`sets the activeTab when route changed`, () => {
     const route = 'route';
 
-    spyOn(store, 'dispatch').and.stub();
+    jest.spyOn(store, 'dispatch').mockImplementation(() => {});
 
     router.push(`/${route}`);
 

ee/spec/frontend/insights/stores/insights/mutations_spec.js

@@ -3,7 +3,7 @@ import mutations from 'ee/insights/stores/modules/insights/mutations';
 import * as types from 'ee/insights/stores/modules/insights/mutation_types';
 import { CHART_TYPES } from 'ee/insights/constants';
 
-import { configData } from '../../../../javascripts/insights/mock_data';
+import { configData } from 'ee_jest/insights/mock_data';
 
 describe('Insights mutations', () => {
   let state;