Add latest changes from gitlab-org/gitlab@master

19 files changed, 1663 insertions, 8 deletions

diff --git a/spec/frontend/__mocks__/sortablejs/index.js b/spec/frontend/__mocks__/sortablejs/index.js
index a1166d21561..5039af54542 100644
--- a/spec/frontend/__mocks__/sortablejs/index.js
+++ b/spec/frontend/__mocks__/sortablejs/index.js
@@ -1,4 +1,4 @@
-import Sortablejs from 'sortablejs';
+const Sortablejs = jest.genMockFromModule('sortablejs');
 
 export default Sortablejs;
 export const Sortable = Sortablejs;
diff --git a/spec/frontend/boards/components/board_column_spec.js b/spec/frontend/boards/components/board_column_spec.js
new file mode 100644
index 00000000000..7cf6ec913b4
--- /dev/null
+++ b/spec/frontend/boards/components/board_column_spec.js
@@ -0,0 +1,172 @@
+import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import AxiosMockAdapter from 'axios-mock-adapter';
+
+import Board from '~/boards/components/board_column.vue';
+import List from '~/boards/models/list';
+import { ListType } from '~/boards/constants';
+import axios from '~/lib/utils/axios_utils';
+
+import { TEST_HOST } from 'helpers/test_constants';
+import { listObj } from 'jest/boards/mock_data';
+
+describe('Board Column Component', () => {
+  let wrapper;
+  let axiosMock;
+
+  beforeEach(() => {
+    window.gon = {};
+    axiosMock = new AxiosMockAdapter(axios);
+    axiosMock.onGet(`${TEST_HOST}/lists/1/issues`).reply(200, { issues: [] });
+  });
+
+  afterEach(() => {
+    axiosMock.restore();
+
+    wrapper.destroy();
+
+    localStorage.clear();
+  });
+
+  const createComponent = ({
+    listType = ListType.backlog,
+    collapsed = false,
+    withLocalStorage = true,
+  } = {}) => {
+    const boardId = '1';
+
+    const listMock = {
+      ...listObj,
+      list_type: listType,
+      collapsed,
+    };
+
+    if (listType === ListType.assignee) {
+      delete listMock.label;
+      listMock.user = {};
+    }
+
+    // Making List reactive
+    const list = Vue.observable(new List(listMock));
+
+    if (withLocalStorage) {
+      localStorage.setItem(
+        `boards.${boardId}.${list.type}.${list.id}.expanded`,
+        (!collapsed).toString(),
+      );
+    }
+
+    wrapper = shallowMount(Board, {
+      propsData: {
+        boardId,
+        disabled: false,
+        issueLinkBase: '/',
+        rootPath: '/',
+        list,
+      },
+    });
+  };
+
+  const isExpandable = () => wrapper.classes('is-expandable');
+  const isCollapsed = () => wrapper.classes('is-collapsed');
+
+  const findAddIssueButton = () => wrapper.find({ ref: 'newIssueBtn' });
+
+  describe('Add issue button', () => {
+    const hasNoAddButton = [ListType.promotion, ListType.blank, ListType.closed];
+    const hasAddButton = [ListType.backlog, ListType.label, ListType.milestone, ListType.assignee];
+
+    it.each(hasNoAddButton)('does not render when List Type is `%s`', listType => {
+      createComponent({ listType });
+
+      expect(findAddIssueButton().exists()).toBe(false);
+    });
+
+    it.each(hasAddButton)('does render when List Type is `%s`', listType => {
+      createComponent({ listType });
+
+      expect(findAddIssueButton().exists()).toBe(true);
+    });
+
+    it('has a test for each list type', () => {
+      Object.values(ListType).forEach(value => {
+        expect([...hasAddButton, ...hasNoAddButton]).toContain(value);
+      });
+    });
+
+    it('does render when logged out', () => {
+      createComponent();
+
+      expect(findAddIssueButton().exists()).toBe(true);
+    });
+  });
+
+  describe('Given different list types', () => {
+    it('is expandable when List Type is `backlog`', () => {
+      createComponent({ listType: ListType.backlog });
+
+      expect(isExpandable()).toBe(true);
+    });
+  });
+
+  describe('expanding / collapsing the column', () => {
+    it('does not collapse when clicking the header', () => {
+      createComponent();
+      expect(isCollapsed()).toBe(false);
+      wrapper.find('.board-header').trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(isCollapsed()).toBe(false);
+      });
+    });
+
+    it('collapses expanded Column when clicking the collapse icon', () => {
+      createComponent();
+      expect(wrapper.vm.list.isExpanded).toBe(true);
+      wrapper.find('.board-title-caret').trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(isCollapsed()).toBe(true);
+      });
+    });
+
+    it('expands collapsed Column when clicking the expand icon', () => {
+      createComponent({ collapsed: true });
+      expect(isCollapsed()).toBe(true);
+      wrapper.find('.board-title-caret').trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(isCollapsed()).toBe(false);
+      });
+    });
+
+    it("when logged in it calls list update and doesn't set localStorage", () => {
+      jest.spyOn(List.prototype, 'update');
+      window.gon.current_user_id = 1;
+
+      createComponent({ withLocalStorage: false });
+
+      wrapper.find('.board-title-caret').trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.vm.list.update).toHaveBeenCalledTimes(1);
+        expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.expanded`)).toBe(null);
+      });
+    });
+
+    it("when logged out it doesn't call list update and sets localStorage", () => {
+      jest.spyOn(List.prototype, 'update');
+
+      createComponent();
+
+      wrapper.find('.board-title-caret').trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.vm.list.update).toHaveBeenCalledTimes(0);
+        expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.expanded`)).toBe(
+          String(wrapper.vm.list.isExpanded),
+        );
+      });
+    });
+  });
+});
diff --git a/spec/frontend/boards/list_spec.js b/spec/frontend/boards/list_spec.js
index c0dd5afe498..b30281f8df5 100644
--- a/spec/frontend/boards/list_spec.js
+++ b/spec/frontend/boards/list_spec.js
@@ -56,7 +56,7 @@ describe('List model', () => {
       label: {
         id: 1,
         title: 'test',
-        color: 'red',
+        color: '#ff0000',
         text_color: 'white',
       },
     });
@@ -64,8 +64,7 @@ describe('List model', () => {
       expect(list.id).toBe(listObj.id);
       expect(list.type).toBe('label');
       expect(list.position).toBe(0);
-      expect(list.label.color).toBe('red');
-      expect(list.label.textColor).toBe('white');
+      expect(list.label).toEqual(listObj.label);
     });
   });
 
diff --git a/spec/frontend/boards/mock_data.js b/spec/frontend/boards/mock_data.js
index fa4154676a2..97d49de6f2e 100644
--- a/spec/frontend/boards/mock_data.js
+++ b/spec/frontend/boards/mock_data.js
@@ -15,7 +15,7 @@ export const listObj = {
   label: {
     id: 5000,
     title: 'Test',
-    color: 'red',
+    color: '#ff0000',
     description: 'testing;',
     textColor: 'white',
   },
@@ -30,7 +30,7 @@ export const listObjDuplicate = {
   label: {
     id: listObj.label.id,
     title: 'Test',
-    color: 'red',
+    color: '#ff0000',
     description: 'testing;',
   },
 };
diff --git a/spec/frontend/lib/utils/file_upload_spec.js b/spec/frontend/lib/utils/file_upload_spec.js
index 1255d6fc14f..1dff5d4f925 100644
--- a/spec/frontend/lib/utils/file_upload_spec.js
+++ b/spec/frontend/lib/utils/file_upload_spec.js
@@ -1,4 +1,4 @@
-import fileUpload from '~/lib/utils/file_upload';
+import fileUpload, { getFilename } from '~/lib/utils/file_upload';
 
 describe('File upload', () => {
   beforeEach(() => {
@@ -62,3 +62,15 @@ describe('File upload', () => {
     expect(input.click).not.toHaveBeenCalled();
   });
 });
+
+describe('getFilename', () => {
+  it('returns first value correctly', () => {
+    const event = {
+      clipboardData: {
+        getData: () => 'test.png\rtest.txt',
+      },
+    };
+
+    expect(getFilename(event)).toBe('test.png');
+  });
+});
diff --git a/spec/frontend/notes/components/diff_discussion_header_spec.js b/spec/frontend/notes/components/diff_discussion_header_spec.js
index 4c76f9c50fb..9162bee2078 100644
--- a/spec/frontend/notes/components/diff_discussion_header_spec.js
+++ b/spec/frontend/notes/components/diff_discussion_header_spec.js
@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils';
 import createStore from '~/notes/stores';
 import diffDiscussionHeader from '~/notes/components/diff_discussion_header.vue';
 
-import { discussionMock } from '../../../javascripts/notes/mock_data';
+import { discussionMock } from '../mock_data';
 import mockDiffFile from '../../diffs/mock_data/diff_discussions';
 
 const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json';
diff --git a/spec/frontend/notes/components/diff_with_note_spec.js b/spec/frontend/notes/components/diff_with_note_spec.js
new file mode 100644
index 00000000000..d6d42e1988d
--- /dev/null
+++ b/spec/frontend/notes/components/diff_with_note_spec.js
@@ -0,0 +1,86 @@
+import { mount } from '@vue/test-utils';
+import DiffWithNote from '~/notes/components/diff_with_note.vue';
+import { createStore } from '~/mr_notes/stores';
+
+const discussionFixture = 'merge_requests/diff_discussion.json';
+const imageDiscussionFixture = 'merge_requests/image_diff_discussion.json';
+
+describe('diff_with_note', () => {
+  let store;
+  let wrapper;
+
+  const selectors = {
+    get diffTable() {
+      return wrapper.find('.diff-content table');
+    },
+    get diffRows() {
+      return wrapper.findAll('.diff-content .line_holder');
+    },
+    get noteRow() {
+      return wrapper.find('.diff-content .notes_holder');
+    },
+  };
+
+  beforeEach(() => {
+    store = createStore();
+    store.replaceState({
+      ...store.state,
+      notes: {
+        noteableData: {
+          current_user: {},
+        },
+      },
+    });
+  });
+
+  describe('text diff', () => {
+    beforeEach(() => {
+      const diffDiscussion = getJSONFixture(discussionFixture)[0];
+
+      wrapper = mount(DiffWithNote, {
+        propsData: {
+          discussion: diffDiscussion,
+        },
+        store,
+      });
+    });
+
+    it('removes trailing "+" char', () => {
+      const richText = wrapper.vm.$el
+        .querySelectorAll('.line_holder')[4]
+        .querySelector('.line_content').textContent[0];
+
+      expect(richText).not.toEqual('+');
+    });
+
+    it('removes trailing "-" char', () => {
+      const richText = wrapper.vm.$el.querySelector('#LC13').parentNode.textContent[0];
+
+      expect(richText).not.toEqual('-');
+    });
+
+    it('shows text diff', () => {
+      expect(wrapper.classes('text-file')).toBe(true);
+      expect(selectors.diffTable.exists()).toBe(true);
+    });
+
+    it('shows diff lines', () => {
+      expect(selectors.diffRows.length).toBe(12);
+    });
+
+    it('shows notes row', () => {
+      expect(selectors.noteRow.exists()).toBe(true);
+    });
+  });
+
+  describe('image diff', () => {
+    beforeEach(() => {
+      const imageDiscussion = getJSONFixture(imageDiscussionFixture)[0];
+      wrapper = mount(DiffWithNote, { propsData: { discussion: imageDiscussion }, store });
+    });
+
+    it('shows image diff', () => {
+      expect(selectors.diffTable.exists()).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/notes/components/discussion_filter_spec.js b/spec/frontend/notes/components/discussion_filter_spec.js
new file mode 100644
index 00000000000..b8d2d721443
--- /dev/null
+++ b/spec/frontend/notes/components/discussion_filter_spec.js
@@ -0,0 +1,219 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+import { createLocalVue, mount } from '@vue/test-utils';
+import AxiosMockAdapter from 'axios-mock-adapter';
+
+import axios from '~/lib/utils/axios_utils';
+import notesModule from '~/notes/stores/modules';
+import DiscussionFilter from '~/notes/components/discussion_filter.vue';
+import { DISCUSSION_FILTERS_DEFAULT_VALUE, DISCUSSION_FILTER_TYPES } from '~/notes/constants';
+
+import { discussionFiltersMock, discussionMock } from '../mock_data';
+import { TEST_HOST } from 'jest/helpers/test_constants';
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+const DISCUSSION_PATH = `${TEST_HOST}/example`;
+
+describe('DiscussionFilter component', () => {
+  let wrapper;
+  let store;
+  let eventHub;
+  let mock;
+
+  const filterDiscussion = jest.fn();
+
+  const mountComponent = () => {
+    const discussions = [
+      {
+        ...discussionMock,
+        id: discussionMock.id,
+        notes: [{ ...discussionMock.notes[0], resolvable: true, resolved: true }],
+      },
+    ];
+
+    const defaultStore = { ...notesModule() };
+
+    store = new Vuex.Store({
+      ...defaultStore,
+      actions: {
+        ...defaultStore.actions,
+        filterDiscussion,
+      },
+    });
+
+    store.state.notesData.discussionsPath = DISCUSSION_PATH;
+
+    store.state.discussions = discussions;
+
+    return mount(DiscussionFilter, {
+      store,
+      propsData: {
+        filters: discussionFiltersMock,
+        selectedValue: DISCUSSION_FILTERS_DEFAULT_VALUE,
+      },
+      localVue,
+    });
+  };
+
+  beforeEach(() => {
+    mock = new AxiosMockAdapter(axios);
+
+    // We are mocking the discussions retrieval,
+    // as it doesn't matter for our tests here
+    mock.onGet(DISCUSSION_PATH).reply(200, '');
+    window.mrTabs = undefined;
+    wrapper = mountComponent();
+  });
+
+  afterEach(() => {
+    wrapper.vm.$destroy();
+    mock.restore();
+  });
+
+  it('renders the all filters', () => {
+    expect(wrapper.findAll('.dropdown-menu li').length).toBe(discussionFiltersMock.length);
+  });
+
+  it('renders the default selected item', () => {
+    expect(
+      wrapper
+        .find('#discussion-filter-dropdown')
+        .text()
+        .trim(),
+    ).toBe(discussionFiltersMock[0].title);
+  });
+
+  it('updates to the selected item', () => {
+    const filterItem = wrapper.find(
+      `.dropdown-menu li[data-filter-type="${DISCUSSION_FILTER_TYPES.HISTORY}"] button`,
+    );
+
+    filterItem.trigger('click');
+
+    expect(wrapper.vm.currentFilter.title).toBe(filterItem.text().trim());
+  });
+
+  it('only updates when selected filter changes', () => {
+    wrapper
+      .find(`.dropdown-menu li[data-filter-type="${DISCUSSION_FILTER_TYPES.ALL}"] button`)
+      .trigger('click');
+
+    expect(filterDiscussion).not.toHaveBeenCalled();
+  });
+
+  it('disables commenting when "Show history only" filter is applied', () => {
+    const filterItem = wrapper.find(
+      `.dropdown-menu li[data-filter-type="${DISCUSSION_FILTER_TYPES.HISTORY}"] button`,
+    );
+    filterItem.trigger('click');
+
+    expect(wrapper.vm.$store.state.commentsDisabled).toBe(true);
+  });
+
+  it('enables commenting when "Show history only" filter is not applied', () => {
+    const filterItem = wrapper.find(
+      `.dropdown-menu li[data-filter-type="${DISCUSSION_FILTER_TYPES.ALL}"] button`,
+    );
+    filterItem.trigger('click');
+
+    expect(wrapper.vm.$store.state.commentsDisabled).toBe(false);
+  });
+
+  it('renders a dropdown divider for the default filter', () => {
+    const defaultFilter = wrapper.findAll(
+      `.dropdown-menu li[data-filter-type="${DISCUSSION_FILTER_TYPES.ALL}"] > *`,
+    );
+
+    expect(defaultFilter.at(defaultFilter.length - 1).classes('dropdown-divider')).toBe(true);
+  });
+
+  describe('Merge request tabs', () => {
+    eventHub = new Vue();
+
+    beforeEach(() => {
+      window.mrTabs = {
+        eventHub,
+        currentTab: 'show',
+      };
+
+      wrapper = mountComponent();
+    });
+
+    afterEach(() => {
+      window.mrTabs = undefined;
+    });
+
+    it('only renders when discussion tab is active', done => {
+      eventHub.$emit('MergeRequestTabChange', 'commit');
+
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.isEmpty()).toBe(true);
+        done();
+      });
+    });
+  });
+
+  describe('URL with Links to notes', () => {
+    afterEach(() => {
+      window.location.hash = '';
+    });
+
+    it('updates the filter when the URL links to a note', done => {
+      window.location.hash = `note_${discussionMock.notes[0].id}`;
+      wrapper.vm.currentValue = discussionFiltersMock[2].value;
+      wrapper.vm.handleLocationHash();
+
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.currentValue).toBe(DISCUSSION_FILTERS_DEFAULT_VALUE);
+        done();
+      });
+    });
+
+    it('does not update the filter when the current filter is "Show all activity"', done => {
+      window.location.hash = `note_${discussionMock.notes[0].id}`;
+      wrapper.vm.handleLocationHash();
+
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.currentValue).toBe(DISCUSSION_FILTERS_DEFAULT_VALUE);
+        done();
+      });
+    });
+
+    it('only updates filter when the URL links to a note', done => {
+      window.location.hash = `testing123`;
+      wrapper.vm.handleLocationHash();
+
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.currentValue).toBe(DISCUSSION_FILTERS_DEFAULT_VALUE);
+        done();
+      });
+    });
+
+    it('fetches discussions when there is a hash', done => {
+      window.location.hash = `note_${discussionMock.notes[0].id}`;
+      wrapper.vm.currentValue = discussionFiltersMock[2].value;
+      jest.spyOn(wrapper.vm, 'selectFilter').mockImplementation(() => {});
+      wrapper.vm.handleLocationHash();
+
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.selectFilter).toHaveBeenCalled();
+        done();
+      });
+    });
+
+    it('does not fetch discussions when there is no hash', done => {
+      window.location.hash = '';
+      jest.spyOn(wrapper.vm, 'selectFilter').mockImplementation(() => {});
+      wrapper.vm.handleLocationHash();
+
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.selectFilter).not.toHaveBeenCalled();
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/frontend/notes/components/discussion_resolve_with_issue_button_spec.js b/spec/frontend/notes/components/discussion_resolve_with_issue_button_spec.js
new file mode 100644
index 00000000000..4348445f7ca
--- /dev/null
+++ b/spec/frontend/notes/components/discussion_resolve_with_issue_button_spec.js
@@ -0,0 +1,30 @@
+import { GlButton } from '@gitlab/ui';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { TEST_HOST } from 'spec/test_constants';
+import ResolveWithIssueButton from '~/notes/components/discussion_resolve_with_issue_button.vue';
+
+const localVue = createLocalVue();
+
+describe('ResolveWithIssueButton', () => {
+  let wrapper;
+  const url = `${TEST_HOST}/hello-world/`;
+
+  beforeEach(() => {
+    wrapper = shallowMount(ResolveWithIssueButton, {
+      localVue,
+      propsData: {
+        url,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('it should have a link with the provided link property as href', () => {
+    const button = wrapper.find(GlButton);
+
+    expect(button.attributes().href).toBe(url);
+  });
+});
diff --git a/spec/frontend/notes/components/note_actions/reply_button_spec.js b/spec/frontend/notes/components/note_actions/reply_button_spec.js
new file mode 100644
index 00000000000..720ab10b270
--- /dev/null
+++ b/spec/frontend/notes/components/note_actions/reply_button_spec.js
@@ -0,0 +1,29 @@
+import Vuex from 'vuex';
+import { createLocalVue, mount } from '@vue/test-utils';
+import ReplyButton from '~/notes/components/note_actions/reply_button.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('ReplyButton', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(localVue.extend(ReplyButton), {
+      localVue,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('emits startReplying on click', () => {
+    const button = wrapper.find({ ref: 'button' });
+
+    button.trigger('click');
+
+    expect(wrapper.emitted().startReplying).toBeTruthy();
+    expect(wrapper.emitted().startReplying.length).toBe(1);
+  });
+});
diff --git a/spec/frontend/notes/components/note_actions_spec.js b/spec/frontend/notes/components/note_actions_spec.js
new file mode 100644
index 00000000000..5d13f587ca7
--- /dev/null
+++ b/spec/frontend/notes/components/note_actions_spec.js
@@ -0,0 +1,160 @@
+import Vue from 'vue';
+import { shallowMount, createLocalVue, createWrapper } from '@vue/test-utils';
+import { TEST_HOST } from 'spec/test_constants';
+import createStore from '~/notes/stores';
+import noteActions from '~/notes/components/note_actions.vue';
+import { userDataMock } from '../mock_data';
+
+describe('noteActions', () => {
+  let wrapper;
+  let store;
+  let props;
+
+  const shallowMountNoteActions = propsData => {
+    const localVue = createLocalVue();
+    return shallowMount(localVue.extend(noteActions), {
+      store,
+      propsData,
+      localVue,
+    });
+  };
+
+  beforeEach(() => {
+    store = createStore();
+    props = {
+      accessLevel: 'Maintainer',
+      authorId: 26,
+      canDelete: true,
+      canEdit: true,
+      canAwardEmoji: true,
+      canReportAsAbuse: true,
+      noteId: '539',
+      noteUrl: `${TEST_HOST}/group/project/-/merge_requests/1#note_1`,
+      reportAbusePath: `${TEST_HOST}/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_539&user_id=26`,
+      showReply: false,
+    };
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('user is logged in', () => {
+    beforeEach(() => {
+      store.dispatch('setUserData', userDataMock);
+
+      wrapper = shallowMountNoteActions(props);
+    });
+
+    it('should render access level badge', () => {
+      expect(
+        wrapper
+          .find('.note-role')
+          .text()
+          .trim(),
+      ).toEqual(props.accessLevel);
+    });
+
+    it('should render emoji link', () => {
+      expect(wrapper.find('.js-add-award').exists()).toBe(true);
+      expect(wrapper.find('.js-add-award').attributes('data-position')).toBe('right');
+    });
+
+    describe('actions dropdown', () => {
+      it('should be possible to edit the comment', () => {
+        expect(wrapper.find('.js-note-edit').exists()).toBe(true);
+      });
+
+      it('should be possible to report abuse to admin', () => {
+        expect(wrapper.find(`a[href="${props.reportAbusePath}"]`).exists()).toBe(true);
+      });
+
+      it('should be possible to copy link to a note', () => {
+        expect(wrapper.find('.js-btn-copy-note-link').exists()).toBe(true);
+      });
+
+      it('should not show copy link action when `noteUrl` prop is empty', done => {
+        wrapper.setProps({
+          ...props,
+          noteUrl: '',
+        });
+
+        Vue.nextTick()
+          .then(() => {
+            expect(wrapper.find('.js-btn-copy-note-link').exists()).toBe(false);
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+
+      it('should be possible to delete comment', () => {
+        expect(wrapper.find('.js-note-delete').exists()).toBe(true);
+      });
+
+      it('closes tooltip when dropdown opens', done => {
+        wrapper.find('.more-actions-toggle').trigger('click');
+
+        const rootWrapper = createWrapper(wrapper.vm.$root);
+        Vue.nextTick()
+          .then(() => {
+            const emitted = Object.keys(rootWrapper.emitted());
+
+            expect(emitted).toEqual(['bv::hide::tooltip']);
+            done();
+          })
+          .catch(done.fail);
+      });
+    });
+  });
+
+  describe('user is not logged in', () => {
+    beforeEach(() => {
+      store.dispatch('setUserData', {});
+      wrapper = shallowMountNoteActions({
+        ...props,
+        canDelete: false,
+        canEdit: false,
+        canAwardEmoji: false,
+        canReportAsAbuse: false,
+      });
+    });
+
+    it('should not render emoji link', () => {
+      expect(wrapper.find('.js-add-award').exists()).toBe(false);
+    });
+
+    it('should not render actions dropdown', () => {
+      expect(wrapper.find('.more-actions').exists()).toBe(false);
+    });
+  });
+
+  describe('for showReply = true', () => {
+    beforeEach(() => {
+      wrapper = shallowMountNoteActions({
+        ...props,
+        showReply: true,
+      });
+    });
+
+    it('shows a reply button', () => {
+      const replyButton = wrapper.find({ ref: 'replyButton' });
+
+      expect(replyButton.exists()).toBe(true);
+    });
+  });
+
+  describe('for showReply = false', () => {
+    beforeEach(() => {
+      wrapper = shallowMountNoteActions({
+        ...props,
+        showReply: false,
+      });
+    });
+
+    it('does not show a reply button', () => {
+      const replyButton = wrapper.find({ ref: 'replyButton' });
+
+      expect(replyButton.exists()).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/notes/components/note_awards_list_spec.js b/spec/frontend/notes/components/note_awards_list_spec.js
new file mode 100644
index 00000000000..822b1f9efce
--- /dev/null
+++ b/spec/frontend/notes/components/note_awards_list_spec.js
@@ -0,0 +1,163 @@
+import Vue from 'vue';
+import AxiosMockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import createStore from '~/notes/stores';
+import awardsNote from '~/notes/components/note_awards_list.vue';
+import { noteableDataMock, notesDataMock } from '../mock_data';
+import { TEST_HOST } from 'jest/helpers/test_constants';
+
+describe('note_awards_list component', () => {
+  let store;
+  let vm;
+  let awardsMock;
+  let mock;
+
+  const toggleAwardPath = `${TEST_HOST}/gitlab-org/gitlab-foss/notes/545/toggle_award_emoji`;
+
+  beforeEach(() => {
+    mock = new AxiosMockAdapter(axios);
+
+    mock.onPost(toggleAwardPath).reply(200, '');
+
+    const Component = Vue.extend(awardsNote);
+
+    store = createStore();
+    store.dispatch('setNoteableData', noteableDataMock);
+    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',
+        canAwardEmoji: true,
+        toggleAwardPath,
+      },
+    }).$mount();
+  });
+
+  afterEach(() => {
+    mock.restore();
+    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 awarded emoji', () => {
+    jest.spyOn(vm, 'handleAward');
+    jest.spyOn(vm, 'toggleAwardRequest');
+    vm.$el.querySelector('.js-awards-block button').click();
+
+    expect(vm.handleAward).toHaveBeenCalledWith('flag_tz');
+    expect(vm.toggleAwardRequest).toHaveBeenCalled();
+  });
+
+  it('should be possible to add new emoji', () => {
+    expect(vm.$el.querySelector('.js-add-award')).toBeDefined();
+  });
+
+  describe('when the user name contains special HTML characters', () => {
+    const createAwardEmoji = (_, index) => ({
+      name: 'art',
+      user: { id: index, name: `&<>"\`'-${index}`, username: `user-${index}` },
+    });
+
+    const mountComponent = () => {
+      const Component = Vue.extend(awardsNote);
+      vm = new Component({
+        store,
+        propsData: {
+          awards: awardsMock,
+          noteAuthorId: 0,
+          noteId: '545',
+          canAwardEmoji: true,
+          toggleAwardPath: '/gitlab-org/gitlab-foss/notes/545/toggle_award_emoji',
+        },
+      }).$mount();
+    };
+
+    const findTooltip = () =>
+      vm.$el.querySelector('[data-original-title]').getAttribute('data-original-title');
+
+    it('should only escape & and " characters', () => {
+      awardsMock = [...new Array(1)].map(createAwardEmoji);
+      mountComponent();
+      const escapedName = awardsMock[0].user.name.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+
+      expect(vm.$el.querySelector('[data-original-title]').outerHTML).toContain(escapedName);
+    });
+
+    it('should not escape special HTML characters twice when only 1 person awarded', () => {
+      awardsMock = [...new Array(1)].map(createAwardEmoji);
+      mountComponent();
+
+      awardsMock.forEach(award => {
+        expect(findTooltip()).toContain(award.user.name);
+      });
+    });
+
+    it('should not escape special HTML characters twice when 2 people awarded', () => {
+      awardsMock = [...new Array(2)].map(createAwardEmoji);
+      mountComponent();
+
+      awardsMock.forEach(award => {
+        expect(findTooltip()).toContain(award.user.name);
+      });
+    });
+
+    it('should not escape special HTML characters twice when more than 10 people awarded', () => {
+      awardsMock = [...new Array(11)].map(createAwardEmoji);
+      mountComponent();
+
+      // Testing only the first 10 awards since 11 onward will not be displayed.
+      awardsMock.slice(0, 10).forEach(award => {
+        expect(findTooltip()).toContain(award.user.name);
+      });
+    });
+  });
+
+  describe('when the user cannot award emoji', () => {
+    beforeEach(() => {
+      const Component = Vue.extend(awardsNote);
+
+      vm = new Component({
+        store,
+        propsData: {
+          awards: awardsMock,
+          noteAuthorId: 2,
+          noteId: '545',
+          canAwardEmoji: false,
+          toggleAwardPath: '/gitlab-org/gitlab-foss/notes/545/toggle_award_emoji',
+        },
+      }).$mount();
+    });
+
+    it('should not be possible to remove awarded emoji', () => {
+      jest.spyOn(vm, 'toggleAwardRequest');
+
+      vm.$el.querySelector('.js-awards-block button').click();
+
+      expect(vm.toggleAwardRequest).not.toHaveBeenCalled();
+    });
+
+    it('should not be possible to add new emoji', () => {
+      expect(vm.$el.querySelector('.js-add-award')).toBeNull();
+    });
+  });
+});
diff --git a/spec/frontend/notes/components/note_body_spec.js b/spec/frontend/notes/components/note_body_spec.js
new file mode 100644
index 00000000000..efad0785afe
--- /dev/null
+++ b/spec/frontend/notes/components/note_body_spec.js
@@ -0,0 +1,57 @@
+import Vue from 'vue';
+import createStore from '~/notes/stores';
+import noteBody from '~/notes/components/note_body.vue';
+import { noteableDataMock, notesDataMock, note } from '../mock_data';
+
+describe('issue_note_body component', () => {
+  let store;
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(noteBody);
+
+    store = createStore();
+    store.dispatch('setNoteableData', noteableDataMock);
+    store.dispatch('setNotesData', notesDataMock);
+
+    vm = new Component({
+      store,
+      propsData: {
+        note,
+        canEdit: true,
+        canAwardEmoji: true,
+      },
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render the note', () => {
+    expect(vm.$el.querySelector('.note-text').innerHTML).toEqual(note.note_html);
+  });
+
+  it('should render awards list', () => {
+    expect(vm.$el.querySelector('.js-awards-block button [data-name="baseball"]')).not.toBeNull();
+    expect(vm.$el.querySelector('.js-awards-block button [data-name="bath_tone3"]')).not.toBeNull();
+  });
+
+  describe('isEditing', () => {
+    beforeEach(done => {
+      vm.isEditing = true;
+      Vue.nextTick(done);
+    });
+
+    it('renders edit form', () => {
+      expect(vm.$el.querySelector('textarea.js-task-list-field')).not.toBeNull();
+    });
+
+    it('adds autosave', () => {
+      const autosaveKey = `autosave/Note/${note.noteable_type}/${note.id}`;
+
+      expect(vm.autosave).toExist();
+      expect(vm.autosave.key).toEqual(autosaveKey);
+    });
+  });
+});
diff --git a/spec/frontend/notes/components/note_form_spec.js b/spec/frontend/notes/components/note_form_spec.js
new file mode 100644
index 00000000000..bccac03126c
--- /dev/null
+++ b/spec/frontend/notes/components/note_form_spec.js
@@ -0,0 +1,248 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import createStore from '~/notes/stores';
+import NoteForm from '~/notes/components/note_form.vue';
+import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import { noteableDataMock, notesDataMock } from '../mock_data';
+
+import { getDraft, updateDraft } from '~/lib/utils/autosave';
+
+jest.mock('~/lib/utils/autosave');
+
+describe('issue_note_form component', () => {
+  const dummyAutosaveKey = 'some-autosave-key';
+  const dummyDraft = 'dummy draft content';
+
+  let store;
+  let wrapper;
+  let props;
+
+  const createComponentWrapper = () => {
+    const localVue = createLocalVue();
+    return shallowMount(localVue.extend(NoteForm), {
+      store,
+      propsData: props,
+      // see https://gitlab.com/gitlab-org/gitlab-foss/issues/56317 for the following
+      localVue,
+    });
+  };
+
+  beforeEach(() => {
+    getDraft.mockImplementation(key => {
+      if (key === dummyAutosaveKey) {
+        return dummyDraft;
+      }
+
+      return null;
+    });
+
+    store = createStore();
+    store.dispatch('setNoteableData', noteableDataMock);
+    store.dispatch('setNotesData', notesDataMock);
+
+    props = {
+      isEditing: false,
+      noteBody: 'Magni suscipit eius consectetur enim et ex et commodi.',
+      noteId: '545',
+    };
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('noteHash', () => {
+    beforeEach(() => {
+      wrapper = createComponentWrapper();
+    });
+
+    it('returns note hash string based on `noteId`', () => {
+      expect(wrapper.vm.noteHash).toBe(`#note_${props.noteId}`);
+    });
+
+    it('return note hash as `#` when `noteId` is empty', () => {
+      wrapper.setProps({
+        ...props,
+        noteId: '',
+      });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.vm.noteHash).toBe('#');
+      });
+    });
+  });
+
+  describe('conflicts editing', () => {
+    beforeEach(() => {
+      wrapper = createComponentWrapper();
+    });
+
+    it('should show conflict message if note changes outside the component', () => {
+      wrapper.setProps({
+        ...props,
+        isEditing: true,
+        noteBody: 'Foo',
+      });
+
+      const message =
+        'This comment has changed since you started editing, please review the updated comment to ensure information is not lost.';
+
+      return wrapper.vm.$nextTick().then(() => {
+        const conflictWarning = wrapper.find('.js-conflict-edit-warning');
+
+        expect(conflictWarning.exists()).toBe(true);
+        expect(
+          conflictWarning
+            .text()
+            .replace(/\s+/g, ' ')
+            .trim(),
+        ).toBe(message);
+      });
+    });
+  });
+
+  describe('form', () => {
+    beforeEach(() => {
+      wrapper = createComponentWrapper();
+    });
+
+    it('should render text area with placeholder', () => {
+      const textarea = wrapper.find('textarea');
+
+      expect(textarea.attributes('placeholder')).toEqual(
+        'Write a comment or drag your files here…',
+      );
+    });
+
+    it('should link to markdown docs', () => {
+      const { markdownDocsPath } = notesDataMock;
+      const markdownField = wrapper.find(MarkdownField);
+      const markdownFieldProps = markdownField.props();
+
+      expect(markdownFieldProps.markdownDocsPath).toBe(markdownDocsPath);
+    });
+
+    describe('keyboard events', () => {
+      let textarea;
+
+      beforeEach(() => {
+        textarea = wrapper.find('textarea');
+        textarea.setValue('Foo');
+      });
+
+      describe('up', () => {
+        it('should ender edit mode', () => {
+          // TODO: do not spy on vm
+          jest.spyOn(wrapper.vm, 'editMyLastNote');
+
+          textarea.trigger('keydown.up');
+
+          expect(wrapper.vm.editMyLastNote).toHaveBeenCalled();
+        });
+      });
+
+      describe('enter', () => {
+        it('should save note when cmd+enter is pressed', () => {
+          textarea.trigger('keydown.enter', { metaKey: true });
+
+          const { handleFormUpdate } = wrapper.emitted();
+
+          expect(handleFormUpdate.length).toBe(1);
+        });
+
+        it('should save note when ctrl+enter is pressed', () => {
+          textarea.trigger('keydown.enter', { ctrlKey: true });
+
+          const { handleFormUpdate } = wrapper.emitted();
+
+          expect(handleFormUpdate.length).toBe(1);
+        });
+      });
+    });
+
+    describe('actions', () => {
+      it('should be possible to cancel', () => {
+        // TODO: do not spy on vm
+        jest.spyOn(wrapper.vm, 'cancelHandler');
+        wrapper.setProps({
+          ...props,
+          isEditing: true,
+        });
+
+        return wrapper.vm.$nextTick().then(() => {
+          const cancelButton = wrapper.find('.note-edit-cancel');
+          cancelButton.trigger('click');
+
+          expect(wrapper.vm.cancelHandler).toHaveBeenCalled();
+        });
+      });
+
+      it('should be possible to update the note', () => {
+        wrapper.setProps({
+          ...props,
+          isEditing: true,
+        });
+
+        return wrapper.vm.$nextTick().then(() => {
+          const textarea = wrapper.find('textarea');
+          textarea.setValue('Foo');
+          const saveButton = wrapper.find('.js-vue-issue-save');
+          saveButton.trigger('click');
+
+          expect(wrapper.vm.isSubmitting).toBe(true);
+        });
+      });
+    });
+  });
+
+  describe('with autosaveKey', () => {
+    describe('with draft', () => {
+      beforeEach(() => {
+        Object.assign(props, {
+          noteBody: '',
+          autosaveKey: dummyAutosaveKey,
+        });
+        wrapper = createComponentWrapper();
+
+        return wrapper.vm.$nextTick();
+      });
+
+      it('displays the draft in textarea', () => {
+        const textarea = wrapper.find('textarea');
+
+        expect(textarea.element.value).toBe(dummyDraft);
+      });
+    });
+
+    describe('without draft', () => {
+      beforeEach(() => {
+        Object.assign(props, {
+          noteBody: '',
+          autosaveKey: 'some key without draft',
+        });
+        wrapper = createComponentWrapper();
+
+        return wrapper.vm.$nextTick();
+      });
+
+      it('leaves the textarea empty', () => {
+        const textarea = wrapper.find('textarea');
+
+        expect(textarea.element.value).toBe('');
+      });
+    });
+
+    it('updates the draft if textarea content changes', () => {
+      Object.assign(props, {
+        noteBody: '',
+        autosaveKey: dummyAutosaveKey,
+      });
+      wrapper = createComponentWrapper();
+      const textarea = wrapper.find('textarea');
+      const dummyContent = 'some new content';
+
+      textarea.setValue(dummyContent);
+
+      expect(updateDraft).toHaveBeenCalledWith(dummyAutosaveKey, dummyContent);
+    });
+  });
+});
diff --git a/spec/frontend/notes/components/note_signed_out_widget_spec.js b/spec/frontend/notes/components/note_signed_out_widget_spec.js
new file mode 100644
index 00000000000..e217a2caa73
--- /dev/null
+++ b/spec/frontend/notes/components/note_signed_out_widget_spec.js
@@ -0,0 +1,41 @@
+import Vue from 'vue';
+import noteSignedOut from '~/notes/components/note_signed_out_widget.vue';
+import createStore from '~/notes/stores';
+import { notesDataMock } from '../mock_data';
+
+describe('note_signed_out_widget component', () => {
+  let store;
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(noteSignedOut);
+    store = createStore();
+    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/frontend/notes/components/noteable_discussion_spec.js b/spec/frontend/notes/components/noteable_discussion_spec.js
new file mode 100644
index 00000000000..b91f599f158
--- /dev/null
+++ b/spec/frontend/notes/components/noteable_discussion_spec.js
@@ -0,0 +1,187 @@
+import { mount, createLocalVue } from '@vue/test-utils';
+import createStore from '~/notes/stores';
+import noteableDiscussion from '~/notes/components/noteable_discussion.vue';
+import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
+import ResolveWithIssueButton from '~/notes/components/discussion_resolve_with_issue_button.vue';
+import NoteForm from '~/notes/components/note_form.vue';
+import '~/behaviors/markdown/render_gfm';
+import {
+  noteableDataMock,
+  discussionMock,
+  notesDataMock,
+  loggedOutnoteableData,
+  userDataMock,
+} from '../mock_data';
+import mockDiffFile from 'jest/diffs/mock_data/diff_file';
+import { trimText } from 'helpers/text_helper';
+
+const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json';
+
+const localVue = createLocalVue();
+
+describe('noteable_discussion component', () => {
+  let store;
+  let wrapper;
+  let originalGon;
+
+  preloadFixtures(discussionWithTwoUnresolvedNotes);
+
+  beforeEach(() => {
+    window.mrTabs = {};
+    store = createStore();
+    store.dispatch('setNoteableData', noteableDataMock);
+    store.dispatch('setNotesData', notesDataMock);
+
+    wrapper = mount(localVue.extend(noteableDiscussion), {
+      store,
+      propsData: { discussion: discussionMock },
+      localVue,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should not render thread header for non diff threads', () => {
+    expect(wrapper.find('.discussion-header').exists()).toBe(false);
+  });
+
+  it('should render thread header', () => {
+    const discussion = { ...discussionMock };
+    discussion.diff_file = mockDiffFile;
+    discussion.diff_discussion = true;
+    discussion.expanded = false;
+
+    wrapper.setProps({ discussion });
+
+    return wrapper.vm.$nextTick().then(() => {
+      expect(wrapper.find('.discussion-header').exists()).toBe(true);
+    });
+  });
+
+  describe('actions', () => {
+    it('should toggle reply form', () => {
+      const replyPlaceholder = wrapper.find(ReplyPlaceholder);
+
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          expect(wrapper.vm.isReplying).toEqual(false);
+
+          replyPlaceholder.vm.$emit('onClick');
+        })
+        .then(() => wrapper.vm.$nextTick())
+        .then(() => {
+          expect(wrapper.vm.isReplying).toEqual(true);
+
+          const noteForm = wrapper.find(NoteForm);
+
+          expect(noteForm.exists()).toBe(true);
+
+          const noteFormProps = noteForm.props();
+
+          expect(noteFormProps.discussion).toBe(discussionMock);
+          expect(noteFormProps.isEditing).toBe(false);
+          expect(noteFormProps.line).toBe(null);
+          expect(noteFormProps.saveButtonTitle).toBe('Comment');
+          expect(noteFormProps.autosaveKey).toBe(`Note/Issue/${discussionMock.id}/Reply`);
+        });
+    });
+
+    it('does not render jump to thread button', () => {
+      expect(wrapper.find('*[data-original-title="Jump to next unresolved thread"]').exists()).toBe(
+        false,
+      );
+    });
+  });
+
+  describe('for resolved thread', () => {
+    beforeEach(() => {
+      const discussion = getJSONFixture(discussionWithTwoUnresolvedNotes)[0];
+      wrapper.setProps({ discussion });
+    });
+
+    it('does not display a button to resolve with issue', () => {
+      const button = wrapper.find(ResolveWithIssueButton);
+
+      expect(button.exists()).toBe(false);
+    });
+  });
+
+  describe('for unresolved thread', () => {
+    beforeEach(() => {
+      const discussion = {
+        ...getJSONFixture(discussionWithTwoUnresolvedNotes)[0],
+        expanded: true,
+      };
+      discussion.notes = discussion.notes.map(note => ({
+        ...note,
+        resolved: false,
+        current_user: {
+          ...note.current_user,
+          can_resolve: true,
+        },
+      }));
+
+      wrapper.setProps({ discussion });
+
+      return wrapper.vm.$nextTick();
+    });
+
+    it('displays a button to resolve with issue', () => {
+      const button = wrapper.find(ResolveWithIssueButton);
+
+      expect(button.exists()).toBe(true);
+    });
+  });
+
+  describe('signout widget', () => {
+    beforeEach(() => {
+      originalGon = Object.assign({}, window.gon);
+      window.gon = window.gon || {};
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+      window.gon = originalGon;
+    });
+
+    describe('user is logged in', () => {
+      beforeEach(() => {
+        window.gon.current_user_id = userDataMock.id;
+        store.dispatch('setUserData', userDataMock);
+
+        wrapper = mount(localVue.extend(noteableDiscussion), {
+          store,
+          propsData: { discussion: discussionMock },
+          localVue,
+        });
+      });
+
+      it('should not render signed out widget', () => {
+        expect(Boolean(wrapper.vm.isLoggedIn)).toBe(true);
+        expect(trimText(wrapper.text())).not.toContain('Please register or sign in to reply');
+      });
+    });
+
+    describe('user is not logged in', () => {
+      beforeEach(() => {
+        window.gon.current_user_id = null;
+        store.dispatch('setNoteableData', loggedOutnoteableData);
+        store.dispatch('setNotesData', notesDataMock);
+
+        wrapper = mount(localVue.extend(noteableDiscussion), {
+          store,
+          propsData: { discussion: discussionMock },
+          localVue,
+        });
+      });
+
+      it('should render signed out widget', () => {
+        expect(Boolean(wrapper.vm.isLoggedIn)).toBe(false);
+        expect(trimText(wrapper.text())).toContain('Please register or sign in to reply');
+      });
+    });
+  });
+});
diff --git a/spec/frontend/notes/components/noteable_note_spec.js b/spec/frontend/notes/components/noteable_note_spec.js
new file mode 100644
index 00000000000..0d67b1d87a9
--- /dev/null
+++ b/spec/frontend/notes/components/noteable_note_spec.js
@@ -0,0 +1,137 @@
+import { escape } from 'lodash';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import createStore from '~/notes/stores';
+import issueNote from '~/notes/components/noteable_note.vue';
+import NoteHeader from '~/notes/components/note_header.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import NoteActions from '~/notes/components/note_actions.vue';
+import NoteBody from '~/notes/components/note_body.vue';
+import { noteableDataMock, notesDataMock, note } from '../mock_data';
+
+describe('issue_note', () => {
+  let store;
+  let wrapper;
+
+  beforeEach(() => {
+    store = createStore();
+    store.dispatch('setNoteableData', noteableDataMock);
+    store.dispatch('setNotesData', notesDataMock);
+
+    const localVue = createLocalVue();
+    wrapper = shallowMount(localVue.extend(issueNote), {
+      store,
+      propsData: {
+        note,
+      },
+      localVue,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render user information', () => {
+    const { author } = note;
+    const avatar = wrapper.find(UserAvatarLink);
+    const avatarProps = avatar.props();
+
+    expect(avatarProps.linkHref).toBe(author.path);
+    expect(avatarProps.imgSrc).toBe(author.avatar_url);
+    expect(avatarProps.imgAlt).toBe(author.name);
+    expect(avatarProps.imgSize).toBe(40);
+  });
+
+  it('should render note header content', () => {
+    const noteHeader = wrapper.find(NoteHeader);
+    const noteHeaderProps = noteHeader.props();
+
+    expect(noteHeaderProps.author).toEqual(note.author);
+    expect(noteHeaderProps.createdAt).toEqual(note.created_at);
+    expect(noteHeaderProps.noteId).toEqual(note.id);
+  });
+
+  it('should render note actions', () => {
+    const { author } = note;
+    const noteActions = wrapper.find(NoteActions);
+    const noteActionsProps = noteActions.props();
+
+    expect(noteActionsProps.authorId).toBe(author.id);
+    expect(noteActionsProps.noteId).toBe(note.id);
+    expect(noteActionsProps.noteUrl).toBe(note.noteable_note_url);
+    expect(noteActionsProps.accessLevel).toBe(note.human_access);
+    expect(noteActionsProps.canEdit).toBe(note.current_user.can_edit);
+    expect(noteActionsProps.canAwardEmoji).toBe(note.current_user.can_award_emoji);
+    expect(noteActionsProps.canDelete).toBe(note.current_user.can_edit);
+    expect(noteActionsProps.canReportAsAbuse).toBe(true);
+    expect(noteActionsProps.canResolve).toBe(false);
+    expect(noteActionsProps.reportAbusePath).toBe(note.report_abuse_path);
+    expect(noteActionsProps.resolvable).toBe(false);
+    expect(noteActionsProps.isResolved).toBe(false);
+    expect(noteActionsProps.isResolving).toBe(false);
+    expect(noteActionsProps.resolvedBy).toEqual({});
+  });
+
+  it('should render issue body', () => {
+    const noteBody = wrapper.find(NoteBody);
+    const noteBodyProps = noteBody.props();
+
+    expect(noteBodyProps.note).toEqual(note);
+    expect(noteBodyProps.line).toBe(null);
+    expect(noteBodyProps.canEdit).toBe(note.current_user.can_edit);
+    expect(noteBodyProps.isEditing).toBe(false);
+    expect(noteBodyProps.helpPagePath).toBe('');
+  });
+
+  it('prevents note preview xss', done => {
+    const imgSrc = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+    const noteBody = `<img src="${imgSrc}" onload="alert(1)" />`;
+    const alertSpy = jest.spyOn(window, 'alert');
+    store.hotUpdate({
+      actions: {
+        updateNote() {},
+      },
+    });
+    const noteBodyComponent = wrapper.find(NoteBody);
+
+    noteBodyComponent.vm.$emit('handleFormUpdate', noteBody, null, () => {});
+
+    setImmediate(() => {
+      expect(alertSpy).not.toHaveBeenCalled();
+      expect(wrapper.vm.note.note_html).toEqual(escape(noteBody));
+      done();
+    });
+  });
+
+  describe('cancel edit', () => {
+    it('restores content of updated note', done => {
+      const updatedText = 'updated note text';
+      store.hotUpdate({
+        actions: {
+          updateNote() {},
+        },
+      });
+      const noteBody = wrapper.find(NoteBody);
+      noteBody.vm.resetAutoSave = () => {};
+
+      noteBody.vm.$emit('handleFormUpdate', updatedText, null, () => {});
+
+      wrapper.vm
+        .$nextTick()
+        .then(() => {
+          const noteBodyProps = noteBody.props();
+
+          expect(noteBodyProps.note.note_html).toBe(updatedText);
+          noteBody.vm.$emit('cancelForm');
+        })
+        .then(() => wrapper.vm.$nextTick())
+        .then(() => {
+          const noteBodyProps = noteBody.props();
+
+          expect(noteBodyProps.note.note_html).toBe(note.note_html);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+});
diff --git a/spec/frontend/notes/components/toggle_replies_widget_spec.js b/spec/frontend/notes/components/toggle_replies_widget_spec.js
new file mode 100644
index 00000000000..b4f68b039cf
--- /dev/null
+++ b/spec/frontend/notes/components/toggle_replies_widget_spec.js
@@ -0,0 +1,78 @@
+import Vue from 'vue';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import toggleRepliesWidget from '~/notes/components/toggle_replies_widget.vue';
+import { note } from '../mock_data';
+
+const deepCloneObject = obj => JSON.parse(JSON.stringify(obj));
+
+describe('toggle replies widget for notes', () => {
+  let vm;
+  let ToggleRepliesWidget;
+  const noteFromOtherUser = deepCloneObject(note);
+  noteFromOtherUser.author.username = 'fatihacet';
+
+  const noteFromAnotherUser = deepCloneObject(note);
+  noteFromAnotherUser.author.username = 'mgreiling';
+  noteFromAnotherUser.author.name = 'Mike Greiling';
+
+  const replies = [note, note, note, noteFromOtherUser, noteFromAnotherUser];
+
+  beforeEach(() => {
+    ToggleRepliesWidget = Vue.extend(toggleRepliesWidget);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('collapsed state', () => {
+    beforeEach(() => {
+      vm = mountComponent(ToggleRepliesWidget, {
+        replies,
+        collapsed: true,
+      });
+    });
+
+    it('should render the collapsed', () => {
+      const vmTextContent = vm.$el.textContent.replace(/\s\s+/g, ' ');
+
+      expect(vm.$el.classList.contains('collapsed')).toEqual(true);
+      expect(vm.$el.querySelectorAll('.user-avatar-link').length).toEqual(3);
+      expect(vm.$el.querySelector('time')).not.toBeNull();
+      expect(vmTextContent).toContain('5 replies');
+      expect(vmTextContent).toContain(`Last reply by ${noteFromAnotherUser.author.name}`);
+    });
+
+    it('should emit toggle event when the replies text clicked', () => {
+      const spy = jest.spyOn(vm, '$emit');
+
+      vm.$el.querySelector('.js-replies-text').click();
+
+      expect(spy).toHaveBeenCalledWith('toggle');
+    });
+  });
+
+  describe('expanded state', () => {
+    beforeEach(() => {
+      vm = mountComponent(ToggleRepliesWidget, {
+        replies,
+        collapsed: false,
+      });
+    });
+
+    it('should render expanded state', () => {
+      const vmTextContent = vm.$el.textContent.replace(/\s\s+/g, ' ');
+
+      expect(vm.$el.querySelector('.collapse-replies-btn')).not.toBeNull();
+      expect(vmTextContent).toContain('Collapse replies');
+    });
+
+    it('should emit toggle event when the collapse replies text called', () => {
+      const spy = jest.spyOn(vm, '$emit');
+
+      vm.$el.querySelector('.js-collapse-replies').click();
+
+      expect(spy).toHaveBeenCalledWith('toggle');
+    });
+  });
+});
diff --git a/spec/frontend/notes/stores/collapse_utils_spec.js b/spec/frontend/notes/stores/collapse_utils_spec.js
new file mode 100644
index 00000000000..d3019f4b9a4
--- /dev/null
+++ b/spec/frontend/notes/stores/collapse_utils_spec.js
@@ -0,0 +1,37 @@
+import {
+  isDescriptionSystemNote,
+  getTimeDifferenceMinutes,
+  collapseSystemNotes,
+} from '~/notes/stores/collapse_utils';
+import { notesWithDescriptionChanges, collapsedSystemNotes } from '../mock_data';
+
+describe('Collapse utils', () => {
+  const mockSystemNote = {
+    note: 'changed the description',
+    note_html: '<p dir="auto">changed the description</p>',
+    system: true,
+    created_at: '2018-05-14T21:28:00.000Z',
+  };
+
+  it('checks if a system note is of a description type', () => {
+    expect(isDescriptionSystemNote(mockSystemNote)).toEqual(true);
+  });
+
+  it('returns false when a system note is not a description type', () => {
+    expect(isDescriptionSystemNote(Object.assign({}, mockSystemNote, { note: 'foo' }))).toEqual(
+      false,
+    );
+  });
+
+  it('gets the time difference between two notes', () => {
+    const anotherSystemNote = {
+      created_at: '2018-05-14T21:33:00.000Z',
+    };
+
+    expect(getTimeDifferenceMinutes(mockSystemNote, anotherSystemNote)).toEqual(5);
+  });
+
+  it('collapses all description system notes made within 10 minutes or less from each other', () => {
+    expect(collapseSystemNotes(notesWithDescriptionChanges)).toEqual(collapsedSystemNotes);
+  });
+});