Merge remote-tracking branch 'upstream/master' into rename-builds-controller

* upstream/master: (116 commits)
  Revert "Merge branch 'grpc-1.3.4' into 'master'"
  Return nil when looking up config for unknown LDAP provider
  Avoid crash when trying to parse string with invalid UTF-8 sequence
  Enable Gitaly by default in GitLab 9.3
  Don’t create comment on JIRA if link already exists
  Disable sub_group_issuables_spec.rb for mysql
  Fix math rendering on blob pages
  Add changelog
  Don't allow to pass a user to ProjectWiki#http_url_to_repo
  Revert "Merge branch '1937-https-clone-url-username' into 'master'
"
  Fix bottom padding for build page
  Fix /unsubscribe slash command creating extra todos
  Fix omniauth-google-oauth2 dependencies in Gemfile.lock
  Update looks job log
  'New issue'/'New merge request' dropdowns should show only projects with issues/merge requests feature enabled
  Fix spec for Members::AuthorizedDestroyService
  31616-add-uptime-of-gitlab-instance-in-admin-area
  Set head pipeline when creating merge requests
  Create a separate helper to check if we show particular tab on a search page
  Add performance deltas between app deployments on Merge Request widget
  ...

12 files changed, 529 insertions, 171 deletions

diff --git a/spec/javascripts/build_spec.js b/spec/javascripts/build_spec.js
index 7d02f568ceb..461908f3fde 100644
--- a/spec/javascripts/build_spec.js
+++ b/spec/javascripts/build_spec.js
@@ -14,7 +14,6 @@ describe('Build', () => {
 
   beforeEach(() => {
     loadFixtures('builds/build-with-artifacts.html.raw');
-    spyOn($, 'ajax');
   });
 
   describe('class constructor', () => {
@@ -33,7 +32,6 @@ describe('Build', () => {
 
       it('copies build options', function () {
         expect(this.build.pageUrl).toBe(BUILD_URL);
-        expect(this.build.buildUrl).toBe(`${BUILD_URL}.json`);
         expect(this.build.buildStatus).toBe('success');
         expect(this.build.buildStage).toBe('test');
         expect(this.build.state).toBe('');
@@ -65,27 +63,14 @@ describe('Build', () => {
     });
 
     describe('running build', () => {
-      beforeEach(function () {
-        this.build = new Build();
-      });
-
       it('updates the build trace on an interval', function () {
+        const deferred1 = $.Deferred();
+        const deferred2 = $.Deferred();
+        const deferred3 = $.Deferred();
+        spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise(), deferred3.promise());
         spyOn(gl.utils, 'visitUrl');
 
-        jasmine.clock().tick(4001);
-
-        expect($.ajax.calls.count()).toBe(1);
-
-        // We have to do it this way to prevent Webpack to fail to compile
-        // when destructuring assignments and reusing
-        // the same variables names inside the same scope
-        let args = $.ajax.calls.argsFor(0)[0];
-
-        expect(args.url).toBe(`${BUILD_URL}/trace.json`);
-        expect(args.dataType).toBe('json');
-        expect(args.success).toEqual(jasmine.any(Function));
-
-        args.success.call($, {
+        deferred1.resolve({
           html: '<span>Update<span>',
           status: 'running',
           state: 'newstate',
@@ -93,20 +78,9 @@ describe('Build', () => {
           complete: false,
         });
 
-        expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
-        expect(this.build.state).toBe('newstate');
-
-        jasmine.clock().tick(4001);
-
-        expect($.ajax.calls.count()).toBe(3);
-
-        args = $.ajax.calls.argsFor(2)[0];
-        expect(args.url).toBe(`${BUILD_URL}/trace.json`);
-        expect(args.dataType).toBe('json');
-        expect(args.data.state).toBe('newstate');
-        expect(args.success).toEqual(jasmine.any(Function));
+        deferred2.resolve();
 
-        args.success.call($, {
+        deferred3.resolve({
           html: '<span>More</span>',
           status: 'running',
           state: 'finalstate',
@@ -114,150 +88,222 @@ describe('Build', () => {
           complete: true,
         });
 
+        this.build = new Build();
+
+        expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
+        expect(this.build.state).toBe('newstate');
+
+        jasmine.clock().tick(4001);
+
         expect($('#build-trace .js-build-output').text()).toMatch(/UpdateMore/);
         expect(this.build.state).toBe('finalstate');
       });
 
       it('replaces the entire build trace', () => {
+        const deferred1 = $.Deferred();
+        const deferred2 = $.Deferred();
+        const deferred3 = $.Deferred();
+
+        spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise(), deferred3.promise());
+
         spyOn(gl.utils, 'visitUrl');
 
-        jasmine.clock().tick(4001);
-        let args = $.ajax.calls.argsFor(0)[0];
-        args.success.call($, {
-          html: '<span>Update</span>',
+        deferred1.resolve({
+          html: '<span>Update<span>',
           status: 'running',
           append: false,
           complete: false,
         });
 
-        expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
+        deferred2.resolve();
 
-        jasmine.clock().tick(4001);
-        args = $.ajax.calls.argsFor(2)[0];
-        args.success.call($, {
+        deferred3.resolve({
           html: '<span>Different</span>',
           status: 'running',
           append: false,
         });
 
+        this.build = new Build();
+
+        expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
+
+        jasmine.clock().tick(4001);
+
         expect($('#build-trace .js-build-output').text()).not.toMatch(/Update/);
         expect($('#build-trace .js-build-output').text()).toMatch(/Different/);
       });
 
       it('reloads the page when the build is done', () => {
         spyOn(gl.utils, 'visitUrl');
+        const deferred = $.Deferred();
 
-        jasmine.clock().tick(4001);
-        const [{ success }] = $.ajax.calls.argsFor(0);
-        success.call($, {
+        spyOn($, 'ajax').and.returnValue(deferred.promise());
+        deferred.resolve({
           html: '<span>Final</span>',
           status: 'passed',
           append: true,
           complete: true,
         });
 
+        this.build = new Build();
+
         expect(gl.utils.visitUrl).toHaveBeenCalledWith(BUILD_URL);
       });
+    });
 
-      describe('truncated information', () => {
-        describe('when size is less than total', () => {
-          it('shows information about truncated log', () => {
-            jasmine.clock().tick(4001);
-            const [{ success }] = $.ajax.calls.argsFor(0);
-
-            success.call($, {
-              html: '<span>Update</span>',
-              status: 'success',
-              append: false,
-              size: 50,
-              total: 100,
-            });
-
-            expect(document.querySelector('.js-truncated-info').classList).not.toContain('hidden');
+    describe('truncated information', () => {
+      describe('when size is less than total', () => {
+        it('shows information about truncated log', () => {
+          spyOn(gl.utils, 'visitUrl');
+          const deferred = $.Deferred();
+          spyOn($, 'ajax').and.returnValue(deferred.promise());
+
+          deferred.resolve({
+            html: '<span>Update</span>',
+            status: 'success',
+            append: false,
+            size: 50,
+            total: 100,
           });
 
-          it('shows the size in KiB', () => {
-            jasmine.clock().tick(4001);
-            const [{ success }] = $.ajax.calls.argsFor(0);
-            const size = 50;
-
-            success.call($, {
-              html: '<span>Update</span>',
-              status: 'success',
-              append: false,
-              size,
-              total: 100,
-            });
-
-            expect(
-              document.querySelector('.js-truncated-info-size').textContent.trim(),
-            ).toEqual(`${bytesToKiB(size)}`);
+          this.build = new Build();
+
+          expect(document.querySelector('.js-truncated-info').classList).not.toContain('hidden');
+        });
+
+        it('shows the size in KiB', () => {
+          const size = 50;
+          spyOn(gl.utils, 'visitUrl');
+          const deferred = $.Deferred();
+
+          spyOn($, 'ajax').and.returnValue(deferred.promise());
+          deferred.resolve({
+            html: '<span>Update</span>',
+            status: 'success',
+            append: false,
+            size,
+            total: 100,
           });
 
-          it('shows incremented size', () => {
-            jasmine.clock().tick(4001);
-            let args = $.ajax.calls.argsFor(0)[0];
-            args.success.call($, {
-              html: '<span>Update</span>',
-              status: 'success',
-              append: false,
-              size: 50,
-              total: 100,
-            });
-
-            expect(
-              document.querySelector('.js-truncated-info-size').textContent.trim(),
-            ).toEqual(`${bytesToKiB(50)}`);
-
-            jasmine.clock().tick(4001);
-            args = $.ajax.calls.argsFor(2)[0];
-            args.success.call($, {
-              html: '<span>Update</span>',
-              status: 'success',
-              append: true,
-              size: 10,
-              total: 100,
-            });
-
-            expect(
-              document.querySelector('.js-truncated-info-size').textContent.trim(),
-            ).toEqual(`${bytesToKiB(60)}`);
+          this.build = new Build();
+
+          expect(
+            document.querySelector('.js-truncated-info-size').textContent.trim(),
+          ).toEqual(`${bytesToKiB(size)}`);
+        });
+
+        it('shows incremented size', () => {
+          const deferred1 = $.Deferred();
+          const deferred2 = $.Deferred();
+          const deferred3 = $.Deferred();
+
+          spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise(), deferred3.promise());
+
+          spyOn(gl.utils, 'visitUrl');
+
+          deferred1.resolve({
+            html: '<span>Update</span>',
+            status: 'success',
+            append: false,
+            size: 50,
+            total: 100,
           });
 
-          it('renders the raw link', () => {
-            jasmine.clock().tick(4001);
-            const [{ success }] = $.ajax.calls.argsFor(0);
-
-            success.call($, {
-              html: '<span>Update</span>',
-              status: 'success',
-              append: false,
-              size: 50,
-              total: 100,
-            });
-
-            expect(
-              document.querySelector('.js-raw-link').textContent.trim(),
-            ).toContain('Complete Raw');
+          deferred2.resolve();
+
+          this.build = new Build();
+
+          expect(
+            document.querySelector('.js-truncated-info-size').textContent.trim(),
+          ).toEqual(`${bytesToKiB(50)}`);
+
+          jasmine.clock().tick(4001);
+
+          deferred3.resolve({
+            html: '<span>Update</span>',
+            status: 'success',
+            append: true,
+            size: 10,
+            total: 100,
           });
+
+          expect(
+            document.querySelector('.js-truncated-info-size').textContent.trim(),
+          ).toEqual(`${bytesToKiB(60)}`);
         });
 
-        describe('when size is equal than total', () => {
-          it('does not show the trunctated information', () => {
-            jasmine.clock().tick(4001);
-            const [{ success }] = $.ajax.calls.argsFor(0);
+        it('renders the raw link', () => {
+          const deferred = $.Deferred();
+          spyOn(gl.utils, 'visitUrl');
+
+          spyOn($, 'ajax').and.returnValue(deferred.promise());
+          deferred.resolve({
+            html: '<span>Update</span>',
+            status: 'success',
+            append: false,
+            size: 50,
+            total: 100,
+          });
 
-            success.call($, {
-              html: '<span>Update</span>',
-              status: 'success',
-              append: false,
-              size: 100,
-              total: 100,
-            });
+          this.build = new Build();
 
-            expect(document.querySelector('.js-truncated-info').classList).toContain('hidden');
+          expect(
+            document.querySelector('.js-raw-link').textContent.trim(),
+          ).toContain('Complete Raw');
+        });
+      });
+
+      describe('when size is equal than total', () => {
+        it('does not show the trunctated information', () => {
+          const deferred = $.Deferred();
+          spyOn(gl.utils, 'visitUrl');
+
+          spyOn($, 'ajax').and.returnValue(deferred.promise());
+          deferred.resolve({
+            html: '<span>Update</span>',
+            status: 'success',
+            append: false,
+            size: 100,
+            total: 100,
           });
+
+          this.build = new Build();
+
+          expect(document.querySelector('.js-truncated-info').classList).toContain('hidden');
+        });
+      });
+    });
+
+    describe('output trace', () => {
+      beforeEach(() => {
+        const deferred = $.Deferred();
+        spyOn(gl.utils, 'visitUrl');
+
+        spyOn($, 'ajax').and.returnValue(deferred.promise());
+        deferred.resolve({
+          html: '<span>Update</span>',
+          status: 'success',
+          append: false,
+          size: 50,
+          total: 100,
         });
+
+        this.build = new Build();
+      });
+
+      it('should render trace controls', () => {
+        const controllers = document.querySelector('.controllers');
+
+        expect(controllers.querySelector('.js-raw-link-controller')).toBeDefined();
+        expect(controllers.querySelector('.js-erase-link')).toBeDefined();
+        expect(controllers.querySelector('.js-scroll-up')).toBeDefined();
+        expect(controllers.querySelector('.js-scroll-down')).toBeDefined();
+      });
+
+      it('should render received output', () => {
+        expect(
+          document.querySelector('.js-build-output').innerHTML,
+        ).toEqual('<span>Update</span>');
       });
     });
   });
diff --git a/spec/javascripts/filtered_search/filtered_search_manager_spec.js b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
index 8688332782d..6e59ee96c6b 100644
--- a/spec/javascripts/filtered_search/filtered_search_manager_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
@@ -57,6 +57,7 @@ describe('Filtered Search Manager', () => {
     input = document.querySelector('.filtered-search');
     tokensContainer = document.querySelector('.tokens-container');
     manager = new gl.FilteredSearchManager();
+    manager.setup();
   });
 
   afterEach(() => {
@@ -72,6 +73,7 @@ describe('Filtered Search Manager', () => {
       spyOn(recentSearchesStoreSrc, 'default');
 
       filteredSearchManager = new gl.FilteredSearchManager();
+      filteredSearchManager.setup();
 
       return filteredSearchManager;
     });
@@ -89,6 +91,7 @@ describe('Filtered Search Manager', () => {
       spyOn(window, 'Flash');
 
       filteredSearchManager = new gl.FilteredSearchManager();
+      filteredSearchManager.setup();
 
       expect(window.Flash).not.toHaveBeenCalled();
     });
diff --git a/spec/javascripts/lib/utils/number_utility_spec.js b/spec/javascripts/lib/utils/number_utility_spec.js
index 90b12c9f115..83c92deccdc 100644
--- a/spec/javascripts/lib/utils/number_utility_spec.js
+++ b/spec/javascripts/lib/utils/number_utility_spec.js
@@ -1,4 +1,4 @@
-import { formatRelevantDigits, bytesToKiB } from '~/lib/utils/number_utils';
+import { formatRelevantDigits, bytesToKiB, bytesToMiB } from '~/lib/utils/number_utils';
 
 describe('Number Utils', () => {
   describe('formatRelevantDigits', () => {
@@ -45,4 +45,11 @@ describe('Number Utils', () => {
       expect(bytesToKiB(1000)).toEqual(0.9765625);
     });
   });
+
+  describe('bytesToMiB', () => {
+    it('calculates MiB for the given bytes', () => {
+      expect(bytesToMiB(1048576)).toEqual(1);
+      expect(bytesToMiB(1000000)).toEqual(0.95367431640625);
+    });
+  });
 });
diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js
index 3d1706aab68..7b910282cc8 100644
--- a/spec/javascripts/merge_request_tabs_spec.js
+++ b/spec/javascripts/merge_request_tabs_spec.js
@@ -1,4 +1,5 @@
 /* eslint-disable no-var, comma-dangle, object-shorthand */
+/* global Notes */
 
 import '~/merge_request_tabs';
 import '~/commit/pipelines/pipelines_bundle';
@@ -7,6 +8,7 @@ import '~/lib/utils/common_utils';
 import '~/diff';
 import '~/single_file_diff';
 import '~/files_comment_button';
+import '~/notes';
 import 'vendor/jquery.scrollTo';
 
 (function () {
@@ -29,7 +31,7 @@ import 'vendor/jquery.scrollTo';
       };
       $.extend(stubLocation, defaults, stubs || {});
     };
-    preloadFixtures('merge_requests/merge_request_with_task_list.html.raw');
+    preloadFixtures('merge_requests/merge_request_with_task_list.html.raw', 'merge_requests/diff_comment.html.raw');
 
     beforeEach(function () {
       this.class = new gl.MergeRequestTabs({ stubLocation: stubLocation });
@@ -286,8 +288,49 @@ import 'vendor/jquery.scrollTo';
         spyOn($, 'ajax').and.callFake(function (options) {
           expect(options.url).toEqual('/foo/bar/merge_requests/1/diffs.json');
         });
+
         this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
       });
+
+      describe('with note fragment hash', () => {
+        beforeEach(() => {
+          loadFixtures('merge_requests/diff_comment.html.raw');
+          spyOn(window.gl.utils, 'getPagePath').and.returnValue('merge_requests');
+          window.notes = new Notes('', []);
+          spyOn(window.notes, 'toggleDiffNote').and.callThrough();
+        });
+
+        afterEach(() => {
+          delete window.notes;
+        });
+
+        it('should expand and scroll to linked fragment hash #note_xxx', function () {
+          const noteId = 'note_1';
+          spyOn(window.gl.utils, 'getLocationHash').and.returnValue(noteId);
+          spyOn($, 'ajax').and.callFake(function (options) {
+            options.success({ html: `<div id="${noteId}">foo</div>` });
+          });
+
+          this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
+
+          expect(window.notes.toggleDiffNote).toHaveBeenCalledWith({
+            target: jasmine.any(Object),
+            lineType: 'old',
+            forceShow: true,
+          });
+        });
+
+        it('should gracefully ignore non-existant fragment hash', function () {
+          spyOn(window.gl.utils, 'getLocationHash').and.returnValue('note_something-that-does-not-exist');
+          spyOn($, 'ajax').and.callFake(function (options) {
+            options.success({ html: '' });
+          });
+
+          this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
+
+          expect(window.notes.toggleDiffNote).not.toHaveBeenCalled();
+        });
+      });
     });
   });
 }).call(window);
diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js
index 025f08ee332..04cf0fe2bf8 100644
--- a/spec/javascripts/notes_spec.js
+++ b/spec/javascripts/notes_spec.js
@@ -128,7 +128,6 @@ import '~/notes';
       beforeEach(() => {
         note = {
           id: 1,
-          discussion_html: null,
           valid: true,
           note: 'heya',
           html: '<div>heya</div>',
diff --git a/spec/javascripts/pipelines/graph/graph_component_spec.js b/spec/javascripts/pipelines/graph/graph_component_spec.js
index 6bd0eb86263..713baa65a17 100644
--- a/spec/javascripts/pipelines/graph/graph_component_spec.js
+++ b/spec/javascripts/pipelines/graph/graph_component_spec.js
@@ -14,49 +14,42 @@ describe('graph component', () => {
 
   describe('while is loading', () => {
     it('should render a loading icon', () => {
-      const component = new GraphComponent().$mount('#js-pipeline-graph-vue');
+      const component = new GraphComponent({
+        propsData: {
+          isLoading: true,
+          pipeline: {},
+        },
+      }).$mount('#js-pipeline-graph-vue');
       expect(component.$el.querySelector('.loading-icon')).toBeDefined();
     });
   });
 
-  describe('with a successfull response', () => {
-    const interceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify(graphJSON), {
-        status: 200,
-      }));
-    };
+  describe('with data', () => {
+    it('should render the graph', () => {
+      const component = new GraphComponent({
+        propsData: {
+          isLoading: false,
+          pipeline: graphJSON,
+        },
+      }).$mount('#js-pipeline-graph-vue');
 
-    beforeEach(() => {
-      Vue.http.interceptors.push(interceptor);
-    });
-
-    afterEach(() => {
-      Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
-    });
-
-    it('should render the graph', (done) => {
-      const component = new GraphComponent().$mount('#js-pipeline-graph-vue');
-
-      setTimeout(() => {
-        expect(component.$el.classList.contains('js-pipeline-graph')).toEqual(true);
+      expect(component.$el.classList.contains('js-pipeline-graph')).toEqual(true);
 
-        expect(
-          component.$el.querySelector('.stage-column:first-child').classList.contains('no-margin'),
-        ).toEqual(true);
+      expect(
+        component.$el.querySelector('.stage-column:first-child').classList.contains('no-margin'),
+      ).toEqual(true);
 
-        expect(
-          component.$el.querySelector('.stage-column:nth-child(2)').classList.contains('left-margin'),
-        ).toEqual(true);
+      expect(
+        component.$el.querySelector('.stage-column:nth-child(2)').classList.contains('left-margin'),
+      ).toEqual(true);
 
-        expect(
-          component.$el.querySelector('.stage-column:nth-child(2) .build:nth-child(1)').classList.contains('left-connector'),
-        ).toEqual(true);
+      expect(
+        component.$el.querySelector('.stage-column:nth-child(2) .build:nth-child(1)').classList.contains('left-connector'),
+      ).toEqual(true);
 
-        expect(component.$el.querySelector('loading-icon')).toBe(null);
+      expect(component.$el.querySelector('loading-icon')).toBe(null);
 
-        expect(component.$el.querySelector('.stage-column-list')).toBeDefined();
-        done();
-      }, 0);
+      expect(component.$el.querySelector('.stage-column-list')).toBeDefined();
     });
   });
 });
diff --git a/spec/javascripts/pipelines/pipeline_url_spec.js b/spec/javascripts/pipelines/pipeline_url_spec.js
index 0bcc3905702..d74b1281668 100644
--- a/spec/javascripts/pipelines/pipeline_url_spec.js
+++ b/spec/javascripts/pipelines/pipeline_url_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import pipelineUrlComp from '~/pipelines/components/pipeline_url';
+import pipelineUrlComp from '~/pipelines/components/pipeline_url.vue';
 
 describe('Pipeline Url Component', () => {
   let PipelineUrlComponent;
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js
index da9dff18ada..2c3d0ddff28 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js
@@ -7,6 +7,18 @@ const url = '/root/acets-review-apps/environments/15/deployments/1/metrics';
 const metricsMockData = {
   success: true,
   metrics: {
+    memory_before: [
+      {
+        metric: {},
+        value: [1495785220.607, '9572875.906976745'],
+      },
+    ],
+    memory_after: [
+      {
+        metric: {},
+        value: [1495787020.607, '4485853.130206379'],
+      },
+    ],
     memory_values: [
       {
         metric: {},
@@ -39,7 +51,7 @@ const createComponent = () => {
 
 const messages = {
   loadingMetrics: 'Loading deployment statistics.',
-  hasMetrics: 'Deployment memory usage:',
+  hasMetrics: 'Memory usage unchanged from 0MB to 0MB',
   loadFailed: 'Failed to load deployment statistics.',
   metricsUnavailable: 'Deployment statistics are not available currently.',
 };
@@ -89,17 +101,52 @@ describe('MemoryUsage', () => {
     });
   });
 
+  describe('computed', () => {
+    describe('memoryChangeType', () => {
+      it('should return "increased" if memoryFrom value is less than memoryTo value', () => {
+        vm.memoryFrom = 4.28;
+        vm.memoryTo = 9.13;
+
+        expect(vm.memoryChangeType).toEqual('increased');
+      });
+
+      it('should return "decreased" if memoryFrom value is less than memoryTo value', () => {
+        vm.memoryFrom = 9.13;
+        vm.memoryTo = 4.28;
+
+        expect(vm.memoryChangeType).toEqual('decreased');
+      });
+
+      it('should return "unchanged" if memoryFrom value equal to memoryTo value', () => {
+        vm.memoryFrom = 1;
+        vm.memoryTo = 1;
+
+        expect(vm.memoryChangeType).toEqual('unchanged');
+      });
+    });
+  });
+
   describe('methods', () => {
     const { metrics, deployment_time } = metricsMockData;
 
+    describe('getMegabytes', () => {
+      it('should return Megabytes from provided Bytes value', () => {
+        const memoryInBytes = '9572875.906976745';
+
+        expect(vm.getMegabytes(memoryInBytes)).toEqual('9.13');
+      });
+    });
+
     describe('computeGraphData', () => {
       it('should populate sparkline graph', () => {
         vm.computeGraphData(metrics, deployment_time);
-        const { hasMetrics, memoryMetrics, deploymentTime } = vm;
+        const { hasMetrics, memoryMetrics, deploymentTime, memoryFrom, memoryTo } = vm;
 
         expect(hasMetrics).toBeTruthy();
         expect(memoryMetrics.length > 0).toBeTruthy();
         expect(deploymentTime).toEqual(deployment_time);
+        expect(memoryFrom).toEqual('9.13');
+        expect(memoryTo).toEqual('4.28');
       });
     });
 
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
index d043ad38b8b..732b516badd 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -5,7 +5,7 @@ import * as simplePoll from '~/lib/utils/simple_poll';
 
 const commitMessage = 'This is the commit message';
 const commitMessageWithDescription = 'This is the commit message description';
-const createComponent = () => {
+const createComponent = (customConfig = {}) => {
   const Component = Vue.extend(readyToMergeComponent);
   const mr = {
     isPipelineActive: false,
@@ -17,8 +17,12 @@ const createComponent = () => {
     sha: '12345678',
     commitMessage,
     commitMessageWithDescription,
+    shouldRemoveSourceBranch: true,
+    canRemoveSourceBranch: false,
   };
 
+  Object.assign(mr, customConfig.mr);
+
   const service = {
     merge() {},
     poll() {},
@@ -51,7 +55,6 @@ describe('MRWidgetReadyToMerge', () => {
 
   describe('data', () => {
     it('should have default data', () => {
-      expect(vm.removeSourceBranch).toBeTruthy(true);
       expect(vm.mergeWhenBuildSucceeds).toBeFalsy();
       expect(vm.useCommitMessageWithDescription).toBeFalsy();
       expect(vm.setToMergeWhenPipelineSucceeds).toBeFalsy();
@@ -166,6 +169,36 @@ describe('MRWidgetReadyToMerge', () => {
         expect(vm.isMergeButtonDisabled).toBeTruthy();
       });
     });
+
+    describe('Remove source branch checkbox', () => {
+      describe('when user can merge but cannot delete branch', () => {
+        it('isRemoveSourceBranchButtonDisabled should be true', () => {
+          expect(vm.isRemoveSourceBranchButtonDisabled).toBe(true);
+        });
+
+        it('should be disabled in the rendered output', () => {
+          const checkboxElement = vm.$el.querySelector('#remove-source-branch-input');
+          expect(checkboxElement.getAttribute('disabled')).toBe('disabled');
+        });
+      });
+
+      describe('when user can merge and can delete branch', () => {
+        beforeEach(() => {
+          this.customVm = createComponent({
+            mr: { canRemoveSourceBranch: true },
+          });
+        });
+
+        it('isRemoveSourceBranchButtonDisabled should be false', () => {
+          expect(this.customVm.isRemoveSourceBranchButtonDisabled).toBe(false);
+        });
+
+        it('should be enabled in rendered output', () => {
+          const checkboxElement = this.customVm.$el.querySelector('#remove-source-branch-input');
+          expect(checkboxElement.getAttribute('disabled')).toBeNull();
+        });
+      });
+    });
   });
 
   describe('methods', () => {
diff --git a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
index bdc18243a15..3a0c50b750f 100644
--- a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
+++ b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
 import mrWidgetOptions from '~/vue_merge_request_widget/mr_widget_options';
 import eventHub from '~/vue_merge_request_widget/event_hub';
+import notify from '~/lib/utils/notify';
 import mockData from './mock_data';
 
 const createComponent = () => {
@@ -107,6 +108,8 @@ describe('mrWidgetOptions', () => {
       it('should tell service to check status', (done) => {
         spyOn(vm.service, 'checkStatus').and.returnValue(returnPromise(mockData));
         spyOn(vm.mr, 'setData');
+        spyOn(vm, 'handleNotification');
+
         let isCbExecuted = false;
         const cb = () => {
           isCbExecuted = true;
@@ -117,6 +120,7 @@ describe('mrWidgetOptions', () => {
         setTimeout(() => {
           expect(vm.service.checkStatus).toHaveBeenCalled();
           expect(vm.mr.setData).toHaveBeenCalled();
+          expect(vm.handleNotification).toHaveBeenCalledWith(mockData);
           expect(isCbExecuted).toBeTruthy();
           done();
         }, 333);
@@ -254,6 +258,39 @@ describe('mrWidgetOptions', () => {
       });
     });
 
+    describe('handleNotification', () => {
+      const data = {
+        ci_status: 'running',
+        title: 'title',
+        pipeline: { details: { status: { label: 'running-label' } } },
+      };
+
+      beforeEach(() => {
+        spyOn(notify, 'notifyMe');
+
+        vm.mr.ciStatus = 'failed';
+        vm.mr.gitlabLogo = 'logo.png';
+      });
+
+      it('should call notifyMe', () => {
+        vm.handleNotification(data);
+
+        expect(notify.notifyMe).toHaveBeenCalledWith(
+          'Pipeline running-label',
+          'Pipeline running-label for "title"',
+          'logo.png',
+        );
+      });
+
+      it('should not call notifyMe if the status has not changed', () => {
+        vm.mr.ciStatus = data.ci_status;
+
+        vm.handleNotification(data);
+
+        expect(notify.notifyMe).not.toHaveBeenCalled();
+      });
+    });
+
     describe('resumePolling', () => {
       it('should call stopTimer on pollingInterval', () => {
         spyOn(vm.pollingInterval, 'resume');
diff --git a/spec/javascripts/vue_shared/components/header_ci_component_spec.js b/spec/javascripts/vue_shared/components/header_ci_component_spec.js
new file mode 100644
index 00000000000..1bf8916b3d0
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/header_ci_component_spec.js
@@ -0,0 +1,82 @@
+import Vue from 'vue';
+import headerCi from '~/vue_shared/components/header_ci_component.vue';
+
+describe('Header CI Component', () => {
+  let HeaderCi;
+  let vm;
+  let props;
+
+  beforeEach(() => {
+    HeaderCi = Vue.extend(headerCi);
+
+    props = {
+      status: {
+        group: 'failed',
+        icon: 'ci-status-failed',
+        label: 'failed',
+        text: 'failed',
+        details_path: 'path',
+      },
+      itemName: 'job',
+      itemId: 123,
+      time: '2017-05-08T14:57:39.781Z',
+      user: {
+        web_url: 'path',
+        name: 'Foo',
+        username: 'foobar',
+        email: 'foo@bar.com',
+        avatar_url: 'link',
+      },
+      actions: [
+        {
+          label: 'Retry',
+          path: 'path',
+          type: 'button',
+          cssClass: 'btn',
+        },
+        {
+          label: 'Go',
+          path: 'path',
+          type: 'link',
+          cssClass: 'link',
+        },
+      ],
+    };
+
+    vm = new HeaderCi({
+      propsData: props,
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render status badge', () => {
+    expect(vm.$el.querySelector('.ci-failed')).toBeDefined();
+    expect(vm.$el.querySelector('.ci-status-icon-failed svg')).toBeDefined();
+    expect(
+      vm.$el.querySelector('.ci-failed').getAttribute('href'),
+    ).toEqual(props.status.details_path);
+  });
+
+  it('should render item name and id', () => {
+    expect(vm.$el.querySelector('strong').textContent.trim()).toEqual('job #123');
+  });
+
+  it('should render timeago date', () => {
+    expect(vm.$el.querySelector('time')).toBeDefined();
+  });
+
+  it('should render user icon and name', () => {
+    expect(vm.$el.querySelector('.js-user-link').textContent.trim()).toEqual(props.user.name);
+  });
+
+  it('should render provided actions', () => {
+    expect(vm.$el.querySelector('.btn').tagName).toEqual('BUTTON');
+    expect(vm.$el.querySelector('.btn').textContent.trim()).toEqual(props.actions[0].label);
+    expect(vm.$el.querySelector('.link').tagName).toEqual('A');
+    expect(vm.$el.querySelector('.link').textContent.trim()).toEqual(props.actions[1].label);
+    expect(vm.$el.querySelector('.link').getAttribute('href')).toEqual(props.actions[0].path);
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js b/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js
new file mode 100644
index 00000000000..bf28019ef24
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js
@@ -0,0 +1,68 @@
+import Vue from 'vue';
+import timeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import '~/lib/utils/datetime_utility';
+
+describe('Time ago with tooltip component', () => {
+  let TimeagoTooltip;
+  let vm;
+
+  beforeEach(() => {
+    TimeagoTooltip = Vue.extend(timeagoTooltip);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render timeago with a bootstrap tooltip', () => {
+    vm = new TimeagoTooltip({
+      propsData: {
+        time: '2017-05-08T14:57:39.781Z',
+      },
+    }).$mount();
+
+    expect(vm.$el.tagName).toEqual('TIME');
+    expect(vm.$el.classList.contains('js-timeago')).toEqual(true);
+    expect(
+      vm.$el.getAttribute('data-original-title'),
+    ).toEqual(gl.utils.formatDate('2017-05-08T14:57:39.781Z'));
+    expect(vm.$el.getAttribute('data-placement')).toEqual('top');
+
+    const timeago = gl.utils.getTimeago();
+
+    expect(vm.$el.textContent.trim()).toEqual(timeago.format('2017-05-08T14:57:39.781Z'));
+  });
+
+  it('should render tooltip placed in bottom', () => {
+    vm = new TimeagoTooltip({
+      propsData: {
+        time: '2017-05-08T14:57:39.781Z',
+        tooltipPlacement: 'bottom',
+      },
+    }).$mount();
+
+    expect(vm.$el.getAttribute('data-placement')).toEqual('bottom');
+  });
+
+  it('should render short format class', () => {
+    vm = new TimeagoTooltip({
+      propsData: {
+        time: '2017-05-08T14:57:39.781Z',
+        shortFormat: true,
+      },
+    }).$mount();
+
+    expect(vm.$el.classList.contains('js-short-timeago')).toEqual(true);
+  });
+
+  it('should render provided html class', () => {
+    vm = new TimeagoTooltip({
+      propsData: {
+        time: '2017-05-08T14:57:39.781Z',
+        cssClass: 'foo',
+      },
+    }).$mount();
+
+    expect(vm.$el.classList.contains('foo')).toEqual(true);
+  });
+});