Add latest changes from gitlab-org/gitlab@master

7 files changed, 169 insertions, 55 deletions

diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js
index 0d9d1ad1293..7fbeb33dd93 100644
--- a/spec/frontend/diffs/components/app_spec.js
+++ b/spec/frontend/diffs/components/app_spec.js
@@ -282,14 +282,10 @@ describe('diffs/components/app', () => {
     let moveSpy;
     let jumpSpy;
 
-    function setup(componentProps, featureFlags) {
-      createComponent(
-        componentProps,
-        ({ state }) => {
-          state.diffs.commit = { id: 'SHA123' };
-        },
-        { glFeatures: featureFlags },
-      );
+    function setup(componentProps) {
+      createComponent(componentProps, ({ state }) => {
+        state.diffs.commit = { id: 'SHA123' };
+      });
 
       moveSpy = jest.spyOn(wrapper.vm, 'moveToNeighboringCommit').mockImplementation(() => {});
       jumpSpy = jest.spyOn(wrapper.vm, 'jumpToFile').mockImplementation(() => {});
@@ -298,17 +294,17 @@ describe('diffs/components/app', () => {
 
     describe('visible app', () => {
       it.each`
-        key    | name                         | spy  | args                           | featureFlags
-        ${'['} | ${'jumpToFile'}              | ${0} | ${[-1]}                        | ${{}}
-        ${'k'} | ${'jumpToFile'}              | ${0} | ${[-1]}                        | ${{}}
-        ${']'} | ${'jumpToFile'}              | ${0} | ${[+1]}                        | ${{}}
-        ${'j'} | ${'jumpToFile'}              | ${0} | ${[+1]}                        | ${{}}
-        ${'x'} | ${'moveToNeighboringCommit'} | ${1} | ${[{ direction: 'previous' }]} | ${{}}
-        ${'c'} | ${'moveToNeighboringCommit'} | ${1} | ${[{ direction: 'next' }]}     | ${{}}
+        key    | name                         | spy  | args
+        ${'['} | ${'jumpToFile'}              | ${0} | ${[-1]}
+        ${'k'} | ${'jumpToFile'}              | ${0} | ${[-1]}
+        ${']'} | ${'jumpToFile'}              | ${0} | ${[+1]}
+        ${'j'} | ${'jumpToFile'}              | ${0} | ${[+1]}
+        ${'x'} | ${'moveToNeighboringCommit'} | ${1} | ${[{ direction: 'previous' }]}
+        ${'c'} | ${'moveToNeighboringCommit'} | ${1} | ${[{ direction: 'next' }]}
       `(
         'calls `$name()` with correct parameters whenever the "$key" key is pressed',
-        async ({ key, spy, args, featureFlags }) => {
-          setup({ shouldShow: true }, featureFlags);
+        async ({ key, spy, args }) => {
+          setup({ shouldShow: true });
 
           await nextTick();
           expect(spies[spy]).not.toHaveBeenCalled();
diff --git a/spec/frontend/diffs/components/commit_item_spec.js b/spec/frontend/diffs/components/commit_item_spec.js
index ad515c17e61..f588f65dafd 100644
--- a/spec/frontend/diffs/components/commit_item_spec.js
+++ b/spec/frontend/diffs/components/commit_item_spec.js
@@ -37,15 +37,12 @@ describe('diffs/components/commit_item', () => {
   const getPrevCommitNavElement = () =>
     getCommitNavButtonsElement().find('.btn-group > *:first-child');
 
-  const mountComponent = (propsData, featureFlags = {}) => {
+  const mountComponent = (propsData) => {
     wrapper = mount(Component, {
       propsData: {
         commit,
         ...propsData,
       },
-      provide: {
-        glFeatures: featureFlags,
-      },
       stubs: {
         CommitPipelineStatus: true,
       },
diff --git a/spec/frontend/diffs/components/diff_line_note_form_spec.js b/spec/frontend/diffs/components/diff_line_note_form_spec.js
index 42815e63ef7..faa68159c58 100644
--- a/spec/frontend/diffs/components/diff_line_note_form_spec.js
+++ b/spec/frontend/diffs/components/diff_line_note_form_spec.js
@@ -11,14 +11,16 @@ describe('DiffLineNoteForm', () => {
   let diffLines;
   const getDiffFileMock = () => ({ ...diffFileMockData });
 
-  beforeEach(() => {
+  const createComponent = (args = {}) => {
     diffFile = getDiffFileMock();
     diffLines = diffFile.highlighted_diff_lines;
     const store = createStore();
     store.state.notes.userData.id = 1;
     store.state.notes.noteableData = noteableDataMock;
 
-    wrapper = shallowMount(DiffLineNoteForm, {
+    store.replaceState({ ...store.state, ...args.state });
+
+    return shallowMount(DiffLineNoteForm, {
       store,
       propsData: {
         diffFileHash: diffFile.file_hash,
@@ -27,9 +29,13 @@ describe('DiffLineNoteForm', () => {
         noteTargetLine: diffLines[0],
       },
     });
-  });
+  };
 
   describe('methods', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
     describe('handleCancelCommentForm', () => {
       it('should ask for confirmation when shouldConfirm and isDirty passed as truthy', () => {
         jest.spyOn(window, 'confirm').mockReturnValue(false);
@@ -114,14 +120,39 @@ describe('DiffLineNoteForm', () => {
   describe('mounted', () => {
     it('should init autosave', () => {
       const key = 'autosave/Note/Issue/98//DiffNote//1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_1';
+      wrapper = createComponent();
 
       expect(wrapper.vm.autosave).toBeDefined();
       expect(wrapper.vm.autosave.key).toEqual(key);
     });
+
+    it('should set selectedCommentPosition', () => {
+      wrapper = createComponent();
+      let startLineCode = wrapper.vm.commentLineStart.line_code;
+      let lineCode = wrapper.vm.line.line_code;
+
+      expect(startLineCode).toEqual(lineCode);
+      wrapper.destroy();
+
+      const state = {
+        notes: {
+          selectedCommentPosition: {
+            start: {
+              line_code: 'test',
+            },
+          },
+        },
+      };
+      wrapper = createComponent({ state });
+      startLineCode = wrapper.vm.commentLineStart.line_code;
+      lineCode = state.notes.selectedCommentPosition.start.line_code;
+      expect(startLineCode).toEqual(lineCode);
+    });
   });
 
   describe('template', () => {
     it('should have note form', () => {
+      wrapper = createComponent();
       expect(wrapper.find(NoteForm).exists()).toBe(true);
     });
   });
diff --git a/spec/frontend/diffs/components/diff_row_spec.js b/spec/frontend/diffs/components/diff_row_spec.js
index 0ec075c8ad8..f0d335b88e5 100644
--- a/spec/frontend/diffs/components/diff_row_spec.js
+++ b/spec/frontend/diffs/components/diff_row_spec.js
@@ -1,4 +1,5 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { getByTestId, fireEvent } from '@testing-library/dom';
 import Vuex from 'vuex';
 import diffsModule from '~/diffs/store/modules';
 import DiffRow from '~/diffs/components/diff_row.vue';
@@ -42,16 +43,16 @@ describe('DiffRow', () => {
       fileHash: 'abc',
       filePath: 'abc',
       line: {},
+      index: 0,
       ...props,
     };
-    return shallowMount(DiffRow, { propsData, localVue, store });
-  };
 
-  it('isHighlighted returns true if isCommented is true', () => {
-    const props = { isCommented: true };
-    const wrapper = createWrapper({ props });
-    expect(wrapper.vm.isHighlighted).toBe(true);
-  });
+    const provide = {
+      glFeatures: { dragCommentSelection: true },
+    };
+
+    return shallowMount(DiffRow, { propsData, localVue, store, provide });
+  };
 
   it('isHighlighted returns true given line.left', () => {
     const props = {
@@ -124,4 +125,36 @@ describe('DiffRow', () => {
     const lineNumber = testLines[0].right.new_line;
     expect(wrapper.find(`[data-linenumber="${lineNumber}"]`).exists()).toBe(true);
   });
+
+  describe('drag operations', () => {
+    let line;
+
+    beforeEach(() => {
+      line = { ...testLines[0] };
+    });
+
+    it.each`
+      side
+      ${'left'}
+      ${'right'}
+    `('emits `enterdragging` onDragEnter $side side', ({ side }) => {
+      const expectation = { ...line[side], index: 0 };
+      const wrapper = createWrapper({ props: { line } });
+      fireEvent.dragEnter(getByTestId(wrapper.element, `${side}-side`));
+
+      expect(wrapper.emitted().enterdragging).toBeTruthy();
+      expect(wrapper.emitted().enterdragging[0]).toEqual([expectation]);
+    });
+
+    it.each`
+      side
+      ${'left'}
+      ${'right'}
+    `('emits `stopdragging` onDrop $side side', ({ side }) => {
+      const wrapper = createWrapper({ props: { line } });
+      fireEvent.dragEnd(getByTestId(wrapper.element, `${side}-side`));
+
+      expect(wrapper.emitted().stopdragging).toBeTruthy();
+    });
+  });
 });
diff --git a/spec/frontend/diffs/components/diff_row_utils_spec.js b/spec/frontend/diffs/components/diff_row_utils_spec.js
index f397c3dc012..d70d6b609ac 100644
--- a/spec/frontend/diffs/components/diff_row_utils_spec.js
+++ b/spec/frontend/diffs/components/diff_row_utils_spec.js
@@ -126,14 +126,14 @@ describe('lineCode', () => {
 
 describe('classNameMapCell', () => {
   it.each`
-    line               | hll      | loggedIn | hovered  | expectation
-    ${undefined}       | ${true}  | ${true}  | ${true}  | ${[]}
-    ${{ type: 'new' }} | ${false} | ${false} | ${false} | ${['new', { hll: false, 'is-over': false, new_line: true, old_line: false }]}
-    ${{ type: 'new' }} | ${true}  | ${true}  | ${false} | ${['new', { hll: true, 'is-over': false, new_line: true, old_line: false }]}
-    ${{ type: 'new' }} | ${true}  | ${false} | ${true}  | ${['new', { hll: true, 'is-over': false, new_line: true, old_line: false }]}
-    ${{ type: 'new' }} | ${true}  | ${true}  | ${true}  | ${['new', { hll: true, 'is-over': true, new_line: true, old_line: false }]}
-  `('should return $expectation', ({ line, hll, loggedIn, hovered, expectation }) => {
-    const classes = utils.classNameMapCell(line, hll, loggedIn, hovered);
+    line               | hll      | isLoggedIn | isHover  | expectation
+    ${undefined}       | ${true}  | ${true}    | ${true}  | ${[]}
+    ${{ type: 'new' }} | ${false} | ${false}   | ${false} | ${['new', { hll: false, 'is-over': false, new_line: true, old_line: false }]}
+    ${{ type: 'new' }} | ${true}  | ${true}    | ${false} | ${['new', { hll: true, 'is-over': false, new_line: true, old_line: false }]}
+    ${{ type: 'new' }} | ${true}  | ${false}   | ${true}  | ${['new', { hll: true, 'is-over': false, new_line: true, old_line: false }]}
+    ${{ type: 'new' }} | ${true}  | ${true}    | ${true}  | ${['new', { hll: true, 'is-over': true, new_line: true, old_line: false }]}
+  `('should return $expectation', ({ line, hll, isLoggedIn, isHover, expectation }) => {
+    const classes = utils.classNameMapCell({ line, hll, isLoggedIn, isHover });
     expect(classes).toEqual(expectation);
   });
 });
diff --git a/spec/frontend/diffs/components/diff_view_spec.js b/spec/frontend/diffs/components/diff_view_spec.js
index 9d1242e4b77..3d36ebf14a3 100644
--- a/spec/frontend/diffs/components/diff_view_spec.js
+++ b/spec/frontend/diffs/components/diff_view_spec.js
@@ -1,19 +1,19 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import DiffView from '~/diffs/components/diff_view.vue';
-// import DraftNote from '~/batch_comments/components/draft_note.vue';
-// import DiffRow from '~/diffs/components/diff_row.vue';
-// import DiffCommentCell from '~/diffs/components/diff_comment_cell.vue';
-// import DiffExpansionCell from '~/diffs/components/diff_expansion_cell.vue';
 
 describe('DiffView', () => {
   const DiffExpansionCell = { template: `<div/>` };
   const DiffRow = { template: `<div/>` };
   const DiffCommentCell = { template: `<div/>` };
   const DraftNote = { template: `<div/>` };
+  const showCommentForm = jest.fn();
+  const setSelectedCommentPosition = jest.fn();
+  const getDiffRow = (wrapper) => wrapper.findComponent(DiffRow).vm;
+
   const createWrapper = (props) => {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
+    Vue.use(Vuex);
 
     const batchComments = {
       getters: {
@@ -26,8 +26,13 @@ describe('DiffView', () => {
       },
       namespaced: true,
     };
-    const diffs = { getters: { commitId: () => 'abc123' }, namespaced: true };
+    const diffs = {
+      actions: { showCommentForm },
+      getters: { commitId: () => 'abc123' },
+      namespaced: true,
+    };
     const notes = {
+      actions: { setSelectedCommentPosition },
       state: { selectedCommentPosition: null, selectedCommentPositionHover: null },
     };
 
@@ -41,7 +46,7 @@ describe('DiffView', () => {
       ...props,
     };
     const stubs = { DiffExpansionCell, DiffRow, DiffCommentCell, DraftNote };
-    return shallowMount(DiffView, { propsData, store, localVue, stubs });
+    return shallowMount(DiffView, { propsData, store, stubs });
   };
 
   it('renders a match line', () => {
@@ -74,4 +79,55 @@ describe('DiffView', () => {
     });
     expect(wrapper.find(DraftNote).exists()).toBe(true);
   });
+
+  describe('drag operations', () => {
+    it('sets `dragStart` onStartDragging', () => {
+      const wrapper = createWrapper({ diffLines: [{}] });
+
+      wrapper.findComponent(DiffRow).vm.$emit('startdragging', { test: true });
+      expect(wrapper.vm.dragStart).toEqual({ test: true });
+    });
+
+    it('does not call `setSelectedCommentPosition` on different chunks onDragOver', () => {
+      const wrapper = createWrapper({ diffLines: [{}] });
+      const diffRow = getDiffRow(wrapper);
+
+      diffRow.$emit('startdragging', { chunk: 0 });
+      diffRow.$emit('enterdragging', { chunk: 1 });
+
+      expect(setSelectedCommentPosition).not.toHaveBeenCalled();
+    });
+
+    it.each`
+      start | end  | expectation
+      ${1}  | ${2} | ${{ start: { index: 1 }, end: { index: 2 } }}
+      ${2}  | ${1} | ${{ start: { index: 1 }, end: { index: 2 } }}
+      ${1}  | ${1} | ${{ start: { index: 1 }, end: { index: 1 } }}
+    `(
+      'calls `setSelectedCommentPosition` with correct `updatedLineRange`',
+      ({ start, end, expectation }) => {
+        const wrapper = createWrapper({ diffLines: [{}] });
+        const diffRow = getDiffRow(wrapper);
+
+        diffRow.$emit('startdragging', { chunk: 1, index: start });
+        diffRow.$emit('enterdragging', { chunk: 1, index: end });
+
+        const arg = setSelectedCommentPosition.mock.calls[0][1];
+
+        expect(arg).toMatchObject(expectation);
+      },
+    );
+
+    it('sets `dragStart` to null onStopDragging', () => {
+      const wrapper = createWrapper({ diffLines: [{}] });
+      const diffRow = getDiffRow(wrapper);
+
+      diffRow.$emit('startdragging', { test: true });
+      expect(wrapper.vm.dragStart).toEqual({ test: true });
+
+      diffRow.$emit('stopdragging');
+      expect(wrapper.vm.dragStart).toBeNull();
+      expect(showCommentForm).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/spec/frontend/diffs/store/utils_spec.js b/spec/frontend/diffs/store/utils_spec.js
index 9fef48ccf42..a19e5e91677 100644
--- a/spec/frontend/diffs/store/utils_spec.js
+++ b/spec/frontend/diffs/store/utils_spec.js
@@ -1159,7 +1159,7 @@ describe('DiffsStoreUtils', () => {
     it('converts inline diff lines to parallel diff lines', () => {
       const file = getDiffFileMock();
 
-      expect(utils.parallelizeDiffLines(file[INLINE_DIFF_LINES_KEY])).toEqual(
+      expect(utils.parallelizeDiffLines(file[INLINE_DIFF_LINES_KEY])).toMatchObject(
         file.parallel_diff_lines,
       );
     });
@@ -1178,16 +1178,17 @@ describe('DiffsStoreUtils', () => {
         {
           left: null,
           right: {
+            chunk: 0,
             type: 'new',
           },
         },
         {
-          left: { type: 'conflict_marker_our' },
-          right: { type: 'conflict_marker_their' },
+          left: { chunk: 0, type: 'conflict_marker_our' },
+          right: { chunk: 0, type: 'conflict_marker_their' },
         },
         {
-          left: { type: 'conflict_our' },
-          right: { type: 'conflict_their' },
+          left: { chunk: 0, type: 'conflict_our' },
+          right: { chunk: 0, type: 'conflict_their' },
         },
       ]);
     });
@@ -1196,9 +1197,9 @@ describe('DiffsStoreUtils', () => {
       const file = getDiffFileMock();
       const files = utils.parallelizeDiffLines(file.highlighted_diff_lines, true);
 
-      expect(files[5].left).toEqual(file.parallel_diff_lines[5].left);
+      expect(files[5].left).toMatchObject(file.parallel_diff_lines[5].left);
       expect(files[5].right).toBeNull();
-      expect(files[6].left).toEqual(file.parallel_diff_lines[5].right);
+      expect(files[6].left).toMatchObject(file.parallel_diff_lines[5].right);
       expect(files[6].right).toBeNull();
     });
   });