Add latest changes from gitlab-org/gitlab@master

3 files changed, 74 insertions, 79 deletions

diff --git a/spec/frontend/diffs/components/diff_row_spec.js b/spec/frontend/diffs/components/diff_row_spec.js
index 137cc7e3f86..c0c92908701 100644
--- a/spec/frontend/diffs/components/diff_row_spec.js
+++ b/spec/frontend/diffs/components/diff_row_spec.js
@@ -8,6 +8,12 @@ import diffsModule from '~/diffs/store/modules';
 import { findInteropAttributes } from '../find_interop_attributes';
 import diffFileMockData from '../mock_data/diff_file';
 
+const showCommentForm = jest.fn();
+const enterdragging = jest.fn();
+const stopdragging = jest.fn();
+const setHighlightedRow = jest.fn();
+let wrapper;
+
 describe('DiffRow', () => {
   const testLines = [
     {
@@ -29,7 +35,7 @@ describe('DiffRow', () => {
     },
   ];
 
-  const createWrapper = ({ props, state, actions, isLoggedIn = true }) => {
+  const createWrapper = ({ props, state = {}, actions, isLoggedIn = true }) => {
     Vue.use(Vuex);
 
     const diffs = diffsModule();
@@ -43,11 +49,25 @@ describe('DiffRow', () => {
       getters,
     });
 
+    window.gon = { current_user_id: isLoggedIn ? 1 : 0 };
+    const coverageFileData = state.coverageFiles?.files ? state.coverageFiles.files : {};
+
     const propsData = {
       fileHash: 'abc',
       filePath: 'abc',
       line: {},
       index: 0,
+      isHighlighted: false,
+      fileLineCoverage: (file, line) => {
+        const hits = coverageFileData[file]?.[line];
+        if (hits) {
+          return { text: `Test coverage: ${hits} hits`, class: 'coverage' };
+        } else if (hits === 0) {
+          return { text: 'No test coverage', class: 'no-coverage' };
+        }
+
+        return {};
+      },
       ...props,
     };
 
@@ -55,49 +75,37 @@ describe('DiffRow', () => {
       glFeatures: { dragCommentSelection: true },
     };
 
-    return shallowMount(DiffRow, { propsData, store, provide });
+    return shallowMount(DiffRow, {
+      propsData,
+      store,
+      provide,
+      listeners: {
+        enterdragging,
+        stopdragging,
+        setHighlightedRow,
+        showCommentForm,
+      },
+    });
   };
 
-  it('isHighlighted returns true given line.left', () => {
-    const props = {
-      line: {
-        left: {
-          line_code: 'abc',
-        },
-      },
-    };
-    const state = { highlightedRow: 'abc' };
-    const wrapper = createWrapper({ props, state });
-    expect(wrapper.vm.isHighlighted).toBe(true);
-  });
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
 
-  it('isHighlighted returns true given line.right', () => {
-    const props = {
-      line: {
-        right: {
-          line_code: 'abc',
-        },
-      },
-    };
-    const state = { highlightedRow: 'abc' };
-    const wrapper = createWrapper({ props, state });
-    expect(wrapper.vm.isHighlighted).toBe(true);
-  });
+    window.gon = {};
+    showCommentForm.mockReset();
+    enterdragging.mockReset();
+    stopdragging.mockReset();
+    setHighlightedRow.mockReset();
 
-  it('isHighlighted returns false given line.left', () => {
-    const props = {
-      line: {
-        left: {
-          line_code: 'abc',
-        },
-      },
-    };
-    const wrapper = createWrapper({ props });
-    expect(wrapper.vm.isHighlighted).toBe(false);
+    Object.values(DiffRow).forEach(({ cache }) => {
+      if (cache) {
+        cache.clear();
+      }
+    });
   });
 
-  const getCommentButton = (wrapper, side) =>
-    wrapper.find(`[data-testid="${side}-comment-button"]`);
+  const getCommentButton = (side) => wrapper.find(`[data-testid="${side}-comment-button"]`);
 
   describe.each`
     side
@@ -105,33 +113,30 @@ describe('DiffRow', () => {
     ${'right'}
   `('$side side', ({ side }) => {
     it(`renders empty cells if ${side} is unavailable`, () => {
-      const wrapper = createWrapper({ props: { line: testLines[2], inline: false } });
+      wrapper = createWrapper({ props: { line: testLines[2], inline: false } });
       expect(wrapper.find(`[data-testid="${side}-line-number"]`).exists()).toBe(false);
       expect(wrapper.find(`[data-testid="${side}-empty-cell"]`).exists()).toBe(true);
     });
 
     describe('comment button', () => {
-      const showCommentForm = jest.fn();
       let line;
 
       beforeEach(() => {
-        showCommentForm.mockReset();
         // https://eslint.org/docs/rules/prefer-destructuring#when-not-to-use-it
         // eslint-disable-next-line prefer-destructuring
         line = testLines[3];
       });
 
       it('renders', () => {
-        const wrapper = createWrapper({ props: { line, inline: false } });
-        expect(getCommentButton(wrapper, side).exists()).toBe(true);
+        wrapper = createWrapper({ props: { line, inline: false } });
+        expect(getCommentButton(side).exists()).toBe(true);
       });
 
       it('responds to click and keyboard events', async () => {
-        const wrapper = createWrapper({
+        wrapper = createWrapper({
           props: { line, inline: false },
-          actions: { showCommentForm },
         });
-        const commentButton = getCommentButton(wrapper, side);
+        const commentButton = getCommentButton(side);
 
         await commentButton.trigger('click');
         await commentButton.trigger('keydown.enter');
@@ -142,11 +147,10 @@ describe('DiffRow', () => {
 
       it('ignores click and keyboard events when comments are disabled', async () => {
         line[side].commentsDisabled = true;
-        const wrapper = createWrapper({
+        wrapper = createWrapper({
           props: { line, inline: false },
-          actions: { showCommentForm },
         });
-        const commentButton = getCommentButton(wrapper, side);
+        const commentButton = getCommentButton(side);
 
         await commentButton.trigger('click');
         await commentButton.trigger('keydown.enter');
@@ -157,19 +161,20 @@ describe('DiffRow', () => {
     });
 
     it('renders avatars', () => {
-      const wrapper = createWrapper({ props: { line: testLines[0], inline: false } });
+      wrapper = createWrapper({ props: { line: testLines[0], inline: false } });
+
       expect(wrapper.find(`[data-testid="${side}-discussions"]`).exists()).toBe(true);
     });
   });
 
   it('renders left line numbers', () => {
-    const wrapper = createWrapper({ props: { line: testLines[0] } });
+    wrapper = createWrapper({ props: { line: testLines[0] } });
     const lineNumber = testLines[0].left.old_line;
     expect(wrapper.find(`[data-linenumber="${lineNumber}"]`).exists()).toBe(true);
   });
 
   it('renders right line numbers', () => {
-    const wrapper = createWrapper({ props: { line: testLines[0] } });
+    wrapper = createWrapper({ props: { line: testLines[0] } });
     const lineNumber = testLines[0].right.new_line;
     expect(wrapper.find(`[data-linenumber="${lineNumber}"]`).exists()).toBe(true);
   });
@@ -186,12 +191,10 @@ describe('DiffRow', () => {
       ${'left'}
       ${'right'}
     `('emits `enterdragging` onDragEnter $side side', ({ side }) => {
-      const expectation = { ...line[side], index: 0 };
-      const wrapper = createWrapper({ props: { line } });
+      wrapper = createWrapper({ props: { line } });
       fireEvent.dragEnter(getByTestId(wrapper.element, `${side}-side`));
 
-      expect(wrapper.emitted().enterdragging).toBeTruthy();
-      expect(wrapper.emitted().enterdragging[0]).toEqual([expectation]);
+      expect(enterdragging).toHaveBeenCalledWith({ ...line[side], index: 0 });
     });
 
     it.each`
@@ -199,10 +202,10 @@ describe('DiffRow', () => {
       ${'left'}
       ${'right'}
     `('emits `stopdragging` onDrop $side side', ({ side }) => {
-      const wrapper = createWrapper({ props: { line } });
+      wrapper = createWrapper({ props: { line } });
       fireEvent.dragEnd(getByTestId(wrapper.element, `${side}-side`));
 
-      expect(wrapper.emitted().stopdragging).toBeTruthy();
+      expect(stopdragging).toHaveBeenCalled();
     });
   });
 
@@ -231,7 +234,7 @@ describe('DiffRow', () => {
 
     it('for lines with coverage', () => {
       const coverageFiles = { files: { [name]: { [line]: 5 } } };
-      const wrapper = createWrapper({ props, state: { coverageFiles } });
+      wrapper = createWrapper({ props, state: { coverageFiles } });
       const coverage = wrapper.find('.line-coverage.right-side');
 
       expect(coverage.attributes('title')).toContain('Test coverage: 5 hits');
@@ -240,7 +243,7 @@ describe('DiffRow', () => {
 
     it('for lines without coverage', () => {
       const coverageFiles = { files: { [name]: { [line]: 0 } } };
-      const wrapper = createWrapper({ props, state: { coverageFiles } });
+      wrapper = createWrapper({ props, state: { coverageFiles } });
       const coverage = wrapper.find('.line-coverage.right-side');
 
       expect(coverage.attributes('title')).toContain('No test coverage');
@@ -249,7 +252,7 @@ describe('DiffRow', () => {
 
     it('for unknown lines', () => {
       const coverageFiles = {};
-      const wrapper = createWrapper({ props, state: { coverageFiles } });
+      wrapper = createWrapper({ props, state: { coverageFiles } });
       const coverage = wrapper.find('.line-coverage.right-side');
 
       expect(coverage.attributes('title')).toBeFalsy();
@@ -267,7 +270,7 @@ describe('DiffRow', () => {
       ${'with parallel and no left side'}  | ${{ right: { old_line: 3, new_line: 5 } }}             | ${false} | ${null}                                                   | ${{ type: 'new', line: '5', newLine: '5' }}
       ${'with parallel and right side'}    | ${{ left: { old_line: 3 }, right: { new_line: 5 } }}   | ${false} | ${{ type: 'old', line: '3', oldLine: '3' }}               | ${{ type: 'new', line: '5', newLine: '5' }}
     `('$desc, sets interop data attributes', ({ line, inline, leftSide, rightSide }) => {
-      const wrapper = createWrapper({ props: { line, inline } });
+      wrapper = createWrapper({ props: { line, inline } });
 
       expect(findInteropAttributes(wrapper, '[data-testid="left-side"]')).toEqual(leftSide);
       expect(findInteropAttributes(wrapper, '[data-testid="right-side"]')).toEqual(rightSide);
diff --git a/spec/frontend/diffs/components/diff_row_utils_spec.js b/spec/frontend/diffs/components/diff_row_utils_spec.js
index 7cc94464585..930b8bcdb08 100644
--- a/spec/frontend/diffs/components/diff_row_utils_spec.js
+++ b/spec/frontend/diffs/components/diff_row_utils_spec.js
@@ -11,24 +11,21 @@ const LINE_CODE = 'abc123';
 
 describe('isHighlighted', () => {
   it('should return true if line is highlighted', () => {
-    const state = { diffs: { highlightedRow: LINE_CODE } };
     const line = { line_code: LINE_CODE };
     const isCommented = false;
-    expect(utils.isHighlighted(state, line, isCommented)).toBe(true);
+    expect(utils.isHighlighted(LINE_CODE, line, isCommented)).toBe(true);
   });
 
   it('should return false if line is not highlighted', () => {
-    const state = { diffs: { highlightedRow: 'xxx' } };
     const line = { line_code: LINE_CODE };
     const isCommented = false;
-    expect(utils.isHighlighted(state, line, isCommented)).toBe(false);
+    expect(utils.isHighlighted('xxx', line, isCommented)).toBe(false);
   });
 
   it('should return true if isCommented is true', () => {
-    const state = { diffs: { highlightedRow: 'xxx' } };
     const line = { line_code: LINE_CODE };
     const isCommented = true;
-    expect(utils.isHighlighted(state, line, isCommented)).toBe(true);
+    expect(utils.isHighlighted('xxx', line, isCommented)).toBe(true);
   });
 });
 
@@ -143,19 +140,14 @@ describe('addCommentTooltip', () => {
     'Commenting on symbolic links that replace or are replaced by files is currently not supported.';
   const brokenRealTooltip =
     'Commenting on files that replace or are replaced by symbolic links is currently not supported.';
-  const commentTooltip = 'Add a comment to this line';
   const dragTooltip = 'Add a comment to this line or drag for multiple lines';
 
   it('should return default tooltip', () => {
     expect(utils.addCommentTooltip()).toBeUndefined();
   });
 
-  it('should return comment tooltip', () => {
-    expect(utils.addCommentTooltip({})).toEqual(commentTooltip);
-  });
-
   it('should return drag comment tooltip when dragging is enabled', () => {
-    expect(utils.addCommentTooltip({}, true)).toEqual(dragTooltip);
+    expect(utils.addCommentTooltip({})).toEqual(dragTooltip);
   });
 
   it('should return broken symlink tooltip', () => {
diff --git a/spec/frontend/diffs/components/diff_view_spec.js b/spec/frontend/diffs/components/diff_view_spec.js
index 83b173c1f5d..2d68fd2bf43 100644
--- a/spec/frontend/diffs/components/diff_view_spec.js
+++ b/spec/frontend/diffs/components/diff_view_spec.js
@@ -28,7 +28,7 @@ describe('DiffView', () => {
     };
     const diffs = {
       actions: { showCommentForm },
-      getters: { commitId: () => 'abc123' },
+      getters: { commitId: () => 'abc123', fileLineCoverage: () => ({}) },
       namespaced: true,
     };
     const notes = {
@@ -84,7 +84,7 @@ describe('DiffView', () => {
     it('sets `dragStart` onStartDragging', () => {
       const wrapper = createWrapper({ diffLines: [{}] });
 
-      wrapper.findComponent(DiffRow).vm.$emit('startdragging', { test: true });
+      wrapper.findComponent(DiffRow).vm.$emit('startdragging', { line: { test: true } });
       expect(wrapper.vm.dragStart).toEqual({ test: true });
     });
 
@@ -92,7 +92,7 @@ describe('DiffView', () => {
       const wrapper = createWrapper({ diffLines: [{}] });
       const diffRow = getDiffRow(wrapper);
 
-      diffRow.$emit('startdragging', { chunk: 0 });
+      diffRow.$emit('startdragging', { line: { chunk: 0 } });
       diffRow.$emit('enterdragging', { chunk: 1 });
 
       expect(setSelectedCommentPosition).not.toHaveBeenCalled();
@@ -109,7 +109,7 @@ describe('DiffView', () => {
         const wrapper = createWrapper({ diffLines: [{}] });
         const diffRow = getDiffRow(wrapper);
 
-        diffRow.$emit('startdragging', { chunk: 1, index: start });
+        diffRow.$emit('startdragging', { line: { chunk: 1, index: start } });
         diffRow.$emit('enterdragging', { chunk: 1, index: end });
 
         const arg = setSelectedCommentPosition.mock.calls[0][1];
@@ -122,7 +122,7 @@ describe('DiffView', () => {
       const wrapper = createWrapper({ diffLines: [{}] });
       const diffRow = getDiffRow(wrapper);
 
-      diffRow.$emit('startdragging', { test: true });
+      diffRow.$emit('startdragging', { line: { test: true } });
       expect(wrapper.vm.dragStart).toEqual({ test: true });
 
       diffRow.$emit('stopdragging');