Merge branch 'migrate-sidebar-specs' into 'master'

Migrate sidebar specs to Jest + VTU

See merge request gitlab-org/gitlab!20740

spec/frontend/sidebar/assignees_spec.js

+import { mount } from '@vue/test-utils';
+import { trimText } from 'helpers/text_helper';
+import Assignee from '~/sidebar/components/assignees/assignees.vue';
+import UsersMock from './mock_data';
+import UsersMockHelper from '../helpers/user_mock_data_helper';
+
+describe('Assignee component', () => {
+  const getDefaultProps = () => ({
+    rootPath: 'http://localhost:3000',
+    users: [],
+    editable: false,
+  });
+  let wrapper;
+
+  const createWrapper = (propsData = getDefaultProps()) => {
+    wrapper = mount(Assignee, {
+      propsData,
+      sync: false,
+      attachToDocument: true,
+    });
+  };
+
+  const findComponentTextNoUsers = () => wrapper.find('.assign-yourself');
+  const findCollapsedChildren = () => wrapper.findAll('.sidebar-collapsed-icon > *');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('No assignees/users', () => {
+    it('displays no assignee icon when collapsed', () => {
+      createWrapper();
+      const collapsedChildren = findCollapsedChildren();
+
+      expect(collapsedChildren.length).toBe(1);
+      expect(collapsedChildren.at(0).attributes('aria-label')).toBe('None');
+      expect(collapsedChildren.at(0).classes()).toContain('fa', 'fa-user');
+    });
+
+    it('displays only "None" when no users are assigned and the issue is read-only', () => {
+      createWrapper();
+      const componentTextNoUsers = trimText(findComponentTextNoUsers().text());
+
+      expect(componentTextNoUsers).toBe('None');
+      expect(componentTextNoUsers).not.toContain('assign yourself');
+    });
+
+    it('displays only "None" when no users are assigned and the issue can be edited', () => {
+      createWrapper({
+        ...getDefaultProps(),
+        editable: true,
+      });
+      const componentTextNoUsers = trimText(findComponentTextNoUsers().text());
+
+      expect(componentTextNoUsers).toContain('None');
+      expect(componentTextNoUsers).toContain('assign yourself');
+    });
+
+    it('emits the assign-self event when "assign yourself" is clicked', () => {
+      createWrapper({
+        ...getDefaultProps(),
+        editable: true,
+      });
+
+      jest.spyOn(wrapper.vm, '$emit');
+      wrapper.find('.assign-yourself .btn-link').trigger('click');
+
+      expect(wrapper.emitted('assign-self')).toBeTruthy();
+    });
+  });
+
+  describe('One assignee/user', () => {
+    it('displays one assignee icon when collapsed', () => {
+      createWrapper({
+        ...getDefaultProps(),
+        users: [UsersMock.user],
+      });
+
+      const collapsedChildren = findCollapsedChildren();
+      const assignee = collapsedChildren.at(0);
+
+      expect(collapsedChildren.length).toBe(1);
+      expect(assignee.find('.avatar').attributes('src')).toBe(UsersMock.user.avatar);
+      expect(assignee.find('.avatar').attributes('alt')).toBe(`${UsersMock.user.name}'s avatar`);
+
+      expect(trimText(assignee.find('.author').text())).toBe(UsersMock.user.name);
+    });
+  });
+
+  describe('Two or more assignees/users', () => {
+    it('displays two assignee icons when collapsed', () => {
+      const users = UsersMockHelper.createNumberRandomUsers(2);
+      createWrapper({
+        ...getDefaultProps(),
+        users,
+      });
+
+      const collapsedChildren = findCollapsedChildren();
+
+      expect(collapsedChildren.length).toBe(2);
+
+      const first = collapsedChildren.at(0);
+
+      expect(first.find('.avatar').attributes('src')).toBe(users[0].avatar);
+      expect(first.find('.avatar').attributes('alt')).toBe(`${users[0].name}'s avatar`);
+
+      expect(trimText(first.find('.author').text())).toBe(users[0].name);
+
+      const second = collapsedChildren.at(1);
+
+      expect(second.find('.avatar').attributes('src')).toBe(users[1].avatar);
+      expect(second.find('.avatar').attributes('alt')).toBe(`${users[1].name}'s avatar`);
+
+      expect(trimText(second.find('.author').text())).toBe(users[1].name);
+    });
+
+    it('displays one assignee icon and counter when collapsed', () => {
+      const users = UsersMockHelper.createNumberRandomUsers(3);
+      createWrapper({
+        ...getDefaultProps(),
+        users,
+      });
+
+      const collapsedChildren = findCollapsedChildren();
+
+      expect(collapsedChildren.length).toBe(2);
+
+      const first = collapsedChildren.at(0);
+
+      expect(first.find('.avatar').attributes('src')).toBe(users[0].avatar);
+      expect(first.find('.avatar').attributes('alt')).toBe(`${users[0].name}'s avatar`);
+
+      expect(trimText(first.find('.author').text())).toBe(users[0].name);
+
+      const second = collapsedChildren.at(1);
+
+      expect(trimText(second.find('.avatar-counter').text())).toBe('+2');
+    });
+
+    it('Shows two assignees', () => {
+      const users = UsersMockHelper.createNumberRandomUsers(2);
+      createWrapper({
+        ...getDefaultProps(),
+        users,
+        editable: true,
+      });
+
+      expect(wrapper.findAll('.user-item').length).toBe(users.length);
+      expect(wrapper.find('.user-list-more').exists()).toBe(false);
+    });
+
+    it('shows sorted assignee where "can merge" users are sorted first', () => {
+      const users = UsersMockHelper.createNumberRandomUsers(3);
+      users[0].can_merge = false;
+      users[1].can_merge = false;
+      users[2].can_merge = true;
+
+      createWrapper({
+        ...getDefaultProps(),
+        users,
+        editable: true,
+      });
+
+      expect(wrapper.vm.sortedAssigness[0].can_merge).toBe(true);
+    });
+
+    it('passes the sorted assignees to the uncollapsed-assignee-list', () => {
+      const users = UsersMockHelper.createNumberRandomUsers(3);
+      users[0].can_merge = false;
+      users[1].can_merge = false;
+      users[2].can_merge = true;
+
+      createWrapper({
+        ...getDefaultProps(),
+        users,
+      });
+
+      const userItems = wrapper.findAll('.user-list .user-item a');
+
+      expect(userItems.length).toBe(3);
+      expect(userItems.at(0).attributes('data-original-title')).toBe(users[2].name);
+    });
+
+    it('passes the sorted assignees to the collapsed-assignee-list', () => {
+      const users = UsersMockHelper.createNumberRandomUsers(3);
+      users[0].can_merge = false;
+      users[1].can_merge = false;
+      users[2].can_merge = true;
+
+      createWrapper({
+        ...getDefaultProps(),
+        users,
+      });
+
+      const collapsedButton = wrapper.find('.sidebar-collapsed-user button');
+
+      expect(trimText(collapsedButton.text())).toBe(users[2].name);
+    });
+  });
+});

spec/frontend/sidebar/mock_data.js

+const RESPONSE_MAP = {
+  GET: {
+    '/gitlab-org/gitlab-shell/issues/5.json': {
+      id: 45,
+      iid: 5,
+      author_id: 23,
+      description: 'Nulla ullam commodi delectus adipisci quis sit.',
+      lock_version: null,
+      milestone_id: 21,
+      position: 0,
+      state: 'closed',
+      title: 'Vel et nulla voluptatibus corporis dolor iste saepe laborum.',
+      updated_by_id: 1,
+      created_at: '2017-02-02T21: 49: 49.664Z',
+      updated_at: '2017-05-03T22: 26: 03.760Z',
+      time_estimate: 0,
+      total_time_spent: 0,
+      human_time_estimate: null,
+      human_total_time_spent: null,
+      branch_name: null,
+      confidential: false,
+      assignees: [
+        {
+          name: 'User 0',
+          username: 'user0',
+          id: 22,
+          state: 'active',
+          avatar_url:
+            'https://www.gravatar.com/avatar/52e4ce24a915fb7e51e1ad3b57f4b00a?s=80\u0026d=identicon',
+          web_url: 'http: //localhost:3001/user0',
+        },
+        {
+          name: 'Marguerite Bartell',
+          username: 'tajuana',
+          id: 18,
+          state: 'active',
+          avatar_url:
+            'https://www.gravatar.com/avatar/4852a41fb41616bf8f140d3701673f53?s=80\u0026d=identicon',
+          web_url: 'http: //localhost:3001/tajuana',
+        },
+        {
+          name: 'Laureen Ritchie',
+          username: 'michaele.will',
+          id: 16,
+          state: 'active',
+          avatar_url:
+            'https://www.gravatar.com/avatar/e301827eb03be955c9c172cb9a8e4e8a?s=80\u0026d=identicon',
+          web_url: 'http: //localhost:3001/michaele.will',
+        },
+      ],
+      due_date: null,
+      moved_to_id: null,
+      project_id: 4,
+      weight: null,
+      milestone: {
+        id: 21,
+        iid: 1,
+        project_id: 4,
+        title: 'v0.0',
+        description: 'Molestiae commodi laboriosam odio sunt eaque reprehenderit.',
+        state: 'active',
+        created_at: '2017-02-02T21: 49: 30.530Z',
+        updated_at: '2017-02-02T21: 49: 30.530Z',
+        due_date: null,
+        start_date: null,
+      },
+      labels: [],
+    },
+    '/gitlab-org/gitlab-shell/issues/5.json?serializer=sidebar_extras': {
+      assignees: [
+        {
+          name: 'User 0',
+          username: 'user0',
+          id: 22,
+          state: 'active',
+          avatar_url:
+            'https://www.gravatar.com/avatar/52e4ce24a915fb7e51e1ad3b57f4b00a?s=80\u0026d=identicon',
+          web_url: 'http://localhost:3001/user0',
+        },
+        {
+          name: 'Marguerite Bartell',
+          username: 'tajuana',
+          id: 18,
+          state: 'active',
+          avatar_url:
+            'https://www.gravatar.com/avatar/4852a41fb41616bf8f140d3701673f53?s=80\u0026d=identicon',
+          web_url: 'http://localhost:3001/tajuana',
+        },
+        {
+          name: 'Laureen Ritchie',
+          username: 'michaele.will',
+          id: 16,
+          state: 'active',
+          avatar_url:
+            'https://www.gravatar.com/avatar/e301827eb03be955c9c172cb9a8e4e8a?s=80\u0026d=identicon',
+          web_url: 'http://localhost:3001/michaele.will',
+        },
+      ],
+      human_time_estimate: null,
+      human_total_time_spent: null,
+      participants: [
+        {
+          name: 'User 0',
+          username: 'user0',
+          id: 22,
+          state: 'active',
+          avatar_url:
+            'https://www.gravatar.com/avatar/52e4ce24a915fb7e51e1ad3b57f4b00a?s=80\u0026d=identicon',
+          web_url: 'http://localhost:3001/user0',
+        },
+        {
+          name: 'Marguerite Bartell',
+          username: 'tajuana',
+          id: 18,
+          state: 'active',
+          avatar_url:
+            'https://www.gravatar.com/avatar/4852a41fb41616bf8f140d3701673f53?s=80\u0026d=identicon',
+          web_url: 'http://localhost:3001/tajuana',
+        },
+        {
+          name: 'Laureen Ritchie',
+          username: 'michaele.will',
+          id: 16,
+          state: 'active',
+          avatar_url:
+            'https://www.gravatar.com/avatar/e301827eb03be955c9c172cb9a8e4e8a?s=80\u0026d=identicon',
+          web_url: 'http://localhost:3001/michaele.will',
+        },
+      ],
+      subscribed: true,
+      time_estimate: 0,
+      total_time_spent: 0,
+    },
+    '/autocomplete/projects?project_id=15': [
+      {
+        id: 0,
+        name_with_namespace: 'No project',
+      },
+      {
+        id: 20,
+        name_with_namespace: '<img src=x onerror=alert(document.domain)> foo / bar',
+      },
+    ],
+  },
+  PUT: {
+    '/gitlab-org/gitlab-shell/issues/5.json': {
+      data: {},
+    },
+  },
+  POST: {
+    '/gitlab-org/gitlab-shell/issues/5/move': {
+      id: 123,
+      iid: 5,
+      author_id: 1,
+      description: 'some description',
+      lock_version: 5,
+      milestone_id: null,
+      state: 'opened',
+      title: 'some title',
+      updated_by_id: 1,
+      created_at: '2017-06-27T19:54:42.437Z',
+      updated_at: '2017-08-18T03:39:49.222Z',
+      time_estimate: 0,
+      total_time_spent: 0,
+      human_time_estimate: null,
+      human_total_time_spent: null,
+      branch_name: null,
+      confidential: false,
+      assignees: [],
+      due_date: null,
+      moved_to_id: null,
+      project_id: 7,
+      milestone: null,
+      labels: [],
+      web_url: '/root/some-project/issues/5',
+    },
+    '/gitlab-org/gitlab-shell/issues/5/toggle_subscription': {},
+  },
+};
+
+const mockData = {
+  responseMap: RESPONSE_MAP,
+  mediator: {
+    endpoint: '/gitlab-org/gitlab-shell/issues/5.json?serializer=sidebar_extras',
+    toggleSubscriptionEndpoint: '/gitlab-org/gitlab-shell/issues/5/toggle_subscription',
+    moveIssueEndpoint: '/gitlab-org/gitlab-shell/issues/5/move',
+    projectsAutocompleteEndpoint: '/autocomplete/projects?project_id=15',
+    editable: true,
+    currentUser: {
+      id: 1,
+      name: 'Administrator',
+      username: 'root',
+      avatar_url:
+        'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+    },
+    rootPath: '/',
+    fullPath: '/gitlab-org/gitlab-shell',
+  },
+  time: {
+    time_estimate: 3600,
+    total_time_spent: 0,
+    human_time_estimate: '1h',
+    human_total_time_spent: null,
+  },
+  user: {
+    avatar: 'https://gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+    id: 1,
+    name: 'Administrator',
+    username: 'root',
+  },
+};
+
+export default mockData;

spec/javascripts/sidebar/assignees_spec.js

-import Vue from 'vue';
-import Assignee from '~/sidebar/components/assignees/assignees.vue';
-import UsersMock from './mock_data';
-import UsersMockHelper from '../helpers/user_mock_data_helper';
-
-describe('Assignee component', () => {
-  let component;
-  let AssigneeComponent;
-
-  beforeEach(() => {
-    AssigneeComponent = Vue.extend(Assignee);
-  });
-
-  describe('No assignees/users', () => {
-    it('displays no assignee icon when collapsed', () => {
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000',
-          users: [],
-          editable: false,
-        },
-      }).$mount();
-
-      const collapsed = component.$el.querySelector('.sidebar-collapsed-icon');
-
-      expect(collapsed.childElementCount).toEqual(1);
-      expect(collapsed.children[0].getAttribute('aria-label')).toEqual('None');
-      expect(collapsed.children[0].classList.contains('fa')).toEqual(true);
-      expect(collapsed.children[0].classList.contains('fa-user')).toEqual(true);
-    });
-
-    it('displays only "None" when no users are assigned and the issue is read-only', () => {
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000',
-          users: [],
-          editable: false,
-        },
-      }).$mount();
-      const componentTextNoUsers = component.$el.querySelector('.assign-yourself').innerText.trim();
-
-      expect(componentTextNoUsers).toBe('None');
-      expect(componentTextNoUsers.indexOf('assign yourself')).toEqual(-1);
-    });
-
-    it('displays only "None" when no users are assigned and the issue can be edited', () => {
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000',
-          users: [],
-          editable: true,
-        },
-      }).$mount();
-      const componentTextNoUsers = component.$el.querySelector('.assign-yourself').innerText.trim();
-
-      expect(componentTextNoUsers.indexOf('None')).toEqual(0);
-      expect(componentTextNoUsers.indexOf('assign yourself')).toBeGreaterThan(0);
-    });
-
-    it('emits the assign-self event when "assign yourself" is clicked', () => {
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000',
-          users: [],
-          editable: true,
-        },
-      }).$mount();
-
-      spyOn(component, '$emit');
-      component.$el.querySelector('.assign-yourself .btn-link').click();
-
-      expect(component.$emit).toHaveBeenCalledWith('assign-self');
-    });
-  });
-
-  describe('One assignee/user', () => {
-    it('displays one assignee icon when collapsed', () => {
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000',
-          users: [UsersMock.user],
-          editable: false,
-        },
-      }).$mount();
-
-      const collapsed = component.$el.querySelector('.sidebar-collapsed-icon');
-      const assignee = collapsed.children[0];
-
-      expect(collapsed.childElementCount).toEqual(1);
-      expect(assignee.querySelector('.avatar').getAttribute('src')).toEqual(UsersMock.user.avatar);
-      expect(assignee.querySelector('.avatar').getAttribute('alt')).toEqual(
-        `${UsersMock.user.name}'s avatar`,
-      );
-
-      expect(assignee.querySelector('.author').innerText.trim()).toEqual(UsersMock.user.name);
-    });
-  });
-
-  describe('Two or more assignees/users', () => {
-    it('has no "cannot merge" tooltip when every user can merge', () => {
-      const users = UsersMockHelper.createNumberRandomUsers(2);
-      users[0].can_merge = true;
-      users[1].can_merge = true;
-
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000/',
-          users,
-          editable: true,
-          issuableType: 'merge_request',
-        },
-      }).$mount();
-
-      expect(component.collapsedTooltipTitle).not.toContain('cannot merge');
-    });
-
-    it('displays two assignee icons when collapsed', () => {
-      const users = UsersMockHelper.createNumberRandomUsers(2);
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000',
-          users,
-          editable: false,
-        },
-      }).$mount();
-
-      const collapsed = component.$el.querySelector('.sidebar-collapsed-icon');
-
-      expect(collapsed.childElementCount).toEqual(2);
-
-      const first = collapsed.children[0];
-
-      expect(first.querySelector('.avatar').getAttribute('src')).toEqual(users[0].avatar);
-      expect(first.querySelector('.avatar').getAttribute('alt')).toEqual(
-        `${users[0].name}'s avatar`,
-      );
-
-      expect(first.querySelector('.author').innerText.trim()).toEqual(users[0].name);
-
-      const second = collapsed.children[1];
-
-      expect(second.querySelector('.avatar').getAttribute('src')).toEqual(users[1].avatar);
-      expect(second.querySelector('.avatar').getAttribute('alt')).toEqual(
-        `${users[1].name}'s avatar`,
-      );
-
-      expect(second.querySelector('.author').innerText.trim()).toEqual(users[1].name);
-    });
-
-    it('displays one assignee icon and counter when collapsed', () => {
-      const users = UsersMockHelper.createNumberRandomUsers(3);
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000',
-          users,
-          editable: false,
-        },
-      }).$mount();
-
-      const collapsed = component.$el.querySelector('.sidebar-collapsed-icon');
-
-      expect(collapsed.childElementCount).toEqual(2);
-
-      const first = collapsed.children[0];
-
-      expect(first.querySelector('.avatar').getAttribute('src')).toEqual(users[0].avatar);
-      expect(first.querySelector('.avatar').getAttribute('alt')).toEqual(
-        `${users[0].name}'s avatar`,
-      );
-
-      expect(first.querySelector('.author').innerText.trim()).toEqual(users[0].name);
-
-      const second = collapsed.children[1];
-
-      expect(second.querySelector('.avatar-counter').innerText.trim()).toEqual('+2');
-    });
-
-    it('Shows two assignees', () => {
-      const users = UsersMockHelper.createNumberRandomUsers(2);
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000',
-          users,
-          editable: true,
-        },
-      }).$mount();
-
-      expect(component.$el.querySelectorAll('.user-item').length).toEqual(users.length);
-      expect(component.$el.querySelector('.user-list-more')).toBe(null);
-    });
-
-    it('shows sorted assignee where "can merge" users are sorted first', () => {
-      const users = UsersMockHelper.createNumberRandomUsers(3);
-      users[0].can_merge = false;
-      users[1].can_merge = false;
-      users[2].can_merge = true;
-
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000',
-          users,
-          editable: true,
-        },
-      }).$mount();
-
-      expect(component.sortedAssigness[0].can_merge).toBe(true);
-    });
-
-    it('passes the sorted assignees to the uncollapsed-assignee-list', () => {
-      const users = UsersMockHelper.createNumberRandomUsers(3);
-      users[0].can_merge = false;
-      users[1].can_merge = false;
-      users[2].can_merge = true;
-
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000',
-          users,
-          editable: false,
-        },
-      }).$mount();
-
-      const userItems = component.$el.querySelectorAll('.user-list .user-item a');
-
-      expect(userItems.length).toBe(3);
-      expect(userItems[0].dataset.originalTitle).toBe(users[2].name);
-    });
-
-    it('passes the sorted assignees to the collapsed-assignee-list', () => {
-      const users = UsersMockHelper.createNumberRandomUsers(3);
-      users[0].can_merge = false;
-      users[1].can_merge = false;
-      users[2].can_merge = true;
-
-      component = new AssigneeComponent({
-        propsData: {
-          rootPath: 'http://localhost:3000',
-          users,
-          editable: false,
-        },
-      }).$mount();
-
-      const collapsedButton = component.$el.querySelector('.sidebar-collapsed-user button');
-
-      expect(collapsedButton.innerText.trim()).toBe(users[2].name);
-    });
-  });
-});

spec/javascripts/sidebar/mock_data.js

-const RESPONSE_MAP = {
-  GET: {
-    '/gitlab-org/gitlab-shell/issues/5.json': {
-      id: 45,
-      iid: 5,
-      author_id: 23,
-      description: 'Nulla ullam commodi delectus adipisci quis sit.',
-      lock_version: null,
-      milestone_id: 21,
-      position: 0,
-      state: 'closed',
-      title: 'Vel et nulla voluptatibus corporis dolor iste saepe laborum.',
-      updated_by_id: 1,
-      created_at: '2017-02-02T21: 49: 49.664Z',
-      updated_at: '2017-05-03T22: 26: 03.760Z',
-      time_estimate: 0,
-      total_time_spent: 0,
-      human_time_estimate: null,
-      human_total_time_spent: null,
-      branch_name: null,
-      confidential: false,
-      assignees: [
-        {
-          name: 'User 0',
-          username: 'user0',
-          id: 22,
-          state: 'active',
-          avatar_url:
-            'https://www.gravatar.com/avatar/52e4ce24a915fb7e51e1ad3b57f4b00a?s=80\u0026d=identicon',
-          web_url: 'http: //localhost:3001/user0',
-        },
-        {
-          name: 'Marguerite Bartell',
-          username: 'tajuana',
-          id: 18,
-          state: 'active',
-          avatar_url:
-            'https://www.gravatar.com/avatar/4852a41fb41616bf8f140d3701673f53?s=80\u0026d=identicon',
-          web_url: 'http: //localhost:3001/tajuana',
-        },
-        {
-          name: 'Laureen Ritchie',
-          username: 'michaele.will',
-          id: 16,
-          state: 'active',
-          avatar_url:
-            'https://www.gravatar.com/avatar/e301827eb03be955c9c172cb9a8e4e8a?s=80\u0026d=identicon',
-          web_url: 'http: //localhost:3001/michaele.will',
-        },
-      ],
-      due_date: null,
-      moved_to_id: null,
-      project_id: 4,
-      weight: null,
-      milestone: {
-        id: 21,
-        iid: 1,
-        project_id: 4,
-        title: 'v0.0',
-        description: 'Molestiae commodi laboriosam odio sunt eaque reprehenderit.',
-        state: 'active',
-        created_at: '2017-02-02T21: 49: 30.530Z',
-        updated_at: '2017-02-02T21: 49: 30.530Z',
-        due_date: null,
-        start_date: null,
-      },
-      labels: [],
-    },
-    '/gitlab-org/gitlab-shell/issues/5.json?serializer=sidebar_extras': {
-      assignees: [
-        {
-          name: 'User 0',
-          username: 'user0',
-          id: 22,
-          state: 'active',
-          avatar_url:
-            'https://www.gravatar.com/avatar/52e4ce24a915fb7e51e1ad3b57f4b00a?s=80\u0026d=identicon',
-          web_url: 'http://localhost:3001/user0',
-        },
-        {
-          name: 'Marguerite Bartell',
-          username: 'tajuana',
-          id: 18,
-          state: 'active',
-          avatar_url:
-            'https://www.gravatar.com/avatar/4852a41fb41616bf8f140d3701673f53?s=80\u0026d=identicon',
-          web_url: 'http://localhost:3001/tajuana',
-        },
-        {
-          name: 'Laureen Ritchie',
-          username: 'michaele.will',
-          id: 16,
-          state: 'active',
-          avatar_url:
-            'https://www.gravatar.com/avatar/e301827eb03be955c9c172cb9a8e4e8a?s=80\u0026d=identicon',
-          web_url: 'http://localhost:3001/michaele.will',
-        },
-      ],
-      human_time_estimate: null,
-      human_total_time_spent: null,
-      participants: [
-        {
-          name: 'User 0',
-          username: 'user0',
-          id: 22,
-          state: 'active',
-          avatar_url:
-            'https://www.gravatar.com/avatar/52e4ce24a915fb7e51e1ad3b57f4b00a?s=80\u0026d=identicon',
-          web_url: 'http://localhost:3001/user0',
-        },
-        {
-          name: 'Marguerite Bartell',
-          username: 'tajuana',
-          id: 18,
-          state: 'active',
-          avatar_url:
-            'https://www.gravatar.com/avatar/4852a41fb41616bf8f140d3701673f53?s=80\u0026d=identicon',
-          web_url: 'http://localhost:3001/tajuana',
-        },
-        {
-          name: 'Laureen Ritchie',
-          username: 'michaele.will',
-          id: 16,
-          state: 'active',
-          avatar_url:
-            'https://www.gravatar.com/avatar/e301827eb03be955c9c172cb9a8e4e8a?s=80\u0026d=identicon',
-          web_url: 'http://localhost:3001/michaele.will',
-        },
-      ],
-      subscribed: true,
-      time_estimate: 0,
-      total_time_spent: 0,
-    },
-    '/autocomplete/projects?project_id=15': [
-      {
-        id: 0,
-        name_with_namespace: 'No project',
-      },
-      {
-        id: 20,
-        name_with_namespace: '<img src=x onerror=alert(document.domain)> foo / bar',
-      },
-    ],
-  },
-  PUT: {
-    '/gitlab-org/gitlab-shell/issues/5.json': {
-      data: {},
-    },
-  },
-  POST: {
-    '/gitlab-org/gitlab-shell/issues/5/move': {
-      id: 123,
-      iid: 5,
-      author_id: 1,
-      description: 'some description',
-      lock_version: 5,
-      milestone_id: null,
-      state: 'opened',
-      title: 'some title',
-      updated_by_id: 1,
-      created_at: '2017-06-27T19:54:42.437Z',
-      updated_at: '2017-08-18T03:39:49.222Z',
-      time_estimate: 0,
-      total_time_spent: 0,
-      human_time_estimate: null,
-      human_total_time_spent: null,
-      branch_name: null,
-      confidential: false,
-      assignees: [],
-      due_date: null,
-      moved_to_id: null,
-      project_id: 7,
-      milestone: null,
-      labels: [],
-      web_url: '/root/some-project/issues/5',
-    },
-    '/gitlab-org/gitlab-shell/issues/5/toggle_subscription': {},
-  },
-};
+// No new code should be added to this file. Instead, modify the
+// file this one re-exports from. For more detail about why, see:
+// https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/31349
 
-const mockData = {
-  responseMap: RESPONSE_MAP,
-  mediator: {
-    endpoint: '/gitlab-org/gitlab-shell/issues/5.json?serializer=sidebar_extras',
-    toggleSubscriptionEndpoint: '/gitlab-org/gitlab-shell/issues/5/toggle_subscription',
-    moveIssueEndpoint: '/gitlab-org/gitlab-shell/issues/5/move',
-    projectsAutocompleteEndpoint: '/autocomplete/projects?project_id=15',
-    editable: true,
-    currentUser: {
-      id: 1,
-      name: 'Administrator',
-      username: 'root',
-      avatar_url:
-        'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-    },
-    rootPath: '/',
-    fullPath: '/gitlab-org/gitlab-shell',
-  },
-  time: {
-    time_estimate: 3600,
-    total_time_spent: 0,
-    human_time_estimate: '1h',
-    human_total_time_spent: null,
-  },
-  user: {
-    avatar: 'https://gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-    id: 1,
-    name: 'Administrator',
-    username: 'root',
-  },
-};
+import mockData from '../../../spec/frontend/sidebar/mock_data';
 
 export default mockData;