Add latest changes from gitlab-org/gitlab@master

27 files changed, 194 insertions, 90 deletions

diff --git a/spec/javascripts/monitoring/components/dashboard_spec.js b/spec/javascripts/monitoring/components/dashboard_spec.js
index 3529a3d72ba..7d6a1d7b097 100644
--- a/spec/javascripts/monitoring/components/dashboard_spec.js
+++ b/spec/javascripts/monitoring/components/dashboard_spec.js
@@ -4,11 +4,13 @@ import { GlToast } from '@gitlab/ui';
 import VueDraggable from 'vuedraggable';
 import MockAdapter from 'axios-mock-adapter';
 import Dashboard from '~/monitoring/components/dashboard.vue';
+import EmptyState from '~/monitoring/components/empty_state.vue';
 import * as types from '~/monitoring/stores/mutation_types';
 import { createStore } from '~/monitoring/stores';
 import axios from '~/lib/utils/axios_utils';
 import {
   metricsGroupsAPIResponse,
+  mockedEmptyResult,
   mockedQueryResultPayload,
   mockedQueryResultPayloadCoresTotal,
   mockApiEndpoint,
@@ -29,6 +31,7 @@ const propsData = {
   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',
@@ -43,15 +46,17 @@ const resetSpy = spy => {
   }
 };
 
-export default propsData;
+let expectedPanelCount;
 
 function setupComponentStore(component) {
+  // Load 2 panel groups
   component.$store.commit(
     `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
     metricsGroupsAPIResponse,
   );
 
-  // Load 2 panels to the dashboard
+  // Load 3 panels to the dashboard, one with an empty result
+  component.$store.commit(`monitoringDashboard/${types.SET_QUERY_RESULT}`, mockedEmptyResult);
   component.$store.commit(
     `monitoringDashboard/${types.SET_QUERY_RESULT}`,
     mockedQueryResultPayload,
@@ -61,6 +66,8 @@ function setupComponentStore(component) {
     mockedQueryResultPayloadCoresTotal,
   );
 
+  expectedPanelCount = 2;
+
   component.$store.commit(
     `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
     environmentData,
@@ -126,13 +133,9 @@ describe('Dashboard', () => {
 
   describe('no data found', () => {
     it('shows the environment selector dropdown', () => {
-      component = new DashboardComponent({
-        el: document.querySelector('.prometheus-graphs'),
-        propsData: { ...propsData, showEmptyState: true },
-        store,
-      });
+      createComponentWrapper();
 
-      expect(component.$el.querySelector('.js-environments-dropdown')).toBeTruthy();
+      expect(wrapper.find('.js-environments-dropdown').exists()).toBeTruthy();
     });
   });
 
@@ -389,9 +392,36 @@ describe('Dashboard', () => {
     });
   });
 
-  describe('drag and drop function', () => {
-    let expectedPanelCount; // also called metrics, naming to be improved: https://gitlab.com/gitlab-org/gitlab/issues/31565
+  describe('when one of the metrics is missing', () => {
+    beforeEach(() => {
+      mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
+    });
+
+    beforeEach(done => {
+      createComponentWrapper({ hasMetrics: true }, { attachToDocument: true });
+      setupComponentStore(wrapper.vm);
+
+      wrapper.vm.$nextTick(done);
+    });
 
+    it('shows a group empty area', () => {
+      const emptyGroup = wrapper.findAll({ ref: 'empty-group' });
+
+      expect(emptyGroup).toHaveLength(1);
+      expect(emptyGroup.is(EmptyState)).toBe(true);
+    });
+
+    it('group empty area displays a "noDataGroup"', () => {
+      expect(
+        wrapper
+          .findAll({ ref: 'empty-group' })
+          .at(0)
+          .props('selectedState'),
+      ).toEqual('noDataGroup');
+    });
+  });
+
+  describe('drag and drop function', () => {
     const findDraggables = () => wrapper.findAll(VueDraggable);
     const findEnabledDraggables = () => findDraggables().filter(f => !f.attributes('disabled'));
     const findDraggablePanels = () => wrapper.findAll('.js-draggable-panel');
@@ -399,10 +429,6 @@ describe('Dashboard', () => {
 
     beforeEach(() => {
       mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
-      expectedPanelCount = metricsGroupsAPIResponse.reduce(
-        (acc, group) => group.panels.length + acc,
-        0,
-      );
     });
 
     beforeEach(done => {
@@ -417,10 +443,6 @@ describe('Dashboard', () => {
       wrapper.destroy();
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('wraps vuedraggable', () => {
       expect(findDraggablePanels().exists()).toBe(true);
       expect(findDraggablePanels().length).toEqual(expectedPanelCount);
@@ -459,22 +481,20 @@ describe('Dashboard', () => {
 
         it('metrics can be swapped', done => {
           const firstDraggable = findDraggables().at(0);
-          const mockMetrics = [...metricsGroupsAPIResponse[0].panels];
-          const value = () => firstDraggable.props('value');
+          const mockMetrics = [...metricsGroupsAPIResponse[1].panels];
 
-          expect(value().length).toBe(mockMetrics.length);
-          value().forEach((metric, i) => {
-            expect(metric.title).toBe(mockMetrics[i].title);
-          });
+          const firstTitle = mockMetrics[0].title;
+          const secondTitle = mockMetrics[1].title;
 
           // swap two elements and `input` them
           [mockMetrics[0], mockMetrics[1]] = [mockMetrics[1], mockMetrics[0]];
           firstDraggable.vm.$emit('input', mockMetrics);
 
-          firstDraggable.vm.$nextTick(() => {
-            value().forEach((metric, i) => {
-              expect(metric.title).toBe(mockMetrics[i].title);
-            });
+          wrapper.vm.$nextTick(() => {
+            const { panels } = wrapper.vm.dashboard.panel_groups[1];
+
+            expect(panels[1].title).toEqual(firstTitle);
+            expect(panels[0].title).toEqual(secondTitle);
             done();
           });
         });
@@ -584,7 +604,7 @@ describe('Dashboard', () => {
       setupComponentStore(component);
 
       return Vue.nextTick().then(() => {
-        promPanel = component.$el.querySelector('.prometheus-panel');
+        [, promPanel] = component.$el.querySelectorAll('.prometheus-panel');
         promGroup = promPanel.querySelector('.prometheus-graph-group');
         panelToggle = promPanel.querySelector('.js-graph-group-toggle');
         chart = promGroup.querySelector('.position-relative svg');
diff --git a/spec/javascripts/monitoring/components/graph_group_spec.js b/spec/javascripts/monitoring/components/graph_group_spec.js
index 04371091ca8..43ca17c3cbc 100644
--- a/spec/javascripts/monitoring/components/graph_group_spec.js
+++ b/spec/javascripts/monitoring/components/graph_group_spec.js
@@ -1,16 +1,18 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import GraphGroup from '~/monitoring/components/graph_group.vue';
+import Icon from '~/vue_shared/components/icon.vue';
 
 const localVue = createLocalVue();
 
 describe('Graph group component', () => {
-  let graphGroup;
+  let wrapper;
 
-  const findPrometheusGroup = () => graphGroup.find('.prometheus-graph-group');
-  const findPrometheusPanel = () => graphGroup.find('.prometheus-panel');
+  const findGroup = () => wrapper.find({ ref: 'graph-group' });
+  const findContent = () => wrapper.find({ ref: 'graph-group-content' });
+  const findCaretIcon = () => wrapper.find(Icon);
 
   const createComponent = propsData => {
-    graphGroup = shallowMount(localVue.extend(GraphGroup), {
+    wrapper = shallowMount(localVue.extend(GraphGroup), {
       propsData,
       sync: false,
       localVue,
@@ -18,57 +20,100 @@ describe('Graph group component', () => {
   };
 
   afterEach(() => {
-    graphGroup.destroy();
+    wrapper.destroy();
   });
 
-  describe('When groups can be collapsed', () => {
+  describe('When group is not collapsed', () => {
     beforeEach(() => {
       createComponent({
         name: 'panel',
-        collapseGroup: true,
+        collapseGroup: false,
       });
     });
 
-    it('should show the angle-down caret icon when collapseGroup is true', () => {
-      expect(graphGroup.vm.caretIcon).toBe('angle-down');
+    it('should show the angle-down caret icon', () => {
+      expect(findContent().isVisible()).toBe(true);
+      expect(findCaretIcon().props('name')).toBe('angle-down');
     });
 
-    it('should show the angle-right caret icon when collapseGroup is false', () => {
-      graphGroup.vm.collapse();
+    it('should show the angle-right caret icon when the user collapses the group', done => {
+      wrapper.vm.collapse();
 
-      expect(graphGroup.vm.caretIcon).toBe('angle-right');
+      wrapper.vm.$nextTick(() => {
+        expect(findContent().isVisible()).toBe(false);
+        expect(findCaretIcon().props('name')).toBe('angle-right');
+        done();
+      });
     });
-  });
 
-  describe('When groups can not be collapsed', () => {
-    beforeEach(() => {
-      createComponent({
-        name: 'panel',
+    it('should show the open the group when collapseGroup is set to true', done => {
+      wrapper.setProps({
         collapseGroup: true,
-        showPanels: false,
+      });
+
+      wrapper.vm.$nextTick(() => {
+        expect(findContent().isVisible()).toBe(true);
+        expect(findCaretIcon().props('name')).toBe('angle-down');
+        done();
       });
     });
 
-    it('should not contain a prometheus-panel container when showPanels is false', () => {
-      expect(findPrometheusPanel().exists()).toBe(false);
+    describe('When group is collapsed', () => {
+      beforeEach(() => {
+        createComponent({
+          name: 'panel',
+          collapseGroup: true,
+        });
+      });
+
+      it('should show the angle-down caret icon when collapseGroup is true', () => {
+        expect(wrapper.vm.caretIcon).toBe('angle-right');
+      });
+
+      it('should show the angle-right caret icon when collapseGroup is false', () => {
+        wrapper.vm.collapse();
+
+        expect(wrapper.vm.caretIcon).toBe('angle-down');
+      });
     });
-  });
 
-  describe('When collapseGroup prop is updated', () => {
-    beforeEach(() => {
-      createComponent({ name: 'panel', collapseGroup: false });
+    describe('When groups can not be collapsed', () => {
+      beforeEach(() => {
+        createComponent({
+          name: 'panel',
+          showPanels: false,
+          collapseGroup: false,
+        });
+      });
+
+      it('should not have a container when showPanels is false', () => {
+        expect(findGroup().exists()).toBe(false);
+        expect(findContent().exists()).toBe(true);
+      });
     });
 
-    it('previously collapsed group should respond to the prop change', done => {
-      expect(findPrometheusGroup().exists()).toBe(false);
+    describe('When group does not show a panel heading', () => {
+      beforeEach(() => {
+        createComponent({
+          name: 'panel',
+          showPanels: false,
+          collapseGroup: false,
+        });
+      });
 
-      graphGroup.setProps({
-        collapseGroup: true,
+      it('should collapse the panel content', () => {
+        expect(findContent().isVisible()).toBe(true);
+        expect(findCaretIcon().exists()).toBe(false);
       });
 
-      graphGroup.vm.$nextTick(() => {
-        expect(findPrometheusGroup().exists()).toBe(true);
-        done();
+      it('should show the panel content when clicked', done => {
+        wrapper.vm.collapse();
+
+        wrapper.vm.$nextTick(() => {
+          expect(findContent().isVisible()).toBe(true);
+          expect(findCaretIcon().exists()).toBe(false);
+          done();
+        });
       });
     });
   });
diff --git a/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js b/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js
index 6bfb3f5ca21..9ad72e0b043 100644
--- a/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js
+++ b/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js
@@ -1,10 +1,9 @@
 import Vue from 'vue';
 
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import axios from '~/lib/utils/axios_utils';
 import stopJobsModal from '~/pages/admin/jobs/index/components/stop_jobs_modal.vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
 describe('stop_jobs_modal.vue', () => {
   const props = {
     url: `${gl.TEST_HOST}/stop_jobs_modal.vue/stopAll`,
diff --git a/spec/javascripts/pages/labels/components/promote_label_modal_spec.js b/spec/javascripts/pages/labels/components/promote_label_modal_spec.js
index 75912612255..5bad13c1ef2 100644
--- a/spec/javascripts/pages/labels/components/promote_label_modal_spec.js
+++ b/spec/javascripts/pages/labels/components/promote_label_modal_spec.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import promoteLabelModal from '~/pages/projects/labels/components/promote_label_modal.vue';
 import eventHub from '~/pages/projects/labels/event_hub';
 import axios from '~/lib/utils/axios_utils';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('Promote label modal', () => {
   let vm;
diff --git a/spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js b/spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js
index fe293083e4c..9075c8aa97a 100644
--- a/spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js
+++ b/spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js
@@ -1,11 +1,10 @@
 import Vue from 'vue';
 
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import axios from '~/lib/utils/axios_utils';
 import deleteMilestoneModal from '~/pages/milestones/shared/components/delete_milestone_modal.vue';
 import eventHub from '~/pages/milestones/shared/event_hub';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
 describe('delete_milestone_modal.vue', () => {
   const Component = Vue.extend(deleteMilestoneModal);
   const props = {
diff --git a/spec/javascripts/pages/milestones/shared/components/promote_milestone_modal_spec.js b/spec/javascripts/pages/milestones/shared/components/promote_milestone_modal_spec.js
index 3d25a278cef..78c0070187c 100644
--- a/spec/javascripts/pages/milestones/shared/components/promote_milestone_modal_spec.js
+++ b/spec/javascripts/pages/milestones/shared/components/promote_milestone_modal_spec.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import promoteMilestoneModal from '~/pages/milestones/shared/components/promote_milestone_modal.vue';
 import eventHub from '~/pages/milestones/shared/event_hub';
 import axios from '~/lib/utils/axios_utils';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('Promote milestone modal', () => {
   let vm;
diff --git a/spec/javascripts/pdf/index_spec.js b/spec/javascripts/pdf/index_spec.js
index c746d5644e8..e14f1b27f6c 100644
--- a/spec/javascripts/pdf/index_spec.js
+++ b/spec/javascripts/pdf/index_spec.js
@@ -2,8 +2,8 @@ import Vue from 'vue';
 import { GlobalWorkerOptions } from 'pdfjs-dist/build/pdf';
 import workerSrc from 'pdfjs-dist/build/pdf.worker.min';
 
-import PDFLab from '~/pdf/index.vue';
 import { FIXTURES_PATH } from 'spec/test_constants';
+import PDFLab from '~/pdf/index.vue';
 
 const pdf = `${FIXTURES_PATH}/blob/pdf/test.pdf`;
 
diff --git a/spec/javascripts/pdf/page_spec.js b/spec/javascripts/pdf/page_spec.js
index efeb65acf87..bb2294e8d18 100644
--- a/spec/javascripts/pdf/page_spec.js
+++ b/spec/javascripts/pdf/page_spec.js
@@ -2,9 +2,9 @@ import Vue from 'vue';
 import pdfjsLib from 'pdfjs-dist/build/pdf';
 import workerSrc from 'pdfjs-dist/build/pdf.worker.min';
 
-import PageComponent from '~/pdf/page/index.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import { FIXTURES_PATH } from 'spec/test_constants';
+import PageComponent from '~/pdf/page/index.vue';
 
 const testPDF = `${FIXTURES_PATH}/blob/pdf/test.pdf`;
 
diff --git a/spec/javascripts/performance_bar/index_spec.js b/spec/javascripts/performance_bar/index_spec.js
index de0ef25e7fa..3957edce9e0 100644
--- a/spec/javascripts/performance_bar/index_spec.js
+++ b/spec/javascripts/performance_bar/index_spec.js
@@ -1,10 +1,9 @@
+import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import '~/performance_bar/components/performance_bar_app.vue';
 import performanceBar from '~/performance_bar';
 import PerformanceBarService from '~/performance_bar/services/performance_bar_service';
 
-import MockAdapter from 'axios-mock-adapter';
-
 describe('performance bar wrapper', () => {
   let mock;
   let vm;
diff --git a/spec/javascripts/persistent_user_callout_spec.js b/spec/javascripts/persistent_user_callout_spec.js
index d15758be5d2..d4cb92cacfd 100644
--- a/spec/javascripts/persistent_user_callout_spec.js
+++ b/spec/javascripts/persistent_user_callout_spec.js
@@ -1,7 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
+import setTimeoutPromise from 'spec/helpers/set_timeout_promise_helper';
 import axios from '~/lib/utils/axios_utils';
 import PersistentUserCallout from '~/persistent_user_callout';
-import setTimeoutPromise from 'spec/helpers/set_timeout_promise_helper';
 
 describe('PersistentUserCallout', () => {
   const dismissEndpoint = '/dismiss';
diff --git a/spec/javascripts/pipelines/graph/job_group_dropdown_spec.js b/spec/javascripts/pipelines/graph/job_group_dropdown_spec.js
index 24631cc1c89..a3957f94caa 100644
--- a/spec/javascripts/pipelines/graph/job_group_dropdown_spec.js
+++ b/spec/javascripts/pipelines/graph/job_group_dropdown_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import JobGroupDropdown from '~/pipelines/components/graph/job_group_dropdown.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import JobGroupDropdown from '~/pipelines/components/graph/job_group_dropdown.vue';
 
 describe('job group dropdown component', () => {
   const Component = Vue.extend(JobGroupDropdown);
diff --git a/spec/javascripts/pipelines/graph/linked_pipelines_column_spec.js b/spec/javascripts/pipelines/graph/linked_pipelines_column_spec.js
index 0584a118f81..fe7039da9e4 100644
--- a/spec/javascripts/pipelines/graph/linked_pipelines_column_spec.js
+++ b/spec/javascripts/pipelines/graph/linked_pipelines_column_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import LinkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines_column.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import LinkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines_column.vue';
 import mockData from './linked_pipelines_mock_data';
 
 describe('Linked Pipelines Column', () => {
diff --git a/spec/javascripts/pipelines/graph/stage_column_component_spec.js b/spec/javascripts/pipelines/graph/stage_column_component_spec.js
index 5183f8dd2d6..dbfeeae43fe 100644
--- a/spec/javascripts/pipelines/graph/stage_column_component_spec.js
+++ b/spec/javascripts/pipelines/graph/stage_column_component_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import stageColumnComponent from '~/pipelines/components/graph/stage_column_component.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import stageColumnComponent from '~/pipelines/components/graph/stage_column_component.vue';
 
 describe('stage column component', () => {
   let component;
diff --git a/spec/javascripts/pipelines/pipelines_actions_spec.js b/spec/javascripts/pipelines/pipelines_actions_spec.js
index 953a42b9d15..91f7d2167cc 100644
--- a/spec/javascripts/pipelines/pipelines_actions_spec.js
+++ b/spec/javascripts/pipelines/pipelines_actions_spec.js
@@ -1,9 +1,9 @@
 import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
-import PipelinesActions from '~/pipelines/components/pipelines_actions.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import { TEST_HOST } from 'spec/test_constants';
+import axios from '~/lib/utils/axios_utils';
+import PipelinesActions from '~/pipelines/components/pipelines_actions.vue';
 
 describe('Pipelines Actions dropdown', () => {
   const Component = Vue.extend(PipelinesActions);
diff --git a/spec/javascripts/pipelines/pipelines_spec.js b/spec/javascripts/pipelines/pipelines_spec.js
index daa898ca687..e1123cc7248 100644
--- a/spec/javascripts/pipelines/pipelines_spec.js
+++ b/spec/javascripts/pipelines/pipelines_spec.js
@@ -1,9 +1,9 @@
 import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import axios from '~/lib/utils/axios_utils';
 import pipelinesComp from '~/pipelines/components/pipelines.vue';
 import Store from '~/pipelines/stores/pipelines_store';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import { pipelineWithStages, stageReply } from './mock_data';
 
 describe('Pipelines', () => {
diff --git a/spec/javascripts/pipelines/stage_spec.js b/spec/javascripts/pipelines/stage_spec.js
index 19ae7860333..b99688ec371 100644
--- a/spec/javascripts/pipelines/stage_spec.js
+++ b/spec/javascripts/pipelines/stage_spec.js
@@ -1,9 +1,9 @@
 import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import axios from '~/lib/utils/axios_utils';
 import stage from '~/pipelines/components/stage.vue';
 import eventHub from '~/pipelines/event_hub';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import { stageReply } from './mock_data';
 
 describe('Pipelines stage component', () => {
diff --git a/spec/javascripts/profile/account/components/delete_account_modal_spec.js b/spec/javascripts/profile/account/components/delete_account_modal_spec.js
index d5f5cabc63e..e2c557d79a9 100644
--- a/spec/javascripts/profile/account/components/delete_account_modal_spec.js
+++ b/spec/javascripts/profile/account/components/delete_account_modal_spec.js
@@ -1,8 +1,7 @@
 import Vue from 'vue';
 
-import deleteAccountModal from '~/profile/account/components/delete_account_modal.vue';
-
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import deleteAccountModal from '~/profile/account/components/delete_account_modal.vue';
 
 describe('DeleteAccountModal component', () => {
   const actionUrl = `${gl.TEST_HOST}/delete/user`;
diff --git a/spec/javascripts/profile/account/components/update_username_spec.js b/spec/javascripts/profile/account/components/update_username_spec.js
index cc07a5f6e43..902e00b85fd 100644
--- a/spec/javascripts/profile/account/components/update_username_spec.js
+++ b/spec/javascripts/profile/account/components/update_username_spec.js
@@ -1,9 +1,9 @@
 import Vue from 'vue';
-import axios from '~/lib/utils/axios_utils';
 import MockAdapter from 'axios-mock-adapter';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import axios from '~/lib/utils/axios_utils';
 
 import updateUsername from '~/profile/account/components/update_username.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('UpdateUsername component', () => {
   const rootUrl = gl.TEST_HOST;
diff --git a/spec/javascripts/related_merge_requests/store/actions_spec.js b/spec/javascripts/related_merge_requests/store/actions_spec.js
index 65e436fbb17..c4cd9f5f803 100644
--- a/spec/javascripts/related_merge_requests/store/actions_spec.js
+++ b/spec/javascripts/related_merge_requests/store/actions_spec.js
@@ -1,8 +1,8 @@
 import MockAdapter from 'axios-mock-adapter';
+import testAction from 'spec/helpers/vuex_action_helper';
 import axios from '~/lib/utils/axios_utils';
 import * as types from '~/related_merge_requests/store/mutation_types';
 import actionsModule, * as actions from '~/related_merge_requests/store/actions';
-import testAction from 'spec/helpers/vuex_action_helper';
 
 describe('RelatedMergeRequest store actions', () => {
   let state;
diff --git a/spec/javascripts/releases/list/components/app_spec.js b/spec/javascripts/releases/list/components/app_spec.js
index 994488581d7..de6208ab1fd 100644
--- a/spec/javascripts/releases/list/components/app_spec.js
+++ b/spec/javascripts/releases/list/components/app_spec.js
@@ -1,9 +1,9 @@
-import Vue from 'vue';
 import _ from 'underscore';
+import Vue from 'vue';
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import app from '~/releases/list/components/app.vue';
 import createStore from '~/releases/list/store';
 import api from '~/api';
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import { resetStore } from '../store/helpers';
 import {
   pageInfoHeadersWithoutPagination,
diff --git a/spec/javascripts/releases/list/store/actions_spec.js b/spec/javascripts/releases/list/store/actions_spec.js
index c4b49c39e28..f03e019b95c 100644
--- a/spec/javascripts/releases/list/store/actions_spec.js
+++ b/spec/javascripts/releases/list/store/actions_spec.js
@@ -1,3 +1,4 @@
+import testAction from 'spec/helpers/vuex_action_helper';
 import {
   requestReleases,
   fetchReleases,
@@ -8,7 +9,6 @@ import state from '~/releases/list/store/state';
 import * as types from '~/releases/list/store/mutation_types';
 import api from '~/api';
 import { parseIntPagination } from '~/lib/utils/common_utils';
-import testAction from 'spec/helpers/vuex_action_helper';
 import { pageInfoHeadersWithoutPagination, releases } from '../../mock_data';
 
 describe('Releases State actions', () => {
diff --git a/spec/javascripts/reports/components/modal_open_name_spec.js b/spec/javascripts/reports/components/modal_open_name_spec.js
index 53ae6453915..ae1fb2bf187 100644
--- a/spec/javascripts/reports/components/modal_open_name_spec.js
+++ b/spec/javascripts/reports/components/modal_open_name_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import component from '~/reports/components/modal_open_name.vue';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import component from '~/reports/components/modal_open_name.vue';
 
 Vue.use(Vuex);
 
diff --git a/spec/javascripts/reports/components/summary_row_spec.js b/spec/javascripts/reports/components/summary_row_spec.js
index fab7693581c..a19fbad403c 100644
--- a/spec/javascripts/reports/components/summary_row_spec.js
+++ b/spec/javascripts/reports/components/summary_row_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import component from '~/reports/components/summary_row.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import component from '~/reports/components/summary_row.vue';
 
 describe('Summary row', () => {
   const Component = Vue.extend(component);
diff --git a/spec/javascripts/reports/store/actions_spec.js b/spec/javascripts/reports/store/actions_spec.js
index 41137b50847..18fdb179597 100644
--- a/spec/javascripts/reports/store/actions_spec.js
+++ b/spec/javascripts/reports/store/actions_spec.js
@@ -1,4 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
+import testAction from 'spec/helpers/vuex_action_helper';
+import { TEST_HOST } from 'spec/test_constants';
 import axios from '~/lib/utils/axios_utils';
 import {
   setEndpoint,
@@ -13,8 +15,6 @@ import {
 } from '~/reports/store/actions';
 import state from '~/reports/store/state';
 import * as types from '~/reports/store/mutation_types';
-import testAction from 'spec/helpers/vuex_action_helper';
-import { TEST_HOST } from 'spec/test_constants';
 
 describe('Reports Store Actions', () => {
   let mockedState;
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_container_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_container_spec.js
index 703b889cd5d..2d6d22d66aa 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_container_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_container_spec.js
@@ -34,6 +34,7 @@ describe('MrWidgetPipelineContainer', () => {
       expect(wrapper.find(MrWidgetPipeline).props()).toEqual(
         jasmine.objectContaining({
           pipeline: mockStore.pipeline,
+          pipelineCoverageDelta: mockStore.pipelineCoverageDelta,
           ciStatus: mockStore.ciStatus,
           hasCi: mockStore.hasCI,
           sourceBranch: mockStore.sourceBranch,
@@ -68,6 +69,7 @@ describe('MrWidgetPipelineContainer', () => {
       expect(wrapper.find(MrWidgetPipeline).props()).toEqual(
         jasmine.objectContaining({
           pipeline: mockStore.mergePipeline,
+          pipelineCoverageDelta: mockStore.pipelineCoverageDelta,
           ciStatus: mockStore.ciStatus,
           hasCi: mockStore.hasCI,
           sourceBranch: mockStore.targetBranch,
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
index 032fb90ca3c..5997c93105e 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
@@ -62,6 +62,38 @@ describe('MRWidgetPipeline', () => {
         expect(vm.hasCIError).toEqual(true);
       });
     });
+
+    describe('coverageDeltaClass', () => {
+      it('should return no class if there is no coverage change', () => {
+        vm = mountComponent(Component, {
+          pipeline: mockData.pipeline,
+          pipelineCoverageDelta: '0',
+          troubleshootingDocsPath: 'help',
+        });
+
+        expect(vm.coverageDeltaClass).toEqual('');
+      });
+
+      it('should return text-success if the coverage increased', () => {
+        vm = mountComponent(Component, {
+          pipeline: mockData.pipeline,
+          pipelineCoverageDelta: '10',
+          troubleshootingDocsPath: 'help',
+        });
+
+        expect(vm.coverageDeltaClass).toEqual('text-success');
+      });
+
+      it('should return text-danger if the coverage decreased', () => {
+        vm = mountComponent(Component, {
+          pipeline: mockData.pipeline,
+          pipelineCoverageDelta: '-12',
+          troubleshootingDocsPath: 'help',
+        });
+
+        expect(vm.coverageDeltaClass).toEqual('text-danger');
+      });
+    });
   });
 
   describe('rendered output', () => {
@@ -96,6 +128,7 @@ describe('MRWidgetPipeline', () => {
           pipeline: mockData.pipeline,
           hasCi: true,
           ciStatus: 'success',
+          pipelineCoverageDelta: mockData.pipelineCoverageDelta,
           troubleshootingDocsPath: 'help',
         });
       });
@@ -132,6 +165,13 @@ describe('MRWidgetPipeline', () => {
           `Coverage ${mockData.pipeline.coverage}`,
         );
       });
+
+      it('should render pipeline coverage delta information', () => {
+        expect(vm.$el.querySelector('.js-pipeline-coverage-delta.text-danger')).toBeDefined();
+        expect(vm.$el.querySelector('.js-pipeline-coverage-delta').textContent).toContain(
+          `(${mockData.pipelineCoverageDelta}%)`,
+        );
+      });
     });
 
     describe('without commit path', () => {
diff --git a/spec/javascripts/vue_mr_widget/mock_data.js b/spec/javascripts/vue_mr_widget/mock_data.js
index ba999adb2a9..c7ca93c58cf 100644
--- a/spec/javascripts/vue_mr_widget/mock_data.js
+++ b/spec/javascripts/vue_mr_widget/mock_data.js
@@ -185,6 +185,7 @@ export default {
     created_at: '2017-04-07T12:27:19.520Z',
     updated_at: '2017-04-07T15:28:44.800Z',
   },
+  pipelineCoverageDelta: '15.25',
   work_in_progress: false,
   source_branch_exists: false,
   mergeable_discussions_state: true,