Merge branch 'master' into zj-auto-devops-table

49 files changed, 2289 insertions, 186 deletions

diff --git a/spec/javascripts/awards_handler_spec.js b/spec/javascripts/awards_handler_spec.js
index 8e056882108..a22b71fd1dc 100644
--- a/spec/javascripts/awards_handler_spec.js
+++ b/spec/javascripts/awards_handler_spec.js
@@ -25,9 +25,10 @@ import '~/lib/utils/common_utils';
   };
 
   describe('AwardsHandler', function() {
-    preloadFixtures('issues/issue_with_comment.html.raw');
+    preloadFixtures('merge_requests/diff_comment.html.raw');
     beforeEach(function(done) {
-      loadFixtures('issues/issue_with_comment.html.raw');
+      loadFixtures('merge_requests/diff_comment.html.raw');
+      $('body').data('page', 'projects:merge_requests:show');
       loadAwardsHandler(true).then((obj) => {
         awardsHandler = obj;
         spyOn(awardsHandler, 'postEmoji').and.callFake((button, url, emoji, cb) => cb());
@@ -139,7 +140,7 @@ import '~/lib/utils/common_utils';
     });
     describe('::getAwardUrl', function() {
       return it('returns the url for request', function() {
-        return expect(awardsHandler.getAwardUrl()).toBe('http://test.host/frontend-fixtures/issues-project/issues/1/toggle_award_emoji');
+        return expect(awardsHandler.getAwardUrl()).toBe('http://test.host/frontend-fixtures/merge-requests-project/merge_requests/1/toggle_award_emoji');
       });
     });
     describe('::addAward and ::checkMutuality', function() {
diff --git a/spec/javascripts/behaviors/quick_submit_spec.js b/spec/javascripts/behaviors/quick_submit_spec.js
index 6dc48f9a293..f62bf43adb9 100644
--- a/spec/javascripts/behaviors/quick_submit_spec.js
+++ b/spec/javascripts/behaviors/quick_submit_spec.js
@@ -1,119 +1,111 @@
-/* eslint-disable space-before-function-paren, no-var, no-return-assign, comma-dangle, jasmine/no-spec-dupes, new-cap, max-len */
-
 import '~/behaviors/quick_submit';
 
-(function() {
-  describe('Quick Submit behavior', function() {
-    var keydownEvent;
-    preloadFixtures('issues/open-issue.html.raw');
-    beforeEach(function() {
-      loadFixtures('issues/open-issue.html.raw');
-      $('form').submit(function(e) {
-        // Prevent a form submit from moving us off the testing page
-        return e.preventDefault();
-      });
-      this.spies = {
-        submit: spyOnEvent('form', 'submit')
-      };
+describe('Quick Submit behavior', () => {
+  const keydownEvent = (options = { keyCode: 13, metaKey: true }) => $.Event('keydown', options);
 
-      this.textarea = $('.js-quick-submit textarea').first();
-    });
-    it('does not respond to other keyCodes', function() {
-      this.textarea.trigger(keydownEvent({
-        keyCode: 32
-      }));
-      return expect(this.spies.submit).not.toHaveBeenTriggered();
-    });
-    it('does not respond to Enter alone', function() {
-      this.textarea.trigger(keydownEvent({
-        ctrlKey: false,
-        metaKey: false
-      }));
-      return expect(this.spies.submit).not.toHaveBeenTriggered();
-    });
-    it('does not respond to repeated events', function() {
-      this.textarea.trigger(keydownEvent({
-        repeat: true
-      }));
-      return expect(this.spies.submit).not.toHaveBeenTriggered();
-    });
-    it('disables input of type submit', function() {
-      const submitButton = $('.js-quick-submit input[type=submit]');
-      this.textarea.trigger(keydownEvent());
+  preloadFixtures('merge_requests/merge_request_with_task_list.html.raw');
 
-      expect(submitButton).toBeDisabled();
+  beforeEach(() => {
+    loadFixtures('merge_requests/merge_request_with_task_list.html.raw');
+    $('body').attr('data-page', 'projects:merge_requests:show');
+    $('form').submit((e) => {
+      // Prevent a form submit from moving us off the testing page
+      e.preventDefault();
     });
-    it('disables button of type submit', function() {
-      const submitButton = $('.js-quick-submit input[type=submit]');
-      this.textarea.trigger(keydownEvent());
+    this.spies = {
+      submit: spyOnEvent('form', 'submit'),
+    };
 
-      expect(submitButton).toBeDisabled();
-    });
-    it('only clicks one submit', function() {
-      const existingSubmit = $('.js-quick-submit input[type=submit]');
-      // Add an extra submit button
-      const newSubmit = $('<button type="submit">Submit it</button>');
-      newSubmit.insertAfter(this.textarea);
+    this.textarea = $('.js-quick-submit textarea').first();
+  });
 
-      const oldClick = spyOnEvent(existingSubmit, 'click');
-      const newClick = spyOnEvent(newSubmit, 'click');
+  it('does not respond to other keyCodes', () => {
+    this.textarea.trigger(keydownEvent({
+      keyCode: 32,
+    }));
+    expect(this.spies.submit).not.toHaveBeenTriggered();
+  });
 
-      this.textarea.trigger(keydownEvent());
+  it('does not respond to Enter alone', () => {
+    this.textarea.trigger(keydownEvent({
+      ctrlKey: false,
+      metaKey: false,
+    }));
+    expect(this.spies.submit).not.toHaveBeenTriggered();
+  });
 
-      expect(oldClick).not.toHaveBeenTriggered();
-      expect(newClick).toHaveBeenTriggered();
-    });
-    // We cannot stub `navigator.userAgent` for CI's `rake karma` task, so we'll
-    // only run the tests that apply to the current platform
-    if (navigator.userAgent.match(/Macintosh/)) {
-      it('responds to Meta+Enter', function() {
-        this.textarea.trigger(keydownEvent());
-        return expect(this.spies.submit).toHaveBeenTriggered();
-      });
-      it('excludes other modifier keys', function() {
-        this.textarea.trigger(keydownEvent({
-          altKey: true
-        }));
-        this.textarea.trigger(keydownEvent({
-          ctrlKey: true
-        }));
-        this.textarea.trigger(keydownEvent({
-          shiftKey: true
-        }));
-        return expect(this.spies.submit).not.toHaveBeenTriggered();
-      });
-    } else {
-      it('responds to Ctrl+Enter', function() {
+  it('does not respond to repeated events', () => {
+    this.textarea.trigger(keydownEvent({
+      repeat: true,
+    }));
+    expect(this.spies.submit).not.toHaveBeenTriggered();
+  });
+
+  it('disables input of type submit', () => {
+    const submitButton = $('.js-quick-submit input[type=submit]');
+    this.textarea.trigger(keydownEvent());
+
+    expect(submitButton).toBeDisabled();
+  });
+  it('disables button of type submit', () => {
+    const submitButton = $('.js-quick-submit input[type=submit]');
+    this.textarea.trigger(keydownEvent());
+
+    expect(submitButton).toBeDisabled();
+  });
+  it('only clicks one submit', () => {
+    const existingSubmit = $('.js-quick-submit input[type=submit]');
+    // Add an extra submit button
+    const newSubmit = $('<button type="submit">Submit it</button>');
+    newSubmit.insertAfter(this.textarea);
+
+    const oldClick = spyOnEvent(existingSubmit, 'click');
+    const newClick = spyOnEvent(newSubmit, 'click');
+
+    this.textarea.trigger(keydownEvent());
+
+    expect(oldClick).not.toHaveBeenTriggered();
+    expect(newClick).toHaveBeenTriggered();
+  });
+  // We cannot stub `navigator.userAgent` for CI's `rake karma` task, so we'll
+  // only run the tests that apply to the current platform
+  if (navigator.userAgent.match(/Macintosh/)) {
+    describe('In Macintosh', () => {
+      it('responds to Meta+Enter', () => {
         this.textarea.trigger(keydownEvent());
         return expect(this.spies.submit).toHaveBeenTriggered();
       });
-      it('excludes other modifier keys', function() {
+
+      it('excludes other modifier keys', () => {
         this.textarea.trigger(keydownEvent({
-          altKey: true
+          altKey: true,
         }));
         this.textarea.trigger(keydownEvent({
-          metaKey: true
+          ctrlKey: true,
         }));
         this.textarea.trigger(keydownEvent({
-          shiftKey: true
+          shiftKey: true,
         }));
         return expect(this.spies.submit).not.toHaveBeenTriggered();
       });
-    }
-    return keydownEvent = function(options) {
-      var defaults;
-      if (navigator.userAgent.match(/Macintosh/)) {
-        defaults = {
-          keyCode: 13,
-          metaKey: true
-        };
-      } else {
-        defaults = {
-          keyCode: 13,
-          ctrlKey: true
-        };
-      }
-      return $.Event('keydown', $.extend({}, defaults, options));
-    };
-  });
-}).call(window);
+    });
+  } else {
+    it('responds to Ctrl+Enter', () => {
+      this.textarea.trigger(keydownEvent());
+      return expect(this.spies.submit).toHaveBeenTriggered();
+    });
+
+    it('excludes other modifier keys', () => {
+      this.textarea.trigger(keydownEvent({
+        altKey: true,
+      }));
+      this.textarea.trigger(keydownEvent({
+        metaKey: true,
+      }));
+      this.textarea.trigger(keydownEvent({
+        shiftKey: true,
+      }));
+      return expect(this.spies.submit).not.toHaveBeenTriggered();
+    });
+  }
+});
diff --git a/spec/javascripts/fixtures/blob.rb b/spec/javascripts/fixtures/blob.rb
index 2dffc42b0ef..81e8a51a902 100644
--- a/spec/javascripts/fixtures/blob.rb
+++ b/spec/javascripts/fixtures/blob.rb
@@ -17,6 +17,10 @@ describe Projects::BlobController, '(JavaScript fixtures)', type: :controller do
     sign_in(admin)
   end
 
+  after do
+    remove_repository(project)
+  end
+
   it 'blob/show.html.raw' do |example|
     get(:show,
         namespace_id: project.namespace,
diff --git a/spec/javascripts/fixtures/branches.rb b/spec/javascripts/fixtures/branches.rb
index bb3bdf7c215..4fc072d2585 100644
--- a/spec/javascripts/fixtures/branches.rb
+++ b/spec/javascripts/fixtures/branches.rb
@@ -17,6 +17,10 @@ describe Projects::BranchesController, '(JavaScript fixtures)', type: :controlle
     sign_in(admin)
   end
 
+  after do
+    remove_repository(project)
+  end
+
   it 'branches/new_branch.html.raw' do |example|
     get :new,
       namespace_id: project.namespace.to_param,
diff --git a/spec/javascripts/fixtures/dashboard.rb b/spec/javascripts/fixtures/dashboard.rb
index 793ffa7c220..7fa351680c9 100644
--- a/spec/javascripts/fixtures/dashboard.rb
+++ b/spec/javascripts/fixtures/dashboard.rb
@@ -17,6 +17,10 @@ describe Dashboard::ProjectsController, '(JavaScript fixtures)', type: :controll
     sign_in(admin)
   end
 
+  after do
+    remove_repository(project)
+  end
+
   it 'dashboard/user-callout.html.raw' do |example|
     rendered = render_template('shared/_user_callout')
     store_frontend_fixture(rendered, example.description)
diff --git a/spec/javascripts/fixtures/deploy_keys.rb b/spec/javascripts/fixtures/deploy_keys.rb
index bea161c514f..580894ceaf9 100644
--- a/spec/javascripts/fixtures/deploy_keys.rb
+++ b/spec/javascripts/fixtures/deploy_keys.rb
@@ -16,6 +16,10 @@ describe Projects::DeployKeysController, '(JavaScript fixtures)', type: :control
     sign_in(admin)
   end
 
+  after do
+    remove_repository(project)
+  end
+
   render_views
 
   it 'deploy_keys/keys.json' do |example|
diff --git a/spec/javascripts/fixtures/issues.rb b/spec/javascripts/fixtures/issues.rb
index d3ad50af1b9..0ee2f82dfd6 100644
--- a/spec/javascripts/fixtures/issues.rb
+++ b/spec/javascripts/fixtures/issues.rb
@@ -17,6 +17,10 @@ describe Projects::IssuesController, '(JavaScript fixtures)', type: :controller
     sign_in(admin)
   end
 
+  after do
+    remove_repository(project)
+  end
+
   it 'issues/open-issue.html.raw' do |example|
     render_issue(example.description, create(:issue, project: project))
   end
diff --git a/spec/javascripts/fixtures/jobs.rb b/spec/javascripts/fixtures/jobs.rb
index 83a96797506..87d131dfe28 100644
--- a/spec/javascripts/fixtures/jobs.rb
+++ b/spec/javascripts/fixtures/jobs.rb
@@ -21,6 +21,10 @@ describe Projects::JobsController, '(JavaScript fixtures)', type: :controller do
     sign_in(admin)
   end
 
+  after do
+    remove_repository(project)
+  end
+
   it 'builds/build-with-artifacts.html.raw' do |example|
     get :show,
       namespace_id: project.namespace.to_param,
diff --git a/spec/javascripts/fixtures/labels.rb b/spec/javascripts/fixtures/labels.rb
index 814f065f3a4..b730d557e21 100644
--- a/spec/javascripts/fixtures/labels.rb
+++ b/spec/javascripts/fixtures/labels.rb
@@ -19,6 +19,10 @@ describe 'Labels (JavaScript fixtures)' do
     clean_frontend_fixtures('labels/')
   end
 
+  after do
+    remove_repository(project)
+  end
+
   describe Groups::LabelsController, '(JavaScript fixtures)', type: :controller do
     render_views
 
diff --git a/spec/javascripts/fixtures/merge_requests.rb b/spec/javascripts/fixtures/merge_requests.rb
index f97a5d2b5de..4bc2205e642 100644
--- a/spec/javascripts/fixtures/merge_requests.rb
+++ b/spec/javascripts/fixtures/merge_requests.rb
@@ -37,6 +37,10 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont
     sign_in(admin)
   end
 
+  after do
+    remove_repository(project)
+  end
+
   it 'merge_requests/merge_request_with_task_list.html.raw' do |example|
     create(:ci_build, :pending, pipeline: pipeline)
 
@@ -55,6 +59,11 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont
     render_merge_request(example.description, merge_request)
   end
 
+  it 'merge_requests/merge_request_with_comment.html.raw' do |example|
+    create(:note_on_merge_request, author: admin, project: project, noteable: merge_request, note: '- [ ] Task List Item')
+    render_merge_request(example.description, merge_request)
+  end
+
   private
 
   def render_merge_request(fixture_file_name, merge_request)
diff --git a/spec/javascripts/fixtures/merge_requests_diffs.rb b/spec/javascripts/fixtures/merge_requests_diffs.rb
index 6e0a97d2e3f..ddce00bc0fe 100644
--- a/spec/javascripts/fixtures/merge_requests_diffs.rb
+++ b/spec/javascripts/fixtures/merge_requests_diffs.rb
@@ -29,6 +29,10 @@ describe Projects::MergeRequests::DiffsController, '(JavaScript fixtures)', type
     sign_in(admin)
   end
 
+  after do
+    remove_repository(project)
+  end
+
   it 'merge_request_diffs/inline_changes_tab_with_comments.json' do |example|
     create(:diff_note_on_merge_request, project: project, author: admin, position: position, noteable: merge_request)
     create(:note_on_merge_request, author: admin, project: project, noteable: merge_request)
diff --git a/spec/javascripts/fixtures/projects.rb b/spec/javascripts/fixtures/projects.rb
index f09d44a49d1..2a100e7fab5 100644
--- a/spec/javascripts/fixtures/projects.rb
+++ b/spec/javascripts/fixtures/projects.rb
@@ -17,6 +17,10 @@ describe ProjectsController, '(JavaScript fixtures)', type: :controller do
     sign_in(admin)
   end
 
+  after do
+    remove_repository(project)
+  end
+
   it 'projects/dashboard.html.raw' do |example|
     get :show,
       namespace_id: project.namespace.to_param,
diff --git a/spec/javascripts/fixtures/prometheus_service.rb b/spec/javascripts/fixtures/prometheus_service.rb
index 7968c9425f2..f95f8038ffb 100644
--- a/spec/javascripts/fixtures/prometheus_service.rb
+++ b/spec/javascripts/fixtures/prometheus_service.rb
@@ -18,6 +18,10 @@ describe Projects::ServicesController, '(JavaScript fixtures)', type: :controlle
     sign_in(admin)
   end
 
+  after do
+    remove_repository(project)
+  end
+
   it 'services/prometheus/prometheus_service.html.raw' do |example|
     get :edit,
       namespace_id: namespace,
diff --git a/spec/javascripts/fixtures/raw.rb b/spec/javascripts/fixtures/raw.rb
index 25f5a3b0bb3..82770beb39b 100644
--- a/spec/javascripts/fixtures/raw.rb
+++ b/spec/javascripts/fixtures/raw.rb
@@ -10,6 +10,10 @@ describe 'Raw files', '(JavaScript fixtures)', type: :controller do
     clean_frontend_fixtures('blob/notebook/')
   end
 
+  after do
+    remove_repository(project)
+  end
+
   it 'blob/notebook/basic.json' do |example|
     blob = project.repository.blob_at('6d85bb69', 'files/ipython/basic.ipynb')
 
diff --git a/spec/javascripts/fixtures/services.rb b/spec/javascripts/fixtures/services.rb
index 80915c32a74..9280ed5a7f1 100644
--- a/spec/javascripts/fixtures/services.rb
+++ b/spec/javascripts/fixtures/services.rb
@@ -18,6 +18,10 @@ describe Projects::ServicesController, '(JavaScript fixtures)', type: :controlle
     sign_in(admin)
   end
 
+  after do
+    remove_repository(project)
+  end
+
   it 'services/edit_service.html.raw' do |example|
     get :edit,
       namespace_id: namespace,
diff --git a/spec/javascripts/fixtures/snippet.rb b/spec/javascripts/fixtures/snippet.rb
index 01bfb87b0c1..fa97f352e31 100644
--- a/spec/javascripts/fixtures/snippet.rb
+++ b/spec/javascripts/fixtures/snippet.rb
@@ -18,6 +18,10 @@ describe SnippetsController, '(JavaScript fixtures)', type: :controller do
     sign_in(admin)
   end
 
+  after do
+    remove_repository(project)
+  end
+
   it 'snippets/show.html.raw' do |example|
     get(:show, id: snippet.to_param)
 
diff --git a/spec/javascripts/fixtures/todos.rb b/spec/javascripts/fixtures/todos.rb
index ba630365c18..426b854fe8b 100644
--- a/spec/javascripts/fixtures/todos.rb
+++ b/spec/javascripts/fixtures/todos.rb
@@ -15,6 +15,10 @@ describe 'Todos (JavaScript fixtures)' do
     clean_frontend_fixtures('todos/')
   end
 
+  after do
+    remove_repository(project)
+  end
+
   describe Dashboard::TodosController, '(JavaScript fixtures)', type: :controller do
     render_views
 
diff --git a/spec/javascripts/fly_out_nav_spec.js b/spec/javascripts/fly_out_nav_spec.js
index 0847e463577..4588bf3d971 100644
--- a/spec/javascripts/fly_out_nav_spec.js
+++ b/spec/javascripts/fly_out_nav_spec.js
@@ -5,12 +5,14 @@ import {
   canShowActiveSubItems,
   mouseEnterTopItems,
   mouseLeaveTopItem,
+  getOpenMenu,
   setOpenMenu,
   mousePos,
   getHideSubItemsInterval,
   documentMouseMove,
   getHeaderHeight,
   setSidebar,
+  subItemsMouseLeave,
 } from '~/fly_out_nav';
 import bp from '~/breakpoints';
 
@@ -314,4 +316,29 @@ describe('Fly out sidebar navigation', () => {
       ).toBeTruthy();
     });
   });
+
+  describe('subItemsMouseLeave', () => {
+    beforeEach(() => {
+      el.innerHTML = '<div class="sidebar-sub-level-items" style="position: absolute;"></div>';
+
+      setOpenMenu(el.querySelector('.sidebar-sub-level-items'));
+    });
+
+    it('hides subMenu if element is not hovered', () => {
+      subItemsMouseLeave(el);
+
+      expect(
+        getOpenMenu(),
+      ).toBeNull();
+    });
+
+    it('does not hide subMenu if element is hovered', () => {
+      el.classList.add('is-over');
+      subItemsMouseLeave(el);
+
+      expect(
+        getOpenMenu(),
+      ).not.toBeNull();
+    });
+  });
 });
diff --git a/spec/javascripts/issue_show/components/app_spec.js b/spec/javascripts/issue_show/components/app_spec.js
index 81ce18bf2fb..3af26e2f28f 100644
--- a/spec/javascripts/issue_show/components/app_spec.js
+++ b/spec/javascripts/issue_show/components/app_spec.js
@@ -41,9 +41,9 @@ describe('Issuable output', () => {
         initialTitleText: '',
         initialDescriptionHtml: '',
         initialDescriptionText: '',
-        markdownPreviewUrl: '/',
-        markdownDocs: '/',
-        projectsAutocompleteUrl: '/',
+        markdownPreviewPath: '/',
+        markdownDocsPath: '/',
+        projectsAutocompletePath: '/',
         isConfidential: false,
         projectNamespace: '/',
         projectPath: '/',
diff --git a/spec/javascripts/issue_show/components/fields/description_spec.js b/spec/javascripts/issue_show/components/fields/description_spec.js
index df8189d9290..299f88e7778 100644
--- a/spec/javascripts/issue_show/components/fields/description_spec.js
+++ b/spec/javascripts/issue_show/components/fields/description_spec.js
@@ -25,8 +25,8 @@ describe('Description field component', () => {
     vm = new Component({
       el,
       propsData: {
-        markdownPreviewUrl: '/',
-        markdownDocs: '/',
+        markdownPreviewPath: '/',
+        markdownDocsPath: '/',
         formState: store.formState,
       },
     }).$mount();
diff --git a/spec/javascripts/issue_show/components/fields/project_move_spec.js b/spec/javascripts/issue_show/components/fields/project_move_spec.js
index 86d35c33ff4..8b6ed6a03a9 100644
--- a/spec/javascripts/issue_show/components/fields/project_move_spec.js
+++ b/spec/javascripts/issue_show/components/fields/project_move_spec.js
@@ -15,7 +15,7 @@ describe('Project move field component', () => {
     vm = new Component({
       propsData: {
         formState,
-        projectsAutocompleteUrl: '/autocomplete',
+        projectsAutocompletePath: '/autocomplete',
       },
     }).$mount();
 
diff --git a/spec/javascripts/issue_show/components/form_spec.js b/spec/javascripts/issue_show/components/form_spec.js
index 9a85223208c..d8af5287431 100644
--- a/spec/javascripts/issue_show/components/form_spec.js
+++ b/spec/javascripts/issue_show/components/form_spec.js
@@ -18,9 +18,9 @@ describe('Inline edit form component', () => {
           description: 'a',
           lockedWarningVisible: false,
         },
-        markdownPreviewUrl: '/',
-        markdownDocs: '/',
-        projectsAutocompleteUrl: '/',
+        markdownPreviewPath: '/',
+        markdownDocsPath: '/',
+        projectsAutocompletePath: '/',
         projectPath: '/',
         projectNamespace: '/',
       },
diff --git a/spec/javascripts/notes/components/issue_comment_form_spec.js b/spec/javascripts/notes/components/issue_comment_form_spec.js
new file mode 100644
index 00000000000..cca5ec887a3
--- /dev/null
+++ b/spec/javascripts/notes/components/issue_comment_form_spec.js
@@ -0,0 +1,134 @@
+import Vue from 'vue';
+import store from '~/notes/stores';
+import issueCommentForm from '~/notes/components/issue_comment_form.vue';
+import { loggedOutIssueData, notesDataMock, userDataMock, issueDataMock } from '../mock_data';
+import { keyboardDownEvent } from '../../issue_show/helpers';
+
+describe('issue_comment_form component', () => {
+  let vm;
+  const Component = Vue.extend(issueCommentForm);
+  let mountComponent;
+
+  beforeEach(() => {
+    mountComponent = () => new Component({
+      store,
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('user is logged in', () => {
+    beforeEach(() => {
+      store.dispatch('setUserData', userDataMock);
+      store.dispatch('setIssueData', issueDataMock);
+      store.dispatch('setNotesData', notesDataMock);
+
+      vm = mountComponent();
+    });
+
+    it('should render user avatar with link', () => {
+      expect(vm.$el.querySelector('.timeline-icon .user-avatar-link').getAttribute('href')).toEqual(userDataMock.path);
+    });
+
+    describe('textarea', () => {
+      it('should render textarea with placeholder', () => {
+        expect(
+          vm.$el.querySelector('.js-main-target-form textarea').getAttribute('placeholder'),
+        ).toEqual('Write a comment or drag your files here...');
+      });
+
+      it('should support quick actions', () => {
+        expect(
+          vm.$el.querySelector('.js-main-target-form textarea').getAttribute('data-supports-quick-actions'),
+        ).toEqual('true');
+      });
+
+      it('should link to markdown docs', () => {
+        const { markdownDocsPath } = notesDataMock;
+        expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual('Markdown');
+      });
+
+      it('should link to quick actions docs', () => {
+        const { quickActionsDocsPath } = notesDataMock;
+        expect(vm.$el.querySelector(`a[href="${quickActionsDocsPath}"]`).textContent.trim()).toEqual('quick actions');
+      });
+
+      describe('edit mode', () => {
+        it('should enter edit mode when arrow up is pressed', () => {
+          spyOn(vm, 'editCurrentUserLastNote').and.callThrough();
+          vm.$el.querySelector('.js-main-target-form textarea').value = 'Foo';
+          vm.$el.querySelector('.js-main-target-form textarea').dispatchEvent(keyboardDownEvent(38, true));
+
+          expect(vm.editCurrentUserLastNote).toHaveBeenCalled();
+        });
+      });
+
+      describe('event enter', () => {
+        it('should save note when cmd/ctrl+enter is pressed', () => {
+          spyOn(vm, 'handleSave').and.callThrough();
+          vm.$el.querySelector('.js-main-target-form textarea').value = 'Foo';
+          vm.$el.querySelector('.js-main-target-form textarea').dispatchEvent(keyboardDownEvent(13, true));
+
+          expect(vm.handleSave).toHaveBeenCalled();
+        });
+      });
+    });
+
+    describe('actions', () => {
+      it('should be possible to close the issue', () => {
+        expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual('Close issue');
+      });
+
+      it('should render comment button as disabled', () => {
+        expect(vm.$el.querySelector('.js-comment-submit-button').getAttribute('disabled')).toEqual('disabled');
+      });
+
+      it('should enable comment button if it has note', (done) => {
+        vm.note = 'Foo';
+        Vue.nextTick(() => {
+          expect(vm.$el.querySelector('.js-comment-submit-button').getAttribute('disabled')).toEqual(null);
+          done();
+        });
+      });
+
+      it('should update buttons texts when it has note', (done) => {
+        vm.note = 'Foo';
+        Vue.nextTick(() => {
+          expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual('Comment & close issue');
+          expect(vm.$el.querySelector('.js-note-discard')).toBeDefined();
+          done();
+        });
+      });
+    });
+
+    describe('issue is confidential', () => {
+      it('shows information warning', (done) => {
+        store.dispatch('setIssueData', Object.assign(issueDataMock, { confidential: true }));
+        Vue.nextTick(() => {
+          expect(vm.$el.querySelector('.confidential-issue-warning')).toBeDefined();
+          done();
+        });
+      });
+    });
+  });
+
+  describe('user is not logged in', () => {
+    beforeEach(() => {
+      store.dispatch('setUserData', null);
+      store.dispatch('setIssueData', loggedOutIssueData);
+      store.dispatch('setNotesData', notesDataMock);
+
+      vm = mountComponent();
+    });
+
+    it('should render signed out widget', () => {
+      expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual('Please register or sign in to reply');
+    });
+
+    it('should not render submission form', () => {
+      expect(vm.$el.querySelector('textarea')).toEqual(null);
+    });
+  });
+});
diff --git a/spec/javascripts/notes/components/issue_discussion_spec.js b/spec/javascripts/notes/components/issue_discussion_spec.js
new file mode 100644
index 00000000000..05c6b57f93e
--- /dev/null
+++ b/spec/javascripts/notes/components/issue_discussion_spec.js
@@ -0,0 +1,50 @@
+import Vue from 'vue';
+import store from '~/notes/stores';
+import issueDiscussion from '~/notes/components/issue_discussion.vue';
+import { issueDataMock, discussionMock, notesDataMock } from '../mock_data';
+
+describe('issue_discussion component', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(issueDiscussion);
+
+    store.dispatch('setIssueData', issueDataMock);
+    store.dispatch('setNotesData', notesDataMock);
+
+    vm = new Component({
+      store,
+      propsData: {
+        note: discussionMock,
+      },
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render user avatar', () => {
+    expect(vm.$el.querySelector('.user-avatar-link')).toBeDefined();
+  });
+
+  it('should render discussion header', () => {
+    expect(vm.$el.querySelector('.discussion-header')).toBeDefined();
+    expect(vm.$el.querySelectorAll('.notes li').length).toEqual(discussionMock.notes.length);
+  });
+
+  describe('actions', () => {
+    it('should render reply button', () => {
+      expect(vm.$el.querySelector('.js-vue-discussion-reply').textContent.trim()).toEqual('Reply...');
+    });
+
+    it('should toggle reply form', (done) => {
+      vm.$el.querySelector('.js-vue-discussion-reply').click();
+      Vue.nextTick(() => {
+        expect(vm.$refs.noteForm).toBeDefined();
+        expect(vm.isReplying).toEqual(true);
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/notes/components/issue_note_actions_spec.js b/spec/javascripts/notes/components/issue_note_actions_spec.js
new file mode 100644
index 00000000000..7bcc061f167
--- /dev/null
+++ b/spec/javascripts/notes/components/issue_note_actions_spec.js
@@ -0,0 +1,91 @@
+import Vue from 'vue';
+import store from '~/notes/stores';
+import issueActions from '~/notes/components/issue_note_actions.vue';
+import { userDataMock } from '../mock_data';
+
+describe('issse_note_actions component', () => {
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(issueActions);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('user is logged in', () => {
+    let props;
+
+    beforeEach(() => {
+      props = {
+        accessLevel: 'Master',
+        authorId: 26,
+        canDelete: true,
+        canEdit: true,
+        canReportAsAbuse: true,
+        noteId: 539,
+        reportAbusePath: '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_539&user_id=26',
+      };
+
+      store.dispatch('setUserData', userDataMock);
+
+      vm = new Component({
+        store,
+        propsData: props,
+      }).$mount();
+    });
+
+    it('should render access level badge', () => {
+      expect(vm.$el.querySelector('.note-role').textContent.trim()).toEqual(props.accessLevel);
+    });
+
+    it('should render emoji link', () => {
+      expect(vm.$el.querySelector('.js-add-award')).toBeDefined();
+    });
+
+    describe('actions dropdown', () => {
+      it('should be possible to edit the comment', () => {
+        expect(vm.$el.querySelector('.js-note-edit')).toBeDefined();
+      });
+
+      it('should be possible to report as abuse', () => {
+        expect(vm.$el.querySelector(`a[href="${props.reportAbusePath}"]`)).toBeDefined();
+      });
+
+      it('should be possible to delete comment', () => {
+        expect(vm.$el.querySelector('.js-note-delete')).toBeDefined();
+      });
+    });
+  });
+
+  describe('user is not logged in', () => {
+    let props;
+
+    beforeEach(() => {
+      store.dispatch('setUserData', {});
+      props = {
+        accessLevel: 'Master',
+        authorId: 26,
+        canDelete: false,
+        canEdit: false,
+        canReportAsAbuse: false,
+        noteId: 539,
+        reportAbusePath: '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_539&user_id=26',
+      };
+      vm = new Component({
+        store,
+        propsData: props,
+      }).$mount();
+    });
+
+    it('should not render emoji link', () => {
+      expect(vm.$el.querySelector('.js-add-award')).toEqual(null);
+    });
+
+    it('should not render actions dropdown', () => {
+      expect(vm.$el.querySelector('.more-actions')).toEqual(null);
+    });
+  });
+});
diff --git a/spec/javascripts/notes/components/issue_note_app_spec.js b/spec/javascripts/notes/components/issue_note_app_spec.js
new file mode 100644
index 00000000000..22e91c4c40f
--- /dev/null
+++ b/spec/javascripts/notes/components/issue_note_app_spec.js
@@ -0,0 +1,255 @@
+import Vue from 'vue';
+import issueNotesApp from '~/notes/components/issue_notes_app.vue';
+import service from '~/notes/services/issue_notes_service';
+import * as mockData from '../mock_data';
+
+describe('issue_note_app', () => {
+  let mountComponent;
+  let vm;
+
+  const individualNoteInterceptor = (request, next) => {
+    next(request.respondWith(JSON.stringify(mockData.individualNoteServerResponse), {
+      status: 200,
+    }));
+  };
+
+  const discussionNoteInterceptor = (request, next) => {
+    next(request.respondWith(JSON.stringify(mockData.discussionNoteServerResponse), {
+      status: 200,
+    }));
+  };
+
+  beforeEach(() => {
+    const IssueNotesApp = Vue.extend(issueNotesApp);
+
+    mountComponent = (data) => {
+      const props = data || {
+        issueData: mockData.issueDataMock,
+        notesData: mockData.notesDataMock,
+        userData: mockData.userDataMock,
+      };
+
+      return new IssueNotesApp({
+        propsData: props,
+      }).$mount();
+    };
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('set data', () => {
+    const responseInterceptor = (request, next) => {
+      next(request.respondWith(JSON.stringify([]), {
+        status: 200,
+      }));
+    };
+
+    beforeEach(() => {
+      Vue.http.interceptors.push(responseInterceptor);
+      vm = mountComponent();
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(Vue.http.interceptors, responseInterceptor);
+    });
+
+    it('should set notes data', () => {
+      expect(vm.$store.state.notesData).toEqual(mockData.notesDataMock);
+    });
+
+    it('should set issue data', () => {
+      expect(vm.$store.state.issueData).toEqual(mockData.issueDataMock);
+    });
+
+    it('should set user data', () => {
+      expect(vm.$store.state.userData).toEqual(mockData.userDataMock);
+    });
+
+    it('should fetch notes', () => {
+      expect(vm.$store.state.notes).toEqual([]);
+    });
+  });
+
+  describe('render', () => {
+    beforeEach(() => {
+      Vue.http.interceptors.push(individualNoteInterceptor);
+      vm = mountComponent();
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(Vue.http.interceptors, individualNoteInterceptor);
+    });
+
+    it('should render list of notes', (done) => {
+      const note = mockData.individualNoteServerResponse[0].notes[0];
+
+      setTimeout(() => {
+        expect(
+          vm.$el.querySelector('.main-notes-list .note-header-author-name').textContent.trim(),
+        ).toEqual(note.author.name);
+
+        expect(vm.$el.querySelector('.main-notes-list .note-text').innerHTML).toEqual(note.note_html);
+        done();
+      }, 0);
+    });
+
+    it('should render form', () => {
+      expect(vm.$el.querySelector('.js-main-target-form').tagName).toEqual('FORM');
+      expect(
+        vm.$el.querySelector('.js-main-target-form textarea').getAttribute('placeholder'),
+      ).toEqual('Write a comment or drag your files here...');
+    });
+
+    it('should render form comment button as disabled', () => {
+      expect(
+        vm.$el.querySelector('.js-note-new-discussion').getAttribute('disabled'),
+      ).toEqual('disabled');
+    });
+  });
+
+  describe('while fetching data', () => {
+    beforeEach(() => {
+      vm = mountComponent();
+    });
+
+    it('should render loading icon', () => {
+      expect(vm.$el.querySelector('.js-loading')).toBeDefined();
+    });
+
+    it('should render form', () => {
+      expect(vm.$el.querySelector('.js-main-target-form').tagName).toEqual('FORM');
+      expect(
+        vm.$el.querySelector('.js-main-target-form textarea').getAttribute('placeholder'),
+      ).toEqual('Write a comment or drag your files here...');
+    });
+  });
+
+  describe('update note', () => {
+    describe('individual note', () => {
+      beforeEach(() => {
+        Vue.http.interceptors.push(individualNoteInterceptor);
+        spyOn(service, 'updateNote').and.callFake(() => Promise.resolve());
+        vm = mountComponent();
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(Vue.http.interceptors, individualNoteInterceptor);
+      });
+
+      it('renders edit form', (done) => {
+        setTimeout(() => {
+          vm.$el.querySelector('.js-note-edit').click();
+          Vue.nextTick(() => {
+            expect(vm.$el.querySelector('.js-vue-issue-note-form')).toBeDefined();
+            done();
+          });
+        }, 0);
+      });
+
+      it('calls the service to update the note', (done) => {
+        setTimeout(() => {
+          vm.$el.querySelector('.js-note-edit').click();
+          Vue.nextTick(() => {
+            vm.$el.querySelector('.js-vue-issue-note-form').value = 'this is a note';
+            vm.$el.querySelector('.js-vue-issue-save').click();
+
+            expect(service.updateNote).toHaveBeenCalled();
+            done();
+          });
+        }, 0);
+      });
+    });
+
+    describe('dicussion note', () => {
+      beforeEach(() => {
+        Vue.http.interceptors.push(discussionNoteInterceptor);
+        spyOn(service, 'updateNote').and.callFake(() => Promise.resolve());
+        vm = mountComponent();
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(Vue.http.interceptors, discussionNoteInterceptor);
+      });
+
+      it('renders edit form', (done) => {
+        setTimeout(() => {
+          vm.$el.querySelector('.js-note-edit').click();
+          Vue.nextTick(() => {
+            expect(vm.$el.querySelector('.js-vue-issue-note-form')).toBeDefined();
+            done();
+          });
+        }, 0);
+      });
+
+      it('updates the note and resets the edit form', (done) => {
+        setTimeout(() => {
+          vm.$el.querySelector('.js-note-edit').click();
+          Vue.nextTick(() => {
+            vm.$el.querySelector('.js-vue-issue-note-form').value = 'this is a note';
+            vm.$el.querySelector('.js-vue-issue-save').click();
+
+            expect(service.updateNote).toHaveBeenCalled();
+            done();
+          });
+        }, 0);
+      });
+    });
+  });
+
+  describe('new note form', () => {
+    beforeEach(() => {
+      vm = mountComponent();
+    });
+
+    it('should render markdown docs url', () => {
+      const { markdownDocsPath } = mockData.notesDataMock;
+      expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual('Markdown');
+    });
+
+    it('should render quick action docs url', () => {
+      const { quickActionsDocsPath } = mockData.notesDataMock;
+      expect(vm.$el.querySelector(`a[href="${quickActionsDocsPath}"]`).textContent.trim()).toEqual('quick actions');
+    });
+  });
+
+  describe('edit form', () => {
+    beforeEach(() => {
+      Vue.http.interceptors.push(individualNoteInterceptor);
+      vm = mountComponent();
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(Vue.http.interceptors, individualNoteInterceptor);
+    });
+
+    it('should render markdown docs url', (done) => {
+      setTimeout(() => {
+        vm.$el.querySelector('.js-note-edit').click();
+        const { markdownDocsPath } = mockData.notesDataMock;
+
+        Vue.nextTick(() => {
+          expect(
+            vm.$el.querySelector(`.edit-note a[href="${markdownDocsPath}"]`).textContent.trim(),
+          ).toEqual('Markdown is supported');
+          done();
+        });
+      }, 0);
+    });
+
+    it('should not render quick actions docs url', (done) => {
+      setTimeout(() => {
+        vm.$el.querySelector('.js-note-edit').click();
+        const { quickActionsDocsPath } = mockData.notesDataMock;
+
+        Vue.nextTick(() => {
+          expect(
+            vm.$el.querySelector(`.edit-note a[href="${quickActionsDocsPath}"]`),
+          ).toEqual(null);
+          done();
+        });
+      }, 0);
+    });
+  });
+});
diff --git a/spec/javascripts/notes/components/issue_note_attachment_spec.js b/spec/javascripts/notes/components/issue_note_attachment_spec.js
new file mode 100644
index 00000000000..8f33b874ad6
--- /dev/null
+++ b/spec/javascripts/notes/components/issue_note_attachment_spec.js
@@ -0,0 +1,23 @@
+import Vue from 'vue';
+import issueNoteAttachment from '~/notes/components/issue_note_attachment.vue';
+
+describe('issue note attachment', () => {
+  it('should render properly', () => {
+    const props = {
+      attachment: {
+        filename: 'dk.png',
+        image: true,
+        url: '/dk.png',
+      },
+    };
+
+    const Component = Vue.extend(issueNoteAttachment);
+    const vm = new Component({
+      propsData: props,
+    }).$mount();
+
+    expect(vm.$el.classList.contains('note-attachment')).toBeTruthy();
+    expect(vm.$el.querySelector('img').src).toContain(props.attachment.url);
+    expect(vm.$el.querySelector('a').href).toContain(props.attachment.url);
+  });
+});
diff --git a/spec/javascripts/notes/components/issue_note_awards_list_spec.js b/spec/javascripts/notes/components/issue_note_awards_list_spec.js
new file mode 100644
index 00000000000..3b6c34f1494
--- /dev/null
+++ b/spec/javascripts/notes/components/issue_note_awards_list_spec.js
@@ -0,0 +1,56 @@
+import Vue from 'vue';
+import store from '~/notes/stores';
+import awardsNote from '~/notes/components/issue_note_awards_list.vue';
+import { issueDataMock, notesDataMock } from '../mock_data';
+
+describe('issue_note_awards_list component', () => {
+  let vm;
+  let awardsMock;
+
+  beforeEach(() => {
+    const Component = Vue.extend(awardsNote);
+
+    store.dispatch('setIssueData', issueDataMock);
+    store.dispatch('setNotesData', notesDataMock);
+    awardsMock = [
+      {
+        name: 'flag_tz',
+        user: { id: 1, name: 'Administrator', username: 'root' },
+      },
+      {
+        name: 'cartwheel_tone3',
+        user: { id: 12, name: 'Bobbie Stehr', username: 'erin' },
+      },
+    ];
+
+    vm = new Component({
+      store,
+      propsData: {
+        awards: awardsMock,
+        noteAuthorId: 2,
+        noteId: 545,
+        toggleAwardPath: '/gitlab-org/gitlab-ce/notes/545/toggle_award_emoji',
+      },
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render awarded emojis', () => {
+    expect(vm.$el.querySelector('.js-awards-block button [data-name="flag_tz"]')).toBeDefined();
+    expect(vm.$el.querySelector('.js-awards-block button [data-name="cartwheel_tone3"]')).toBeDefined();
+  });
+
+  it('should be possible to remove awareded emoji', () => {
+    spyOn(vm, 'handleAward').and.callThrough();
+    vm.$el.querySelector('.js-awards-block button').click();
+
+    expect(vm.handleAward).toHaveBeenCalledWith('flag_tz');
+  });
+
+  it('should be possible to add new emoji', () => {
+    expect(vm.$el.querySelector('.js-add-award')).toBeDefined();
+  });
+});
diff --git a/spec/javascripts/notes/components/issue_note_body_spec.js b/spec/javascripts/notes/components/issue_note_body_spec.js
new file mode 100644
index 00000000000..81f07ed47cc
--- /dev/null
+++ b/spec/javascripts/notes/components/issue_note_body_spec.js
@@ -0,0 +1,46 @@
+
+import Vue from 'vue';
+import store from '~/notes/stores';
+import noteBody from '~/notes/components/issue_note_body.vue';
+import { issueDataMock, notesDataMock, note } from '../mock_data';
+
+describe('issue_note_body component', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(noteBody);
+
+    store.dispatch('setIssueData', issueDataMock);
+    store.dispatch('setNotesData', notesDataMock);
+
+    vm = new Component({
+      store,
+      propsData: {
+        note,
+        canEdit: true,
+      },
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render the note', () => {
+    expect(vm.$el.querySelector('.note-text').innerHTML).toEqual(note.note_html);
+  });
+
+  it('should be render form if user is editing', (done) => {
+    vm.isEditing = true;
+
+    Vue.nextTick(() => {
+      expect(vm.$el.querySelector('textarea.js-task-list-field')).toBeDefined();
+      done();
+    });
+  });
+
+  it('should render awards list', () => {
+    expect(vm.$el.querySelector('.js-awards-block button [data-name="baseball"]')).toBeDefined();
+    expect(vm.$el.querySelector('.js-awards-block button [data-name="bath_tone3"]')).toBeDefined();
+  });
+});
diff --git a/spec/javascripts/notes/components/issue_note_edited_text_spec.js b/spec/javascripts/notes/components/issue_note_edited_text_spec.js
new file mode 100644
index 00000000000..6603241eb64
--- /dev/null
+++ b/spec/javascripts/notes/components/issue_note_edited_text_spec.js
@@ -0,0 +1,47 @@
+import Vue from 'vue';
+import issueNoteEditedText from '~/notes/components/issue_note_edited_text.vue';
+
+describe('issue_note_edited_text', () => {
+  let vm;
+  let props;
+
+  beforeEach(() => {
+    const Component = Vue.extend(issueNoteEditedText);
+    props = {
+      actionText: 'Edited',
+      className: 'foo-bar',
+      editedAt: '2017-08-04T09:52:31.062Z',
+      editedBy: {
+        avatar_url: 'path',
+        id: 1,
+        name: 'Root',
+        path: '/root',
+        state: 'active',
+        username: 'root',
+      },
+    };
+
+    vm = new Component({
+      propsData: props,
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render block with provided className', () => {
+    expect(vm.$el.className).toEqual(props.className);
+  });
+
+  it('should render provided actionText', () => {
+    expect(vm.$el.textContent).toContain(props.actionText);
+  });
+
+  it('should render provided user information', () => {
+    const authorLink = vm.$el.querySelector('.js-vue-author');
+
+    expect(authorLink.getAttribute('href')).toEqual(props.editedBy.path);
+    expect(authorLink.textContent.trim()).toEqual(props.editedBy.name);
+  });
+});
diff --git a/spec/javascripts/notes/components/issue_note_form_spec.js b/spec/javascripts/notes/components/issue_note_form_spec.js
new file mode 100644
index 00000000000..a90dbcb72b5
--- /dev/null
+++ b/spec/javascripts/notes/components/issue_note_form_spec.js
@@ -0,0 +1,112 @@
+import Vue from 'vue';
+import store from '~/notes/stores';
+import issueNoteForm from '~/notes/components/issue_note_form.vue';
+import { issueDataMock, notesDataMock } from '../mock_data';
+import { keyboardDownEvent } from '../../issue_show/helpers';
+
+describe('issue_note_form component', () => {
+  let vm;
+  let props;
+
+  beforeEach(() => {
+    const Component = Vue.extend(issueNoteForm);
+
+    store.dispatch('setIssueData', issueDataMock);
+    store.dispatch('setNotesData', notesDataMock);
+
+    props = {
+      isEditing: false,
+      noteBody: 'Magni suscipit eius consectetur enim et ex et commodi.',
+      noteId: 545,
+    };
+
+    vm = new Component({
+      store,
+      propsData: props,
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('conflicts editing', () => {
+    it('should show conflict message if note changes outside the component', (done) => {
+      vm.isEditing = true;
+      vm.noteBody = 'Foo';
+      const message = 'This comment has changed since you started editing, please review the updated comment to ensure information is not lost.';
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelector('.js-conflict-edit-warning').textContent.replace(/\s+/g, ' ').trim(),
+        ).toEqual(message);
+        done();
+      });
+    });
+  });
+
+  describe('form', () => {
+    it('should render text area with placeholder', () => {
+      expect(
+        vm.$el.querySelector('textarea').getAttribute('placeholder'),
+      ).toEqual('Write a comment or drag your files here...');
+    });
+
+    it('should link to markdown docs', () => {
+      const { markdownDocsPath } = notesDataMock;
+      expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual('Markdown');
+    });
+
+    describe('keyboard events', () => {
+      describe('up', () => {
+        it('should ender edit mode', () => {
+          spyOn(vm, 'editMyLastNote').and.callThrough();
+          vm.$el.querySelector('textarea').value = 'Foo';
+          vm.$el.querySelector('textarea').dispatchEvent(keyboardDownEvent(38, true));
+
+          expect(vm.editMyLastNote).toHaveBeenCalled();
+        });
+      });
+
+      describe('enter', () => {
+        it('should submit note', () => {
+          spyOn(vm, 'handleUpdate').and.callThrough();
+          vm.$el.querySelector('textarea').value = 'Foo';
+          vm.$el.querySelector('textarea').dispatchEvent(keyboardDownEvent(13, true));
+
+          expect(vm.handleUpdate).toHaveBeenCalled();
+        });
+      });
+    });
+
+    describe('actions', () => {
+      it('should be possible to cancel', (done) => {
+        spyOn(vm, 'cancelHandler').and.callThrough();
+        vm.isEditing = true;
+
+        Vue.nextTick(() => {
+          vm.$el.querySelector('.note-edit-cancel').click();
+
+          Vue.nextTick(() => {
+            expect(vm.cancelHandler).toHaveBeenCalled();
+            done();
+          });
+        });
+      });
+
+      it('should be possible to update the note', (done) => {
+        vm.isEditing = true;
+
+        Vue.nextTick(() => {
+          vm.$el.querySelector('textarea').value = 'Foo';
+          vm.$el.querySelector('.js-vue-issue-save').click();
+
+          Vue.nextTick(() => {
+            expect(vm.isSubmitting).toEqual(true);
+            done();
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/notes/components/issue_note_header_spec.js b/spec/javascripts/notes/components/issue_note_header_spec.js
new file mode 100644
index 00000000000..83ea18508ae
--- /dev/null
+++ b/spec/javascripts/notes/components/issue_note_header_spec.js
@@ -0,0 +1,94 @@
+import Vue from 'vue';
+import issueNoteHeader from '~/notes/components/issue_note_header.vue';
+import store from '~/notes/stores';
+
+describe('issue_note_header component', () => {
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(issueNoteHeader);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('individual note', () => {
+    beforeEach(() => {
+      vm = new Component({
+        store,
+        propsData: {
+          actionText: 'commented',
+          actionTextHtml: '',
+          author: {
+            avatar_url: null,
+            id: 1,
+            name: 'Root',
+            path: '/root',
+            state: 'active',
+            username: 'root',
+          },
+          createdAt: '2017-08-02T10:51:58.559Z',
+          includeToggle: false,
+          noteId: 1394,
+        },
+      }).$mount();
+    });
+
+    it('should render user information', () => {
+      expect(
+        vm.$el.querySelector('.note-header-author-name').textContent.trim(),
+      ).toEqual('Root');
+      expect(
+        vm.$el.querySelector('.note-header-info a').getAttribute('href'),
+      ).toEqual('/root');
+    });
+
+    it('should render timestamp link', () => {
+      expect(vm.$el.querySelector('a[href="#note_1394"]')).toBeDefined();
+    });
+  });
+
+  describe('discussion', () => {
+    beforeEach(() => {
+      vm = new Component({
+        store,
+        propsData: {
+          actionText: 'started a discussion',
+          actionTextHtml: '',
+          author: {
+            avatar_url: null,
+            id: 1,
+            name: 'Root',
+            path: '/root',
+            state: 'active',
+            username: 'root',
+          },
+          createdAt: '2017-08-02T10:51:58.559Z',
+          includeToggle: true,
+          noteId: 1395,
+        },
+      }).$mount();
+    });
+
+    it('should render toggle button', () => {
+      expect(vm.$el.querySelector('.js-vue-toggle-button')).toBeDefined();
+    });
+
+    it('should toggle the disucssion icon', (done) => {
+      expect(
+        vm.$el.querySelector('.js-vue-toggle-button i').classList.contains('fa-chevron-up'),
+      ).toEqual(true);
+
+      vm.$el.querySelector('.js-vue-toggle-button').click();
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelector('.js-vue-toggle-button i').classList.contains('fa-chevron-down'),
+        ).toEqual(true);
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/notes/components/issue_note_signed_out_widget_spec.js b/spec/javascripts/notes/components/issue_note_signed_out_widget_spec.js
new file mode 100644
index 00000000000..f20d9ce9268
--- /dev/null
+++ b/spec/javascripts/notes/components/issue_note_signed_out_widget_spec.js
@@ -0,0 +1,37 @@
+import Vue from 'vue';
+import issueNoteSignedOut from '~/notes/components/issue_note_signed_out_widget.vue';
+import store from '~/notes/stores';
+import { notesDataMock } from '../mock_data';
+
+describe('issue_note_signed_out_widget component', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(issueNoteSignedOut);
+    store.dispatch('setNotesData', notesDataMock);
+
+    vm = new Component({
+      store,
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render sign in link provided in the store', () => {
+    expect(
+      vm.$el.querySelector(`a[href="${notesDataMock.newSessionPath}"]`).textContent,
+    ).toEqual('sign in');
+  });
+
+  it('should render register link provided in the store', () => {
+    expect(
+      vm.$el.querySelector(`a[href="${notesDataMock.registerPath}"]`).textContent,
+    ).toEqual('register');
+  });
+
+  it('should render information text', () => {
+    expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual('Please register or sign in to reply');
+  });
+});
diff --git a/spec/javascripts/notes/components/issue_note_spec.js b/spec/javascripts/notes/components/issue_note_spec.js
new file mode 100644
index 00000000000..7ef85d5b4f0
--- /dev/null
+++ b/spec/javascripts/notes/components/issue_note_spec.js
@@ -0,0 +1,44 @@
+
+import Vue from 'vue';
+import store from '~/notes/stores';
+import issueNote from '~/notes/components/issue_note.vue';
+import { issueDataMock, notesDataMock, note } from '../mock_data';
+
+describe('issue_note', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(issueNote);
+
+    store.dispatch('setIssueData', issueDataMock);
+    store.dispatch('setNotesData', notesDataMock);
+
+    vm = new Component({
+      store,
+      propsData: {
+        note,
+      },
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render user information', () => {
+    expect(vm.$el.querySelector('.user-avatar-link img').getAttribute('src')).toEqual(note.author.avatar_url);
+  });
+
+  it('should render note header content', () => {
+    expect(vm.$el.querySelector('.note-header .note-header-author-name').textContent.trim()).toEqual(note.author.name);
+    expect(vm.$el.querySelector('.note-header .note-headline-meta').textContent.trim()).toContain('commented');
+  });
+
+  it('should render note actions', () => {
+    expect(vm.$el.querySelector('.note-actions')).toBeDefined();
+  });
+
+  it('should render issue body', () => {
+    expect(vm.$el.querySelector('.note-text').innerHTML).toEqual(note.note_html);
+  });
+});
diff --git a/spec/javascripts/notes/components/issue_placeholder_note_spec.js b/spec/javascripts/notes/components/issue_placeholder_note_spec.js
new file mode 100644
index 00000000000..6e5275087f3
--- /dev/null
+++ b/spec/javascripts/notes/components/issue_placeholder_note_spec.js
@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import issuePlaceholderNote from '~/notes/components/issue_placeholder_note.vue';
+import store from '~/notes/stores';
+import { userDataMock } from '../mock_data';
+
+describe('issue placeholder system note component', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(issuePlaceholderNote);
+    store.dispatch('setUserData', userDataMock);
+    vm = new Component({
+      store,
+      propsData: { note: { body: 'Foo' } },
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('user information', () => {
+    it('should render user avatar with link', () => {
+      expect(vm.$el.querySelector('.user-avatar-link').getAttribute('href')).toEqual(userDataMock.path);
+      expect(vm.$el.querySelector('.user-avatar-link img').getAttribute('src')).toEqual(userDataMock.avatar_url);
+    });
+  });
+
+  describe('note content', () => {
+    it('should render note header information', () => {
+      expect(vm.$el.querySelector('.note-header-info a').getAttribute('href')).toEqual(userDataMock.path);
+      expect(vm.$el.querySelector('.note-header-info .note-headline-light').textContent.trim()).toEqual(`@${userDataMock.username}`);
+    });
+
+    it('should render note body', () => {
+      expect(vm.$el.querySelector('.note-text p').textContent.trim()).toEqual('Foo');
+    });
+  });
+});
diff --git a/spec/javascripts/notes/components/issue_placeholder_system_note_spec.js b/spec/javascripts/notes/components/issue_placeholder_system_note_spec.js
new file mode 100644
index 00000000000..d508a49f710
--- /dev/null
+++ b/spec/javascripts/notes/components/issue_placeholder_system_note_spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import placeholderSystemNote from '~/notes/components/issue_placeholder_system_note.vue';
+
+describe('issue placeholder system note component', () => {
+  let mountComponent;
+  beforeEach(() => {
+    const PlaceholderSystemNote = Vue.extend(placeholderSystemNote);
+
+    mountComponent = props => new PlaceholderSystemNote({
+      propsData: {
+        note: {
+          body: props,
+        },
+      },
+    }).$mount();
+  });
+
+  it('should render system note placeholder with plain text', () => {
+    const vm = mountComponent('This is a placeholder');
+
+    expect(vm.$el.tagName).toEqual('LI');
+    expect(vm.$el.querySelector('.timeline-content em').textContent.trim()).toEqual('This is a placeholder');
+  });
+});
diff --git a/spec/javascripts/notes/components/issue_system_note_spec.js b/spec/javascripts/notes/components/issue_system_note_spec.js
new file mode 100644
index 00000000000..c317ce32716
--- /dev/null
+++ b/spec/javascripts/notes/components/issue_system_note_spec.js
@@ -0,0 +1,53 @@
+import Vue from 'vue';
+import issueSystemNote from '~/notes/components/issue_system_note.vue';
+import store from '~/notes/stores';
+
+describe('issue system note', () => {
+  let vm;
+  let props;
+
+  beforeEach(() => {
+    props = {
+      note: {
+        id: 1424,
+        author: {
+          id: 1,
+          name: 'Root',
+          username: 'root',
+          state: 'active',
+          avatar_url: 'path',
+          path: '/root',
+        },
+        note_html: '<p dir="auto">closed</p>',
+        system_note_icon_name: 'icon_status_closed',
+        created_at: '2017-08-02T10:51:58.559Z',
+      },
+    };
+
+    store.dispatch('setTargetNoteHash', `note_${props.note.id}`);
+
+    const Component = Vue.extend(issueSystemNote);
+    vm = new Component({
+      store,
+      propsData: props,
+    }).$mount();
+  });
+
+  it('should render a list item with correct id', () => {
+    expect(vm.$el.getAttribute('id')).toEqual(`note_${props.note.id}`);
+  });
+
+  it('should render target class is note is target note', () => {
+    expect(vm.$el.classList).toContain('target');
+  });
+
+  it('should render svg icon', () => {
+    expect(vm.$el.querySelector('.timeline-icon svg')).toBeDefined();
+  });
+
+  it('should render note header component', () => {
+    expect(
+      vm.$el.querySelector('.system-note-message').innerHTML,
+    ).toEqual(props.note.note_html);
+  });
+});
diff --git a/spec/javascripts/notes/mock_data.js b/spec/javascripts/notes/mock_data.js
new file mode 100644
index 00000000000..89ba3a002b7
--- /dev/null
+++ b/spec/javascripts/notes/mock_data.js
@@ -0,0 +1,449 @@
+/* eslint-disable */
+export const notesDataMock = {
+  discussionsPath: '/gitlab-org/gitlab-ce/issues/26/discussions.json',
+  lastFetchedAt: '1501862675',
+  markdownDocsPath: '/help/user/markdown',
+  newSessionPath: '/users/sign_in?redirect_to_referer=yes',
+  notesPath: '/gitlab-org/gitlab-ce/noteable/issue/98/notes',
+  quickActionsDocsPath: '/help/user/project/quick_actions',
+  registerPath: '/users/sign_in?redirect_to_referer=yes#register-pane',
+};
+
+export const userDataMock = {
+  avatar_url: 'mock_path',
+  id: 1,
+  name: 'Root',
+  path: '/root',
+  state: 'active',
+  username: 'root',
+};
+
+export const issueDataMock = {
+  assignees: [],
+  author_id: 1,
+  branch_name: null,
+  confidential: false,
+  create_note_path: '/gitlab-org/gitlab-ce/notes?target_id=98&target_type=issue',
+  created_at: '2017-02-07T10:11:18.395Z',
+  current_user: {
+    can_create_note: true,
+    can_update: true,
+  },
+  deleted_at: null,
+  description: '',
+  due_date: null,
+  human_time_estimate: null,
+  human_total_time_spent: null,
+  id: 98,
+  iid: 26,
+  labels: [],
+  lock_version: null,
+  milestone: null,
+  milestone_id: null,
+  moved_to_id: null,
+  preview_note_path: '/gitlab-org/gitlab-ce/preview_markdown?quick_actions_target_id=98&quick_actions_target_type=Issue',
+  project_id: 2,
+  state: 'opened',
+  time_estimate: 0,
+  title: '14',
+  total_time_spent: 0,
+  updated_at: '2017-08-04T09:53:01.226Z',
+  updated_by_id: 1,
+  web_url: '/gitlab-org/gitlab-ce/issues/26',
+};
+
+export const lastFetchedAt = '1501862675';
+
+export const individualNote = {
+  expanded: true,
+  id: '0fb4e0e3f9276e55ff32eb4195add694aece4edd',
+  individual_note: true,
+  notes: [{
+    id: 1390,
+    attachment: {
+      url: null,
+      filename: null,
+      image: false,
+    },
+    author: {
+      id: 1,
+      name: 'Root',
+      username: 'root',
+      state: 'active',
+      avatar_url: 'test',
+      path: '/root',
+    },
+    created_at: '2017-08-01T17: 09: 33.762Z',
+    updated_at: '2017-08-01T17: 09: 33.762Z',
+    system: false,
+    noteable_id: 98,
+    noteable_type: 'Issue',
+    type: null,
+    human_access: 'Owner',
+    note: 'sdfdsaf',
+    note_html: '<p dir=\'auto\'>sdfdsaf</p>',
+    current_user: { can_edit: true },
+    discussion_id: '0fb4e0e3f9276e55ff32eb4195add694aece4edd',
+    emoji_awardable: true,
+    award_emoji: [
+      { name: 'baseball', user: { id: 1, name: 'Root', username: 'root' } },
+      { name: 'art', user: { id: 1, name: 'Root', username: 'root' } },
+    ],
+    toggle_award_path: '/gitlab-org/gitlab-ce/notes/1390/toggle_award_emoji',
+    report_abuse_path: '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F26%23note_1390&user_id=1',
+    path: '/gitlab-org/gitlab-ce/notes/1390',
+  }],
+  reply_id: '0fb4e0e3f9276e55ff32eb4195add694aece4edd',
+};
+
+export const note = {
+  "id": 546,
+  "attachment": {
+    "url": null,
+    "filename": null,
+    "image": false
+  },
+  "author": {
+    "id": 1,
+    "name": "Administrator",
+    "username": "root",
+    "state": "active",
+    "avatar_url": "http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon",
+    "path": "/root"
+  },
+  "created_at": "2017-08-10T15:24:03.087Z",
+  "updated_at": "2017-08-10T15:24:03.087Z",
+  "system": false,
+  "noteable_id": 67,
+  "noteable_type": "Issue",
+  "noteable_iid": 7,
+  "type": null,
+  "human_access": "Owner",
+  "note": "Vel id placeat reprehenderit sit numquam.",
+  "note_html": "<p dir=\"auto\">Vel id placeat reprehenderit sit numquam.</p>",
+  "current_user": {
+    "can_edit": true
+  },
+  "discussion_id": "d3842a451b7f3d9a5dfce329515127b2d29a4cd0",
+  "emoji_awardable": true,
+  "award_emoji": [{
+    "name": "baseball",
+    "user": {
+      "id": 1,
+      "name": "Administrator",
+      "username": "root"
+    }
+  }, {
+    "name": "bath_tone3",
+    "user": {
+      "id": 1,
+      "name": "Administrator",
+      "username": "root"
+    }
+  }],
+  "toggle_award_path": "/gitlab-org/gitlab-ce/notes/546/toggle_award_emoji",
+  "report_abuse_path": "/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_546&user_id=1",
+  "path": "/gitlab-org/gitlab-ce/notes/546"
+  }
+
+export const discussionMock = {
+  id: '9e3bd2f71a01de45fd166e6719eb380ad9f270b1',
+  reply_id: '9e3bd2f71a01de45fd166e6719eb380ad9f270b1',
+  expanded: true,
+  notes: [{
+    id: 1395,
+    attachment: {
+      url: null,
+      filename: null,
+      image: false,
+    },
+    author: {
+      id: 1,
+      name: 'Root',
+      username: 'root',
+      state: 'active',
+      avatar_url: null,
+      path: '/root',
+    },
+    created_at: '2017-08-02T10:51:58.559Z',
+    updated_at: '2017-08-02T10:51:58.559Z',
+    system: false,
+    noteable_id: 98,
+    noteable_type: 'Issue',
+    type: 'DiscussionNote',
+    human_access: 'Owner',
+    note: 'THIS IS A DICUSSSION!',
+    note_html: '<p dir=\'auto\'>THIS IS A DICUSSSION!</p>',
+    current_user: {
+      can_edit: true,
+    },
+    discussion_id: '9e3bd2f71a01de45fd166e6719eb380ad9f270b1',
+    emoji_awardable: true,
+    award_emoji: [],
+    toggle_award_path: '/gitlab-org/gitlab-ce/notes/1395/toggle_award_emoji',
+    report_abuse_path: '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F26%23note_1395&user_id=1',
+    path: '/gitlab-org/gitlab-ce/notes/1395',
+  }, {
+    id: 1396,
+    attachment: {
+      url: null,
+      filename: null,
+      image: false,
+    },
+    author: {
+      id: 1,
+      name: 'Root',
+      username: 'root',
+      state: 'active',
+      avatar_url: null,
+      path: '/root',
+    },
+    created_at: '2017-08-02T10:56:50.980Z',
+    updated_at: '2017-08-03T14:19:35.691Z',
+    system: false,
+    noteable_id: 98,
+    noteable_type: 'Issue',
+    type: 'DiscussionNote',
+    human_access: 'Owner',
+    note: 'sadfasdsdgdsf',
+    note_html: '<p dir=\'auto\'>sadfasdsdgdsf</p>',
+    last_edited_at: '2017-08-03T14:19:35.691Z',
+    last_edited_by: {
+      id: 1,
+      name: 'Root',
+      username: 'root',
+      state: 'active',
+      avatar_url: null,
+      path: '/root',
+    },
+    current_user: {
+      can_edit: true,
+    },
+    discussion_id: '9e3bd2f71a01de45fd166e6719eb380ad9f270b1',
+    emoji_awardable: true,
+    award_emoji: [],
+    toggle_award_path: '/gitlab-org/gitlab-ce/notes/1396/toggle_award_emoji',
+    report_abuse_path: '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F26%23note_1396&user_id=1',
+    path: '/gitlab-org/gitlab-ce/notes/1396',
+  }, {
+    id: 1437,
+    attachment: {
+      url: null,
+      filename: null,
+      image: false,
+    },
+    author: {
+      id: 1,
+      name: 'Root',
+      username: 'root',
+      state: 'active',
+      avatar_url: null,
+      path: '/root',
+    },
+    created_at: '2017-08-03T18:11:18.780Z',
+    updated_at: '2017-08-04T09:52:31.062Z',
+    system: false,
+    noteable_id: 98,
+    noteable_type: 'Issue',
+    type: 'DiscussionNote',
+    human_access: 'Owner',
+    note: 'adsfasf Should disappear',
+    note_html: '<p dir=\'auto\'>adsfasf Should disappear</p>',
+    last_edited_at: '2017-08-04T09:52:31.062Z',
+    last_edited_by: {
+      id: 1,
+      name: 'Root',
+      username: 'root',
+      state: 'active',
+      avatar_url: null,
+      path: '/root',
+    },
+    current_user: {
+      can_edit: true,
+    },
+    discussion_id: '9e3bd2f71a01de45fd166e6719eb380ad9f270b1',
+    emoji_awardable: true,
+    award_emoji: [],
+    toggle_award_path: '/gitlab-org/gitlab-ce/notes/1437/toggle_award_emoji',
+    report_abuse_path: '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F26%23note_1437&user_id=1',
+    path: '/gitlab-org/gitlab-ce/notes/1437',
+  }],
+  individual_note: false,
+};
+
+export const loggedOutIssueData = {
+  "id": 98,
+  "iid": 26,
+  "author_id": 1,
+  "description": "",
+  "lock_version": 1,
+  "milestone_id": null,
+  "state": "opened",
+  "title": "asdsa",
+  "updated_by_id": 1,
+  "created_at": "2017-02-07T10:11:18.395Z",
+  "updated_at": "2017-08-08T10:22:51.564Z",
+  "deleted_at": null,
+  "time_estimate": 0,
+  "total_time_spent": 0,
+  "human_time_estimate": null,
+  "human_total_time_spent": null,
+  "milestone": null,
+  "labels": [],
+  "branch_name": null,
+  "confidential": false,
+  "assignees": [{
+    "id": 1,
+    "name": "Root",
+    "username": "root",
+    "state": "active",
+    "avatar_url": null,
+    "web_url": "http://localhost:3000/root"
+  }],
+  "due_date": null,
+  "moved_to_id": null,
+  "project_id": 2,
+  "web_url": "/gitlab-org/gitlab-ce/issues/26",
+  "current_user": {
+    "can_create_note": false,
+    "can_update": false
+  },
+  "create_note_path": "/gitlab-org/gitlab-ce/notes?target_id=98&target_type=issue",
+  "preview_note_path": "/gitlab-org/gitlab-ce/preview_markdown?quick_actions_target_id=98&quick_actions_target_type=Issue"
+}
+
+export const individualNoteServerResponse = [{
+  "id": "0fb4e0e3f9276e55ff32eb4195add694aece4edd",
+  "reply_id": "0fb4e0e3f9276e55ff32eb4195add694aece4edd",
+  "expanded": true,
+  "notes": [{
+    "id": 1390,
+    "attachment": {
+      "url": null,
+      "filename": null,
+      "image": false
+    },
+    "author": {
+      "id": 1,
+      "name": "Root",
+      "username": "root",
+      "state": "active",
+      "avatar_url": null,
+      "path": "/root"
+    },
+    "created_at": "2017-08-01T17:09:33.762Z",
+    "updated_at": "2017-08-01T17:09:33.762Z",
+    "system": false,
+    "noteable_id": 98,
+    "noteable_type": "Issue",
+    "type": null,
+    "human_access": "Owner",
+    "note": "sdfdsaf",
+    "note_html": "\u003cp dir=\"auto\"\u003esdfdsaf\u003c/p\u003e",
+    "current_user": {
+      "can_edit": true
+    },
+    "discussion_id": "0fb4e0e3f9276e55ff32eb4195add694aece4edd",
+    "emoji_awardable": true,
+    "award_emoji": [{
+      "name": "baseball",
+      "user": {
+        "id": 1,
+        "name": "Root",
+        "username": "root"
+      }
+    }, {
+      "name": "art",
+      "user": {
+        "id": 1,
+        "name": "Root",
+        "username": "root"
+      }
+    }],
+    "toggle_award_path": "/gitlab-org/gitlab-ce/notes/1390/toggle_award_emoji",
+    "report_abuse_path": "/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F26%23note_1390\u0026user_id=1",
+    "path": "/gitlab-org/gitlab-ce/notes/1390"
+  }],
+  "individual_note": true
+  }, {
+  "id": "70d5c92a4039a36c70100c6691c18c27e4b0a790",
+  "reply_id": "70d5c92a4039a36c70100c6691c18c27e4b0a790",
+  "expanded": true,
+  "notes": [{
+    "id": 1391,
+    "attachment": {
+      "url": null,
+      "filename": null,
+      "image": false
+    },
+    "author": {
+      "id": 1,
+      "name": "Root",
+      "username": "root",
+      "state": "active",
+      "avatar_url": null,
+      "path": "/root"
+    },
+    "created_at": "2017-08-02T10:51:38.685Z",
+    "updated_at": "2017-08-02T10:51:38.685Z",
+    "system": false,
+    "noteable_id": 98,
+    "noteable_type": "Issue",
+    "type": null,
+    "human_access": "Owner",
+    "note": "New note!",
+    "note_html": "\u003cp dir=\"auto\"\u003eNew note!\u003c/p\u003e",
+    "current_user": {
+      "can_edit": true
+    },
+    "discussion_id": "70d5c92a4039a36c70100c6691c18c27e4b0a790",
+    "emoji_awardable": true,
+    "award_emoji": [],
+    "toggle_award_path": "/gitlab-org/gitlab-ce/notes/1391/toggle_award_emoji",
+    "report_abuse_path": "/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F26%23note_1391\u0026user_id=1",
+    "path": "/gitlab-org/gitlab-ce/notes/1391"
+  }],
+  "individual_note": true
+}];
+
+export const discussionNoteServerResponse = [{
+  "id": "a3ed36e29b1957efb3b68c53e2d7a2b24b1df052",
+  "reply_id": "a3ed36e29b1957efb3b68c53e2d7a2b24b1df052",
+  "expanded": true,
+  "notes": [{
+    "id": 1471,
+    "attachment": {
+      "url": null,
+      "filename": null,
+      "image": false
+    },
+    "author": {
+      "id": 1,
+      "name": "Root",
+      "username": "root",
+      "state": "active",
+      "avatar_url": null,
+      "path": "/root"
+    },
+    "created_at": "2017-08-08T16:53:00.666Z",
+    "updated_at": "2017-08-08T16:53:00.666Z",
+    "system": false,
+    "noteable_id": 124,
+    "noteable_type": "Issue",
+    "noteable_iid": 29,
+    "type": "DiscussionNote",
+    "human_access": "Owner",
+    "note": "Adding a comment",
+    "note_html": "\u003cp dir=\"auto\"\u003eAdding a comment\u003c/p\u003e",
+    "current_user": {
+      "can_edit": true
+    },
+    "discussion_id": "a3ed36e29b1957efb3b68c53e2d7a2b24b1df052",
+    "emoji_awardable": true,
+    "award_emoji": [],
+    "toggle_award_path": "/gitlab-org/gitlab-ce/notes/1471/toggle_award_emoji",
+    "report_abuse_path": "/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F29%23note_1471\u0026user_id=1",
+    "path": "/gitlab-org/gitlab-ce/notes/1471"
+  }],
+  "individual_note": false
+}];
diff --git a/spec/javascripts/notes/stores/actions_spec.js b/spec/javascripts/notes/stores/actions_spec.js
new file mode 100644
index 00000000000..72d362acb2f
--- /dev/null
+++ b/spec/javascripts/notes/stores/actions_spec.js
@@ -0,0 +1,62 @@
+
+import * as actions from '~/notes/stores/actions';
+import testAction from './helpers';
+import { discussionMock, notesDataMock, userDataMock, issueDataMock, individualNote } from '../mock_data';
+
+describe('Actions Notes Store', () => {
+  describe('setNotesData', () => {
+    it('should set received notes data', (done) => {
+      testAction(actions.setNotesData, null, { notesData: {} }, [
+        { type: 'SET_NOTES_DATA', payload: notesDataMock },
+      ], done);
+    });
+  });
+
+  describe('setIssueData', () => {
+    it('should set received issue data', (done) => {
+      testAction(actions.setIssueData, null, { issueData: {} }, [
+        { type: 'SET_ISSUE_DATA', payload: issueDataMock },
+      ], done);
+    });
+  });
+
+  describe('setUserData', () => {
+    it('should set received user data', (done) => {
+      testAction(actions.setUserData, null, { userData: {} }, [
+        { type: 'SET_USER_DATA', payload: userDataMock },
+      ], done);
+    });
+  });
+
+  describe('setLastFetchedAt', () => {
+    it('should set received timestamp', (done) => {
+      testAction(actions.setLastFetchedAt, null, { lastFetchedAt: {} }, [
+        { type: 'SET_LAST_FETCHED_AT', payload: 'timestamp' },
+      ], done);
+    });
+  });
+
+  describe('setInitialNotes', () => {
+    it('should set initial notes', (done) => {
+      testAction(actions.setInitialNotes, null, { notes: [] }, [
+        { type: 'SET_INITIAL_NOTES', payload: [individualNote] },
+      ], done);
+    });
+  });
+
+  describe('setTargetNoteHash', () => {
+    it('should set target note hash', (done) => {
+      testAction(actions.setTargetNoteHash, null, { notes: [] }, [
+        { type: 'SET_TARGET_NOTE_HASH', payload: 'hash' },
+      ], done);
+    });
+  });
+
+  describe('toggleDiscussion', () => {
+    it('should toggle discussion', (done) => {
+      testAction(actions.toggleDiscussion, null, { notes: [discussionMock] }, [
+        { type: 'TOGGLE_DISCUSSION', payload: { discussionId: discussionMock.id } },
+      ], done);
+    });
+  });
+});
diff --git a/spec/javascripts/notes/stores/getters_spec.js b/spec/javascripts/notes/stores/getters_spec.js
new file mode 100644
index 00000000000..48ee1bf9a52
--- /dev/null
+++ b/spec/javascripts/notes/stores/getters_spec.js
@@ -0,0 +1,58 @@
+import * as getters from '~/notes/stores/getters';
+import { notesDataMock, userDataMock, issueDataMock, individualNote } from '../mock_data';
+
+describe('Getters Notes Store', () => {
+  let state;
+  beforeEach(() => {
+    state = {
+      notes: [individualNote],
+      targetNoteHash: 'hash',
+      lastFetchedAt: 'timestamp',
+
+      notesData: notesDataMock,
+      userData: userDataMock,
+      issueData: issueDataMock,
+    };
+  });
+  describe('notes', () => {
+    it('should return all notes in the store', () => {
+      expect(getters.notes(state)).toEqual([individualNote]);
+    });
+  });
+
+  describe('targetNoteHash', () => {
+    it('should return `targetNoteHash`', () => {
+      expect(getters.targetNoteHash(state)).toEqual('hash');
+    });
+  });
+
+  describe('getNotesData', () => {
+    it('should return all data in `notesData`', () => {
+      expect(getters.getNotesData(state)).toEqual(notesDataMock);
+    });
+  });
+
+  describe('getIssueData', () => {
+    it('should return all data in `issueData`', () => {
+      expect(getters.getIssueData(state)).toEqual(issueDataMock);
+    });
+  });
+
+  describe('getUserData', () => {
+    it('should return all data in `userData`', () => {
+      expect(getters.getUserData(state)).toEqual(userDataMock);
+    });
+  });
+
+  describe('notesById', () => {
+    it('should return the note for the given id', () => {
+      expect(getters.notesById(state)).toEqual({ 1390: individualNote.notes[0] });
+    });
+  });
+
+  describe('getCurrentUserLastNote', () => {
+    it('should return the last note of the current user', () => {
+      expect(getters.getCurrentUserLastNote(state)).toEqual(individualNote.notes[0]);
+    });
+  });
+});
diff --git a/spec/javascripts/notes/stores/helpers.js b/spec/javascripts/notes/stores/helpers.js
new file mode 100644
index 00000000000..2d386fe1da5
--- /dev/null
+++ b/spec/javascripts/notes/stores/helpers.js
@@ -0,0 +1,37 @@
+/* eslint-disable */
+
+/**
+ * helper for testing action with expected mutations
+ * https://vuex.vuejs.org/en/testing.html
+ */
+export default (action, payload, state, expectedMutations, done) => {
+  let count = 0;
+
+  // mock commit
+  const commit = (type, payload) => {
+    const mutation = expectedMutations[count];
+
+    try {
+      expect(mutation.type).to.equal(type);
+      if (payload) {
+        expect(mutation.payload).to.deep.equal(payload);
+      }
+    } catch (error) {
+      done(error);
+    }
+
+    count++;
+    if (count >= expectedMutations.length) {
+      done();
+    }
+  };
+
+  // call the action with mocked store and arguments
+  action({ commit, state }, payload);
+
+  // check if no mutations should have been dispatched
+  if (expectedMutations.length === 0) {
+    expect(count).to.equal(0);
+    done();
+  }
+};
diff --git a/spec/javascripts/notes/stores/mutation_spec.js b/spec/javascripts/notes/stores/mutation_spec.js
new file mode 100644
index 00000000000..a38f29c1e39
--- /dev/null
+++ b/spec/javascripts/notes/stores/mutation_spec.js
@@ -0,0 +1,207 @@
+import mutations from '~/notes/stores/mutations';
+import { note, discussionMock, notesDataMock, userDataMock, issueDataMock, individualNote } from '../mock_data';
+
+describe('Mutation Notes Store', () => {
+  describe('ADD_NEW_NOTE', () => {
+    it('should add a new note to an array of notes', () => {
+      const state = { notes: [] };
+      mutations.ADD_NEW_NOTE(state, note);
+
+      expect(state).toEqual({
+        notes: [{
+          expanded: true,
+          id: note.discussion_id,
+          individual_note: true,
+          notes: [note],
+          reply_id: note.discussion_id,
+        }],
+      });
+    });
+  });
+
+  describe('ADD_NEW_REPLY_TO_DISCUSSION', () => {
+    it('should add a reply to a specific discussion', () => {
+      const state = { notes: [discussionMock] };
+      const newReply = Object.assign({}, note, { discussion_id: discussionMock.id });
+      mutations.ADD_NEW_REPLY_TO_DISCUSSION(state, newReply);
+
+      expect(state.notes[0].notes.length).toEqual(4);
+    });
+  });
+
+  describe('DELETE_NOTE', () => {
+    it('should delete a note ', () => {
+      const state = { notes: [discussionMock] };
+      const toDelete = discussionMock.notes[0];
+      const lengthBefore = discussionMock.notes.length;
+
+      mutations.DELETE_NOTE(state, toDelete);
+
+      expect(state.notes[0].notes.length).toEqual(lengthBefore - 1);
+    });
+  });
+
+  describe('REMOVE_PLACEHOLDER_NOTES', () => {
+    it('should remove all placeholder notes in indivudal notes and discussion', () => {
+      const placeholderNote = Object.assign({}, individualNote, { isPlaceholderNote: true });
+      const state = { notes: [placeholderNote] };
+      mutations.REMOVE_PLACEHOLDER_NOTES(state);
+
+      expect(state.notes).toEqual([]);
+    });
+  });
+
+  describe('SET_NOTES_DATA', () => {
+    it('should set an object with notesData', () => {
+      const state = {
+        notesData: {},
+      };
+
+      mutations.SET_NOTES_DATA(state, notesDataMock);
+      expect(state.notesData).toEqual(notesDataMock);
+    });
+  });
+
+  describe('SET_ISSUE_DATA', () => {
+    it('should set the issue data', () => {
+      const state = {
+        issueData: {},
+      };
+
+      mutations.SET_ISSUE_DATA(state, issueDataMock);
+      expect(state.issueData).toEqual(issueDataMock);
+    });
+  });
+
+  describe('SET_USER_DATA', () => {
+    it('should set the user data', () => {
+      const state = {
+        userData: {},
+      };
+
+      mutations.SET_USER_DATA(state, userDataMock);
+      expect(state.userData).toEqual(userDataMock);
+    });
+  });
+
+  describe('SET_INITIAL_NOTES', () => {
+    it('should set the initial notes received', () => {
+      const state = {
+        notes: [],
+      };
+
+      mutations.SET_INITIAL_NOTES(state, [note]);
+      expect(state.notes).toEqual([note]);
+    });
+  });
+
+  describe('SET_LAST_FETCHED_AT', () => {
+    it('should set timestamp', () => {
+      const state = {
+        lastFetchedAt: [],
+      };
+
+      mutations.SET_LAST_FETCHED_AT(state, 'timestamp');
+      expect(state.lastFetchedAt).toEqual('timestamp');
+    });
+  });
+
+  describe('SET_TARGET_NOTE_HASH', () => {
+    it('should set the note hash', () => {
+      const state = {
+        targetNoteHash: [],
+      };
+
+      mutations.SET_TARGET_NOTE_HASH(state, 'hash');
+      expect(state.targetNoteHash).toEqual('hash');
+    });
+  });
+
+  describe('SHOW_PLACEHOLDER_NOTE', () => {
+    it('should set a placeholder note', () => {
+      const state = {
+        notes: [],
+      };
+      mutations.SHOW_PLACEHOLDER_NOTE(state, note);
+      expect(state.notes[0].isPlaceholderNote).toEqual(true);
+    });
+  });
+
+  describe('TOGGLE_AWARD', () => {
+    it('should add award if user has not reacted yet', () => {
+      const state = {
+        notes: [note],
+        userData: userDataMock,
+      };
+
+      const data = {
+        note,
+        awardName: 'cartwheel',
+      };
+
+      mutations.TOGGLE_AWARD(state, data);
+      const lastIndex = state.notes[0].award_emoji.length - 1;
+
+      expect(state.notes[0].award_emoji[lastIndex]).toEqual({
+        name: 'cartwheel',
+        user: { id: userDataMock.id, name: userDataMock.name, username: userDataMock.username },
+      });
+    });
+
+    it('should remove award if user already reacted', () => {
+      const state = {
+        notes: [note],
+        userData: {
+          id: 1,
+          name: 'Administrator',
+          username: 'root',
+        },
+      };
+
+      const data = {
+        note,
+        awardName: 'bath_tone3',
+      };
+      mutations.TOGGLE_AWARD(state, data);
+      expect(state.notes[0].award_emoji.length).toEqual(2);
+    });
+  });
+
+  describe('TOGGLE_DISCUSSION', () => {
+    it('should open a closed discussion', () => {
+      const discussion = Object.assign({}, discussionMock, { expanded: false });
+
+      const state = {
+        notes: [discussion],
+      };
+
+      mutations.TOGGLE_DISCUSSION(state, { discussionId: discussion.id });
+
+      expect(state.notes[0].expanded).toEqual(true);
+    });
+
+    it('should close a opened discussion', () => {
+      const state = {
+        notes: [discussionMock],
+      };
+
+      mutations.TOGGLE_DISCUSSION(state, { discussionId: discussionMock.id });
+
+      expect(state.notes[0].expanded).toEqual(false);
+    });
+  });
+
+  describe('UPDATE_NOTE', () => {
+    it('should update a note', () => {
+      const state = {
+        notes: [individualNote],
+      };
+
+      const updated = Object.assign({}, individualNote.notes[0], { note: 'Foo' });
+
+      mutations.UPDATE_NOTE(state, updated);
+
+      expect(state.notes[0].notes[0].note).toEqual('Foo');
+    });
+  });
+});
diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js
index 2c096ed08a8..8c5ad8914b0 100644
--- a/spec/javascripts/notes_spec.js
+++ b/spec/javascripts/notes_spec.js
@@ -32,14 +32,14 @@ import '~/notes';
 
   describe('Notes', function() {
     const FLASH_TYPE_ALERT = 'alert';
-    var commentsTemplate = 'issues/issue_with_comment.html.raw';
+    var commentsTemplate = 'merge_requests/merge_request_with_comment.html.raw';
     preloadFixtures(commentsTemplate);
 
     beforeEach(function () {
       loadFixtures(commentsTemplate);
       gl.utils.disableButtonIfEmptyField = _.noop;
       window.project_uploads_path = 'http://test.host/uploads';
-      $('body').data('page', 'projects:issues:show');
+      $('body').data('page', 'projects:merge_requets:show');
     });
 
     describe('task lists', function() {
@@ -53,17 +53,19 @@ import '~/notes';
       it('modifies the Markdown field', function() {
         const changeEvent = document.createEvent('HTMLEvents');
         changeEvent.initEvent('change', true, true);
-        $('input[type=checkbox]').attr('checked', true)[0].dispatchEvent(changeEvent);
-        expect($('.js-task-list-field').val()).toBe('- [x] Task List Item');
+        $('input[type=checkbox]').attr('checked', true)[1].dispatchEvent(changeEvent);
+
+        expect($('.js-task-list-field.original-task-list').val()).toBe('- [x] Task List Item');
       });
 
       it('submits an ajax request on tasklist:changed', function() {
         spyOn(jQuery, 'ajax').and.callFake(function(req) {
           expect(req.type).toBe('PATCH');
-          expect(req.url).toBe('http://test.host/frontend-fixtures/issues-project/notes/1');
+          expect(req.url).toBe('http://test.host/frontend-fixtures/merge-requests-project/merge_requests/1.json');
           return expect(req.data.note).not.toBe(null);
         });
-        $('.js-task-list-field').trigger('tasklist:changed');
+
+        $('.js-task-list-field.js-note-text').trigger('tasklist:changed');
       });
     });
 
diff --git a/spec/javascripts/pretty_time_spec.js b/spec/javascripts/pretty_time_spec.js
index de99e7e3894..0a6c479a95b 100644
--- a/spec/javascripts/pretty_time_spec.js
+++ b/spec/javascripts/pretty_time_spec.js
@@ -76,6 +76,87 @@ import '~/lib/utils/pretty_time';
         expect(aboveOneWeek.days).toBe(3);
         expect(aboveOneWeek.weeks).toBe(173);
       });
+
+      it('should correctly accept a custom param for hoursPerDay', function () {
+        const parser = prettyTime.parseSeconds;
+        const config = { hoursPerDay: 24 };
+
+        const aboveOneHour = parser(4800, config);
+
+        expect(aboveOneHour.minutes).toBe(20);
+        expect(aboveOneHour.hours).toBe(1);
+        expect(aboveOneHour.days).toBe(0);
+        expect(aboveOneHour.weeks).toBe(0);
+
+        const aboveOneDay = parser(110000, config);
+
+        expect(aboveOneDay.minutes).toBe(33);
+        expect(aboveOneDay.hours).toBe(6);
+        expect(aboveOneDay.days).toBe(1);
+        expect(aboveOneDay.weeks).toBe(0);
+
+        const aboveOneWeek = parser(25000000, config);
+
+        expect(aboveOneWeek.minutes).toBe(26);
+        expect(aboveOneWeek.hours).toBe(8);
+        expect(aboveOneWeek.days).toBe(4);
+
+        expect(aboveOneWeek.weeks).toBe(57);
+      });
+
+      it('should correctly accept a custom param for daysPerWeek', function () {
+        const parser = prettyTime.parseSeconds;
+        const config = { daysPerWeek: 7 };
+
+        const aboveOneHour = parser(4800, config);
+
+        expect(aboveOneHour.minutes).toBe(20);
+        expect(aboveOneHour.hours).toBe(1);
+        expect(aboveOneHour.days).toBe(0);
+        expect(aboveOneHour.weeks).toBe(0);
+
+        const aboveOneDay = parser(110000, config);
+
+        expect(aboveOneDay.minutes).toBe(33);
+        expect(aboveOneDay.hours).toBe(6);
+        expect(aboveOneDay.days).toBe(3);
+        expect(aboveOneDay.weeks).toBe(0);
+
+        const aboveOneWeek = parser(25000000, config);
+
+        expect(aboveOneWeek.minutes).toBe(26);
+        expect(aboveOneWeek.hours).toBe(0);
+        expect(aboveOneWeek.days).toBe(0);
+
+        expect(aboveOneWeek.weeks).toBe(124);
+      });
+
+      it('should correctly accept custom params for daysPerWeek and hoursPerDay', function () {
+        const parser = prettyTime.parseSeconds;
+        const config = { daysPerWeek: 55, hoursPerDay: 14 };
+
+        const aboveOneHour = parser(4800, config);
+
+        expect(aboveOneHour.minutes).toBe(20);
+        expect(aboveOneHour.hours).toBe(1);
+        expect(aboveOneHour.days).toBe(0);
+        expect(aboveOneHour.weeks).toBe(0);
+
+        const aboveOneDay = parser(110000, config);
+
+        expect(aboveOneDay.minutes).toBe(33);
+        expect(aboveOneDay.hours).toBe(2);
+        expect(aboveOneDay.days).toBe(2);
+        expect(aboveOneDay.weeks).toBe(0);
+
+        const aboveOneWeek = parser(25000000, config);
+
+        expect(aboveOneWeek.minutes).toBe(26);
+        expect(aboveOneWeek.hours).toBe(0);
+        expect(aboveOneWeek.days).toBe(1);
+
+        expect(aboveOneWeek.weeks).toBe(9);
+      });
     });
 
     describe('stringifyTime', function () {
diff --git a/spec/javascripts/shortcuts_issuable_spec.js b/spec/javascripts/shortcuts_issuable_spec.js
index 3515dfbc60b..a912e150e9b 100644
--- a/spec/javascripts/shortcuts_issuable_spec.js
+++ b/spec/javascripts/shortcuts_issuable_spec.js
@@ -1,78 +1,74 @@
-/* eslint-disable space-before-function-paren, no-return-assign, no-var, quotes */
 /* global ShortcutsIssuable */
 
 import '~/copy_as_gfm';
 import '~/shortcuts_issuable';
 
-(function() {
-  describe('ShortcutsIssuable', function() {
-    var fixtureName = 'issues/open-issue.html.raw';
-    preloadFixtures(fixtureName);
-    beforeEach(function() {
-      loadFixtures(fixtureName);
-      document.querySelector('.js-new-note-form').classList.add('js-main-target-form');
-      this.shortcut = new ShortcutsIssuable();
-    });
-    describe('replyWithSelectedText', function() {
-      var stubSelection;
-      // Stub window.gl.utils.getSelectedFragment to return a node with the provided HTML.
-      stubSelection = function(html) {
-        window.gl.utils.getSelectedFragment = function() {
-          var node = document.createElement('div');
-          node.innerHTML = html;
-          return node;
-        };
+describe('ShortcutsIssuable', () => {
+  const fixtureName = 'merge_requests/diff_comment.html.raw';
+  preloadFixtures(fixtureName);
+  beforeEach(() => {
+    loadFixtures(fixtureName);
+    document.querySelector('.js-new-note-form').classList.add('js-main-target-form');
+    this.shortcut = new ShortcutsIssuable(true);
+  });
+  describe('replyWithSelectedText', () => {
+    // Stub window.gl.utils.getSelectedFragment to return a node with the provided HTML.
+    const stubSelection = (html) => {
+      window.gl.utils.getSelectedFragment = () => {
+        const node = document.createElement('div');
+        node.innerHTML = html;
+        return node;
       };
-      beforeEach(function() {
-        this.selector = 'form.js-main-target-form textarea#note_note';
+    };
+    beforeEach(() => {
+      this.selector = '.js-main-target-form #note_note';
+    });
+    describe('with empty selection', () => {
+      it('does not return an error', () => {
+        this.shortcut.replyWithSelectedText(true);
+        expect($(this.selector).val()).toBe('');
       });
-      describe('with empty selection', function() {
-        it('does not return an error', function() {
-          this.shortcut.replyWithSelectedText();
-          expect($(this.selector).val()).toBe('');
-        });
-        it('triggers `focus`', function() {
-          this.shortcut.replyWithSelectedText();
-          expect(document.activeElement).toBe(document.querySelector(this.selector));
-        });
+      it('triggers `focus`', () => {
+        this.shortcut.replyWithSelectedText(true);
+        expect(document.activeElement).toBe(document.querySelector(this.selector));
       });
-      describe('with any selection', function() {
-        beforeEach(function() {
-          stubSelection('<p>Selected text.</p>');
-        });
-        it('leaves existing input intact', function() {
-          $(this.selector).val('This text was already here.');
-          expect($(this.selector).val()).toBe('This text was already here.');
-          this.shortcut.replyWithSelectedText();
-          expect($(this.selector).val()).toBe("This text was already here.\n\n> Selected text.\n\n");
-        });
-        it('triggers `input`', function() {
-          var triggered = false;
-          $(this.selector).on('input', function() {
-            triggered = true;
-          });
-          this.shortcut.replyWithSelectedText();
-          expect(triggered).toBe(true);
-        });
-        it('triggers `focus`', function() {
-          this.shortcut.replyWithSelectedText();
-          expect(document.activeElement).toBe(document.querySelector(this.selector));
-        });
+    });
+    describe('with any selection', () => {
+      beforeEach(() => {
+        stubSelection('<p>Selected text.</p>');
       });
-      describe('with a one-line selection', function() {
-        it('quotes the selection', function() {
-          stubSelection('<p>This text has been selected.</p>');
-          this.shortcut.replyWithSelectedText();
-          expect($(this.selector).val()).toBe("> This text has been selected.\n\n");
-        });
+      it('leaves existing input intact', () => {
+        $(this.selector).val('This text was already here.');
+        expect($(this.selector).val()).toBe('This text was already here.');
+        this.shortcut.replyWithSelectedText(true);
+        expect($(this.selector).val()).toBe('This text was already here.\n\n> Selected text.\n\n');
       });
-      describe('with a multi-line selection', function() {
-        it('quotes the selected lines as a group', function() {
-          stubSelection("<p>Selected line one.</p>\n\n<p>Selected line two.</p>\n\n<p>Selected line three.</p>");
-          this.shortcut.replyWithSelectedText();
-          expect($(this.selector).val()).toBe("> Selected line one.\n>\n> Selected line two.\n>\n> Selected line three.\n\n");
+      it('triggers `input`', () => {
+        let triggered = false;
+        $(this.selector).on('input', () => {
+          triggered = true;
         });
+        this.shortcut.replyWithSelectedText(true);
+        expect(triggered).toBe(true);
+      });
+      it('triggers `focus`', () => {
+        this.shortcut.replyWithSelectedText(true);
+        expect(document.activeElement).toBe(document.querySelector(this.selector));
+      });
+    });
+    describe('with a one-line selection', () => {
+      it('quotes the selection', () => {
+        stubSelection('<p>This text has been selected.</p>');
+        this.shortcut.replyWithSelectedText(true);
+        expect($(this.selector).val()).toBe('> This text has been selected.\n\n');
+      });
+    });
+    describe('with a multi-line selection', () => {
+      it('quotes the selected lines as a group', () => {
+        stubSelection('<p>Selected line one.</p>\n\n<p>Selected line two.</p>\n\n<p>Selected line three.</p>');
+        this.shortcut.replyWithSelectedText(true);
+        expect($(this.selector).val()).toBe('> Selected line one.\n>\n> Selected line two.\n>\n> Selected line three.\n\n');
       });
     });
   });
-}).call(window);
+});
diff --git a/spec/javascripts/shortcuts_spec.js b/spec/javascripts/shortcuts_spec.js
index 9b8373df29e..53e4c68beb3 100644
--- a/spec/javascripts/shortcuts_spec.js
+++ b/spec/javascripts/shortcuts_spec.js
@@ -1,6 +1,6 @@
 /* global Shortcuts */
 describe('Shortcuts', () => {
-  const fixtureName = 'issues/issue_with_comment.html.raw';
+  const fixtureName = 'merge_requests/diff_comment.html.raw';
   const createEvent = (type, target) => $.Event(type, {
     target,
   });
diff --git a/spec/javascripts/vue_shared/components/issue/confidential_issue_warning_spec.js b/spec/javascripts/vue_shared/components/issue/confidential_issue_warning_spec.js
new file mode 100644
index 00000000000..6df08f3ebe7
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/issue/confidential_issue_warning_spec.js
@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import confidentialIssue from '~/vue_shared/components/issue/confidential_issue_warning.vue';
+
+describe('Confidential Issue Warning Component', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(confidentialIssue);
+    vm = new Component().$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render confidential issue warning information', () => {
+    expect(vm.$el.querySelector('i').className).toEqual('fa fa-eye-slash');
+    expect(vm.$el.querySelector('span').textContent.trim()).toEqual('This is a confidential issue. Your comment will not be visible to the public.');
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/markdown/field_spec.js b/spec/javascripts/vue_shared/components/markdown/field_spec.js
index 291e19c9f3c..60a5c2ae74e 100644
--- a/spec/javascripts/vue_shared/components/markdown/field_spec.js
+++ b/spec/javascripts/vue_shared/components/markdown/field_spec.js
@@ -16,8 +16,8 @@ describe('Markdown field component', () => {
       },
       template: `
         <field-component
-          marodown-preview-url="/preview"
-          markdown-docs="/docs"
+          markdown-preview-path="/preview"
+          markdown-docs-path="/docs"
         >
           <textarea
             slot="textarea"
@@ -92,6 +92,7 @@ describe('Markdown field component', () => {
 
       it('renders GFM with jQuery', (done) => {
         spyOn($.fn, 'renderGFM');
+
         previewLink.click();
 
         setTimeout(() => {
@@ -100,7 +101,7 @@ describe('Markdown field component', () => {
           ).toHaveBeenCalled();
 
           done();
-        });
+        }, 0);
       });
     });
 
diff --git a/spec/javascripts/zen_mode_spec.js b/spec/javascripts/zen_mode_spec.js
index a225b04c47e..bd18f79cea7 100644
--- a/spec/javascripts/zen_mode_spec.js
+++ b/spec/javascripts/zen_mode_spec.js
@@ -8,7 +8,7 @@ import ZenMode from '~/zen_mode';
   var enterZen, escapeKeydown, exitZen;
 
   describe('ZenMode', function() {
-    var fixtureName = 'issues/open-issue.html.raw';
+    var fixtureName = 'merge_requests/merge_request_with_comment.html.raw';
     preloadFixtures(fixtureName);
     beforeEach(function() {
       loadFixtures(fixtureName);