Merge branch 'master' into 38031-monitoring-hover-info-is-clipped

16 files changed, 406 insertions, 135 deletions

diff --git a/spec/javascripts/blob/notebook/index_spec.js b/spec/javascripts/blob/notebook/index_spec.js
index 11f2a950678..c3e67550f05 100644
--- a/spec/javascripts/blob/notebook/index_spec.js
+++ b/spec/javascripts/blob/notebook/index_spec.js
@@ -117,7 +117,7 @@ describe('iPython notebook renderer', () => {
     it('shows error message', () => {
       expect(
         document.querySelector('.md').textContent.trim(),
-      ).toBe('An error occured whilst parsing the file.');
+      ).toBe('An error occurred whilst parsing the file.');
     });
   });
 
@@ -153,7 +153,7 @@ describe('iPython notebook renderer', () => {
     it('shows error message', () => {
       expect(
         document.querySelector('.md').textContent.trim(),
-      ).toBe('An error occured whilst loading the file. Please try again later.');
+      ).toBe('An error occurred whilst loading the file. Please try again later.');
     });
   });
 });
diff --git a/spec/javascripts/blob/pdf/index_spec.js b/spec/javascripts/blob/pdf/index_spec.js
index bbeaf95e68d..51bf3086627 100644
--- a/spec/javascripts/blob/pdf/index_spec.js
+++ b/spec/javascripts/blob/pdf/index_spec.js
@@ -76,7 +76,7 @@ describe('PDF renderer', () => {
     it('shows error message', () => {
       expect(
         document.querySelector('.md').textContent.trim(),
-      ).toBe('An error occured whilst loading the file. Please try again later.');
+      ).toBe('An error occurred whilst loading the file. Please try again later.');
     });
   });
 });
diff --git a/spec/javascripts/build_spec.js b/spec/javascripts/build_spec.js
index 35149611095..d5b0f23e7b7 100644
--- a/spec/javascripts/build_spec.js
+++ b/spec/javascripts/build_spec.js
@@ -289,4 +289,18 @@ describe('Build', () => {
       });
     });
   });
+
+  describe('getBuildTrace', () => {
+    it('should request build trace with state parameter', (done) => {
+      spyOn(jQuery, 'ajax').and.callThrough();
+      new Build();
+
+      setTimeout(() => {
+        expect(jQuery.ajax).toHaveBeenCalledWith(
+          { url: `${BUILD_URL}/trace.json`, data: { state: '' } },
+        );
+        done();
+      }, 0);
+    });
+  });
 });
diff --git a/spec/javascripts/issuable_context_spec.js b/spec/javascripts/issuable_context_spec.js
new file mode 100644
index 00000000000..bcb2b7b24a0
--- /dev/null
+++ b/spec/javascripts/issuable_context_spec.js
@@ -0,0 +1,34 @@
+/* global IssuableContext */
+import '~/issuable_context';
+import $ from 'jquery';
+
+describe('IssuableContext', () => {
+  describe('toggleHiddenParticipants', () => {
+    const event = jasmine.createSpyObj('event', ['preventDefault']);
+
+    beforeEach(() => {
+      spyOn($.fn, 'data').and.returnValue('data');
+      spyOn($.fn, 'text').and.returnValue('data');
+    });
+
+    afterEach(() => {
+      gl.lazyLoader = undefined;
+    });
+
+    it('calls loadCheck if lazyLoader is set', () => {
+      gl.lazyLoader = jasmine.createSpyObj('lazyLoader', ['loadCheck']);
+
+      IssuableContext.prototype.toggleHiddenParticipants(event);
+
+      expect(gl.lazyLoader.loadCheck).toHaveBeenCalled();
+    });
+
+    it('does not throw if lazyLoader is not defined', () => {
+      gl.lazyLoader = undefined;
+
+      const toggle = IssuableContext.prototype.toggleHiddenParticipants.bind(null, event);
+
+      expect(toggle).not.toThrow();
+    });
+  });
+});
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index 787b405de47..f86f2f260c3 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -84,6 +84,62 @@ describe('common_utils', () => {
       expectGetElementIdToHaveBeenCalledWith('definição');
       expectGetElementIdToHaveBeenCalledWith('user-content-definição');
     });
+
+    it('scrolls element into view', () => {
+      document.body.innerHTML += `
+        <div id="parent">
+          <div style="height: 2000px;"></div>
+          <div id="test" style="height: 2000px;"></div>
+        </div>
+      `;
+
+      window.history.pushState({}, null, '#test');
+      commonUtils.handleLocationHash();
+
+      expectGetElementIdToHaveBeenCalledWith('test');
+      expect(window.scrollY).toBe(document.getElementById('test').offsetTop);
+
+      document.getElementById('parent').remove();
+    });
+
+    it('scrolls user content element into view', () => {
+      document.body.innerHTML += `
+        <div id="parent">
+          <div style="height: 2000px;"></div>
+          <div id="user-content-test" style="height: 2000px;"></div>
+        </div>
+      `;
+
+      window.history.pushState({}, null, '#test');
+      commonUtils.handleLocationHash();
+
+      expectGetElementIdToHaveBeenCalledWith('test');
+      expectGetElementIdToHaveBeenCalledWith('user-content-test');
+      expect(window.scrollY).toBe(document.getElementById('user-content-test').offsetTop);
+
+      document.getElementById('parent').remove();
+    });
+
+    it('scrolls to element with offset from navbar', () => {
+      spyOn(window, 'scrollBy').and.callThrough();
+      document.body.innerHTML += `
+        <div id="parent">
+          <div class="navbar-gitlab" style="position: fixed; top: 0; height: 50px;"></div>
+          <div style="height: 2000px; margin-top: 50px;"></div>
+          <div id="user-content-test" style="height: 2000px;"></div>
+        </div>
+      `;
+
+      window.history.pushState({}, null, '#test');
+      commonUtils.handleLocationHash();
+
+      expectGetElementIdToHaveBeenCalledWith('test');
+      expectGetElementIdToHaveBeenCalledWith('user-content-test');
+      expect(window.scrollY).toBe(document.getElementById('user-content-test').offsetTop - 50);
+      expect(window.scrollBy).toHaveBeenCalledWith(0, -50);
+
+      document.getElementById('parent').remove();
+    });
   });
 
   describe('setParamInURL', () => {
diff --git a/spec/javascripts/line_highlighter_spec.js b/spec/javascripts/line_highlighter_spec.js
index aee274641e8..645664a5219 100644
--- a/spec/javascripts/line_highlighter_spec.js
+++ b/spec/javascripts/line_highlighter_spec.js
@@ -18,19 +18,25 @@ import '~/line_highlighter';
     beforeEach(function() {
       loadFixtures('static/line_highlighter.html.raw');
       this["class"] = new LineHighlighter();
-      this.css = this["class"].highlightClass;
+      this.css = this["class"].highlightLineClass;
       return this.spies = {
         __setLocationHash__: spyOn(this["class"], '__setLocationHash__').and.callFake(function() {})
       };
     });
     describe('behavior', function() {
       it('highlights one line given in the URL hash', function() {
-        new LineHighlighter('#L13');
+        new LineHighlighter({ hash: '#L13' });
         return expect($('#LC13')).toHaveClass(this.css);
       });
+      it('highlights one line given in the URL hash with given CSS class name', function() {
+        const hiliter = new LineHighlighter({ hash: '#L13', highlightLineClass: 'hilite' });
+        expect(hiliter.highlightLineClass).toBe('hilite');
+        expect($('#LC13')).toHaveClass('hilite');
+        expect($('#LC13')).not.toHaveClass('hll');
+      });
       it('highlights a range of lines given in the URL hash', function() {
         var line, results;
-        new LineHighlighter('#L5-25');
+        new LineHighlighter({ hash: '#L5-25' });
         expect($("." + this.css).length).toBe(21);
         results = [];
         for (line = 5; line <= 25; line += 1) {
@@ -41,7 +47,7 @@ import '~/line_highlighter';
       it('scrolls to the first highlighted line on initial load', function() {
         var spy;
         spy = spyOn($, 'scrollTo');
-        new LineHighlighter('#L5-25');
+        new LineHighlighter({ hash: '#L5-25' });
         return expect(spy).toHaveBeenCalledWith('#L5', jasmine.anything());
       });
       it('discards click events', function() {
@@ -50,10 +56,10 @@ import '~/line_highlighter';
         clickLine(13);
         return expect(spy).toHaveBeenPrevented();
       });
-      return it('handles garbage input from the hash', function() {
+      it('handles garbage input from the hash', function() {
         var func;
         func = function() {
-          return new LineHighlighter('#blob-content-holder');
+          return new LineHighlighter({ fileHolderSelector: '#blob-content-holder' });
         };
         return expect(func).not.toThrow();
       });
diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js
index eadab738376..ccdbfcba692 100644
--- a/spec/javascripts/merge_request_tabs_spec.js
+++ b/spec/javascripts/merge_request_tabs_spec.js
@@ -416,5 +416,28 @@ import 'vendor/jquery.scrollTo';
         });
       });
     });
+
+    describe('expandViewContainer', function () {
+      beforeEach(() => {
+        $('body').append('<div class="content-wrapper"><div class="container-fluid container-limited"></div></div>');
+      });
+
+      afterEach(() => {
+        $('.content-wrapper').remove();
+      });
+
+      it('removes container-limited from containers', function () {
+        this.class.expandViewContainer();
+
+        expect($('.content-wrapper')).not.toContainElement('.container-limited');
+      });
+
+      it('does remove container-limited from breadcrumbs', function () {
+        $('.container-limited').addClass('breadcrumbs');
+        this.class.expandViewContainer();
+
+        expect($('.content-wrapper')).toContainElement('.container-limited');
+      });
+    });
   });
 }).call(window);
diff --git a/spec/javascripts/projects_dropdown/service/projects_service_spec.js b/spec/javascripts/projects_dropdown/service/projects_service_spec.js
index d5dd8b3449a..cfd1bb7d24f 100644
--- a/spec/javascripts/projects_dropdown/service/projects_service_spec.js
+++ b/spec/javascripts/projects_dropdown/service/projects_service_spec.js
@@ -34,7 +34,7 @@ describe('ProjectsService', () => {
 
       const searchQuery = 'lab';
       const queryParams = {
-        simple: false,
+        simple: true,
         per_page: 20,
         membership: true,
         order_by: 'last_activity_at',
diff --git a/spec/javascripts/repo/components/repo_edit_button_spec.js b/spec/javascripts/repo/components/repo_edit_button_spec.js
index 29dc2d21e4b..411514009dc 100644
--- a/spec/javascripts/repo/components/repo_edit_button_spec.js
+++ b/spec/javascripts/repo/components/repo_edit_button_spec.js
@@ -21,13 +21,11 @@ describe('RepoEditButton', () => {
     expect(vm.$el.textContent).toMatch('Edit');
 
     spyOn(vm, 'editCancelClicked').and.callThrough();
-    spyOn(vm, 'toggleProjectRefsForm');
 
     vm.$el.click();
 
     Vue.nextTick(() => {
       expect(vm.editCancelClicked).toHaveBeenCalled();
-      expect(vm.toggleProjectRefsForm).toHaveBeenCalled();
       expect(vm.$el.textContent).toMatch('Cancel edit');
       done();
     });
diff --git a/spec/javascripts/repo/components/repo_file_spec.js b/spec/javascripts/repo/components/repo_file_spec.js
index 518a2d25ecf..f15633bd8b9 100644
--- a/spec/javascripts/repo/components/repo_file_spec.js
+++ b/spec/javascripts/repo/components/repo_file_spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import repoFile from '~/repo/components/repo_file.vue';
+import RepoStore from '~/repo/stores/repo_store';
 
 describe('RepoFile', () => {
   const updated = 'updated';
@@ -12,8 +13,13 @@ describe('RepoFile', () => {
     level: 10,
   };
   const activeFile = {
+    pageTitle: 'pageTitle',
     url: 'url',
   };
+  const otherFile = {
+    html: '<p class="file-content">html</p>',
+    pageTitle: 'otherpageTitle',
+  };
 
   function createComponent(propsData) {
     const RepoFile = Vue.extend(repoFile);
@@ -60,6 +66,12 @@ describe('RepoFile', () => {
     expect(vm.$el.querySelector('.fa-spin.fa-spinner')).toBeFalsy();
   });
 
+  it('sets the document title correctly', () => {
+    RepoStore.setActiveFiles(otherFile);
+
+    expect(document.title.trim()).toEqual(otherFile.pageTitle);
+  });
+
   it('renders a spinner if the file is loading', () => {
     file.loading = true;
     const vm = createComponent({
diff --git a/spec/javascripts/repo/components/repo_sidebar_spec.js b/spec/javascripts/repo/components/repo_sidebar_spec.js
index abcff8e537e..db9911c7a2c 100644
--- a/spec/javascripts/repo/components/repo_sidebar_spec.js
+++ b/spec/javascripts/repo/components/repo_sidebar_spec.js
@@ -79,6 +79,20 @@ describe('RepoSidebar', () => {
         expect(Helper.getContent).toHaveBeenCalledWith(file1);
       });
 
+      it('should not fetch data for already opened files', () => {
+        const file = {
+          id: 42,
+          url: 'foo',
+        };
+
+        spyOn(Helper, 'getFileFromPath').and.returnValue(file);
+        spyOn(RepoStore, 'setActiveFiles');
+        const vm = createComponent();
+        vm.fileClicked(file);
+
+        expect(RepoStore.setActiveFiles).toHaveBeenCalledWith(file);
+      });
+
       it('should hide files in directory if already open', () => {
         spyOn(RepoStore, 'removeChildFilesOfTree').and.callThrough();
         const file1 = {
diff --git a/spec/javascripts/right_sidebar_spec.js b/spec/javascripts/right_sidebar_spec.js
index f2072a6f350..5505f983d71 100644
--- a/spec/javascripts/right_sidebar_spec.js
+++ b/spec/javascripts/right_sidebar_spec.js
@@ -32,56 +32,86 @@ import '~/right_sidebar';
   };
 
   describe('RightSidebar', function() {
-    var fixtureName = 'issues/open-issue.html.raw';
-    preloadFixtures(fixtureName);
-    loadJSONFixtures('todos/todos.json');
-
-    beforeEach(function() {
-      loadFixtures(fixtureName);
-      this.sidebar = new Sidebar;
-      $aside = $('.right-sidebar');
-      $page = $('.page-with-sidebar');
-      $icon = $aside.find('i');
-      $toggle = $aside.find('.js-sidebar-toggle');
-      return $labelsIcon = $aside.find('.sidebar-collapsed-icon');
-    });
-    it('should expand/collapse the sidebar when arrow is clicked', function() {
-      assertSidebarState('expanded');
-      $toggle.click();
-      assertSidebarState('collapsed');
-      $toggle.click();
-      assertSidebarState('expanded');
-    });
-    it('should float over the page and when sidebar icons clicked', function() {
-      $labelsIcon.click();
-      return assertSidebarState('expanded');
-    });
-    it('should collapse when the icon arrow clicked while it is floating on page', function() {
-      $labelsIcon.click();
-      assertSidebarState('expanded');
-      $toggle.click();
-      return assertSidebarState('collapsed');
+    describe('fixture tests', () => {
+      var fixtureName = 'issues/open-issue.html.raw';
+      preloadFixtures(fixtureName);
+      loadJSONFixtures('todos/todos.json');
+
+      beforeEach(function() {
+        loadFixtures(fixtureName);
+        this.sidebar = new Sidebar;
+        $aside = $('.right-sidebar');
+        $page = $('.page-with-sidebar');
+        $icon = $aside.find('i');
+        $toggle = $aside.find('.js-sidebar-toggle');
+        return $labelsIcon = $aside.find('.sidebar-collapsed-icon');
+      });
+      it('should expand/collapse the sidebar when arrow is clicked', function() {
+        assertSidebarState('expanded');
+        $toggle.click();
+        assertSidebarState('collapsed');
+        $toggle.click();
+        assertSidebarState('expanded');
+      });
+      it('should float over the page and when sidebar icons clicked', function() {
+        $labelsIcon.click();
+        return assertSidebarState('expanded');
+      });
+      it('should collapse when the icon arrow clicked while it is floating on page', function() {
+        $labelsIcon.click();
+        assertSidebarState('expanded');
+        $toggle.click();
+        return assertSidebarState('collapsed');
+      });
+
+      it('should broadcast todo:toggle event when add todo clicked', function() {
+        var todos = getJSONFixture('todos/todos.json');
+        spyOn(jQuery, 'ajax').and.callFake(function() {
+          var d = $.Deferred();
+          var response = todos;
+          d.resolve(response);
+          return d.promise();
+        });
+
+        var todoToggleSpy = spyOnEvent(document, 'todo:toggle');
+
+        $('.issuable-sidebar-header .js-issuable-todo').click();
+
+        expect(todoToggleSpy.calls.count()).toEqual(1);
+      });
+
+      it('should not hide collapsed icons', () => {
+        [].forEach.call(document.querySelectorAll('.sidebar-collapsed-icon'), (el) => {
+          expect(el.querySelector('.fa, svg').classList.contains('hidden')).toBeFalsy();
+        });
+      });
     });
 
-    it('should broadcast todo:toggle event when add todo clicked', function() {
-      var todos = getJSONFixture('todos/todos.json');
-      spyOn(jQuery, 'ajax').and.callFake(function() {
-        var d = $.Deferred();
-        var response = todos;
-        d.resolve(response);
-        return d.promise();
+    describe('sidebarToggleClicked', () => {
+      const event = jasmine.createSpyObj('event', ['preventDefault']);
+
+      beforeEach(() => {
+        spyOn($.fn, 'hasClass').and.returnValue(false);
+      });
+
+      afterEach(() => {
+        gl.lazyLoader = undefined;
       });
 
-      var todoToggleSpy = spyOnEvent(document, 'todo:toggle');
+      it('calls loadCheck if lazyLoader is set', () => {
+        gl.lazyLoader = jasmine.createSpyObj('lazyLoader', ['loadCheck']);
 
-      $('.issuable-sidebar-header .js-issuable-todo').click();
+        Sidebar.prototype.sidebarToggleClicked(event);
 
-      expect(todoToggleSpy.calls.count()).toEqual(1);
-    });
+        expect(gl.lazyLoader.loadCheck).toHaveBeenCalled();
+      });
+
+      it('does not throw if lazyLoader is not defined', () => {
+        gl.lazyLoader = undefined;
+
+        const toggle = Sidebar.prototype.sidebarToggleClicked.bind(null, event);
 
-    it('should not hide collapsed icons', () => {
-      [].forEach.call(document.querySelectorAll('.sidebar-collapsed-icon'), (el) => {
-        expect(el.querySelector('.fa, svg').classList.contains('hidden')).toBeFalsy();
+        expect(toggle).not.toThrow();
       });
     });
   });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js
index 47303d1e80f..d23b558f4ea 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js
@@ -4,11 +4,15 @@ import closedComponent from '~/vue_merge_request_widget/components/states/mr_wid
 const mr = {
   targetBranch: 'good-branch',
   targetBranchPath: '/good-branch',
-  closedBy: {
-    name: 'Fatih Acet',
-    username: 'fatihacet',
+  closedEvent: {
+    author: {
+      name: 'Fatih Acet',
+      username: 'fatihacet',
+    },
+    updatedAt: 'closedEventUpdatedAt',
+    formattedUpdatedAt: '',
   },
-  updatedAt: '2017-03-23T20:08:08.845Z',
+  updatedAt: 'mrUpdatedAt',
   closedAt: '1 day ago',
 };
 
@@ -18,7 +22,7 @@ const createComponent = () => {
   return new Component({
     el: document.createElement('div'),
     propsData: { mr },
-  }).$el;
+  });
 };
 
 describe('MRWidgetClosed', () => {
@@ -38,14 +42,30 @@ describe('MRWidgetClosed', () => {
   });
 
   describe('template', () => {
-    it('should have correct elements', () => {
-      const el = createComponent();
+    let vm;
+    let el;
 
+    beforeEach(() => {
+      vm = createComponent();
+      el = vm.$el;
+    });
+
+    afterEach(() => {
+      vm.$destroy();
+    });
+
+    it('should have correct elements', () => {
       expect(el.querySelector('h4').textContent).toContain('Closed by');
-      expect(el.querySelector('h4').textContent).toContain(mr.closedBy.name);
+      expect(el.querySelector('h4').textContent).toContain(mr.closedEvent.author.name);
       expect(el.textContent).toContain('The changes were not merged into');
       expect(el.querySelector('.label-branch').getAttribute('href')).toEqual(mr.targetBranchPath);
       expect(el.querySelector('.label-branch').textContent).toContain(mr.targetBranch);
     });
+
+    it('should use closedEvent updatedAt as tooltip title', () => {
+      expect(
+        el.querySelector('time').getAttribute('title'),
+      ).toBe('closedEventUpdatedAt');
+    });
   });
 });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
index 3b7b7d93662..5d4c7ec09dc 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
@@ -1,20 +1,9 @@
 import Vue from 'vue';
 import conflictsComponent from '~/vue_merge_request_widget/components/states/mr_widget_conflicts';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
 
+const ConflictsComponent = Vue.extend(conflictsComponent);
 const path = '/conflicts';
-const createComponent = () => {
-  const Component = Vue.extend(conflictsComponent);
-
-  return new Component({
-    el: document.createElement('div'),
-    propsData: {
-      mr: {
-        canMerge: true,
-        conflictResolutionPath: path,
-      },
-    },
-  });
-};
 
 describe('MRWidgetConflicts', () => {
   describe('props', () => {
@@ -27,44 +16,90 @@ describe('MRWidgetConflicts', () => {
   });
 
   describe('template', () => {
-    it('should have correct elements', () => {
-      const el = createComponent().$el;
-      const resolveButton = el.querySelector('.js-resolve-conflicts-button');
-      const mergeButton = el.querySelector('.mr-widget-body .btn');
-      const mergeLocallyButton = el.querySelector('.js-merge-locally-button');
-
-      expect(el.textContent).toContain('There are merge conflicts');
-      expect(el.textContent).not.toContain('ask someone with write access');
-      expect(el.querySelector('.btn-success').disabled).toBeTruthy();
-      expect(resolveButton.textContent).toContain('Resolve conflicts');
-      expect(resolveButton.getAttribute('href')).toEqual(path);
-      expect(mergeButton.textContent).toContain('Merge');
-      expect(mergeLocallyButton.textContent).toContain('Merge locally');
+    describe('when allowed to merge', () => {
+      let vm;
+
+      beforeEach(() => {
+        vm = mountComponent(ConflictsComponent, {
+          mr: {
+            canMerge: true,
+            conflictResolutionPath: path,
+          },
+        });
+      });
+
+      afterEach(() => {
+        vm.$destroy();
+      });
+
+      it('should tell you about conflicts without bothering other people', () => {
+        expect(vm.$el.textContent).toContain('There are merge conflicts');
+        expect(vm.$el.textContent).not.toContain('ask someone with write access');
+      });
+
+      it('should allow you to resolve the conflicts', () => {
+        const resolveButton = vm.$el.querySelector('.js-resolve-conflicts-button');
+
+        expect(resolveButton.textContent).toContain('Resolve conflicts');
+        expect(resolveButton.getAttribute('href')).toEqual(path);
+      });
+
+      it('should have merge buttons', () => {
+        const mergeButton = vm.$el.querySelector('.js-disabled-merge-button');
+        const mergeLocallyButton = vm.$el.querySelector('.js-merge-locally-button');
+
+        expect(mergeButton.textContent).toContain('Merge');
+        expect(mergeButton.disabled).toBeTruthy();
+        expect(mergeButton.classList.contains('btn-success')).toEqual(true);
+        expect(mergeLocallyButton.textContent).toContain('Merge locally');
+      });
     });
 
     describe('when user does not have permission to merge', () => {
       let vm;
 
       beforeEach(() => {
-        vm = createComponent();
-        vm.mr.canMerge = false;
+        vm = mountComponent(ConflictsComponent, {
+          mr: {
+            canMerge: false,
+          },
+        });
       });
 
-      it('should show proper message', (done) => {
-        Vue.nextTick(() => {
-          expect(vm.$el.textContent).toContain('ask someone with write access');
-          done();
-        });
+      afterEach(() => {
+        vm.$destroy();
+      });
+
+      it('should show proper message', () => {
+        expect(vm.$el.textContent).toContain('ask someone with write access');
+      });
+
+      it('should not have action buttons', () => {
+        expect(vm.$el.querySelector('.js-disabled-merge-button')).toBeDefined();
+        expect(vm.$el.querySelector('.js-resolve-conflicts-button')).toBeNull();
+        expect(vm.$el.querySelector('.js-merge-locally-button')).toBeNull();
       });
+    });
 
-      it('should not have action buttons', (done) => {
-        Vue.nextTick(() => {
-          expect(vm.$el.querySelectorAll('.btn').length).toBe(1);
-          expect(vm.$el.querySelector('.js-resolve-conflicts-button')).toEqual(null);
-          expect(vm.$el.querySelector('.js-merge-locally-button')).toEqual(null);
-          done();
+    describe('when fast-forward or semi-linear merge enabled', () => {
+      let vm;
+
+      beforeEach(() => {
+        vm = mountComponent(ConflictsComponent, {
+          mr: {
+            shouldBeRebased: true,
+          },
         });
       });
+
+      afterEach(() => {
+        vm.$destroy();
+      });
+
+      it('should tell you to rebase locally', () => {
+        expect(vm.$el.textContent).toContain('Fast-forward merge is not possible.');
+        expect(vm.$el.textContent).toContain('To merge this request, first rebase locally');
+      });
     });
   });
 });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js
index afaa750199a..2714e8294fa 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js
@@ -14,9 +14,12 @@ const createComponent = () => {
     canRevertInCurrentMR: true,
     canRemoveSourceBranch: true,
     sourceBranchRemoved: true,
-    mergedBy: {},
-    mergedAt: '',
-    updatedAt: '',
+    mergedEvent: {
+      author: {},
+      updatedAt: 'mergedUpdatedAt',
+      formattedUpdatedAt: '',
+    },
+    updatedAt: 'mrUpdatedAt',
     targetBranch,
   };
 
@@ -170,5 +173,11 @@ describe('MRWidgetMerged', () => {
         done();
       });
     });
+
+    it('should use mergedEvent updatedAt as tooltip title', () => {
+      expect(
+        el.querySelector('time').getAttribute('title'),
+      ).toBe('mergedUpdatedAt');
+    });
   });
 });
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 03a52f1f91c..2422e844e97 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
@@ -182,36 +182,6 @@ 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', () => {
@@ -467,4 +437,54 @@ describe('MRWidgetReadyToMerge', () => {
       });
     });
   });
+
+  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('Commit message area', () => {
+    it('when using merge commits, should show "Modify commit message" button', () => {
+      const customVm = createComponent({
+        mr: { ffOnlyEnabled: false },
+      });
+
+      expect(customVm.$el.querySelector('.js-fast-forward-message')).toBeNull();
+      expect(customVm.$el.querySelector('.js-modify-commit-message-button')).toBeDefined();
+    });
+
+    it('when fast-forward merge is enabled, only show fast-forward message', () => {
+      const customVm = createComponent({
+        mr: { ffOnlyEnabled: true },
+      });
+
+      expect(customVm.$el.querySelector('.js-fast-forward-message')).toBeDefined();
+      expect(customVm.$el.querySelector('.js-modify-commit-message-button')).toBeNull();
+    });
+  });
 });