Add latest changes from gitlab-org/gitlab@master

12 files changed, 835 insertions, 31 deletions

diff --git a/spec/frontend/__mocks__/@toast-ui/vue-editor/index.js b/spec/frontend/__mocks__/@toast-ui/vue-editor/index.js
new file mode 100644
index 00000000000..5ca620c24cf
--- /dev/null
+++ b/spec/frontend/__mocks__/@toast-ui/vue-editor/index.js
@@ -0,0 +1,17 @@
+export const Editor = {
+  props: {
+    initialValue: {
+      type: String,
+      required: true,
+    },
+  },
+  render(h) {
+    return h('div');
+  },
+};
+
+export const Viewer = {
+  render(h) {
+    return h('div');
+  },
+};
diff --git a/spec/frontend/boards/boards_store_spec.js b/spec/frontend/boards/boards_store_spec.js
index 05a44138275..116851a9903 100644
--- a/spec/frontend/boards/boards_store_spec.js
+++ b/spec/frontend/boards/boards_store_spec.js
@@ -1041,6 +1041,66 @@ describe('boardsStore', () => {
       });
     });
 
+    describe('addListIssue', () => {
+      let list;
+      const issue1 = new ListIssue({
+        title: 'Testing',
+        id: 2,
+        iid: 2,
+        confidential: false,
+        labels: [
+          {
+            color: '#ff0000',
+            description: 'testing;',
+            id: 5000,
+            priority: undefined,
+            textColor: 'white',
+            title: 'Test',
+          },
+        ],
+        assignees: [],
+      });
+      const issue2 = new ListIssue({
+        title: 'Testing',
+        id: 1,
+        iid: 1,
+        confidential: false,
+        labels: [
+          {
+            id: 1,
+            title: 'test',
+            color: 'red',
+            description: 'testing',
+          },
+        ],
+        assignees: [
+          {
+            id: 1,
+            name: 'name',
+            username: 'username',
+            avatar_url: 'http://avatar_url',
+          },
+        ],
+        real_path: 'path/to/issue',
+      });
+
+      beforeEach(() => {
+        list = new List(listObj);
+        list.addIssue(issue1);
+        setupDefaultResponses();
+      });
+
+      it('adds issues that are not already on the list', () => {
+        expect(list.findIssue(issue2.id)).toBe(undefined);
+        expect(list.issues).toEqual([issue1]);
+
+        boardsStore.addListIssue(list, issue2);
+        expect(list.findIssue(issue2.id)).toBe(issue2);
+        expect(list.issues.length).toBe(2);
+        expect(list.issues).toEqual([issue1, issue2]);
+      });
+    });
+
     describe('updateIssue', () => {
       let issue;
       let patchSpy;
diff --git a/spec/frontend/diffs/store/utils_spec.js b/spec/frontend/diffs/store/utils_spec.js
index 1adcdab272a..422332bab28 100644
--- a/spec/frontend/diffs/store/utils_spec.js
+++ b/spec/frontend/diffs/store/utils_spec.js
@@ -503,11 +503,16 @@ describe('DiffsStoreUtils', () => {
       },
     };
 
+    // When multi line comments are fully implemented `line_code` will be
+    // included in all requests. Until then we need to ensure the logic does
+    // not change when it is included only in the "comparison" argument.
+    const lineRange = { start_line_code: 'abc_1_1', end_line_code: 'abc_1_2' };
+
     it('returns true when the discussion is up to date', () => {
       expect(
         utils.isDiscussionApplicableToLine({
           discussion: discussions.upToDateDiscussion1,
-          diffPosition,
+          diffPosition: { ...diffPosition, line_range: lineRange },
           latestDiff: true,
         }),
       ).toBe(true);
@@ -517,7 +522,7 @@ describe('DiffsStoreUtils', () => {
       expect(
         utils.isDiscussionApplicableToLine({
           discussion: discussions.outDatedDiscussion1,
-          diffPosition,
+          diffPosition: { ...diffPosition, line_range: lineRange },
           latestDiff: true,
         }),
       ).toBe(false);
@@ -534,6 +539,7 @@ describe('DiffsStoreUtils', () => {
           diffPosition: {
             ...diffPosition,
             lineCode: 'ABC_1',
+            line_range: lineRange,
           },
           latestDiff: true,
         }),
@@ -551,6 +557,7 @@ describe('DiffsStoreUtils', () => {
           diffPosition: {
             ...diffPosition,
             line_code: 'ABC_1',
+            line_range: lineRange,
           },
           latestDiff: true,
         }),
@@ -568,6 +575,7 @@ describe('DiffsStoreUtils', () => {
           diffPosition: {
             ...diffPosition,
             lineCode: 'ABC_1',
+            line_range: lineRange,
           },
           latestDiff: false,
         }),
diff --git a/spec/frontend/feature_highlight/feature_highlight_helper_spec.js b/spec/frontend/feature_highlight/feature_highlight_helper_spec.js
new file mode 100644
index 00000000000..2c3c3e3267a
--- /dev/null
+++ b/spec/frontend/feature_highlight/feature_highlight_helper_spec.js
@@ -0,0 +1,62 @@
+import $ from 'jquery';
+import axios from '~/lib/utils/axios_utils';
+import { getSelector, dismiss, inserted } from '~/feature_highlight/feature_highlight_helper';
+import { togglePopover } from '~/shared/popover';
+
+describe('feature highlight helper', () => {
+  describe('getSelector', () => {
+    it('returns js-feature-highlight selector', () => {
+      const highlightId = 'highlightId';
+
+      expect(getSelector(highlightId)).toEqual(
+        `.js-feature-highlight[data-highlight=${highlightId}]`,
+      );
+    });
+  });
+
+  describe('dismiss', () => {
+    const context = {
+      hide: () => {},
+      attr: () => '/-/callouts/dismiss',
+    };
+
+    beforeEach(() => {
+      jest.spyOn(axios, 'post').mockResolvedValue();
+      jest.spyOn(togglePopover, 'call').mockImplementation(() => {});
+      jest.spyOn(context, 'hide').mockImplementation(() => {});
+      dismiss.call(context);
+    });
+
+    it('calls persistent dismissal endpoint', () => {
+      expect(axios.post).toHaveBeenCalledWith(
+        '/-/callouts/dismiss',
+        expect.objectContaining({ feature_name: undefined }),
+      );
+    });
+
+    it('calls hide popover', () => {
+      expect(togglePopover.call).toHaveBeenCalledWith(context, false);
+    });
+
+    it('calls hide', () => {
+      expect(context.hide).toHaveBeenCalled();
+    });
+  });
+
+  describe('inserted', () => {
+    it('registers click event callback', done => {
+      const context = {
+        getAttribute: () => 'popoverId',
+        dataset: {
+          highlight: 'some-feature',
+        },
+      };
+
+      jest.spyOn($.fn, 'on').mockImplementation(event => {
+        expect(event).toEqual('click');
+        done();
+      });
+      inserted.call(context);
+    });
+  });
+});
diff --git a/spec/frontend/feature_highlight/feature_highlight_options_spec.js b/spec/frontend/feature_highlight/feature_highlight_options_spec.js
index 8b75c46fd4c..f82f984cb7f 100644
--- a/spec/frontend/feature_highlight/feature_highlight_options_spec.js
+++ b/spec/frontend/feature_highlight/feature_highlight_options_spec.js
@@ -3,34 +3,20 @@ import domContentLoaded from '~/feature_highlight/feature_highlight_options';
 
 describe('feature highlight options', () => {
   describe('domContentLoaded', () => {
-    it('should not call highlightFeatures when breakpoint is xs', () => {
-      jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('xs');
-
-      expect(domContentLoaded()).toBe(false);
-    });
-
-    it('should not call highlightFeatures when breakpoint is sm', () => {
-      jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('sm');
-
-      expect(domContentLoaded()).toBe(false);
-    });
-
-    it('should not call highlightFeatures when breakpoint is md', () => {
-      jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('md');
-
-      expect(domContentLoaded()).toBe(false);
-    });
-
-    it('should not call highlightFeatures when breakpoint is not xl', () => {
-      jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('lg');
-
-      expect(domContentLoaded()).toBe(false);
-    });
-
-    it('should call highlightFeatures when breakpoint is xl', () => {
-      jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('xl');
-
-      expect(domContentLoaded()).toBe(true);
-    });
+    it.each`
+      breakPoint | shouldCall
+      ${'xs'}    | ${false}
+      ${'sm'}    | ${false}
+      ${'md'}    | ${false}
+      ${'lg'}    | ${false}
+      ${'xl'}    | ${true}
+    `(
+      'when breakpoint is $breakPoint should call highlightFeatures is $shouldCall',
+      ({ breakPoint, shouldCall }) => {
+        jest.spyOn(bp, 'getBreakpointSize').mockReturnValue(breakPoint);
+
+        expect(domContentLoaded()).toBe(shouldCall);
+      },
+    );
   });
 });
diff --git a/spec/frontend/feature_highlight/feature_highlight_spec.js b/spec/frontend/feature_highlight/feature_highlight_spec.js
new file mode 100644
index 00000000000..79c4050c8c4
--- /dev/null
+++ b/spec/frontend/feature_highlight/feature_highlight_spec.js
@@ -0,0 +1,120 @@
+import $ from 'jquery';
+import MockAdapter from 'axios-mock-adapter';
+import * as featureHighlight from '~/feature_highlight/feature_highlight';
+import * as popover from '~/shared/popover';
+import axios from '~/lib/utils/axios_utils';
+
+jest.mock('~/shared/popover');
+
+describe('feature highlight', () => {
+  beforeEach(() => {
+    setFixtures(`
+      <div>
+        <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" data-dismiss-endpoint="/test" disabled>
+          Trigger
+        </div>
+      </div>
+      <div class="feature-highlight-popover-content">
+        Content
+        <div class="dismiss-feature-highlight">
+          Dismiss
+        </div>
+      </div>
+    `);
+  });
+
+  describe('setupFeatureHighlightPopover', () => {
+    let mock;
+    const selector = '.js-feature-highlight[data-highlight=test]';
+
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+      mock.onGet('/test').reply(200);
+      jest.spyOn(window, 'addEventListener').mockImplementation(() => {});
+      featureHighlight.setupFeatureHighlightPopover('test', 0);
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    it('setup popover content', () => {
+      const $popoverContent = $('.feature-highlight-popover-content');
+      const outerHTML = $popoverContent.prop('outerHTML');
+
+      expect($(selector).data('content')).toEqual(outerHTML);
+    });
+
+    it('setup mouseenter', () => {
+      $(selector).trigger('mouseenter');
+
+      expect(popover.mouseenter).toHaveBeenCalledWith(expect.any(Object));
+    });
+
+    it('setup debounced mouseleave', () => {
+      $(selector).trigger('mouseleave');
+
+      expect(popover.debouncedMouseleave).toHaveBeenCalled();
+    });
+
+    it('setup show.bs.popover', () => {
+      $(selector).trigger('show.bs.popover');
+
+      expect(window.addEventListener).toHaveBeenCalledWith('scroll', expect.any(Function), {
+        once: true,
+      });
+    });
+
+    it('removes disabled attribute', () => {
+      expect($('.js-feature-highlight').is(':disabled')).toEqual(false);
+    });
+  });
+
+  describe('findHighestPriorityFeature', () => {
+    beforeEach(() => {
+      setFixtures(`
+        <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
+      `);
+    });
+
+    it('should pick the highest priority feature highlight', () => {
+      setFixtures(`
+        <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
+      `);
+
+      expect($('.js-feature-highlight').length).toBeGreaterThan(1);
+      expect(featureHighlight.findHighestPriorityFeature()).toEqual('test-high-priority');
+    });
+
+    it('should work when no priority is set', () => {
+      setFixtures(`
+        <div class="js-feature-highlight" data-highlight="test" disabled></div>
+      `);
+
+      expect(featureHighlight.findHighestPriorityFeature()).toEqual('test');
+    });
+
+    it('should pick the highest priority feature highlight when some have no priority set', () => {
+      setFixtures(`
+        <div class="js-feature-highlight" data-highlight="test-no-priority1" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-no-priority2" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
+      `);
+
+      expect($('.js-feature-highlight').length).toBeGreaterThan(1);
+      expect(featureHighlight.findHighestPriorityFeature()).toEqual('test-high-priority');
+    });
+  });
+
+  describe('highlightFeatures', () => {
+    it('calls setupFeatureHighlightPopover', () => {
+      expect(featureHighlight.highlightFeatures()).toEqual('test');
+    });
+  });
+});
diff --git a/spec/frontend/sidebar/lock/edit_form_buttons_spec.js b/spec/frontend/sidebar/lock/edit_form_buttons_spec.js
new file mode 100644
index 00000000000..66f9237ce97
--- /dev/null
+++ b/spec/frontend/sidebar/lock/edit_form_buttons_spec.js
@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+import EditFormButtons from '~/sidebar/components/lock/edit_form_buttons.vue';
+
+describe('EditFormButtons', () => {
+  let wrapper;
+
+  const mountComponent = propsData => shallowMount(EditFormButtons, { propsData });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('displays "Unlock" when locked', () => {
+    wrapper = mountComponent({
+      isLocked: true,
+      updateLockedAttribute: () => {},
+    });
+
+    expect(wrapper.text()).toContain('Unlock');
+  });
+
+  it('displays "Lock" when unlocked', () => {
+    wrapper = mountComponent({
+      isLocked: false,
+      updateLockedAttribute: () => {},
+    });
+
+    expect(wrapper.text()).toContain('Lock');
+  });
+});
diff --git a/spec/frontend/sidebar/participants_spec.js b/spec/frontend/sidebar/participants_spec.js
new file mode 100644
index 00000000000..ebe94582588
--- /dev/null
+++ b/spec/frontend/sidebar/participants_spec.js
@@ -0,0 +1,206 @@
+import { GlLoadingIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import Participants from '~/sidebar/components/participants/participants.vue';
+
+const PARTICIPANT = {
+  id: 1,
+  state: 'active',
+  username: 'marcene',
+  name: 'Allie Will',
+  web_url: 'foo.com',
+  avatar_url: 'gravatar.com/avatar/xxx',
+};
+
+const PARTICIPANT_LIST = [PARTICIPANT, { ...PARTICIPANT, id: 2 }, { ...PARTICIPANT, id: 3 }];
+
+describe('Participants', () => {
+  let wrapper;
+
+  const getMoreParticipantsButton = () => wrapper.find('button');
+
+  const getCollapsedParticipantsCount = () => wrapper.find('[data-testid="collapsed-count"]');
+
+  const mountComponent = propsData =>
+    shallowMount(Participants, {
+      propsData,
+    });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('collapsed sidebar state', () => {
+    it('shows loading spinner when loading', () => {
+      wrapper = mountComponent({
+        loading: true,
+      });
+
+      expect(wrapper.contains(GlLoadingIcon)).toBe(true);
+    });
+
+    it('does not show loading spinner not loading', () => {
+      wrapper = mountComponent({
+        loading: false,
+      });
+
+      expect(wrapper.contains(GlLoadingIcon)).toBe(false);
+    });
+
+    it('shows participant count when given', () => {
+      wrapper = mountComponent({
+        loading: false,
+        participants: PARTICIPANT_LIST,
+      });
+
+      expect(getCollapsedParticipantsCount().text()).toBe(`${PARTICIPANT_LIST.length}`);
+    });
+
+    it('shows full participant count when there are hidden participants', () => {
+      wrapper = mountComponent({
+        loading: false,
+        participants: PARTICIPANT_LIST,
+        numberOfLessParticipants: 1,
+      });
+
+      expect(getCollapsedParticipantsCount().text()).toBe(`${PARTICIPANT_LIST.length}`);
+    });
+  });
+
+  describe('expanded sidebar state', () => {
+    it('shows loading spinner when loading', () => {
+      wrapper = mountComponent({
+        loading: true,
+      });
+
+      expect(wrapper.contains(GlLoadingIcon)).toBe(true);
+    });
+
+    it('when only showing visible participants, shows an avatar only for each participant under the limit', () => {
+      const numberOfLessParticipants = 2;
+      wrapper = mountComponent({
+        loading: false,
+        participants: PARTICIPANT_LIST,
+        numberOfLessParticipants,
+      });
+
+      wrapper.setData({
+        isShowingMoreParticipants: false,
+      });
+
+      return Vue.nextTick().then(() => {
+        expect(wrapper.findAll('.participants-author')).toHaveLength(numberOfLessParticipants);
+      });
+    });
+
+    it('when only showing all participants, each has an avatar', () => {
+      wrapper = mountComponent({
+        loading: false,
+        participants: PARTICIPANT_LIST,
+        numberOfLessParticipants: 2,
+      });
+
+      wrapper.setData({
+        isShowingMoreParticipants: true,
+      });
+
+      return Vue.nextTick().then(() => {
+        expect(wrapper.findAll('.participants-author')).toHaveLength(PARTICIPANT_LIST.length);
+      });
+    });
+
+    it('does not have more participants link when they can all be shown', () => {
+      const numberOfLessParticipants = 100;
+      wrapper = mountComponent({
+        loading: false,
+        participants: PARTICIPANT_LIST,
+        numberOfLessParticipants,
+      });
+
+      expect(PARTICIPANT_LIST.length).toBeLessThan(numberOfLessParticipants);
+      expect(getMoreParticipantsButton().exists()).toBe(false);
+    });
+
+    it('when too many participants, has more participants link to show more', () => {
+      wrapper = mountComponent({
+        loading: false,
+        participants: PARTICIPANT_LIST,
+        numberOfLessParticipants: 2,
+      });
+
+      wrapper.setData({
+        isShowingMoreParticipants: false,
+      });
+
+      return Vue.nextTick().then(() => {
+        expect(getMoreParticipantsButton().text()).toBe('+ 1 more');
+      });
+    });
+
+    it('when too many participants and already showing them, has more participants link to show less', () => {
+      wrapper = mountComponent({
+        loading: false,
+        participants: PARTICIPANT_LIST,
+        numberOfLessParticipants: 2,
+      });
+
+      wrapper.setData({
+        isShowingMoreParticipants: true,
+      });
+
+      return Vue.nextTick().then(() => {
+        expect(getMoreParticipantsButton().text()).toBe('- show less');
+      });
+    });
+
+    it('clicking more participants link emits event', () => {
+      wrapper = mountComponent({
+        loading: false,
+        participants: PARTICIPANT_LIST,
+        numberOfLessParticipants: 2,
+      });
+
+      expect(wrapper.vm.isShowingMoreParticipants).toBe(false);
+
+      getMoreParticipantsButton().trigger('click');
+
+      expect(wrapper.vm.isShowingMoreParticipants).toBe(true);
+    });
+
+    it('clicking on participants icon emits `toggleSidebar` event', () => {
+      wrapper = mountComponent({
+        loading: false,
+        participants: PARTICIPANT_LIST,
+        numberOfLessParticipants: 2,
+      });
+
+      const spy = jest.spyOn(wrapper.vm, '$emit');
+
+      wrapper.find('.sidebar-collapsed-icon').trigger('click');
+
+      return Vue.nextTick(() => {
+        expect(spy).toHaveBeenCalledWith('toggleSidebar');
+
+        spy.mockRestore();
+      });
+    });
+  });
+
+  describe('when not showing participants label', () => {
+    beforeEach(() => {
+      wrapper = mountComponent({
+        participants: PARTICIPANT_LIST,
+        showParticipantLabel: false,
+      });
+    });
+
+    it('does not show sidebar collapsed icon', () => {
+      expect(wrapper.contains('.sidebar-collapsed-icon')).toBe(false);
+    });
+
+    it('does not show participants label title', () => {
+      expect(wrapper.contains('.title')).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/sidebar/sidebar_mediator_spec.js b/spec/frontend/sidebar/sidebar_mediator_spec.js
new file mode 100644
index 00000000000..0892d452966
--- /dev/null
+++ b/spec/frontend/sidebar/sidebar_mediator_spec.js
@@ -0,0 +1,135 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import * as urlUtility from '~/lib/utils/url_utility';
+import SidebarService, { gqClient } from '~/sidebar/services/sidebar_service';
+import SidebarMediator from '~/sidebar/sidebar_mediator';
+import SidebarStore from '~/sidebar/stores/sidebar_store';
+import Mock from './mock_data';
+
+describe('Sidebar mediator', () => {
+  const { mediator: mediatorMockData } = Mock;
+  let mock;
+  let mediator;
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    mediator = new SidebarMediator(mediatorMockData);
+  });
+
+  afterEach(() => {
+    SidebarService.singleton = null;
+    SidebarStore.singleton = null;
+    SidebarMediator.singleton = null;
+    mock.restore();
+  });
+
+  it('assigns yourself ', () => {
+    mediator.assignYourself();
+
+    expect(mediator.store.currentUser).toEqual(mediatorMockData.currentUser);
+    expect(mediator.store.assignees[0]).toEqual(mediatorMockData.currentUser);
+  });
+
+  it('saves assignees', () => {
+    mock.onPut(mediatorMockData.endpoint).reply(200, {});
+
+    return mediator.saveAssignees('issue[assignee_ids]').then(resp => {
+      expect(resp.status).toEqual(200);
+    });
+  });
+
+  it('fetches the data', () => {
+    const mockData = Mock.responseMap.GET[mediatorMockData.endpoint];
+    mock.onGet(mediatorMockData.endpoint).reply(200, mockData);
+
+    const mockGraphQlData = Mock.graphQlResponseData;
+    const graphQlSpy = jest.spyOn(gqClient, 'query').mockReturnValue({
+      data: mockGraphQlData,
+    });
+    const spy = jest.spyOn(mediator, 'processFetchedData').mockReturnValue(Promise.resolve());
+
+    return mediator.fetch().then(() => {
+      expect(spy).toHaveBeenCalledWith(mockData, mockGraphQlData);
+
+      spy.mockRestore();
+      graphQlSpy.mockRestore();
+    });
+  });
+
+  it('processes fetched data', () => {
+    const mockData = Mock.responseMap.GET[mediatorMockData.endpoint];
+    mediator.processFetchedData(mockData);
+
+    expect(mediator.store.assignees).toEqual(mockData.assignees);
+    expect(mediator.store.humanTimeEstimate).toEqual(mockData.human_time_estimate);
+    expect(mediator.store.humanTotalTimeSpent).toEqual(mockData.human_total_time_spent);
+    expect(mediator.store.participants).toEqual(mockData.participants);
+    expect(mediator.store.subscribed).toEqual(mockData.subscribed);
+    expect(mediator.store.timeEstimate).toEqual(mockData.time_estimate);
+    expect(mediator.store.totalTimeSpent).toEqual(mockData.total_time_spent);
+  });
+
+  it('sets moveToProjectId', () => {
+    const projectId = 7;
+    const spy = jest.spyOn(mediator.store, 'setMoveToProjectId').mockReturnValue(Promise.resolve());
+
+    mediator.setMoveToProjectId(projectId);
+
+    expect(spy).toHaveBeenCalledWith(projectId);
+
+    spy.mockRestore();
+  });
+
+  it('fetches autocomplete projects', () => {
+    const searchTerm = 'foo';
+    mock.onGet(mediatorMockData.projectsAutocompleteEndpoint).reply(200, {});
+    const getterSpy = jest
+      .spyOn(mediator.service, 'getProjectsAutocomplete')
+      .mockReturnValue(Promise.resolve({ data: {} }));
+    const setterSpy = jest
+      .spyOn(mediator.store, 'setAutocompleteProjects')
+      .mockReturnValue(Promise.resolve());
+
+    return mediator.fetchAutocompleteProjects(searchTerm).then(() => {
+      expect(getterSpy).toHaveBeenCalledWith(searchTerm);
+      expect(setterSpy).toHaveBeenCalled();
+
+      getterSpy.mockRestore();
+      setterSpy.mockRestore();
+    });
+  });
+
+  it('moves issue', () => {
+    const mockData = Mock.responseMap.POST[mediatorMockData.moveIssueEndpoint];
+    const moveToProjectId = 7;
+    mock.onPost(mediatorMockData.moveIssueEndpoint).reply(200, mockData);
+    mediator.store.setMoveToProjectId(moveToProjectId);
+    const moveIssueSpy = jest
+      .spyOn(mediator.service, 'moveIssue')
+      .mockReturnValue(Promise.resolve({ data: { web_url: mockData.web_url } }));
+    const urlSpy = jest.spyOn(urlUtility, 'visitUrl').mockReturnValue({});
+
+    return mediator.moveIssue().then(() => {
+      expect(moveIssueSpy).toHaveBeenCalledWith(moveToProjectId);
+      expect(urlSpy).toHaveBeenCalledWith(mockData.web_url);
+
+      moveIssueSpy.mockRestore();
+      urlSpy.mockRestore();
+    });
+  });
+
+  it('toggle subscription', () => {
+    mediator.store.setSubscribedState(false);
+    mock.onPost(mediatorMockData.toggleSubscriptionEndpoint).reply(200, {});
+    const spy = jest
+      .spyOn(mediator.service, 'toggleSubscription')
+      .mockReturnValue(Promise.resolve());
+
+    return mediator.toggleSubscription().then(() => {
+      expect(spy).toHaveBeenCalled();
+      expect(mediator.store.subscribed).toEqual(true);
+
+      spy.mockRestore();
+    });
+  });
+});
diff --git a/spec/frontend/sidebar/sidebar_subscriptions_spec.js b/spec/frontend/sidebar/sidebar_subscriptions_spec.js
new file mode 100644
index 00000000000..18aaeabe3dd
--- /dev/null
+++ b/spec/frontend/sidebar/sidebar_subscriptions_spec.js
@@ -0,0 +1,36 @@
+import { shallowMount } from '@vue/test-utils';
+import SidebarSubscriptions from '~/sidebar/components/subscriptions/sidebar_subscriptions.vue';
+import SidebarMediator from '~/sidebar/sidebar_mediator';
+import SidebarService from '~/sidebar/services/sidebar_service';
+import SidebarStore from '~/sidebar/stores/sidebar_store';
+import Mock from './mock_data';
+
+describe('Sidebar Subscriptions', () => {
+  let wrapper;
+  let mediator;
+
+  beforeEach(() => {
+    mediator = new SidebarMediator(Mock.mediator);
+    wrapper = shallowMount(SidebarSubscriptions, {
+      propsData: {
+        mediator,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    SidebarService.singleton = null;
+    SidebarStore.singleton = null;
+    SidebarMediator.singleton = null;
+  });
+
+  it('calls the mediator toggleSubscription on event', () => {
+    const spy = jest.spyOn(mediator, 'toggleSubscription').mockReturnValue(Promise.resolve());
+
+    wrapper.vm.onToggleSubscription();
+
+    expect(spy).toHaveBeenCalled();
+    spy.mockRestore();
+  });
+});
diff --git a/spec/frontend/sidebar/subscriptions_spec.js b/spec/frontend/sidebar/subscriptions_spec.js
new file mode 100644
index 00000000000..cce35666985
--- /dev/null
+++ b/spec/frontend/sidebar/subscriptions_spec.js
@@ -0,0 +1,106 @@
+import { shallowMount } from '@vue/test-utils';
+import Subscriptions from '~/sidebar/components/subscriptions/subscriptions.vue';
+import eventHub from '~/sidebar/event_hub';
+import ToggleButton from '~/vue_shared/components/toggle_button.vue';
+
+describe('Subscriptions', () => {
+  let wrapper;
+
+  const findToggleButton = () => wrapper.find(ToggleButton);
+
+  const mountComponent = propsData =>
+    shallowMount(Subscriptions, {
+      propsData,
+    });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('shows loading spinner when loading', () => {
+    wrapper = mountComponent({
+      loading: true,
+      subscribed: undefined,
+    });
+
+    expect(findToggleButton().attributes('isloading')).toBe('true');
+  });
+
+  it('is toggled "off" when currently not subscribed', () => {
+    wrapper = mountComponent({
+      subscribed: false,
+    });
+
+    expect(findToggleButton().attributes('value')).toBeFalsy();
+  });
+
+  it('is toggled "on" when currently subscribed', () => {
+    wrapper = mountComponent({
+      subscribed: true,
+    });
+
+    expect(findToggleButton().attributes('value')).toBe('true');
+  });
+
+  it('toggleSubscription method emits `toggleSubscription` event on eventHub and Component', () => {
+    const id = 42;
+    wrapper = mountComponent({ subscribed: true, id });
+    const eventHubSpy = jest.spyOn(eventHub, '$emit');
+    const wrapperEmitSpy = jest.spyOn(wrapper.vm, '$emit');
+
+    wrapper.vm.toggleSubscription();
+
+    expect(eventHubSpy).toHaveBeenCalledWith('toggleSubscription', id);
+    expect(wrapperEmitSpy).toHaveBeenCalledWith('toggleSubscription', id);
+    eventHubSpy.mockRestore();
+    wrapperEmitSpy.mockRestore();
+  });
+
+  it('tracks the event when toggled', () => {
+    wrapper = mountComponent({ subscribed: true });
+
+    const wrapperTrackSpy = jest.spyOn(wrapper.vm, 'track');
+
+    wrapper.vm.toggleSubscription();
+
+    expect(wrapperTrackSpy).toHaveBeenCalledWith('toggle_button', {
+      property: 'notifications',
+      value: 0,
+    });
+    wrapperTrackSpy.mockRestore();
+  });
+
+  it('onClickCollapsedIcon method emits `toggleSidebar` event on component', () => {
+    wrapper = mountComponent({ subscribed: true });
+    const spy = jest.spyOn(wrapper.vm, '$emit');
+
+    wrapper.vm.onClickCollapsedIcon();
+
+    expect(spy).toHaveBeenCalledWith('toggleSidebar');
+    spy.mockRestore();
+  });
+
+  describe('given project emails are disabled', () => {
+    const subscribeDisabledDescription = 'Notifications have been disabled';
+
+    beforeEach(() => {
+      wrapper = mountComponent({
+        subscribed: false,
+        projectEmailsDisabled: true,
+        subscribeDisabledDescription,
+      });
+    });
+
+    it('sets the correct display text', () => {
+      expect(wrapper.find('.issuable-header-text').text()).toContain(subscribeDisabledDescription);
+      expect(wrapper.find({ ref: 'tooltip' }).attributes('data-original-title')).toBe(
+        subscribeDisabledDescription,
+      );
+    });
+
+    it('does not render the toggle button', () => {
+      expect(wrapper.contains('.js-issuable-subscribe-button')).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js
new file mode 100644
index 00000000000..eb2baac3e76
--- /dev/null
+++ b/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js
@@ -0,0 +1,37 @@
+import { shallowMount } from '@vue/test-utils';
+import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
+
+describe('Rich Content Editor', () => {
+  let wrapper;
+
+  const value = '## Some Markdown';
+  const findEditor = () => wrapper.find({ ref: 'editor' });
+
+  beforeEach(() => {
+    wrapper = shallowMount(RichContentEditor, {
+      propsData: { value },
+    });
+  });
+
+  describe('when content is loaded', () => {
+    it('renders an editor', () => {
+      expect(findEditor().exists()).toBe(true);
+    });
+
+    it('renders the correct content', () => {
+      expect(findEditor().props().initialValue).toBe(value);
+    });
+  });
+
+  describe('when content is changed', () => {
+    it('emits an input event with the changed content', () => {
+      const changedMarkdown = '## Changed Markdown';
+      const getMarkdownMock = jest.fn().mockReturnValueOnce(changedMarkdown);
+
+      findEditor().setMethods({ invoke: getMarkdownMock });
+      findEditor().vm.$emit('change');
+
+      expect(wrapper.emitted().input[0][0]).toBe(changedMarkdown);
+    });
+  });
+});