Add latest changes from gitlab-org/gitlab@master

5 files changed, 61 insertions, 57 deletions

diff --git a/spec/javascripts/monitoring/charts/column_spec.js b/spec/javascripts/monitoring/charts/column_spec.js
index d8ac68b9484..27b3d435f08 100644
--- a/spec/javascripts/monitoring/charts/column_spec.js
+++ b/spec/javascripts/monitoring/charts/column_spec.js
@@ -1,12 +1,14 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import ColumnChart from '~/monitoring/components/charts/column.vue';
 
+const localVue = createLocalVue();
+
 describe('Column component', () => {
   let columnChart;
 
   beforeEach(() => {
-    columnChart = shallowMount(ColumnChart, {
+    columnChart = shallowMount(localVue.extend(ColumnChart), {
       propsData: {
         graphData: {
           queries: [
@@ -28,6 +30,8 @@ describe('Column component', () => {
         },
         containerWidth: 100,
       },
+      sync: false,
+      localVue,
     });
   });
 
diff --git a/spec/javascripts/monitoring/charts/empty_chart_spec.js b/spec/javascripts/monitoring/charts/empty_chart_spec.js
index bbfca27dc5a..06822126b59 100644
--- a/spec/javascripts/monitoring/charts/empty_chart_spec.js
+++ b/spec/javascripts/monitoring/charts/empty_chart_spec.js
@@ -1,15 +1,19 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import EmptyChart from '~/monitoring/components/charts/empty_chart.vue';
 
+const localVue = createLocalVue();
+
 describe('Empty Chart component', () => {
   let emptyChart;
   const graphTitle = 'Memory Usage';
 
   beforeEach(() => {
-    emptyChart = shallowMount(EmptyChart, {
+    emptyChart = shallowMount(localVue.extend(EmptyChart), {
       propsData: {
         graphTitle,
       },
+      sync: false,
+      localVue,
     });
   });
 
diff --git a/spec/javascripts/monitoring/charts/single_stat_spec.js b/spec/javascripts/monitoring/charts/single_stat_spec.js
index 127a4a7955a..6adca0b0eed 100644
--- a/spec/javascripts/monitoring/charts/single_stat_spec.js
+++ b/spec/javascripts/monitoring/charts/single_stat_spec.js
@@ -1,15 +1,19 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import SingleStatChart from '~/monitoring/components/charts/single_stat.vue';
 import { graphDataPrometheusQuery } from '../mock_data';
 
+const localVue = createLocalVue();
+
 describe('Single Stat Chart component', () => {
   let singleStatChart;
 
   beforeEach(() => {
-    singleStatChart = shallowMount(SingleStatChart, {
+    singleStatChart = shallowMount(localVue.extend(SingleStatChart), {
       propsData: {
         graphData: graphDataPrometheusQuery,
       },
+      sync: false,
+      localVue,
     });
   });
 
diff --git a/spec/javascripts/monitoring/components/dashboard_spec.js b/spec/javascripts/monitoring/components/dashboard_spec.js
index 0f20171726c..3529a3d72ba 100644
--- a/spec/javascripts/monitoring/components/dashboard_spec.js
+++ b/spec/javascripts/monitoring/components/dashboard_spec.js
@@ -72,6 +72,17 @@ describe('Dashboard', () => {
   let mock;
   let store;
   let component;
+  let wrapper;
+
+  const createComponentWrapper = (props = {}, options = {}) => {
+    wrapper = shallowMount(localVue.extend(DashboardComponent), {
+      localVue,
+      sync: false,
+      propsData: { ...propsData, ...props },
+      store,
+      ...options,
+    });
+  };
 
   beforeEach(() => {
     setFixtures(`
@@ -81,13 +92,16 @@ describe('Dashboard', () => {
 
     store = createStore();
     mock = new MockAdapter(axios);
-    DashboardComponent = Vue.extend(Dashboard);
+    DashboardComponent = localVue.extend(Dashboard);
   });
 
   afterEach(() => {
     if (component) {
       component.$destroy();
     }
+    if (wrapper) {
+      wrapper.destroy();
+    }
     mock.restore();
   });
 
@@ -123,15 +137,8 @@ describe('Dashboard', () => {
   });
 
   describe('cluster health', () => {
-    let wrapper;
-
     beforeEach(done => {
-      wrapper = shallowMount(DashboardComponent, {
-        localVue,
-        sync: false,
-        propsData: { ...propsData, hasMetrics: true },
-        store,
-      });
+      createComponentWrapper({ hasMetrics: true });
 
       // all_dashboards is not defined in health dashboards
       wrapper.vm.$store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, undefined);
@@ -383,7 +390,6 @@ describe('Dashboard', () => {
   });
 
   describe('drag and drop function', () => {
-    let wrapper;
     let expectedPanelCount; // also called metrics, naming to be improved: https://gitlab.com/gitlab-org/gitlab/issues/31565
 
     const findDraggables = () => wrapper.findAll(VueDraggable);
@@ -400,13 +406,7 @@ describe('Dashboard', () => {
     });
 
     beforeEach(done => {
-      wrapper = shallowMount(DashboardComponent, {
-        localVue,
-        sync: false,
-        propsData: { ...propsData, hasMetrics: true },
-        store,
-        attachToDocument: true,
-      });
+      createComponentWrapper({ hasMetrics: true }, { attachToDocument: true });
 
       setupComponentStore(wrapper.vm);
 
@@ -417,6 +417,10 @@ describe('Dashboard', () => {
       wrapper.destroy();
     });
 
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
     it('wraps vuedraggable', () => {
       expect(findDraggablePanels().exists()).toBe(true);
       expect(findDraggablePanels().length).toEqual(expectedPanelCount);
@@ -502,7 +506,6 @@ describe('Dashboard', () => {
   // https://gitlab.com/gitlab-org/gitlab-ce/issues/66922
   // eslint-disable-next-line jasmine/no-disabled-tests
   xdescribe('link to chart', () => {
-    let wrapper;
     const currentDashboard = 'TEST_DASHBOARD';
     localVue.use(GlToast);
     const link = () => wrapper.find('.js-chart-link');
@@ -511,13 +514,7 @@ describe('Dashboard', () => {
     beforeEach(done => {
       mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
 
-      wrapper = shallowMount(DashboardComponent, {
-        localVue,
-        sync: false,
-        attachToDocument: true,
-        propsData: { ...propsData, hasMetrics: true, currentDashboard },
-        store,
-      });
+      createComponentWrapper({ hasMetrics: true, currentDashboard }, { attachToDocument: true });
 
       setTimeout(done);
     });
@@ -614,19 +611,12 @@ describe('Dashboard', () => {
   });
 
   describe('dashboard edit link', () => {
-    let wrapper;
     const findEditLink = () => wrapper.find('.js-edit-link');
 
     beforeEach(done => {
       mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
 
-      wrapper = shallowMount(DashboardComponent, {
-        localVue,
-        sync: false,
-        attachToDocument: true,
-        propsData: { ...propsData, hasMetrics: true },
-        store,
-      });
+      createComponentWrapper({ hasMetrics: true }, { attachToDocument: true });
 
       wrapper.vm.$store.commit(
         `monitoringDashboard/${types.SET_ALL_DASHBOARDS}`,
diff --git a/spec/javascripts/monitoring/components/graph_group_spec.js b/spec/javascripts/monitoring/components/graph_group_spec.js
index 7bcab9116e9..04371091ca8 100644
--- a/spec/javascripts/monitoring/components/graph_group_spec.js
+++ b/spec/javascripts/monitoring/components/graph_group_spec.js
@@ -1,22 +1,31 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import GraphGroup from '~/monitoring/components/graph_group.vue';
 
+const localVue = createLocalVue();
+
 describe('Graph group component', () => {
   let graphGroup;
+
   const findPrometheusGroup = () => graphGroup.find('.prometheus-graph-group');
   const findPrometheusPanel = () => graphGroup.find('.prometheus-panel');
 
+  const createComponent = propsData => {
+    graphGroup = shallowMount(localVue.extend(GraphGroup), {
+      propsData,
+      sync: false,
+      localVue,
+    });
+  };
+
   afterEach(() => {
     graphGroup.destroy();
   });
 
   describe('When groups can be collapsed', () => {
     beforeEach(() => {
-      graphGroup = shallowMount(GraphGroup, {
-        propsData: {
-          name: 'panel',
-          collapseGroup: true,
-        },
+      createComponent({
+        name: 'panel',
+        collapseGroup: true,
       });
     });
 
@@ -33,12 +42,10 @@ describe('Graph group component', () => {
 
   describe('When groups can not be collapsed', () => {
     beforeEach(() => {
-      graphGroup = shallowMount(GraphGroup, {
-        propsData: {
-          name: 'panel',
-          collapseGroup: true,
-          showPanels: false,
-        },
+      createComponent({
+        name: 'panel',
+        collapseGroup: true,
+        showPanels: false,
       });
     });
 
@@ -49,12 +56,7 @@ describe('Graph group component', () => {
 
   describe('When collapseGroup prop is updated', () => {
     beforeEach(() => {
-      graphGroup = shallowMount(GraphGroup, {
-        propsData: {
-          name: 'panel',
-          collapseGroup: false,
-        },
-      });
+      createComponent({ name: 'panel', collapseGroup: false });
     });
 
     it('previously collapsed group should respond to the prop change', done => {