Merge branch 'jdb/jestodus-diffs' into 'master'

Migrate diffs karma tests to jest

See merge request gitlab-org/gitlab!27270

spec/frontend/diffs/components/commit_widget_spec.js

+import { shallowMount } from '@vue/test-utils';
+import CommitWidget from '~/diffs/components/commit_widget.vue';
+import CommitItem from '~/diffs/components/commit_item.vue';
+
+describe('diffs/components/commit_widget', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(CommitWidget, {
+      propsData: { commit: {} },
+    });
+  });
+
+  it('renders commit item', () => {
+    const commitElement = wrapper.find(CommitItem);
+
+    expect(commitElement.exists()).toBe(true);
+  });
+});

spec/javascripts/diffs/components/diff_discussions_spec.js → spec/frontend/diffs/components/diff_discussions_spec.js

@@ -57,7 +57,7 @@ describe('DiffDiscussions', () => {
 
     it('dispatches toggleDiscussion when clicking collapse button', () => {
       createComponent({ shouldCollapseDiscussions: true });
-      spyOn(wrapper.vm.$store, 'dispatch').and.stub();
+      jest.spyOn(wrapper.vm.$store, 'dispatch').mockImplementation();
       const diffNotesToggle = findDiffNotesToggle();
       diffNotesToggle.trigger('click');
 
@@ -74,7 +74,7 @@ describe('DiffDiscussions', () => {
 
       expect(diffNotesToggle.text().trim()).toBe('1');
       expect(diffNotesToggle.classes()).toEqual(
-        jasmine.arrayContaining(['btn-transparent', 'badge', 'badge-pill']),
+        expect.arrayContaining(['btn-transparent', 'badge', 'badge-pill']),
       );
     });
 

spec/javascripts/diffs/components/diff_expansion_cell_spec.js → spec/frontend/diffs/components/diff_expansion_cell_spec.js

 import Vue from 'vue';
 import { cloneDeep } from 'lodash';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { createStore } from '~/mr_notes/stores';
 import DiffExpansionCell from '~/diffs/components/diff_expansion_cell.vue';
 import { getPreviousLineIndex } from '~/diffs/store/utils';
@@ -69,7 +69,7 @@ describe('DiffExpansionCell', () => {
     mockLine = getLine(mockFile, INLINE_DIFF_VIEW_TYPE, LINE_TO_USE);
     store = createStore();
     store.state.diffs.diffFiles = [mockFile];
-    spyOn(store, 'dispatch').and.returnValue(Promise.resolve());
+    jest.spyOn(store, 'dispatch').mockReturnValue(Promise.resolve());
   });
 
   const createComponent = (options = {}) => {

spec/javascripts/diffs/components/diff_file_spec.js → spec/frontend/diffs/components/diff_file_spec.js

 import Vue from 'vue';
 import { createStore } from 'ee_else_ce/mr_notes/stores';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { mockTracking, triggerEvent } from 'spec/helpers/tracking_helper';
+import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { mockTracking, triggerEvent } from 'helpers/tracking_helper';
 import DiffFileComponent from '~/diffs/components/diff_file.vue';
 import { diffViewerModes, diffViewerErrors } from '~/ide/constants';
 import diffFileMockDataReadable from '../mock_data/diff_file';
@@ -16,7 +16,7 @@ describe('DiffFile', () => {
       file: JSON.parse(JSON.stringify(diffFileMockDataReadable)),
       canCurrentUserFork: false,
     }).$mount();
-    trackingSpy = mockTracking('_category_', vm.$el, spyOn);
+    trackingSpy = mockTracking('_category_', vm.$el, jest.spyOn);
   });
 
   afterEach(() => {
@@ -164,7 +164,7 @@ describe('DiffFile', () => {
       });
 
       it('should update store state', done => {
-        spyOn(vm.$store, 'dispatch');
+        jest.spyOn(vm.$store, 'dispatch').mockImplementation(() => {});
 
         vm.isCollapsed = true;
 
@@ -211,7 +211,7 @@ describe('DiffFile', () => {
 
   describe('watch collapsed', () => {
     it('calls handleLoadCollapsedDiff if collapsed changed & file has no lines', done => {
-      spyOn(vm, 'handleLoadCollapsedDiff');
+      jest.spyOn(vm, 'handleLoadCollapsedDiff').mockImplementation(() => {});
 
       vm.file.highlighted_diff_lines = undefined;
       vm.file.parallel_diff_lines = [];
@@ -237,7 +237,7 @@ describe('DiffFile', () => {
         canCurrentUserFork: false,
       }).$mount();
 
-      spyOn(vm, 'handleLoadCollapsedDiff');
+      jest.spyOn(vm, 'handleLoadCollapsedDiff').mockImplementation(() => {});
 
       vm.file.highlighted_diff_lines = undefined;
       vm.file.parallel_diff_lines = [];

spec/javascripts/diffs/components/diff_line_note_form_spec.js → spec/frontend/diffs/components/diff_line_note_form_spec.js

-import Vue from 'vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
 import DiffLineNoteForm from '~/diffs/components/diff_line_note_form.vue';
+import NoteForm from '~/notes/components/note_form.vue';
 import { createStore } from '~/mr_notes/stores';
 import diffFileMockData from '../mock_data/diff_file';
 import { noteableDataMock } from '../../notes/mock_data';
 
 describe('DiffLineNoteForm', () => {
-  let component;
+  let wrapper;
   let diffFile;
   let diffLines;
   const getDiffFileMock = () => Object.assign({}, diffFileMockData);
@@ -14,58 +14,57 @@ describe('DiffLineNoteForm', () => {
   beforeEach(() => {
     diffFile = getDiffFileMock();
     diffLines = diffFile.highlighted_diff_lines;
-
-    component = createComponentWithStore(Vue.extend(DiffLineNoteForm), createStore(), {
-      diffFileHash: diffFile.file_hash,
-      diffLines,
-      line: diffLines[0],
-      noteTargetLine: diffLines[0],
-    });
-
-    Object.defineProperties(component, {
-      noteableData: { value: noteableDataMock },
-      isLoggedIn: { value: true },
+    const store = createStore();
+    store.state.notes.userData.id = 1;
+    store.state.notes.noteableData = noteableDataMock;
+
+    wrapper = shallowMount(DiffLineNoteForm, {
+      store,
+      propsData: {
+        diffFileHash: diffFile.file_hash,
+        diffLines,
+        line: diffLines[0],
+        noteTargetLine: diffLines[0],
+      },
     });
-
-    component.$mount();
   });
 
   describe('methods', () => {
     describe('handleCancelCommentForm', () => {
       it('should ask for confirmation when shouldConfirm and isDirty passed as truthy', () => {
-        spyOn(window, 'confirm').and.returnValue(false);
+        jest.spyOn(window, 'confirm').mockReturnValue(false);
 
-        component.handleCancelCommentForm(true, true);
+        wrapper.vm.handleCancelCommentForm(true, true);
 
         expect(window.confirm).toHaveBeenCalled();
       });
 
       it('should ask for confirmation when one of the params false', () => {
-        spyOn(window, 'confirm').and.returnValue(false);
+        jest.spyOn(window, 'confirm').mockReturnValue(false);
 
-        component.handleCancelCommentForm(true, false);
+        wrapper.vm.handleCancelCommentForm(true, false);
 
         expect(window.confirm).not.toHaveBeenCalled();
 
-        component.handleCancelCommentForm(false, true);
+        wrapper.vm.handleCancelCommentForm(false, true);
 
         expect(window.confirm).not.toHaveBeenCalled();
       });
 
       it('should call cancelCommentForm with lineCode', done => {
-        spyOn(window, 'confirm');
-        spyOn(component, 'cancelCommentForm');
-        spyOn(component, 'resetAutoSave');
-        component.handleCancelCommentForm();
+        jest.spyOn(window, 'confirm').mockImplementation(() => {});
+        jest.spyOn(wrapper.vm, 'cancelCommentForm').mockImplementation(() => {});
+        jest.spyOn(wrapper.vm, 'resetAutoSave').mockImplementation(() => {});
+        wrapper.vm.handleCancelCommentForm();
 
         expect(window.confirm).not.toHaveBeenCalled();
-        component.$nextTick(() => {
-          expect(component.cancelCommentForm).toHaveBeenCalledWith({
+        wrapper.vm.$nextTick(() => {
+          expect(wrapper.vm.cancelCommentForm).toHaveBeenCalledWith({
             lineCode: diffLines[0].line_code,
-            fileHash: component.diffFileHash,
+            fileHash: wrapper.vm.diffFileHash,
           });
 
-          expect(component.resetAutoSave).toHaveBeenCalled();
+          expect(wrapper.vm.resetAutoSave).toHaveBeenCalled();
 
           done();
         });
@@ -74,17 +73,16 @@ describe('DiffLineNoteForm', () => {
 
     describe('saveNoteForm', () => {
       it('should call saveNote action with proper params', done => {
-        const saveDiffDiscussionSpy = spyOn(component, 'saveDiffDiscussion').and.returnValue(
-          Promise.resolve(),
-        );
-        spyOnProperty(component, 'formData').and.returnValue('formData');
+        const saveDiffDiscussionSpy = jest
+          .spyOn(wrapper.vm, 'saveDiffDiscussion')
+          .mockReturnValue(Promise.resolve());
 
-        component
+        wrapper.vm
           .handleSaveNote('note body')
           .then(() => {
             expect(saveDiffDiscussionSpy).toHaveBeenCalledWith({
               note: 'note body',
-              formData: 'formData',
+              formData: wrapper.vm.formData,
             });
           })
           .then(done)
@@ -97,18 +95,14 @@ describe('DiffLineNoteForm', () => {
     it('should init autosave', () => {
       const key = 'autosave/Note/Issue/98//DiffNote//1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_1';
 
-      expect(component.autosave).toBeDefined();
-      expect(component.autosave.key).toEqual(key);
+      expect(wrapper.vm.autosave).toBeDefined();
+      expect(wrapper.vm.autosave.key).toEqual(key);
     });
   });
 
   describe('template', () => {
     it('should have note form', () => {
-      const { $el } = component;
-
-      expect($el.querySelector('.js-vue-textarea')).toBeDefined();
-      expect($el.querySelector('.js-vue-issue-save')).toBeDefined();
-      expect($el.querySelector('.js-vue-markdown-field')).toBeDefined();
+      expect(wrapper.find(NoteForm).exists()).toBe(true);
     });
   });
 });

spec/javascripts/diffs/components/file_row_stats_spec.js → spec/frontend/diffs/components/file_row_stats_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import FileRowStats from '~/diffs/components/file_row_stats.vue';
 
 describe('Diff file row stats', () => {

spec/javascripts/diffs/components/image_diff_overlay_spec.js → spec/frontend/diffs/components/image_diff_overlay_spec.js

-import Vue from 'vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
 import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue';
 import { createStore } from '~/mr_notes/stores';
 import { imageDiffDiscussions } from '../mock_data/diff_discussions';
+import Icon from '~/vue_shared/components/icon.vue';
 
 describe('Diffs image diff overlay component', () => {
   const dimensions = {
     width: 100,
     height: 200,
   };
-  let Component;
-  let vm;
+  let wrapper;
+  let dispatch;
+  const getAllImageBadges = () => wrapper.findAll('.js-image-badge');
 
   function createComponent(props = {}, extendStore = () => {}) {
     const store = createStore();
 
     extendStore(store);
-
-    vm = createComponentWithStore(Component, store, {
-      discussions: [...imageDiffDiscussions],
-      fileHash: 'ABC',
-      ...props,
+    dispatch = jest.spyOn(store, 'dispatch').mockImplementation();
+
+    wrapper = shallowMount(ImageDiffOverlay, {
+      store,
+      propsData: {
+        discussions: [...imageDiffDiscussions],
+        fileHash: 'ABC',
+        ...props,
+      },
+      methods: {
+        getImageDimensions: jest.fn().mockReturnValue(dimensions),
+      },
     });
   }
 
-  beforeAll(() => {
-    Component = Vue.extend(ImageDiffOverlay);
-  });
-
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
   it('renders comment badges', () => {
     createComponent();
-    spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
-    vm.$mount();
 
-    expect(vm.$el.querySelectorAll('.js-image-badge').length).toBe(2);
+    expect(getAllImageBadges()).toHaveLength(2);
   });
 
   it('renders index of discussion in badge', () => {
     createComponent();
-    spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
-    vm.$mount();
-
-    expect(vm.$el.querySelectorAll('.js-image-badge')[0].textContent.trim()).toBe('1');
-    expect(vm.$el.querySelectorAll('.js-image-badge')[1].textContent.trim()).toBe('2');
+    const imageBadges = getAllImageBadges();
+
+    expect(
+      imageBadges
+        .at(0)
+        .text()
+        .trim(),
+    ).toBe('1');
+    expect(
+      imageBadges
+        .at(1)
+        .text()
+        .trim(),
+    ).toBe('2');
   });
 
   it('renders icon when showCommentIcon is true', () => {
     createComponent({ showCommentIcon: true });
-    spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
-    vm.$mount();
 
-    expect(vm.$el.querySelector('.js-image-badge svg')).not.toBe(null);
+    expect(wrapper.find(Icon).exists()).toBe(true);
   });
 
   it('sets badge comment positions', () => {
     createComponent();
-    spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
-    vm.$mount();
+    const imageBadges = getAllImageBadges();
 
-    expect(vm.$el.querySelectorAll('.js-image-badge')[0].style.left).toBe('10px');
-    expect(vm.$el.querySelectorAll('.js-image-badge')[0].style.top).toBe('10px');
-
-    expect(vm.$el.querySelectorAll('.js-image-badge')[1].style.left).toBe('5px');
-    expect(vm.$el.querySelectorAll('.js-image-badge')[1].style.top).toBe('5px');
+    expect(imageBadges.at(0).attributes('style')).toBe('left: 10px; top: 10px;');
+    expect(imageBadges.at(1).attributes('style')).toBe('left: 5px; top: 5px;');
   });
 
   it('renders single badge for discussion object', () => {
@@ -75,22 +81,15 @@ describe('Diffs image diff overlay component', () => {
         ...imageDiffDiscussions[0],
       },
     });
-    spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
-    vm.$mount();
 
-    expect(vm.$el.querySelectorAll('.js-image-badge').length).toBe(1);
+    expect(getAllImageBadges()).toHaveLength(1);
   });
 
   it('dispatches openDiffFileCommentForm when clicking overlay', () => {
     createComponent({ canComment: true });
-    spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
-    vm.$mount();
-
-    spyOn(vm.$store, 'dispatch').and.stub();
+    wrapper.find('.js-add-image-diff-note-button').trigger('click', { offsetX: 0, offsetY: 0 });
 
-    vm.$el.querySelector('.js-add-image-diff-note-button').click();
-
-    expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/openDiffFileCommentForm', {
+    expect(dispatch).toHaveBeenCalledWith('diffs/openDiffFileCommentForm', {
       fileHash: 'ABC',
       x: 0,
       y: 0,
@@ -100,28 +99,26 @@ describe('Diffs image diff overlay component', () => {
   });
 
   describe('toggle discussion', () => {
+    const getImageBadge = () => wrapper.find('.js-image-badge');
+
     it('disables buttons when shouldToggleDiscussion is false', () => {
       createComponent({ shouldToggleDiscussion: false });
-      spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
-      vm.$mount();
 
-      expect(vm.$el.querySelector('.js-image-badge').hasAttribute('disabled')).toBe(true);
+      expect(getImageBadge().attributes('disabled')).toEqual('disabled');
     });
 
     it('dispatches toggleDiscussion when clicking image badge', () => {
       createComponent();
-      spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
-      vm.$mount();
+      getImageBadge().trigger('click');
 
-      spyOn(vm.$store, 'dispatch').and.stub();
-
-      vm.$el.querySelector('.js-image-badge').click();
-
-      expect(vm.$store.dispatch).toHaveBeenCalledWith('toggleDiscussion', { discussionId: '1' });
+      expect(dispatch).toHaveBeenCalledWith('toggleDiscussion', {
+        discussionId: '1',
+      });
     });
   });
 
   describe('comment form', () => {
+    const getCommentIndicator = () => wrapper.find('.comment-indicator');
     beforeEach(() => {
       createComponent({}, store => {
         store.state.diffs.commentForms.push({
@@ -130,17 +127,14 @@ describe('Diffs image diff overlay component', () => {
           y: 10,
         });
       });
-      spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
-      vm.$mount();
     });
 
     it('renders comment form badge', () => {
-      expect(vm.$el.querySelector('.comment-indicator')).not.toBe(null);
+      expect(getCommentIndicator().exists()).toBe(true);
     });
 
     it('sets comment form badge position', () => {
-      expect(vm.$el.querySelector('.comment-indicator').style.left).toBe('20px');
-      expect(vm.$el.querySelector('.comment-indicator').style.top).toBe('10px');
+      expect(getCommentIndicator().attributes('style')).toBe('left: 20px; top: 10px;');
     });
   });
 });

spec/javascripts/diffs/components/inline_diff_expansion_row_spec.js → spec/frontend/diffs/components/inline_diff_expansion_row_spec.js

 import Vue from 'vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { createStore } from '~/mr_notes/stores';
 import InlineDiffExpansionRow from '~/diffs/components/inline_diff_expansion_row.vue';
 import diffFileMockData from '../mock_data/diff_file';

spec/javascripts/diffs/components/inline_diff_table_row_spec.js → spec/frontend/diffs/components/inline_diff_table_row_spec.js

 import Vue from 'vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { createStore } from '~/mr_notes/stores';
 import InlineDiffTableRow from '~/diffs/components/inline_diff_table_row.vue';
 import diffFileMockData from '../mock_data/diff_file';

spec/javascripts/diffs/components/inline_diff_view_spec.js → spec/frontend/diffs/components/inline_diff_view_spec.js

 import Vue from 'vue';
 import '~/behaviors/markdown/render_gfm';
 import { createStore } from 'ee_else_ce/mr_notes/stores';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import InlineDiffView from '~/diffs/components/inline_diff_view.vue';
 import diffFileMockData from '../mock_data/diff_file';
 import discussionsMockData from '../mock_data/diff_discussions';

spec/javascripts/diffs/components/parallel_diff_expansion_row_spec.js → spec/frontend/diffs/components/parallel_diff_expansion_row_spec.js

 import Vue from 'vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { createStore } from '~/mr_notes/stores';
 import ParallelDiffExpansionRow from '~/diffs/components/parallel_diff_expansion_row.vue';
 import diffFileMockData from '../mock_data/diff_file';

spec/javascripts/diffs/components/parallel_diff_table_row_spec.js → spec/frontend/diffs/components/parallel_diff_table_row_spec.js

 import Vue from 'vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { createStore } from '~/mr_notes/stores';
 import ParallelDiffTableRow from '~/diffs/components/parallel_diff_table_row.vue';
 import diffFileMockData from '../mock_data/diff_file';

spec/javascripts/diffs/components/parallel_diff_view_spec.js → spec/frontend/diffs/components/parallel_diff_view_spec.js

 import Vue from 'vue';
 import { createStore } from 'ee_else_ce/mr_notes/stores';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import ParallelDiffView from '~/diffs/components/parallel_diff_view.vue';
 import * as constants from '~/diffs/constants';
 import diffFileMockData from '../mock_data/diff_file';

spec/frontend/diffs/mock_data/diff_file_unreadable.js

+export default {
+  submodule: false,
+  submodule_link: null,
+  blob: {
+    id: '9e10516ca50788acf18c518a231914a21e5f16f7',
+    path: 'CHANGELOG',
+    name: 'CHANGELOG',
+    mode: '100644',
+    readable_text: false,
+    icon: 'file-text-o',
+  },
+  blob_path: 'CHANGELOG',
+  blob_name: 'CHANGELOG',
+  blob_icon: '<i aria-hidden="true" data-hidden="true" class="fa fa-file-text-o fa-fw"></i>',
+  file_hash: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a',
+  file_path: 'CHANGELOG',
+  new_file: false,
+  deleted_file: false,
+  renamed_file: false,
+  old_path: 'CHANGELOG',
+  new_path: 'CHANGELOG',
+  mode_changed: false,
+  a_mode: '100644',
+  b_mode: '100644',
+  text: true,
+  viewer: {
+    name: 'text',
+    error: null,
+    collapsed: false,
+  },
+  added_lines: 0,
+  removed_lines: 0,
+  diff_refs: {
+    base_sha: 'e63f41fe459e62e1228fcef60d7189127aeba95a',
+    start_sha: 'd9eaefe5a676b820c57ff18cf5b68316025f7962',
+    head_sha: 'c48ee0d1bf3b30453f5b32250ce03134beaa6d13',
+  },
+  content_sha: 'c48ee0d1bf3b30453f5b32250ce03134beaa6d13',
+  stored_externally: null,
+  external_storage: null,
+  old_path_html: 'CHANGELOG',
+  new_path_html: 'CHANGELOG',
+  edit_path: '/gitlab-org/gitlab-test/edit/spooky-stuff/CHANGELOG',
+  view_path: '/gitlab-org/gitlab-test/blob/spooky-stuff/CHANGELOG',
+  replaced_view_path: null,
+  collapsed: false,
+  renderIt: false,
+  too_large: false,
+  context_lines_path:
+    '/gitlab-org/gitlab-test/blob/c48ee0d1bf3b30453f5b32250ce03134beaa6d13/CHANGELOG/diff',
+  highlighted_diff_lines: [
+    {
+      line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_1',
+      type: 'new',
+      old_line: null,
+      new_line: 1,
+      discussions: [],
+      text: '+<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
+      rich_text: '+<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
+      meta_data: null,
+    },
+    {
+      line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_2',
+      type: 'new',
+      old_line: null,
+      new_line: 2,
+      discussions: [],
+      text: '+<span id="LC2" class="line" lang="plaintext"></span>\n',
+      rich_text: '+<span id="LC2" class="line" lang="plaintext"></span>\n',
+      meta_data: null,
+    },
+    {
+      line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_3',
+      type: null,
+      old_line: 1,
+      new_line: 3,
+      discussions: [],
+      text: ' <span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
+      rich_text: ' <span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
+      meta_data: null,
+    },
+    {
+      line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_2_4',
+      type: null,
+      old_line: 2,
+      new_line: 4,
+      discussions: [],
+      text: ' <span id="LC4" class="line" lang="plaintext"></span>\n',
+      rich_text: ' <span id="LC4" class="line" lang="plaintext"></span>\n',
+      meta_data: null,
+    },
+    {
+      line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_3_5',
+      type: null,
+      old_line: 3,
+      new_line: 5,
+      discussions: [],
+      text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
+      rich_text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
+      meta_data: null,
+    },
+    {
+      line_code: null,
+      type: 'match',
+      old_line: null,
+      new_line: null,
+      discussions: [],
+      text: '',
+      rich_text: '',
+      meta_data: {
+        old_pos: 3,
+        new_pos: 5,
+      },
+    },
+  ],
+  parallel_diff_lines: [
+    {
+      left: {
+        type: 'empty-cell',
+      },
+      right: {
+        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_1',
+        type: 'new',
+        old_line: null,
+        new_line: 1,
+        discussions: [],
+        text: '+<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
+        rich_text: '<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
+        meta_data: null,
+      },
+    },
+    {
+      left: {
+        type: 'empty-cell',
+      },
+      right: {
+        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_2',
+        type: 'new',
+        old_line: null,
+        new_line: 2,
+        discussions: [],
+        text: '+<span id="LC2" class="line" lang="plaintext"></span>\n',
+        rich_text: '<span id="LC2" class="line" lang="plaintext"></span>\n',
+        meta_data: null,
+      },
+    },
+    {
+      left: {
+        line_Code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_3',
+        type: null,
+        old_line: 1,
+        new_line: 3,
+        discussions: [],
+        text: ' <span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
+        rich_text: '<span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
+        meta_data: null,
+      },
+      right: {
+        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_3',
+        type: null,
+        old_line: 1,
+        new_line: 3,
+        discussions: [],
+        text: ' <span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
+        rich_text: '<span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
+        meta_data: null,
+      },
+    },
+    {
+      left: {
+        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_2_4',
+        type: null,
+        old_line: 2,
+        new_line: 4,
+        discussions: [],
+        text: ' <span id="LC4" class="line" lang="plaintext"></span>\n',
+        rich_text: '<span id="LC4" class="line" lang="plaintext"></span>\n',
+        meta_data: null,
+      },
+      right: {
+        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_2_4',
+        type: null,
+        old_line: 2,
+        new_line: 4,
+        discussions: [],
+        text: ' <span id="LC4" class="line" lang="plaintext"></span>\n',
+        rich_text: '<span id="LC4" class="line" lang="plaintext"></span>\n',
+        meta_data: null,
+      },
+    },
+    {
+      left: {
+        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_3_5',
+        type: null,
+        old_line: 3,
+        new_line: 5,
+        discussions: [],
+        text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
+        rich_text: '<span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
+        meta_data: null,
+      },
+      right: {
+        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_3_5',
+        type: null,
+        old_line: 3,
+        new_line: 5,
+        discussions: [],
+        text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
+        rich_text: '<span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
+        meta_data: null,
+      },
+    },
+    {
+      left: {
+        line_code: null,
+        type: 'match',
+        old_line: null,
+        new_line: null,
+        discussions: [],
+        text: '',
+        rich_text: '',
+        meta_data: {
+          old_pos: 3,
+          new_pos: 5,
+        },
+      },
+      right: {
+        line_code: null,
+        type: 'match',
+        old_line: null,
+        new_line: null,
+        discussions: [],
+        text: '',
+        rich_text: '',
+        meta_data: {
+          old_pos: 3,
+          new_pos: 5,
+        },
+      },
+    },
+  ],
+  discussions: [],
+  renderingLines: false,
+};

spec/javascripts/diffs/store/mutations_spec.js → spec/frontend/diffs/store/mutations_spec.js

@@ -3,6 +3,7 @@ import mutations from '~/diffs/store/mutations';
 import * as types from '~/diffs/store/mutation_types';
 import { INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants';
 import diffFileMockData from '../mock_data/diff_file';
+import * as utils from '~/diffs/store/utils';
 
 describe('DiffsStoreMutations', () => {
   describe('SET_BASE_CONFIG', () => {
@@ -181,21 +182,21 @@ describe('DiffsStoreMutations', () => {
       const state = { diffFiles: [diffFile], diffViewType: 'viewType' };
       const lines = [{ old_line: 1, new_line: 1 }];
 
-      const findDiffFileSpy = spyOnDependency(mutations, 'findDiffFile').and.returnValue(diffFile);
-      const removeMatchLineSpy = spyOnDependency(mutations, 'removeMatchLine');
-      const lineRefSpy = spyOnDependency(mutations, 'addLineReferences').and.returnValue(lines);
-      const addContextLinesSpy = spyOnDependency(mutations, 'addContextLines');
+      jest.spyOn(utils, 'findDiffFile').mockImplementation(() => diffFile);
+      jest.spyOn(utils, 'removeMatchLine').mockImplementation(() => null);
+      jest.spyOn(utils, 'addLineReferences').mockImplementation(() => lines);
+      jest.spyOn(utils, 'addContextLines').mockImplementation(() => null);
 
       mutations[types.ADD_CONTEXT_LINES](state, options);
 
-      expect(findDiffFileSpy).toHaveBeenCalledWith(state.diffFiles, options.fileHash);
-      expect(removeMatchLineSpy).toHaveBeenCalledWith(
+      expect(utils.findDiffFile).toHaveBeenCalledWith(state.diffFiles, options.fileHash);
+      expect(utils.removeMatchLine).toHaveBeenCalledWith(
         diffFile,
         options.lineNumbers,
         options.params.bottom,
       );
 
-      expect(lineRefSpy).toHaveBeenCalledWith(
+      expect(utils.addLineReferences).toHaveBeenCalledWith(
         options.contextLines,
         options.lineNumbers,
         options.params.bottom,
@@ -203,7 +204,7 @@ describe('DiffsStoreMutations', () => {
         options.nextLineNumbers,
       );
 
-      expect(addContextLinesSpy).toHaveBeenCalledWith({
+      expect(utils.addContextLines).toHaveBeenCalledWith({
         inlineLines: diffFile.highlighted_diff_lines,
         parallelLines: diffFile.parallel_diff_lines,
         diffViewType: 'viewType',

spec/javascripts/diffs/store/utils_spec.js → spec/frontend/diffs/store/utils_spec.js

@@ -463,7 +463,7 @@ describe('DiffsStoreUtils', () => {
 
       expect(updatedFilesList).toEqual([
         mock,
-        jasmine.objectContaining({
+        expect.objectContaining({
           content_sha: 'ABC',
           file_hash: 'DEF',
         }),

spec/javascripts/diffs/components/commit_widget_spec.js

-import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import CommitWidget from '~/diffs/components/commit_widget.vue';
-import getDiffWithCommit from '../mock_data/diff_with_commit';
-
-describe('diffs/components/commit_widget', () => {
-  const Component = Vue.extend(CommitWidget);
-  const { commit } = getDiffWithCommit();
-
-  let vm;
-
-  beforeEach(() => {
-    vm = mountComponent(Component, {
-      commit: getDiffWithCommit().commit,
-    });
-  });
-
-  it('renders commit item', () => {
-    const commitElement = vm.$el.querySelector('li.commit');
-
-    expect(commitElement).not.toBeNull();
-    expect(commitElement).toContainText(commit.short_id);
-  });
-});

spec/javascripts/diffs/create_diffs_store.js

+// 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
+
 export { default } from '../../frontend/diffs/create_diffs_store';

spec/javascripts/diffs/mock_data/diff_file_unreadable.js

-export default {
-  submodule: false,
-  submodule_link: null,
-  blob: {
-    id: '9e10516ca50788acf18c518a231914a21e5f16f7',
-    path: 'CHANGELOG',
-    name: 'CHANGELOG',
-    mode: '100644',
-    readable_text: false,
-    icon: 'file-text-o',
-  },
-  blob_path: 'CHANGELOG',
-  blob_name: 'CHANGELOG',
-  blob_icon: '<i aria-hidden="true" data-hidden="true" class="fa fa-file-text-o fa-fw"></i>',
-  file_hash: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a',
-  file_path: 'CHANGELOG',
-  new_file: false,
-  deleted_file: false,
-  renamed_file: false,
-  old_path: 'CHANGELOG',
-  new_path: 'CHANGELOG',
-  mode_changed: false,
-  a_mode: '100644',
-  b_mode: '100644',
-  text: true,
-  viewer: {
-    name: 'text',
-    error: null,
-    collapsed: false,
-  },
-  added_lines: 0,
-  removed_lines: 0,
-  diff_refs: {
-    base_sha: 'e63f41fe459e62e1228fcef60d7189127aeba95a',
-    start_sha: 'd9eaefe5a676b820c57ff18cf5b68316025f7962',
-    head_sha: 'c48ee0d1bf3b30453f5b32250ce03134beaa6d13',
-  },
-  content_sha: 'c48ee0d1bf3b30453f5b32250ce03134beaa6d13',
-  stored_externally: null,
-  external_storage: null,
-  old_path_html: 'CHANGELOG',
-  new_path_html: 'CHANGELOG',
-  edit_path: '/gitlab-org/gitlab-test/edit/spooky-stuff/CHANGELOG',
-  view_path: '/gitlab-org/gitlab-test/blob/spooky-stuff/CHANGELOG',
-  replaced_view_path: null,
-  collapsed: false,
-  renderIt: false,
-  too_large: false,
-  context_lines_path:
-    '/gitlab-org/gitlab-test/blob/c48ee0d1bf3b30453f5b32250ce03134beaa6d13/CHANGELOG/diff',
-  highlighted_diff_lines: [
-    {
-      line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_1',
-      type: 'new',
-      old_line: null,
-      new_line: 1,
-      discussions: [],
-      text: '+<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
-      rich_text: '+<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
-      meta_data: null,
-    },
-    {
-      line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_2',
-      type: 'new',
-      old_line: null,
-      new_line: 2,
-      discussions: [],
-      text: '+<span id="LC2" class="line" lang="plaintext"></span>\n',
-      rich_text: '+<span id="LC2" class="line" lang="plaintext"></span>\n',
-      meta_data: null,
-    },
-    {
-      line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_3',
-      type: null,
-      old_line: 1,
-      new_line: 3,
-      discussions: [],
-      text: ' <span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
-      rich_text: ' <span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
-      meta_data: null,
-    },
-    {
-      line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_2_4',
-      type: null,
-      old_line: 2,
-      new_line: 4,
-      discussions: [],
-      text: ' <span id="LC4" class="line" lang="plaintext"></span>\n',
-      rich_text: ' <span id="LC4" class="line" lang="plaintext"></span>\n',
-      meta_data: null,
-    },
-    {
-      line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_3_5',
-      type: null,
-      old_line: 3,
-      new_line: 5,
-      discussions: [],
-      text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
-      rich_text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
-      meta_data: null,
-    },
-    {
-      line_code: null,
-      type: 'match',
-      old_line: null,
-      new_line: null,
-      discussions: [],
-      text: '',
-      rich_text: '',
-      meta_data: {
-        old_pos: 3,
-        new_pos: 5,
-      },
-    },
-  ],
-  parallel_diff_lines: [
-    {
-      left: {
-        type: 'empty-cell',
-      },
-      right: {
-        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_1',
-        type: 'new',
-        old_line: null,
-        new_line: 1,
-        discussions: [],
-        text: '+<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
-        rich_text: '<span id="LC1" class="line" lang="plaintext">  - Bad dates</span>\n',
-        meta_data: null,
-      },
-    },
-    {
-      left: {
-        type: 'empty-cell',
-      },
-      right: {
-        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_2',
-        type: 'new',
-        old_line: null,
-        new_line: 2,
-        discussions: [],
-        text: '+<span id="LC2" class="line" lang="plaintext"></span>\n',
-        rich_text: '<span id="LC2" class="line" lang="plaintext"></span>\n',
-        meta_data: null,
-      },
-    },
-    {
-      left: {
-        line_Code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_3',
-        type: null,
-        old_line: 1,
-        new_line: 3,
-        discussions: [],
-        text: ' <span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
-        rich_text: '<span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
-        meta_data: null,
-      },
-      right: {
-        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_3',
-        type: null,
-        old_line: 1,
-        new_line: 3,
-        discussions: [],
-        text: ' <span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
-        rich_text: '<span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n',
-        meta_data: null,
-      },
-    },
-    {
-      left: {
-        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_2_4',
-        type: null,
-        old_line: 2,
-        new_line: 4,
-        discussions: [],
-        text: ' <span id="LC4" class="line" lang="plaintext"></span>\n',
-        rich_text: '<span id="LC4" class="line" lang="plaintext"></span>\n',
-        meta_data: null,
-      },
-      right: {
-        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_2_4',
-        type: null,
-        old_line: 2,
-        new_line: 4,
-        discussions: [],
-        text: ' <span id="LC4" class="line" lang="plaintext"></span>\n',
-        rich_text: '<span id="LC4" class="line" lang="plaintext"></span>\n',
-        meta_data: null,
-      },
-    },
-    {
-      left: {
-        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_3_5',
-        type: null,
-        old_line: 3,
-        new_line: 5,
-        discussions: [],
-        text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
-        rich_text: '<span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
-        meta_data: null,
-      },
-      right: {
-        line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_3_5',
-        type: null,
-        old_line: 3,
-        new_line: 5,
-        discussions: [],
-        text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
-        rich_text: '<span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n',
-        meta_data: null,
-      },
-    },
-    {
-      left: {
-        line_code: null,
-        type: 'match',
-        old_line: null,
-        new_line: null,
-        discussions: [],
-        text: '',
-        rich_text: '',
-        meta_data: {
-          old_pos: 3,
-          new_pos: 5,
-        },
-      },
-      right: {
-        line_code: null,
-        type: 'match',
-        old_line: null,
-        new_line: null,
-        discussions: [],
-        text: '',
-        rich_text: '',
-        meta_data: {
-          old_pos: 3,
-          new_pos: 5,
-        },
-      },
-    },
-  ],
-  discussions: [],
-  renderingLines: false,
-};
+// 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
+
+export { default } from '../../../frontend/diffs/mock_data/diff_file_unreadable';