Merge remote-tracking branch 'upstream/master' into 28717-additional-metrics-review-branch

41 files changed, 1104 insertions, 375 deletions

diff --git a/spec/javascripts/blob/create_branch_dropdown_spec.js b/spec/javascripts/blob/create_branch_dropdown_spec.js
deleted file mode 100644
index 6dbaa47c544..00000000000
--- a/spec/javascripts/blob/create_branch_dropdown_spec.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import '~/gl_dropdown';
-import '~/blob/create_branch_dropdown';
-import '~/blob/target_branch_dropdown';
-
-describe('CreateBranchDropdown', () => {
-  const fixtureTemplate = 'static/target_branch_dropdown.html.raw';
-  // selectors
-  const createBranchSel = '.js-new-branch-btn';
-  const backBtnSel = '.dropdown-menu-back';
-  const cancelBtnSel = '.js-cancel-branch-btn';
-  const branchNameSel = '#new_branch_name';
-  const branchName = 'new_name';
-  let dropdown;
-
-  function createDropdown() {
-    const dropdownEl = document.querySelector('.js-project-branches-dropdown');
-    const projectBranches = getJSONFixture('project_branches.json');
-    dropdown = new gl.TargetBranchDropDown(dropdownEl);
-    dropdown.cachedRefs = projectBranches;
-    return dropdown;
-  }
-
-  function createBranchBtn() {
-    return document.querySelector(createBranchSel);
-  }
-
-  function backBtn() {
-    return document.querySelector(backBtnSel);
-  }
-
-  function cancelBtn() {
-    return document.querySelector(cancelBtnSel);
-  }
-
-  function branchNameEl() {
-    return document.querySelector(branchNameSel);
-  }
-
-  function changeBranchName(text) {
-    branchNameEl().value = text;
-    branchNameEl().dispatchEvent(new Event('change'));
-  }
-
-  preloadFixtures(fixtureTemplate);
-
-  beforeEach(() => {
-    loadFixtures(fixtureTemplate);
-    createDropdown();
-  });
-
-  it('disable submit when branch name is empty', () => {
-    expect(createBranchBtn()).toBeDisabled();
-  });
-
-  it('enable submit when branch name is present', () => {
-    changeBranchName(branchName);
-
-    expect(createBranchBtn()).not.toBeDisabled();
-  });
-
-  it('resets the form when cancel btn is clicked and triggers dropdownback', () => {
-    const spyBackEvent = spyOnEvent(backBtnSel, 'click');
-    changeBranchName(branchName);
-
-    cancelBtn().click();
-
-    expect(branchNameEl()).toHaveValue('');
-    expect(spyBackEvent).toHaveBeenTriggered();
-  });
-
-  it('resets the form when back btn is clicked', () => {
-    changeBranchName(branchName);
-
-    backBtn().click();
-
-    expect(branchNameEl()).toHaveValue('');
-  });
-
-  describe('new branch creation', () => {
-    beforeEach(() => {
-      changeBranchName(branchName);
-    });
-    it('sets the new branch name and updates the dropdown', () => {
-      spyOn(dropdown, 'setNewBranch');
-
-      createBranchBtn().click();
-
-      expect(dropdown.setNewBranch).toHaveBeenCalledWith(branchName);
-    });
-
-    it('resets the form', () => {
-      createBranchBtn().click();
-
-      expect(branchNameEl()).toHaveValue('');
-    });
-
-    it('is triggered with enter keypress', () => {
-      spyOn(dropdown, 'setNewBranch');
-      const enterEvent = new Event('keydown');
-      enterEvent.which = 13;
-      branchNameEl().dispatchEvent(enterEvent);
-
-      expect(dropdown.setNewBranch).toHaveBeenCalledWith(branchName);
-    });
-  });
-});
diff --git a/spec/javascripts/blob/target_branch_dropdown_spec.js b/spec/javascripts/blob/target_branch_dropdown_spec.js
deleted file mode 100644
index 99c9537d2ec..00000000000
--- a/spec/javascripts/blob/target_branch_dropdown_spec.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import '~/gl_dropdown';
-import '~/blob/create_branch_dropdown';
-import '~/blob/target_branch_dropdown';
-
-describe('TargetBranchDropdown', () => {
-  const fixtureTemplate = 'static/target_branch_dropdown.html.raw';
-  let dropdown;
-
-  function createDropdown() {
-    const projectBranches = getJSONFixture('project_branches.json');
-    const dropdownEl = document.querySelector('.js-project-branches-dropdown');
-    dropdown = new gl.TargetBranchDropDown(dropdownEl);
-    dropdown.cachedRefs = projectBranches;
-    dropdown.refreshData();
-    return dropdown;
-  }
-
-  function submitBtn() {
-    return document.querySelector('button[type="submit"]');
-  }
-
-  function searchField() {
-    return document.querySelector('.dropdown-page-one .dropdown-input-field');
-  }
-
-  function element() {
-    return document.querySelectorAll('div.dropdown-content li a');
-  }
-
-  function elementAtIndex(index) {
-    return element()[index];
-  }
-
-  function clickElementAtIndex(index) {
-    elementAtIndex(index).click();
-  }
-
-  preloadFixtures(fixtureTemplate);
-
-  beforeEach(() => {
-    loadFixtures(fixtureTemplate);
-    createDropdown();
-  });
-
-  it('disable submit when branch is not selected', () => {
-    document.querySelector('input[name="target_branch"]').value = null;
-    clickElementAtIndex(1);
-
-    expect(submitBtn().getAttribute('disabled')).toEqual('');
-  });
-
-  it('enable submit when a branch is selected', () => {
-    clickElementAtIndex(1);
-
-    expect(submitBtn().getAttribute('disabled')).toBe(null);
-  });
-
-  it('triggers change.branch event on a branch click', () => {
-    spyOnEvent(dropdown.$dropdown, 'change.branch');
-    clickElementAtIndex(0);
-
-    expect('change.branch').toHaveBeenTriggeredOn(dropdown.$dropdown);
-  });
-
-  describe('dropdownData', () => {
-    it('cache the refs', () => {
-      const refs = dropdown.cachedRefs;
-      dropdown.cachedRefs = null;
-
-      dropdown.dropdownData(refs);
-
-      expect(dropdown.cachedRefs).toEqual(refs);
-    });
-
-    it('returns the Branches with the newBranch and defaultBranch', () => {
-      const refs = dropdown.cachedRefs;
-      dropdown.branchInput.value = 'master';
-      dropdown.newBranch = { id: 'new_branch', text: 'new_branch', title: 'new_branch' };
-
-      const branches = dropdown.dropdownData(refs).Branches;
-
-      expect(branches.length).toEqual(4);
-      expect(branches[0]).toEqual(dropdown.newBranch);
-      expect(branches[1]).toEqual({ id: 'master', text: 'master', title: 'master' });
-      expect(branches[2]).toEqual({ id: 'development', text: 'development', title: 'development' });
-      expect(branches[3]).toEqual({ id: 'staging', text: 'staging', title: 'staging' });
-    });
-  });
-
-  describe('setNewBranch', () => {
-    it('adds the new branch and select it', () => {
-      const branchName = 'new_branch';
-
-      dropdown.setNewBranch(branchName);
-
-      expect(elementAtIndex(0)).toHaveClass('is-active');
-      expect(elementAtIndex(0)).toContainHtml(branchName);
-    });
-
-    it("doesn't add a new branch if already exists in the list", () => {
-      const branchName = elementAtIndex(0).text;
-      const initialLength = element().length;
-
-      dropdown.setNewBranch(branchName);
-
-      expect(element().length).toEqual(initialLength);
-    });
-
-    it('clears the search filter', () => {
-      const branchName = elementAtIndex(0).text;
-      searchField().value = 'searching';
-
-      dropdown.setNewBranch(branchName);
-
-      expect(searchField().value).toEqual('');
-    });
-  });
-});
diff --git a/spec/javascripts/boards/components/board_spec.js b/spec/javascripts/boards/components/board_spec.js
new file mode 100644
index 00000000000..c4e8966ad6c
--- /dev/null
+++ b/spec/javascripts/boards/components/board_spec.js
@@ -0,0 +1,112 @@
+import Vue from 'vue';
+import '~/boards/services/board_service';
+import '~/boards/components/board';
+import '~/boards/models/list';
+
+describe('Board component', () => {
+  let vm;
+  let el;
+
+  beforeEach((done) => {
+    loadFixtures('boards/show.html.raw');
+
+    el = document.createElement('div');
+    document.body.appendChild(el);
+
+    // eslint-disable-next-line no-undef
+    gl.boardService = new BoardService('/', '/', 1);
+
+    vm = new gl.issueBoards.Board({
+      propsData: {
+        boardId: '1',
+        disabled: false,
+        issueLinkBase: '/',
+        rootPath: '/',
+        // eslint-disable-next-line no-undef
+        list: new List({
+          id: 1,
+          position: 0,
+          title: 'test',
+          list_type: 'backlog',
+        }),
+      },
+    }).$mount(el);
+
+    Vue.nextTick(done);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+
+    // remove the component from the DOM
+    document.querySelector('.board').remove();
+
+    localStorage.removeItem(`boards.${vm.boardId}.${vm.list.type}.expanded`);
+  });
+
+  it('board is expandable when list type is backlog', () => {
+    expect(
+      vm.$el.classList.contains('is-expandable'),
+    ).toBe(true);
+  });
+
+  it('board is expandable when list type is closed', (done) => {
+    vm.list.type = 'closed';
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.classList.contains('is-expandable'),
+      ).toBe(true);
+
+      done();
+    });
+  });
+
+  it('board is not expandable when list type is label', (done) => {
+    vm.list.type = 'label';
+    vm.list.isExpandable = false;
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.classList.contains('is-expandable'),
+      ).toBe(false);
+
+      done();
+    });
+  });
+
+  it('collapses when clicking header', (done) => {
+    vm.$el.querySelector('.board-header').click();
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.classList.contains('is-collapsed'),
+      ).toBe(true);
+
+      done();
+    });
+  });
+
+  it('created sets isExpanded to true from localStorage', (done) => {
+    vm.$el.querySelector('.board-header').click();
+
+    return Vue.nextTick()
+      .then(() => {
+        expect(
+          vm.$el.classList.contains('is-collapsed'),
+        ).toBe(true);
+
+        // call created manually
+        vm.$options.created[0].call(vm);
+
+        return Vue.nextTick();
+      })
+      .then(() => {
+        expect(
+          vm.$el.classList.contains('is-collapsed'),
+        ).toBe(true);
+
+        done();
+      });
+  });
+});
diff --git a/spec/javascripts/bootstrap_linked_tabs_spec.js b/spec/javascripts/bootstrap_linked_tabs_spec.js
index a27dc48b3fd..93dc60d59fe 100644
--- a/spec/javascripts/bootstrap_linked_tabs_spec.js
+++ b/spec/javascripts/bootstrap_linked_tabs_spec.js
@@ -1,15 +1,6 @@
 import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
 
 (() => {
-  // TODO: remove this hack!
-  // PhantomJS causes spyOn to panic because replaceState isn't "writable"
-  let phantomjs;
-  try {
-    phantomjs = !Object.getOwnPropertyDescriptor(window.history, 'replaceState').writable;
-  } catch (err) {
-    phantomjs = false;
-  }
-
   describe('Linked Tabs', () => {
     preloadFixtures('static/linked_tabs.html.raw');
 
@@ -19,9 +10,7 @@ import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
 
     describe('when is initialized', () => {
       beforeEach(() => {
-        if (!phantomjs) {
-          spyOn(window.history, 'replaceState').and.callFake(function () {});
-        }
+        spyOn(window.history, 'replaceState').and.callFake(function () {});
       });
 
       it('should activate the tab correspondent to the given action', () => {
@@ -47,7 +36,7 @@ import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
 
     describe('on click', () => {
       it('should change the url according to the clicked tab', () => {
-        const historySpy = !phantomjs && spyOn(history, 'replaceState').and.callFake(() => {});
+        const historySpy = spyOn(history, 'replaceState').and.callFake(() => {});
 
         const linkedTabs = new LinkedTabs({
           action: 'show',
diff --git a/spec/javascripts/build_spec.js b/spec/javascripts/build_spec.js
index 461908f3fde..be90dbdd88a 100644
--- a/spec/javascripts/build_spec.js
+++ b/spec/javascripts/build_spec.js
@@ -58,7 +58,7 @@ describe('Build', () => {
 
       it('displays the remove date correctly', () => {
         const removeDateElement = document.querySelector('.js-artifacts-remove');
-        expect(removeDateElement.innerText.trim()).toBe('1 year');
+        expect(removeDateElement.innerText.trim()).toBe('1 year remaining');
       });
     });
 
@@ -132,23 +132,6 @@ describe('Build', () => {
         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();
-
-        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', () => {
diff --git a/spec/javascripts/commits_spec.js b/spec/javascripts/commits_spec.js
index 44a4386b250..ace95000468 100644
--- a/spec/javascripts/commits_spec.js
+++ b/spec/javascripts/commits_spec.js
@@ -5,15 +5,6 @@ import '~/pager';
 import '~/commits';
 
 (() => {
-  // TODO: remove this hack!
-  // PhantomJS causes spyOn to panic because replaceState isn't "writable"
-  let phantomjs;
-  try {
-    phantomjs = !Object.getOwnPropertyDescriptor(window.history, 'replaceState').writable;
-  } catch (err) {
-    phantomjs = false;
-  }
-
   describe('Commits List', () => {
     beforeEach(() => {
       setFixtures(`
@@ -61,9 +52,7 @@ import '~/commits';
         CommitsList.init(25);
         CommitsList.searchField.val('');
 
-        if (!phantomjs) {
-          spyOn(history, 'replaceState').and.stub();
-        }
+        spyOn(history, 'replaceState').and.stub();
         ajaxSpy = spyOn(jQuery, 'ajax').and.callFake((req) => {
           req.success({
             data: '<li>Result</li>',
diff --git a/spec/javascripts/datetime_utility_spec.js b/spec/javascripts/datetime_utility_spec.js
index e347c980c78..e54ea11b08c 100644
--- a/spec/javascripts/datetime_utility_spec.js
+++ b/spec/javascripts/datetime_utility_spec.js
@@ -1,7 +1,27 @@
-import '~/lib/utils/datetime_utility';
+import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
 
 (() => {
   describe('Date time utils', () => {
+    describe('timeFor', () => {
+      it('returns `past due` when in past', () => {
+        const date = new Date();
+        date.setFullYear(date.getFullYear() - 1);
+
+        expect(
+          gl.utils.timeFor(date),
+        ).toBe('Past due');
+      });
+
+      it('returns remaining time when in the future', () => {
+        const date = new Date();
+        date.setFullYear(date.getFullYear() + 1);
+
+        expect(
+          gl.utils.timeFor(date),
+        ).toBe('1 year remaining');
+      });
+    });
+
     describe('get day name', () => {
       it('should return Sunday', () => {
         const day = gl.utils.getDayName(new Date('07/17/2016'));
@@ -62,4 +82,13 @@ import '~/lib/utils/datetime_utility';
       });
     });
   });
+
+  describe('timeIntervalInWords', () => {
+    it('should return string with number of minutes and seconds', () => {
+      expect(timeIntervalInWords(9.54)).toEqual('9 seconds');
+      expect(timeIntervalInWords(1)).toEqual('1 second');
+      expect(timeIntervalInWords(200)).toEqual('3 minutes 20 seconds');
+      expect(timeIntervalInWords(6008)).toEqual('100 minutes 8 seconds');
+    });
+  });
 })();
diff --git a/spec/javascripts/deploy_keys/components/key_spec.js b/spec/javascripts/deploy_keys/components/key_spec.js
index 793ab8c451d..a4b98f6140d 100644
--- a/spec/javascripts/deploy_keys/components/key_spec.js
+++ b/spec/javascripts/deploy_keys/components/key_spec.js
@@ -39,9 +39,15 @@ describe('Deploy keys key', () => {
       ).toBe(`created ${gl.utils.getTimeago().format(deployKey.created_at)}`);
     });
 
+    it('shows edit button', () => {
+      expect(
+        vm.$el.querySelectorAll('.btn')[0].textContent.trim(),
+      ).toBe('Edit');
+    });
+
     it('shows remove button', () => {
       expect(
-        vm.$el.querySelector('.btn').textContent.trim(),
+        vm.$el.querySelectorAll('.btn')[1].textContent.trim(),
       ).toBe('Remove');
     });
 
@@ -71,9 +77,15 @@ describe('Deploy keys key', () => {
       setTimeout(done);
     });
 
+    it('shows edit button', () => {
+      expect(
+        vm.$el.querySelectorAll('.btn')[0].textContent.trim(),
+      ).toBe('Edit');
+    });
+
     it('shows enable button', () => {
       expect(
-        vm.$el.querySelector('.btn').textContent.trim(),
+        vm.$el.querySelectorAll('.btn')[1].textContent.trim(),
       ).toBe('Enable');
     });
 
@@ -82,7 +94,7 @@ describe('Deploy keys key', () => {
 
       Vue.nextTick(() => {
         expect(
-          vm.$el.querySelector('.btn').textContent.trim(),
+          vm.$el.querySelectorAll('.btn')[1].textContent.trim(),
         ).toBe('Disable');
 
         done();
diff --git a/spec/javascripts/filtered_search/filtered_search_manager_spec.js b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
index 9c8629ef9f0..6d00d71f145 100644
--- a/spec/javascripts/filtered_search/filtered_search_manager_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
@@ -97,6 +97,49 @@ describe('Filtered Search Manager', () => {
     });
   });
 
+  describe('searchState', () => {
+    beforeEach(() => {
+      spyOn(gl.FilteredSearchManager.prototype, 'search').and.callFake(() => {});
+    });
+
+    it('should blur button', () => {
+      const e = {
+        currentTarget: {
+          blur: () => {},
+        },
+      };
+      spyOn(e.currentTarget, 'blur').and.callThrough();
+      manager.searchState(e);
+
+      expect(e.currentTarget.blur).toHaveBeenCalled();
+    });
+
+    it('should not call search if there is no state', () => {
+      const e = {
+        currentTarget: {
+          blur: () => {},
+        },
+      };
+
+      manager.searchState(e);
+      expect(gl.FilteredSearchManager.prototype.search).not.toHaveBeenCalled();
+    });
+
+    it('should call search when there is state', () => {
+      const e = {
+        currentTarget: {
+          blur: () => {},
+          dataset: {
+            state: 'opened',
+          },
+        },
+      };
+
+      manager.searchState(e);
+      expect(gl.FilteredSearchManager.prototype.search).toHaveBeenCalledWith('opened');
+    });
+  });
+
   describe('search', () => {
     const defaultParams = '?scope=all&utf8=%E2%9C%93&state=opened';
 
diff --git a/spec/javascripts/fixtures/boards.rb b/spec/javascripts/fixtures/boards.rb
new file mode 100644
index 00000000000..d7c3dc0a235
--- /dev/null
+++ b/spec/javascripts/fixtures/boards.rb
@@ -0,0 +1,28 @@
+require 'spec_helper'
+
+describe Projects::BoardsController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:admin) { create(:admin) }
+  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
+  let(:project) { create(:project, :repository, namespace: namespace, path: 'boards-project') }
+
+  render_views
+
+  before(:all) do
+    clean_frontend_fixtures('boards/')
+  end
+
+  before(:each) do
+    sign_in(admin)
+  end
+
+  it 'boards/show.html.raw' do |example|
+    get(:index,
+        namespace_id: project.namespace,
+        project_id: project)
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+end
diff --git a/spec/javascripts/fixtures/project_branches.json b/spec/javascripts/fixtures/project_branches.json
deleted file mode 100644
index a96a4c0c095..00000000000
--- a/spec/javascripts/fixtures/project_branches.json
+++ /dev/null
@@ -1,5 +0,0 @@
-[
-  "master",
-  "development",
-  "staging"
-]
diff --git a/spec/javascripts/fixtures/target_branch_dropdown.html.haml b/spec/javascripts/fixtures/target_branch_dropdown.html.haml
deleted file mode 100644
index 821fb7940a0..00000000000
--- a/spec/javascripts/fixtures/target_branch_dropdown.html.haml
+++ /dev/null
@@ -1,28 +0,0 @@
-%form.js-edit-blob-form
-  %input{type: 'hidden', name: 'target_branch', value: 'master'}
-  %div
-    .dropdown
-      %button.dropdown-menu-toggle.js-project-branches-dropdown.js-target-branch{type: 'button', data: {toggle: 'dropdown', selected: 'master', field_name: 'target_branch', form_id: '.js-edit-blob-form'}}
-      .dropdown-menu.dropdown-menu-selectable.dropdown-menu-paging
-        .dropdown-page-one
-          .dropdown-title 'Select branch'
-          .dropdown-input
-            %input.dropdown-input-field{type: 'search', value: ''}
-            %i.fa.fa-search.dropdown-input-search
-            %i.fa.fa-times-dropdown-input-clear.js-dropdown-input-clear{role: 'button'}
-          .dropdown-content
-          .dropdown-footer
-            %ul.dropdown-footer-list
-              %li
-                %a.create-new-branch.dropdown-toggle-page{href: "#"}
-                  Create new branch
-        .dropdown-page-two.dropdown-new-branch
-          %button.dropdown-title-button.dropdown-menu-back{type: 'button'}
-          .dropdown_title 'Create new branch'
-          .dropdown_content
-            %input#new_branch_name.default-dropdown-input{ type: "text", placeholder: "Name new branch" }
-              %button.btn.btn-primary.pull-left.js-new-branch-btn{ type: "button" }
-                Create
-              %button.btn.btn-default.pull-right.js-cancel-branch-btn{ type: "button" }
-                Cancel
-  %button{type: 'submit'}
diff --git a/spec/javascripts/gl_dropdown_spec.js b/spec/javascripts/gl_dropdown_spec.js
index 3292590b9ed..10fcc590c89 100644
--- a/spec/javascripts/gl_dropdown_spec.js
+++ b/spec/javascripts/gl_dropdown_spec.js
@@ -185,7 +185,7 @@ import '~/lib/utils/url_utility';
         expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
       });
 
-      it('should focus on input when opening for the second time', () => {
+      it('should focus on input when opening for the second time after transition', () => {
         remoteCallback();
         this.dropdownContainerElement.trigger({
           type: 'keyup',
@@ -193,6 +193,7 @@ import '~/lib/utils/url_utility';
           keyCode: ARROW_KEYS.ESC
         });
         this.dropdownButtonElement.click();
+        this.dropdownContainerElement.trigger('transitionend');
         expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
       });
     });
@@ -201,6 +202,7 @@ import '~/lib/utils/url_utility';
       it('should focus input when passing array data to drop down', () => {
         initDropDown.call(this, false, true);
         this.dropdownButtonElement.click();
+        this.dropdownContainerElement.trigger('transitionend');
         expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
       });
     });
diff --git a/spec/javascripts/gl_emoji_spec.js b/spec/javascripts/gl_emoji_spec.js
index b2b46640e5b..a09e0072fa8 100644
--- a/spec/javascripts/gl_emoji_spec.js
+++ b/spec/javascripts/gl_emoji_spec.js
@@ -192,6 +192,9 @@ describe('gl_emoji', () => {
   });
 
   describe('isFlagEmoji', () => {
+    it('should gracefully handle empty string', () => {
+      expect(isFlagEmoji('')).toBeFalsy();
+    });
     it('should detect flag_ac', () => {
       expect(isFlagEmoji('🇦🇨')).toBeTruthy();
     });
@@ -216,6 +219,9 @@ describe('gl_emoji', () => {
   });
 
   describe('isKeycapEmoji', () => {
+    it('should gracefully handle empty string', () => {
+      expect(isKeycapEmoji('')).toBeFalsy();
+    });
     it('should detect one(keycap)', () => {
       expect(isKeycapEmoji('1️⃣')).toBeTruthy();
     });
@@ -231,6 +237,9 @@ describe('gl_emoji', () => {
   });
 
   describe('isSkinToneComboEmoji', () => {
+    it('should gracefully handle empty string', () => {
+      expect(isSkinToneComboEmoji('')).toBeFalsy();
+    });
     it('should detect hand_splayed_tone5', () => {
       expect(isSkinToneComboEmoji('🖐🏿')).toBeTruthy();
     });
@@ -255,6 +264,9 @@ describe('gl_emoji', () => {
   });
 
   describe('isHorceRacingSkinToneComboEmoji', () => {
+    it('should gracefully handle empty string', () => {
+      expect(isHorceRacingSkinToneComboEmoji('')).toBeFalsy();
+    });
     it('should detect horse_racing_tone2', () => {
       expect(isHorceRacingSkinToneComboEmoji('🏇🏼')).toBeTruthy();
     });
@@ -264,6 +276,9 @@ describe('gl_emoji', () => {
   });
 
   describe('isPersonZwjEmoji', () => {
+    it('should gracefully handle empty string', () => {
+      expect(isPersonZwjEmoji('')).toBeFalsy();
+    });
     it('should detect couple_mm', () => {
       expect(isPersonZwjEmoji('👨‍❤️‍👨')).toBeTruthy();
     });
@@ -300,6 +315,22 @@ describe('gl_emoji', () => {
   });
 
   describe('isEmojiUnicodeSupported', () => {
+    it('should gracefully handle empty string with unicode support', () => {
+      const isSupported = isEmojiUnicodeSupported(
+        { '1.0': true },
+        '',
+        '1.0',
+      );
+      expect(isSupported).toBeTruthy();
+    });
+    it('should gracefully handle empty string without unicode support', () => {
+      const isSupported = isEmojiUnicodeSupported(
+        {},
+        '',
+        '1.0',
+      );
+      expect(isSupported).toBeFalsy();
+    });
     it('bomb(6.0) with 6.0 support', () => {
       const emojiKey = 'bomb';
       const unicodeSupportMap = Object.assign({}, emptySupportMap, {
diff --git a/spec/javascripts/groups/group_item_spec.js b/spec/javascripts/groups/group_item_spec.js
new file mode 100644
index 00000000000..25e10552d95
--- /dev/null
+++ b/spec/javascripts/groups/group_item_spec.js
@@ -0,0 +1,102 @@
+import Vue from 'vue';
+import groupItemComponent from '~/groups/components/group_item.vue';
+import GroupsStore from '~/groups/stores/groups_store';
+import { group1 } from './mock_data';
+
+describe('Groups Component', () => {
+  let GroupItemComponent;
+  let component;
+  let store;
+  let group;
+
+  describe('group with default data', () => {
+    beforeEach((done) => {
+      GroupItemComponent = Vue.extend(groupItemComponent);
+      store = new GroupsStore();
+      group = store.decorateGroup(group1);
+
+      component = new GroupItemComponent({
+        propsData: {
+          group,
+        },
+      }).$mount();
+
+      Vue.nextTick(() => {
+        done();
+      });
+    });
+
+    afterEach(() => {
+      component.$destroy();
+    });
+
+    it('should render the group item correctly', () => {
+      expect(component.$el.classList.contains('group-row')).toBe(true);
+      expect(component.$el.classList.contains('.no-description')).toBe(false);
+      expect(component.$el.querySelector('.number-projects').textContent).toContain(group.numberProjects);
+      expect(component.$el.querySelector('.number-users').textContent).toContain(group.numberUsers);
+      expect(component.$el.querySelector('.group-visibility')).toBeDefined();
+      expect(component.$el.querySelector('.avatar-container')).toBeDefined();
+      expect(component.$el.querySelector('.title').textContent).toContain(group.name);
+      expect(component.$el.querySelector('.access-type').textContent).toContain(group.permissions.humanGroupAccess);
+      expect(component.$el.querySelector('.description').textContent).toContain(group.description);
+      expect(component.$el.querySelector('.edit-group')).toBeDefined();
+      expect(component.$el.querySelector('.leave-group')).toBeDefined();
+    });
+  });
+
+  describe('group without description', () => {
+    beforeEach((done) => {
+      GroupItemComponent = Vue.extend(groupItemComponent);
+      store = new GroupsStore();
+      group1.description = '';
+      group = store.decorateGroup(group1);
+
+      component = new GroupItemComponent({
+        propsData: {
+          group,
+        },
+      }).$mount();
+
+      Vue.nextTick(() => {
+        done();
+      });
+    });
+
+    afterEach(() => {
+      component.$destroy();
+    });
+
+    it('should render group item correctly', () => {
+      expect(component.$el.querySelector('.description').textContent).toBe('');
+      expect(component.$el.classList.contains('.no-description')).toBe(false);
+    });
+  });
+
+  describe('user has not access to group', () => {
+    beforeEach((done) => {
+      GroupItemComponent = Vue.extend(groupItemComponent);
+      store = new GroupsStore();
+      group1.permissions.human_group_access = null;
+      group = store.decorateGroup(group1);
+
+      component = new GroupItemComponent({
+        propsData: {
+          group,
+        },
+      }).$mount();
+
+      Vue.nextTick(() => {
+        done();
+      });
+    });
+
+    afterEach(() => {
+      component.$destroy();
+    });
+
+    it('should not display access type', () => {
+      expect(component.$el.querySelector('.access-type')).toBeNull();
+    });
+  });
+});
diff --git a/spec/javascripts/groups/groups_spec.js b/spec/javascripts/groups/groups_spec.js
new file mode 100644
index 00000000000..2a77f7259da
--- /dev/null
+++ b/spec/javascripts/groups/groups_spec.js
@@ -0,0 +1,64 @@
+import Vue from 'vue';
+import groupFolderComponent from '~/groups/components/group_folder.vue';
+import groupItemComponent from '~/groups/components/group_item.vue';
+import groupsComponent from '~/groups/components/groups.vue';
+import GroupsStore from '~/groups/stores/groups_store';
+import { groupsData } from './mock_data';
+
+describe('Groups Component', () => {
+  let GroupsComponent;
+  let store;
+  let component;
+  let groups;
+
+  beforeEach((done) => {
+    Vue.component('group-folder', groupFolderComponent);
+    Vue.component('group-item', groupItemComponent);
+
+    store = new GroupsStore();
+    groups = store.setGroups(groupsData.groups);
+
+    store.storePagination(groupsData.pagination);
+
+    GroupsComponent = Vue.extend(groupsComponent);
+
+    component = new GroupsComponent({
+      propsData: {
+        groups: store.state.groups,
+        pageInfo: store.state.pageInfo,
+      },
+    }).$mount();
+
+    Vue.nextTick(() => {
+      done();
+    });
+  });
+
+  afterEach(() => {
+    component.$destroy();
+  });
+
+  describe('with data', () => {
+    it('should render a list of groups', () => {
+      expect(component.$el.classList.contains('groups-list-tree-container')).toBe(true);
+      expect(component.$el.querySelector('#group-12')).toBeDefined();
+      expect(component.$el.querySelector('#group-1119')).toBeDefined();
+      expect(component.$el.querySelector('#group-1120')).toBeDefined();
+    });
+
+    it('should render group and its subgroup', () => {
+      const lists = component.$el.querySelectorAll('.group-list-tree');
+
+      expect(lists.length).toBe(3); // one parent and two subgroups
+
+      expect(lists[0].querySelector('#group-1119').classList.contains('is-open')).toBe(true);
+      expect(lists[0].querySelector('#group-1119').classList.contains('has-subgroups')).toBe(true);
+
+      expect(lists[2].querySelector('#group-1120').textContent).toContain(groups[1119].subGroups[1120].name);
+    });
+
+    it('should remove prefix of parent group', () => {
+      expect(component.$el.querySelector('#group-12 #group-1128 .title').textContent).toContain('level2 / level3 / level4');
+    });
+  });
+});
diff --git a/spec/javascripts/groups/mock_data.js b/spec/javascripts/groups/mock_data.js
new file mode 100644
index 00000000000..b3f5d791b89
--- /dev/null
+++ b/spec/javascripts/groups/mock_data.js
@@ -0,0 +1,114 @@
+const group1 = {
+  id: '12',
+  name: 'level1',
+  path: 'level1',
+  description: 'foo',
+  visibility: 'public',
+  avatar_url: null,
+  web_url: 'http://localhost:3000/groups/level1',
+  group_path: '/level1',
+  full_name: 'level1',
+  full_path: 'level1',
+  parent_id: null,
+  created_at: '2017-05-15T19:01:23.670Z',
+  updated_at: '2017-05-15T19:01:23.670Z',
+  number_projects_with_delimiter: '1',
+  number_users_with_delimiter: '1',
+  has_subgroups: true,
+  permissions: {
+    human_group_access: 'Master',
+  },
+};
+
+// This group has no direct parent, should be placed as subgroup of group1
+const group14 = {
+  id: 1128,
+  name: 'level4',
+  path: 'level4',
+  description: 'foo',
+  visibility: 'public',
+  avatar_url: null,
+  web_url: 'http://localhost:3000/groups/level1/level2/level3/level4',
+  group_path: '/level1/level2/level3/level4',
+  full_name: 'level1 / level2 / level3 / level4',
+  full_path: 'level1/level2/level3/level4',
+  parent_id: 1127,
+  created_at: '2017-05-15T19:02:01.645Z',
+  updated_at: '2017-05-15T19:02:01.645Z',
+  number_projects_with_delimiter: '1',
+  number_users_with_delimiter: '1',
+  has_subgroups: true,
+  permissions: {
+    human_group_access: 'Master',
+  },
+};
+
+const group2 = {
+  id: 1119,
+  name: 'devops',
+  path: 'devops',
+  description: 'foo',
+  visibility: 'public',
+  avatar_url: null,
+  web_url: 'http://localhost:3000/groups/devops',
+  group_path: '/devops',
+  full_name: 'devops',
+  full_path: 'devops',
+  parent_id: null,
+  created_at: '2017-05-11T19:35:09.635Z',
+  updated_at: '2017-05-11T19:35:09.635Z',
+  number_projects_with_delimiter: '1',
+  number_users_with_delimiter: '1',
+  has_subgroups: true,
+  permissions: {
+    human_group_access: 'Master',
+  },
+};
+
+const group21 = {
+  id: 1120,
+  name: 'chef',
+  path: 'chef',
+  description: 'foo',
+  visibility: 'public',
+  avatar_url: null,
+  web_url: 'http://localhost:3000/groups/devops/chef',
+  group_path: '/devops/chef',
+  full_name: 'devops / chef',
+  full_path: 'devops/chef',
+  parent_id: 1119,
+  created_at: '2017-05-11T19:51:04.060Z',
+  updated_at: '2017-05-11T19:51:04.060Z',
+  number_projects_with_delimiter: '1',
+  number_users_with_delimiter: '1',
+  has_subgroups: true,
+  permissions: {
+    human_group_access: 'Master',
+  },
+};
+
+const groupsData = {
+  groups: [group1, group14, group2, group21],
+  pagination: {
+    Date: 'Mon, 22 May 2017 22:31:52 GMT',
+    'X-Prev-Page': '1',
+    'X-Content-Type-Options': 'nosniff',
+    'X-Total': '31',
+    'Transfer-Encoding': 'chunked',
+    'X-Runtime': '0.611144',
+    'X-Xss-Protection': '1; mode=block',
+    'X-Request-Id': 'f5db8368-3ce5-4aa4-89d2-a125d9dead09',
+    'X-Ua-Compatible': 'IE=edge',
+    'X-Per-Page': '20',
+    Link: '<http://localhost:3000/dashboard/groups.json?page=1&per_page=20>; rel="prev", <http://localhost:3000/dashboard/groups.json?page=1&per_page=20>; rel="first", <http://localhost:3000/dashboard/groups.json?page=2&per_page=20>; rel="last"',
+    'X-Next-Page': '',
+    Etag: 'W/"a82f846947136271cdb7d55d19ef33d2"',
+    'X-Frame-Options': 'DENY',
+    'Content-Type': 'application/json; charset=utf-8',
+    'Cache-Control': 'max-age=0, private, must-revalidate',
+    'X-Total-Pages': '2',
+    'X-Page': '2',
+  },
+};
+
+export { groupsData, group1 };
diff --git a/spec/javascripts/issue_show/components/app_spec.js b/spec/javascripts/issue_show/components/app_spec.js
index 59c006aa0af..2ccc4f16192 100644
--- a/spec/javascripts/issue_show/components/app_spec.js
+++ b/spec/javascripts/issue_show/components/app_spec.js
@@ -126,7 +126,7 @@ describe('Issuable output', () => {
 
   describe('updateIssuable', () => {
     it('fetches new data after update', (done) => {
-      spyOn(vm.service, 'getData');
+      spyOn(vm.service, 'getData').and.callThrough();
       spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
         resolve({
           json() {
diff --git a/spec/javascripts/jobs/header_spec.js b/spec/javascripts/jobs/header_spec.js
new file mode 100644
index 00000000000..c7179b3e03d
--- /dev/null
+++ b/spec/javascripts/jobs/header_spec.js
@@ -0,0 +1,63 @@
+import Vue from 'vue';
+import headerComponent from '~/jobs/components/header.vue';
+
+describe('Job details header', () => {
+  let HeaderComponent;
+  let vm;
+  let props;
+
+  beforeEach(() => {
+    HeaderComponent = Vue.extend(headerComponent);
+
+    const threeWeeksAgo = new Date();
+    threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21);
+
+    props = {
+      job: {
+        status: {
+          group: 'failed',
+          icon: 'ci-status-failed',
+          label: 'failed',
+          text: 'failed',
+          details_path: 'path',
+        },
+        id: 123,
+        created_at: threeWeeksAgo.toISOString(),
+        user: {
+          web_url: 'path',
+          name: 'Foo',
+          username: 'foobar',
+          email: 'foo@bar.com',
+          avatar_url: 'link',
+        },
+        retry_path: 'path',
+        new_issue_path: 'path',
+      },
+      isLoading: false,
+    };
+
+    vm = new HeaderComponent({ propsData: props }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render provided job information', () => {
+    expect(
+      vm.$el.querySelector('.header-main-content').textContent.replace(/\s+/g, ' ').trim(),
+    ).toEqual('failed Job #123 triggered 3 weeks ago by Foo');
+  });
+
+  it('should render retry link', () => {
+    expect(
+      vm.$el.querySelector('.js-retry-button').getAttribute('href'),
+    ).toEqual(props.job.retry_path);
+  });
+
+  it('should render new issue link', () => {
+    expect(
+      vm.$el.querySelector('.js-new-issue').getAttribute('href'),
+    ).toEqual(props.job.new_issue_path);
+  });
+});
diff --git a/spec/javascripts/jobs/job_details_mediator_spec.js b/spec/javascripts/jobs/job_details_mediator_spec.js
new file mode 100644
index 00000000000..1d7fa7e12fc
--- /dev/null
+++ b/spec/javascripts/jobs/job_details_mediator_spec.js
@@ -0,0 +1,43 @@
+import Vue from 'vue';
+import JobMediator from '~/jobs/job_details_mediator';
+import job from './mock_data';
+
+describe('JobMediator', () => {
+  let mediator;
+
+  beforeEach(() => {
+    mediator = new JobMediator({ endpoint: 'foo' });
+  });
+
+  it('should set defaults', () => {
+    expect(mediator.store).toBeDefined();
+    expect(mediator.service).toBeDefined();
+    expect(mediator.options).toEqual({ endpoint: 'foo' });
+    expect(mediator.state.isLoading).toEqual(false);
+  });
+
+  describe('request and store data', () => {
+    const interceptor = (request, next) => {
+      next(request.respondWith(JSON.stringify(job), {
+        status: 200,
+      }));
+    };
+
+    beforeEach(() => {
+      Vue.http.interceptors.push(interceptor);
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(Vue.http.interceptor, interceptor);
+    });
+
+    it('should store received data', (done) => {
+      mediator.fetchJob();
+
+      setTimeout(() => {
+        expect(mediator.store.state.job).toEqual(job);
+        done();
+      }, 0);
+    });
+  });
+});
diff --git a/spec/javascripts/jobs/job_store_spec.js b/spec/javascripts/jobs/job_store_spec.js
new file mode 100644
index 00000000000..d00faf29d1e
--- /dev/null
+++ b/spec/javascripts/jobs/job_store_spec.js
@@ -0,0 +1,26 @@
+import JobStore from '~/jobs/stores/job_store';
+import job from './mock_data';
+
+describe('Job Store', () => {
+  let store;
+
+  beforeEach(() => {
+    store = new JobStore();
+  });
+
+  it('should set defaults', () => {
+    expect(store.state.job).toEqual({});
+  });
+
+  describe('storeJob', () => {
+    it('should store empty object if none is provided', () => {
+      store.storeJob();
+      expect(store.state.job).toEqual({});
+    });
+
+    it('should store provided argument', () => {
+      store.storeJob(job);
+      expect(store.state.job).toEqual(job);
+    });
+  });
+});
diff --git a/spec/javascripts/jobs/mock_data.js b/spec/javascripts/jobs/mock_data.js
new file mode 100644
index 00000000000..17e4ef26b2c
--- /dev/null
+++ b/spec/javascripts/jobs/mock_data.js
@@ -0,0 +1,123 @@
+const threeWeeksAgo = new Date();
+threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21);
+
+export default {
+  id: 4757,
+  name: 'test',
+  build_path: '/root/ci-mock/-/jobs/4757',
+  retry_path: '/root/ci-mock/-/jobs/4757/retry',
+  cancel_path: '/root/ci-mock/-/jobs/4757/cancel',
+  new_issue_path: '/root/ci-mock/issues/new',
+  playable: false,
+  created_at: threeWeeksAgo.toISOString(),
+  updated_at: threeWeeksAgo.toISOString(),
+  finished_at: threeWeeksAgo.toISOString(),
+  queued: 9.54,
+  status: {
+    icon: 'icon_status_success',
+    text: 'passed',
+    label: 'passed',
+    group: 'success',
+    has_details: true,
+    details_path: '/root/ci-mock/-/jobs/4757',
+    favicon: '/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico',
+    action: {
+      icon: 'icon_action_retry',
+      title: 'Retry',
+      path: '/root/ci-mock/-/jobs/4757/retry',
+      method: 'post',
+    },
+  },
+  coverage: 20,
+  erased_at: threeWeeksAgo.toISOString(),
+  duration: 6.785563,
+  tags: ['tag'],
+  user: {
+    name: 'Root',
+    username: 'root',
+    id: 1,
+    state: 'active',
+    avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+    web_url: 'http://localhost:3000/root',
+  },
+  erase_path: '/root/ci-mock/-/jobs/4757/erase',
+  artifacts: [null],
+  runner: {
+    id: 1,
+    description: 'local ci runner',
+    edit_path: '/root/ci-mock/runners/1/edit',
+  },
+  pipeline: {
+    id: 140,
+    user: {
+      name: 'Root',
+      username: 'root',
+      id: 1,
+      state: 'active',
+      avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+      web_url: 'http://localhost:3000/root',
+    },
+    active: false,
+    coverage: null,
+    source: 'unknown',
+    created_at: '2017-05-24T09:59:58.634Z',
+    updated_at: '2017-06-01T17:32:00.062Z',
+    path: '/root/ci-mock/pipelines/140',
+    flags: {
+      latest: true,
+      stuck: false,
+      yaml_errors: false,
+      retryable: false,
+      cancelable: false,
+    },
+    details: {
+      status: {
+        icon: 'icon_status_success',
+        text: 'passed',
+        label: 'passed',
+        group: 'success',
+        has_details: true,
+        details_path: '/root/ci-mock/pipelines/140',
+        favicon: '/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico',
+      },
+      duration: 6,
+      finished_at: '2017-06-01T17:32:00.042Z',
+    },
+    ref: {
+      name: 'abc',
+      path: '/root/ci-mock/commits/abc',
+      tag: false,
+      branch: true,
+    },
+    commit: {
+      id: 'c58647773a6b5faf066d4ad6ff2c9fbba5f180f6',
+      short_id: 'c5864777',
+      title: 'Add new file',
+      created_at: '2017-05-24T10:59:52.000+01:00',
+      parent_ids: ['798e5f902592192afaba73f4668ae30e56eae492'],
+      message: 'Add new file',
+      author_name: 'Root',
+      author_email: 'admin@example.com',
+      authored_date: '2017-05-24T10:59:52.000+01:00',
+      committer_name: 'Root',
+      committer_email: 'admin@example.com',
+      committed_date: '2017-05-24T10:59:52.000+01:00',
+      author: {
+        name: 'Root',
+        username: 'root',
+        id: 1,
+        state: 'active',
+        avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+        web_url: 'http://localhost:3000/root',
+      },
+      author_gravatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+      commit_url: 'http://localhost:3000/root/ci-mock/commit/c58647773a6b5faf066d4ad6ff2c9fbba5f180f6',
+      commit_path: '/root/ci-mock/commit/c58647773a6b5faf066d4ad6ff2c9fbba5f180f6',
+    },
+  },
+  merge_request: {
+    iid: 2,
+    path: '/root/ci-mock/merge_requests/2',
+  },
+  raw_path: '/root/ci-mock/builds/4757/raw',
+};
diff --git a/spec/javascripts/jobs/sidebar_detail_row_spec.js b/spec/javascripts/jobs/sidebar_detail_row_spec.js
new file mode 100644
index 00000000000..3ac65709c4a
--- /dev/null
+++ b/spec/javascripts/jobs/sidebar_detail_row_spec.js
@@ -0,0 +1,40 @@
+import Vue from 'vue';
+import sidebarDetailRow from '~/jobs/components/sidebar_detail_row.vue';
+
+describe('Sidebar detail row', () => {
+  let SidebarDetailRow;
+  let vm;
+
+  beforeEach(() => {
+    SidebarDetailRow = Vue.extend(sidebarDetailRow);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render no title', () => {
+    vm = new SidebarDetailRow({
+      propsData: {
+        value: 'this is the value',
+      },
+    }).$mount();
+
+    expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual('this is the value');
+  });
+
+  beforeEach(() => {
+    vm = new SidebarDetailRow({
+      propsData: {
+        title: 'this is the title',
+        value: 'this is the value',
+      },
+    }).$mount();
+  });
+
+  it('should render provided title and value', () => {
+    expect(
+      vm.$el.textContent.replace(/\s+/g, ' ').trim(),
+    ).toEqual('this is the title: this is the value');
+  });
+});
diff --git a/spec/javascripts/jobs/sidebar_details_block_spec.js b/spec/javascripts/jobs/sidebar_details_block_spec.js
new file mode 100644
index 00000000000..95532ef5382
--- /dev/null
+++ b/spec/javascripts/jobs/sidebar_details_block_spec.js
@@ -0,0 +1,111 @@
+import Vue from 'vue';
+import sidebarDetailsBlock from '~/jobs/components/sidebar_details_block.vue';
+import job from './mock_data';
+
+describe('Sidebar details block', () => {
+  let SidebarComponent;
+  let vm;
+
+  function trimWhitespace(element) {
+    return element.textContent.replace(/\s+/g, ' ').trim();
+  }
+
+  beforeEach(() => {
+    SidebarComponent = Vue.extend(sidebarDetailsBlock);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('when it is loading', () => {
+    it('should render a loading spinner', () => {
+      vm = new SidebarComponent({
+        propsData: {
+          job: {},
+          isLoading: true,
+        },
+      }).$mount();
+
+      expect(vm.$el.querySelector('.fa-spinner')).toBeDefined();
+    });
+  });
+
+  beforeEach(() => {
+    vm = new SidebarComponent({
+      propsData: {
+        job,
+        isLoading: false,
+      },
+    }).$mount();
+  });
+
+  describe('actions', () => {
+    it('should render link to new issue', () => {
+      expect(vm.$el.querySelector('.js-new-issue').getAttribute('href')).toEqual(job.new_issue_path);
+      expect(vm.$el.querySelector('.js-new-issue').textContent.trim()).toEqual('New issue');
+    });
+
+    it('should render link to retry job', () => {
+      expect(vm.$el.querySelector('.js-retry-job').getAttribute('href')).toEqual(job.retry_path);
+    });
+
+    it('should render link to cancel job', () => {
+      expect(vm.$el.querySelector('.js-cancel-job').getAttribute('href')).toEqual(job.cancel_path);
+    });
+  });
+
+  describe('information', () => {
+    it('should render merge request link', () => {
+      expect(
+        trimWhitespace(vm.$el.querySelector('.js-job-mr')),
+      ).toEqual('Merge Request: !2');
+
+      expect(
+        vm.$el.querySelector('.js-job-mr a').getAttribute('href'),
+      ).toEqual(job.merge_request.path);
+    });
+
+    it('should render job duration', () => {
+      expect(
+        trimWhitespace(vm.$el.querySelector('.js-job-duration')),
+      ).toEqual('Duration: 6 seconds');
+    });
+
+    it('should render erased date', () => {
+      expect(
+        trimWhitespace(vm.$el.querySelector('.js-job-erased')),
+      ).toEqual('Erased: 3 weeks ago');
+    });
+
+    it('should render finished date', () => {
+      expect(
+        trimWhitespace(vm.$el.querySelector('.js-job-finished')),
+      ).toEqual('Finished: 3 weeks ago');
+    });
+
+    it('should render queued date', () => {
+      expect(
+        trimWhitespace(vm.$el.querySelector('.js-job-queued')),
+      ).toEqual('Queued: 9 seconds');
+    });
+
+    it('should render runner ID', () => {
+      expect(
+        trimWhitespace(vm.$el.querySelector('.js-job-runner')),
+      ).toEqual('Runner: #1');
+    });
+
+    it('should render coverage', () => {
+      expect(
+        trimWhitespace(vm.$el.querySelector('.js-job-coverage')),
+      ).toEqual('Coverage: 20%');
+    });
+
+    it('should render tags', () => {
+      expect(
+        trimWhitespace(vm.$el.querySelector('.js-job-tags')),
+      ).toEqual('Tags: tag');
+    });
+  });
+});
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index e3938a77680..52cf217c25f 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -150,6 +150,14 @@ import '~/lib/utils/common_utils';
         const value = gl.utils.getParameterByName('fakeParameter');
         expect(value).toBe(null);
       });
+
+      it('should return valid paramentes if URL is provided', () => {
+        let value = gl.utils.getParameterByName('foo', 'http://cocteau.twins/?foo=bar');
+        expect(value).toBe('bar');
+
+        value = gl.utils.getParameterByName('manan', 'http://cocteau.twins/?foo=bar&manan=canchu');
+        expect(value).toBe('canchu');
+      });
     });
 
     describe('gl.utils.normalizedHeaders', () => {
diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js
index 7b910282cc8..9916d2c1e21 100644
--- a/spec/javascripts/merge_request_tabs_spec.js
+++ b/spec/javascripts/merge_request_tabs_spec.js
@@ -12,15 +12,6 @@ import '~/notes';
 import 'vendor/jquery.scrollTo';
 
 (function () {
-  // TODO: remove this hack!
-  // PhantomJS causes spyOn to panic because replaceState isn't "writable"
-  var phantomjs;
-  try {
-    phantomjs = !Object.getOwnPropertyDescriptor(window.history, 'replaceState').writable;
-  } catch (err) {
-    phantomjs = false;
-  }
-
   describe('MergeRequestTabs', function () {
     var stubLocation = {};
     var setLocation = function (stubs) {
@@ -37,11 +28,9 @@ import 'vendor/jquery.scrollTo';
       this.class = new gl.MergeRequestTabs({ stubLocation: stubLocation });
       setLocation();
 
-      if (!phantomjs) {
-        this.spies = {
-          history: spyOn(window.history, 'replaceState').and.callFake(function () {})
-        };
-      }
+      this.spies = {
+        history: spyOn(window.history, 'replaceState').and.callFake(function () {})
+      };
     });
 
     afterEach(function () {
@@ -208,11 +197,9 @@ import 'vendor/jquery.scrollTo';
           pathname: '/foo/bar/merge_requests/1'
         });
         newState = this.subject('commits');
-        if (!phantomjs) {
-          expect(this.spies.history).toHaveBeenCalledWith({
-            url: newState
-          }, document.title, newState);
-        }
+        expect(this.spies.history).toHaveBeenCalledWith({
+          url: newState
+        }, document.title, newState);
       });
 
       it('treats "show" like "notes"', function () {
diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js
index 24335614e09..c6f218e4dac 100644
--- a/spec/javascripts/notes_spec.js
+++ b/spec/javascripts/notes_spec.js
@@ -126,6 +126,7 @@ import '~/notes';
         const deferred = $.Deferred();
         spyOn($, 'ajax').and.returnValue(deferred.promise());
         spyOn(this.notes, 'revertNoteEditForm');
+        spyOn(this.notes, 'setupNewNote');
 
         $('.js-comment-button').click();
         deferred.resolve(noteEntity);
@@ -136,6 +137,46 @@ import '~/notes';
         this.notes.updateNote(updatedNote, $targetNote);
 
         expect(this.notes.revertNoteEditForm).toHaveBeenCalledWith($targetNote);
+        expect(this.notes.setupNewNote).toHaveBeenCalled();
+      });
+    });
+
+    describe('updateNoteTargetSelector', () => {
+      const hash = 'note_foo';
+      let $note;
+
+      beforeEach(() => {
+        $note = $(`<div id="${hash}"></div>`);
+        spyOn($note, 'filter').and.callThrough();
+        spyOn($note, 'toggleClass').and.callThrough();
+      });
+
+      it('sets target when hash matches', () => {
+        spyOn(gl.utils, 'getLocationHash');
+        gl.utils.getLocationHash.and.returnValue(hash);
+
+        Notes.updateNoteTargetSelector($note);
+
+        expect($note.filter).toHaveBeenCalledWith(`#${hash}`);
+        expect($note.toggleClass).toHaveBeenCalledWith('target', true);
+      });
+
+      it('unsets target when hash does not match', () => {
+        spyOn(gl.utils, 'getLocationHash');
+        gl.utils.getLocationHash.and.returnValue('note_doesnotexist');
+
+        Notes.updateNoteTargetSelector($note);
+
+        expect($note.toggleClass).toHaveBeenCalledWith('target', false);
+      });
+
+      it('unsets target when there is not a hash fragment anymore', () => {
+        spyOn(gl.utils, 'getLocationHash');
+        gl.utils.getLocationHash.and.returnValue(null);
+
+        Notes.updateNoteTargetSelector($note);
+
+        expect($note.toggleClass).toHaveBeenCalledWith('target', null);
       });
     });
 
@@ -189,9 +230,13 @@ import '~/notes';
           Notes.isUpdatedNote.and.returnValue(true);
           const $note = $('<div>');
           $notesList.find.and.returnValue($note);
+          const $newNote = $(note.html);
+          Notes.animateUpdateNote.and.returnValue($newNote);
+
           Notes.prototype.renderNote.call(notes, note, null, $notesList);
 
           expect(Notes.animateUpdateNote).toHaveBeenCalledWith(note.html, $note);
+          expect(notes.setupNewNote).toHaveBeenCalledWith($newNote);
         });
 
         describe('while editing', () => {
@@ -378,6 +423,23 @@ import '~/notes';
       });
     });
 
+    describe('putEditFormInPlace', () => {
+      it('should call gl.GLForm with GFM parameter passed through', () => {
+        spyOn(gl, 'GLForm');
+
+        const $el = jasmine.createSpyObj('$form', ['find', 'closest']);
+        $el.find.and.returnValue($('<div>'));
+        $el.closest.and.returnValue($('<div>'));
+
+        Notes.prototype.putEditFormInPlace.call({
+          getEditFormSelector: () => '',
+          enableGFM: true
+        }, $el);
+
+        expect(gl.GLForm).toHaveBeenCalledWith(jasmine.any(Object), true);
+      });
+    });
+
     describe('postComment & updateComment', () => {
       const sampleComment = 'foo';
       const updatedComment = 'bar';
@@ -461,6 +523,45 @@ import '~/notes';
       });
     });
 
+    describe('update comment with script tags', () => {
+      const sampleComment = '<script></script>';
+      const updatedComment = '<script></script>';
+      const note = {
+        id: 1234,
+        html: `<li class="note note-row-1234 timeline-entry" id="note_1234">
+                <div class="note-text">${sampleComment}</div>
+               </li>`,
+        note: sampleComment,
+        valid: true
+      };
+      let $form;
+      let $notesContainer;
+
+      beforeEach(() => {
+        this.notes = new Notes('', []);
+        window.gon.current_username = 'root';
+        window.gon.current_user_fullname = 'Administrator';
+        $form = $('form.js-main-target-form');
+        $notesContainer = $('ul.main-notes-list');
+        $form.find('textarea.js-note-text').html(sampleComment);
+      });
+
+      it('should not render a script tag', () => {
+        const deferred = $.Deferred();
+        spyOn($, 'ajax').and.returnValue(deferred.promise());
+        $('.js-comment-button').click();
+
+        deferred.resolve(note);
+        const $noteEl = $notesContainer.find(`#note_${note.id}`);
+        $noteEl.find('.js-note-edit').click();
+        $noteEl.find('textarea.js-note-text').html(updatedComment);
+        $noteEl.find('.js-comment-save-button').click();
+
+        const $updatedNoteEl = $notesContainer.find(`#note_${note.id}`).find('.js-task-list-container');
+        expect($updatedNoteEl.find('.note-text').text().trim()).toEqual('');
+      });
+    });
+
     describe('getFormData', () => {
       let $form;
       let sampleComment;
diff --git a/spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js b/spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js
index 845b371d90c..56c57d94798 100644
--- a/spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js
+++ b/spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js
@@ -95,7 +95,7 @@ describe('Interval Pattern Input Component', function () {
 
   describe('User Actions', function () {
     beforeEach(function () {
-      // For an unknown reason, Phantom.js doesn't trigger click events
+      // For an unknown reason, some browsers do not propagate click events
       // on radio buttons in a way Vue can register. So, we have to mount
       // to a fixture.
       setFixtures('<div id="my-mount"></div>');
diff --git a/spec/javascripts/pipelines/nav_controls_spec.js b/spec/javascripts/pipelines/nav_controls_spec.js
index 601eebce38a..f1697840fcd 100644
--- a/spec/javascripts/pipelines/nav_controls_spec.js
+++ b/spec/javascripts/pipelines/nav_controls_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import navControlsComp from '~/pipelines/components/nav_controls';
+import navControlsComp from '~/pipelines/components/nav_controls.vue';
 
 describe('Pipelines Nav Controls', () => {
   let NavControlsComponent;
diff --git a/spec/javascripts/pipelines/pipeline_url_spec.js b/spec/javascripts/pipelines/pipeline_url_spec.js
index 594a9856d2c..3c4b20a5f06 100644
--- a/spec/javascripts/pipelines/pipeline_url_spec.js
+++ b/spec/javascripts/pipelines/pipeline_url_spec.js
@@ -19,7 +19,7 @@ describe('Pipeline Url Component', () => {
       },
     }).$mount();
 
-    expect(component.$el.tagName).toEqual('TD');
+    expect(component.$el.getAttribute('class')).toContain('table-section');
   });
 
   it('should render a link the provided path and id', () => {
@@ -94,7 +94,7 @@ describe('Pipeline Url Component', () => {
       },
     }).$mount();
 
-    expect(component.$el.querySelector('.js-pipeline-url-lastest').textContent).toContain('latest');
+    expect(component.$el.querySelector('.js-pipeline-url-latest').textContent).toContain('latest');
     expect(component.$el.querySelector('.js-pipeline-url-yaml').textContent).toContain('yaml invalid');
     expect(component.$el.querySelector('.js-pipeline-url-stuck').textContent).toContain('stuck');
   });
diff --git a/spec/javascripts/pipelines/pipelines_actions_spec.js b/spec/javascripts/pipelines/pipelines_actions_spec.js
index c89dacbcd93..8a58b77f1e3 100644
--- a/spec/javascripts/pipelines/pipelines_actions_spec.js
+++ b/spec/javascripts/pipelines/pipelines_actions_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import pipelinesActionsComp from '~/pipelines/components/pipelines_actions';
+import pipelinesActionsComp from '~/pipelines/components/pipelines_actions.vue';
 
 describe('Pipelines Actions dropdown', () => {
   let component;
diff --git a/spec/javascripts/pipelines/pipelines_artifacts_spec.js b/spec/javascripts/pipelines/pipelines_artifacts_spec.js
index 9724b63d957..acb67d0ec21 100644
--- a/spec/javascripts/pipelines/pipelines_artifacts_spec.js
+++ b/spec/javascripts/pipelines/pipelines_artifacts_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import artifactsComp from '~/pipelines/components/pipelines_artifacts';
+import artifactsComp from '~/pipelines/components/pipelines_artifacts.vue';
 
 describe('Pipelines Artifacts dropdown', () => {
   let component;
diff --git a/spec/javascripts/pipelines/pipelines_spec.js b/spec/javascripts/pipelines/pipelines_spec.js
index 3a56156358b..c30abb2edb0 100644
--- a/spec/javascripts/pipelines/pipelines_spec.js
+++ b/spec/javascripts/pipelines/pipelines_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import pipelinesComp from '~/pipelines/pipelines';
+import pipelinesComp from '~/pipelines/components/pipelines.vue';
 import Store from '~/pipelines/stores/pipelines_store';
 
 describe('Pipelines', () => {
diff --git a/spec/javascripts/pipelines/time_ago_spec.js b/spec/javascripts/pipelines/time_ago_spec.js
index 24581e8c672..42b34c82f89 100644
--- a/spec/javascripts/pipelines/time_ago_spec.js
+++ b/spec/javascripts/pipelines/time_ago_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import timeAgo from '~/pipelines/components/time_ago';
+import timeAgo from '~/pipelines/components/time_ago.vue';
 
 describe('Timeago component', () => {
   let TimeAgo;
diff --git a/spec/javascripts/pipelines_spec.js b/spec/javascripts/pipelines_spec.js
index 81ac589f4e6..c08a73851be 100644
--- a/spec/javascripts/pipelines_spec.js
+++ b/spec/javascripts/pipelines_spec.js
@@ -1,10 +1,5 @@
 import Pipelines from '~/pipelines';
 
-// Fix for phantomJS
-if (!Element.prototype.matches && Element.prototype.webkitMatchesSelector) {
-  Element.prototype.matches = Element.prototype.webkitMatchesSelector;
-}
-
 describe('Pipelines', () => {
   preloadFixtures('static/pipeline_graph.html.raw');
 
diff --git a/spec/javascripts/test_bundle.js b/spec/javascripts/test_bundle.js
index 13827a26571..2c34402576b 100644
--- a/spec/javascripts/test_bundle.js
+++ b/spec/javascripts/test_bundle.js
@@ -51,7 +51,6 @@ if (process.env.BABEL_ENV === 'coverage') {
     './environments/environments_bundle.js',
     './filtered_search/filtered_search_bundle.js',
     './graphs/graphs_bundle.js',
-    './issuable/issuable_bundle.js',
     './issuable/time_tracking/time_tracking_bundle.js',
     './main.js',
     './merge_conflicts/merge_conflicts_bundle.js',
diff --git a/spec/javascripts/vue_shared/components/commit_spec.js b/spec/javascripts/vue_shared/components/commit_spec.js
index 050170a54e9..1c3188cdda2 100644
--- a/spec/javascripts/vue_shared/components/commit_spec.js
+++ b/spec/javascripts/vue_shared/components/commit_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import commitComp from '~/vue_shared/components/commit';
+import commitComp from '~/vue_shared/components/commit.vue';
 
 describe('Commit component', () => {
   let props;
@@ -22,7 +22,7 @@ describe('Commit component', () => {
         shortSha: 'b7836edd',
         title: 'Commit message',
         author: {
-          avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png',
+          avatar_url: 'https://gitlab.com/uploads/system/user/avatar/300478/avatar.png',
           web_url: 'https://gitlab.com/jschatz1',
           path: '/jschatz1',
           username: 'jschatz1',
@@ -45,7 +45,7 @@ describe('Commit component', () => {
         shortSha: 'b7836edd',
         title: 'Commit message',
         author: {
-          avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png',
+          avatar_url: 'https://gitlab.com/uploads/system/user/avatar/300478/avatar.png',
           web_url: 'https://gitlab.com/jschatz1',
           path: '/jschatz1',
           username: 'jschatz1',
diff --git a/spec/javascripts/vue_shared/components/header_ci_component_spec.js b/spec/javascripts/vue_shared/components/header_ci_component_spec.js
index 2b51c89f311..b4553acb341 100644
--- a/spec/javascripts/vue_shared/components/header_ci_component_spec.js
+++ b/spec/javascripts/vue_shared/components/header_ci_component_spec.js
@@ -43,6 +43,7 @@ describe('Header CI Component', () => {
           isLoading: false,
         },
       ],
+      hasSidebarButton: true,
     };
 
     vm = new HeaderCi({
@@ -86,8 +87,12 @@ describe('Header CI Component', () => {
     vm.actions[0].isLoading = true;
 
     Vue.nextTick(() => {
-      expect(vm.$el.querySelector('.btn .fa-spinner').getAttribute('style')).toEqual('');
+      expect(vm.$el.querySelector('.btn .fa-spinner').getAttribute('style')).toBeFalsy();
       done();
     });
   });
+
+  it('should render sidebar toggle button', () => {
+    expect(vm.$el.querySelector('.js-sidebar-build-toggle')).toBeDefined();
+  });
 });
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
index 67419cfcbea..9475ee28a03 100644
--- a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
+++ b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import tableRowComp from '~/vue_shared/components/pipelines_table_row';
+import tableRowComp from '~/vue_shared/components/pipelines_table_row.vue';
 
 describe('Pipelines Table Row', () => {
   const jsonFixtureName = 'pipelines/pipelines.json';
@@ -34,7 +34,7 @@ describe('Pipelines Table Row', () => {
 
   it('should render a table row', () => {
     component = buildComponent(pipeline);
-    expect(component.$el).toEqual('TR');
+    expect(component.$el.getAttribute('class')).toContain('gl-responsive-table-row');
   });
 
   describe('status column', () => {
@@ -44,13 +44,13 @@ describe('Pipelines Table Row', () => {
 
     it('should render a pipeline link', () => {
       expect(
-        component.$el.querySelector('td.commit-link a').getAttribute('href'),
+        component.$el.querySelector('.table-section.commit-link a').getAttribute('href'),
       ).toEqual(pipeline.path);
     });
 
     it('should render status text', () => {
       expect(
-        component.$el.querySelector('td.commit-link a').textContent,
+        component.$el.querySelector('.table-section.commit-link a').textContent,
       ).toContain(pipeline.details.status.text);
     });
   });
@@ -62,24 +62,24 @@ describe('Pipelines Table Row', () => {
 
     it('should render a pipeline link', () => {
       expect(
-        component.$el.querySelector('td:nth-child(2) a').getAttribute('href'),
+        component.$el.querySelector('.table-section:nth-child(2) a').getAttribute('href'),
       ).toEqual(pipeline.path);
     });
 
     it('should render pipeline ID', () => {
       expect(
-        component.$el.querySelector('td:nth-child(2) a > span').textContent,
+        component.$el.querySelector('.table-section:nth-child(2) a > span').textContent,
       ).toEqual(`#${pipeline.id}`);
     });
 
     describe('when a user is provided', () => {
       it('should render user information', () => {
         expect(
-          component.$el.querySelector('td:nth-child(2) a:nth-child(3)').getAttribute('href'),
+          component.$el.querySelector('.table-section:nth-child(2) a:nth-child(3)').getAttribute('href'),
         ).toEqual(pipeline.user.path);
 
         expect(
-          component.$el.querySelector('td:nth-child(2) img').getAttribute('data-original-title'),
+          component.$el.querySelector('.table-section:nth-child(2) img').getAttribute('data-original-title'),
         ).toEqual(pipeline.user.name);
       });
     });
@@ -142,7 +142,7 @@ describe('Pipelines Table Row', () => {
 
     it('should render an icon for each stage', () => {
       expect(
-        component.$el.querySelectorAll('td:nth-child(4) .js-builds-dropdown-button').length,
+        component.$el.querySelectorAll('.table-section:nth-child(4) .js-builds-dropdown-button').length,
       ).toEqual(pipeline.details.stages.length);
     });
   });
@@ -154,7 +154,7 @@ describe('Pipelines Table Row', () => {
 
     it('should render the provided actions', () => {
       expect(
-        component.$el.querySelectorAll('td:nth-child(6) ul li').length,
+        component.$el.querySelectorAll('.table-section:nth-child(6) ul li').length,
       ).toEqual(pipeline.details.manual_actions.length);
     });
   });
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_spec.js b/spec/javascripts/vue_shared/components/pipelines_table_spec.js
index 6cc178b8f1d..4c35d702004 100644
--- a/spec/javascripts/vue_shared/components/pipelines_table_spec.js
+++ b/spec/javascripts/vue_shared/components/pipelines_table_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import pipelinesTableComp from '~/vue_shared/components/pipelines_table';
+import pipelinesTableComp from '~/vue_shared/components/pipelines_table.vue';
 import '~/lib/utils/datetime_utility';
 
 describe('Pipelines Table', () => {
@@ -32,16 +32,14 @@ describe('Pipelines Table', () => {
     });
 
     it('should render a table', () => {
-      expect(component.$el).toEqual('TABLE');
+      expect(component.$el.getAttribute('class')).toContain('ci-table');
     });
 
     it('should render table head with correct columns', () => {
-      expect(component.$el.querySelector('th.js-pipeline-status').textContent).toEqual('Status');
-      expect(component.$el.querySelector('th.js-pipeline-info').textContent).toEqual('Pipeline');
-      expect(component.$el.querySelector('th.js-pipeline-commit').textContent).toEqual('Commit');
-      expect(component.$el.querySelector('th.js-pipeline-stages').textContent).toEqual('Stages');
-      expect(component.$el.querySelector('th.js-pipeline-date').textContent).toEqual('');
-      expect(component.$el.querySelector('th.js-pipeline-actions').textContent).toEqual('');
+      expect(component.$el.querySelector('.table-section.js-pipeline-status').textContent.trim()).toEqual('Status');
+      expect(component.$el.querySelector('.table-section.js-pipeline-info').textContent.trim()).toEqual('Pipeline');
+      expect(component.$el.querySelector('.table-section.js-pipeline-commit').textContent.trim()).toEqual('Commit');
+      expect(component.$el.querySelector('.table-section.js-pipeline-stages').textContent.trim()).toEqual('Stages');
     });
   });
 
@@ -53,7 +51,7 @@ describe('Pipelines Table', () => {
           service: {},
         },
       }).$mount();
-      expect(component.$el.querySelectorAll('tbody tr').length).toEqual(0);
+      expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(0);
     });
   });
 
@@ -67,7 +65,7 @@ describe('Pipelines Table', () => {
         },
       }).$mount();
 
-      expect(component.$el.querySelectorAll('tbody tr').length).toEqual(1);
+      expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(1);
     });
   });
 });
diff --git a/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js b/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js
index bf28019ef24..f3b4adc0b70 100644
--- a/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js
+++ b/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js
@@ -22,7 +22,7 @@ describe('Time ago with tooltip component', () => {
     }).$mount();
 
     expect(vm.$el.tagName).toEqual('TIME');
-    expect(vm.$el.classList.contains('js-timeago')).toEqual(true);
+    expect(vm.$el.classList.contains('js-vue-timeago')).toEqual(true);
     expect(
       vm.$el.getAttribute('data-original-title'),
     ).toEqual(gl.utils.formatDate('2017-05-08T14:57:39.781Z'));
@@ -44,17 +44,6 @@ describe('Time ago with tooltip component', () => {
     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: {