Add latest changes from gitlab-org/gitlab@master

2 files changed, 203 insertions, 279 deletions

diff --git a/spec/frontend/diffs/components/diff_row_utils_spec.js b/spec/frontend/diffs/components/diff_row_utils_spec.js
new file mode 100644
index 00000000000..394b6cb1914
--- /dev/null
+++ b/spec/frontend/diffs/components/diff_row_utils_spec.js
@@ -0,0 +1,203 @@
+import * as utils from '~/diffs/components/diff_row_utils';
+import {
+  MATCH_LINE_TYPE,
+  CONTEXT_LINE_TYPE,
+  OLD_NO_NEW_LINE_TYPE,
+  NEW_NO_NEW_LINE_TYPE,
+  EMPTY_CELL_TYPE,
+} from '~/diffs/constants';
+
+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);
+  });
+
+  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);
+  });
+
+  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);
+  });
+});
+
+describe('isContextLine', () => {
+  it('return true if line type is context', () => {
+    expect(utils.isContextLine(CONTEXT_LINE_TYPE)).toBe(true);
+  });
+
+  it('return false if line type is not context', () => {
+    expect(utils.isContextLine('xxx')).toBe(false);
+  });
+});
+
+describe('isMatchLine', () => {
+  it('return true if line type is match', () => {
+    expect(utils.isMatchLine(MATCH_LINE_TYPE)).toBe(true);
+  });
+
+  it('return false if line type is not match', () => {
+    expect(utils.isMatchLine('xxx')).toBe(false);
+  });
+});
+
+describe('isMetaLine', () => {
+  it.each`
+    type                    | expectation
+    ${OLD_NO_NEW_LINE_TYPE} | ${true}
+    ${NEW_NO_NEW_LINE_TYPE} | ${true}
+    ${EMPTY_CELL_TYPE}      | ${true}
+    ${'xxx'}                | ${false}
+  `('should return $expectation if type is $type', ({ type, expectation }) => {
+    expect(utils.isMetaLine(type)).toBe(expectation);
+  });
+});
+
+describe('shouldRenderCommentButton', () => {
+  it('should return false if comment button is not rendered', () => {
+    expect(utils.shouldRenderCommentButton(true, false)).toBe(false);
+  });
+
+  it('should return false if not logged in', () => {
+    expect(utils.shouldRenderCommentButton(false, true)).toBe(false);
+  });
+
+  it('should return true logged in and rendered', () => {
+    expect(utils.shouldRenderCommentButton(true, true)).toBe(true);
+  });
+});
+
+describe('hasDiscussions', () => {
+  it('should return false if line is undefined', () => {
+    expect(utils.hasDiscussions()).toBe(false);
+  });
+
+  it('should return false if discussions is undefined', () => {
+    expect(utils.hasDiscussions({})).toBe(false);
+  });
+
+  it('should return false if discussions has legnth of 0', () => {
+    expect(utils.hasDiscussions({ discussions: [] })).toBe(false);
+  });
+
+  it('should return true if discussions has legnth > 0', () => {
+    expect(utils.hasDiscussions({ discussions: [1] })).toBe(true);
+  });
+});
+
+describe('lineHref', () => {
+  it(`should return #${LINE_CODE}`, () => {
+    expect(utils.lineHref({ line_code: LINE_CODE })).toEqual(`#${LINE_CODE}`);
+  });
+
+  it(`should return '#' if line is undefined`, () => {
+    expect(utils.lineHref()).toEqual('#');
+  });
+
+  it(`should return '#' if line_code is undefined`, () => {
+    expect(utils.lineHref({})).toEqual('#');
+  });
+});
+
+describe('lineCode', () => {
+  it(`should return undefined if line_code is undefined`, () => {
+    expect(utils.lineCode()).toEqual(undefined);
+    expect(utils.lineCode({ left: {} })).toEqual(undefined);
+    expect(utils.lineCode({ right: {} })).toEqual(undefined);
+  });
+
+  it(`should return ${LINE_CODE}`, () => {
+    expect(utils.lineCode({ line_code: LINE_CODE })).toEqual(LINE_CODE);
+    expect(utils.lineCode({ left: { line_code: LINE_CODE } })).toEqual(LINE_CODE);
+    expect(utils.lineCode({ right: { line_code: LINE_CODE } })).toEqual(LINE_CODE);
+  });
+});
+
+describe('classNameMapCell', () => {
+  it.each`
+    line               | hll      | loggedIn | hovered  | expectation
+    ${undefined}       | ${true}  | ${true}  | ${true}  | ${[]}
+    ${{ type: 'new' }} | ${false} | ${false} | ${false} | ${['new', { hll: false, 'is-over': false }]}
+    ${{ type: 'new' }} | ${true}  | ${true}  | ${false} | ${['new', { hll: true, 'is-over': false }]}
+    ${{ type: 'new' }} | ${true}  | ${false} | ${true}  | ${['new', { hll: true, 'is-over': false }]}
+    ${{ type: 'new' }} | ${true}  | ${true}  | ${true}  | ${['new', { hll: true, 'is-over': true }]}
+  `('should return $expectation', ({ line, hll, loggedIn, hovered, expectation }) => {
+    const classes = utils.classNameMapCell(line, hll, loggedIn, hovered);
+    expect(classes).toEqual(expectation);
+  });
+});
+
+describe('addCommentTooltip', () => {
+  const brokenSymLinkTooltip =
+    '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.';
+  it('should return default tooltip', () => {
+    expect(utils.addCommentTooltip()).toBeUndefined();
+  });
+
+  it('should return broken symlink tooltip', () => {
+    expect(utils.addCommentTooltip({ commentsDisabled: { wasSymbolic: true } })).toEqual(
+      brokenSymLinkTooltip,
+    );
+    expect(utils.addCommentTooltip({ commentsDisabled: { isSymbolic: true } })).toEqual(
+      brokenSymLinkTooltip,
+    );
+  });
+
+  it('should return broken real tooltip', () => {
+    expect(utils.addCommentTooltip({ commentsDisabled: { wasReal: true } })).toEqual(
+      brokenRealTooltip,
+    );
+    expect(utils.addCommentTooltip({ commentsDisabled: { isReal: true } })).toEqual(
+      brokenRealTooltip,
+    );
+  });
+});
+
+describe('parallelViewLeftLineType', () => {
+  it(`should return ${OLD_NO_NEW_LINE_TYPE}`, () => {
+    expect(utils.parallelViewLeftLineType({ right: { type: NEW_NO_NEW_LINE_TYPE } })).toEqual(
+      OLD_NO_NEW_LINE_TYPE,
+    );
+  });
+
+  it(`should return 'new'`, () => {
+    expect(utils.parallelViewLeftLineType({ left: { type: 'new' } })).toContain('new');
+  });
+
+  it(`should return ${EMPTY_CELL_TYPE}`, () => {
+    expect(utils.parallelViewLeftLineType({})).toContain(EMPTY_CELL_TYPE);
+  });
+
+  it(`should return hll:true`, () => {
+    expect(utils.parallelViewLeftLineType({}, true)[1]).toEqual({ hll: true });
+  });
+});
+
+describe('shouldShowCommentButton', () => {
+  it.each`
+    hover    | context  | meta     | discussions | expectation
+    ${true}  | ${false} | ${false} | ${false}    | ${true}
+    ${false} | ${false} | ${false} | ${false}    | ${false}
+    ${true}  | ${true}  | ${false} | ${false}    | ${false}
+    ${true}  | ${true}  | ${true}  | ${false}    | ${false}
+    ${true}  | ${true}  | ${true}  | ${true}     | ${false}
+  `(
+    'should return $expectation when hover is $hover',
+    ({ hover, context, meta, discussions, expectation }) => {
+      expect(utils.shouldShowCommentButton(hover, context, meta, discussions)).toBe(expectation);
+    },
+  );
+});
diff --git a/spec/frontend/diffs/components/diff_table_cell_spec.js b/spec/frontend/diffs/components/diff_table_cell_spec.js
deleted file mode 100644
index 02f5c27eecb..00000000000
--- a/spec/frontend/diffs/components/diff_table_cell_spec.js
+++ /dev/null
@@ -1,279 +0,0 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import Vuex from 'vuex';
-import { TEST_HOST } from 'helpers/test_constants';
-import DiffTableCell from '~/diffs/components/diff_table_cell.vue';
-import DiffGutterAvatars from '~/diffs/components/diff_gutter_avatars.vue';
-import { LINE_POSITION_RIGHT } from '~/diffs/constants';
-import { createStore } from '~/mr_notes/stores';
-import discussionsMockData from '../mock_data/diff_discussions';
-import diffFileMockData from '../mock_data/diff_file';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-const TEST_USER_ID = 'abc123';
-const TEST_USER = { id: TEST_USER_ID };
-const TEST_LINE_NUMBER = 1;
-const TEST_LINE_CODE = 'LC_42';
-const TEST_FILE_HASH = diffFileMockData.file_hash;
-
-describe('DiffTableCell', () => {
-  const symlinkishFileTooltip =
-    'Commenting on symbolic links that replace or are replaced by files is currently not supported.';
-  const realishFileTooltip =
-    'Commenting on files that replace or are replaced by symbolic links is currently not supported.';
-  const otherFileTooltip = 'Add a comment to this line';
-
-  let wrapper;
-  let line;
-  let store;
-
-  beforeEach(() => {
-    store = createStore();
-    store.state.notes.userData = TEST_USER;
-
-    line = {
-      line_code: TEST_LINE_CODE,
-      type: 'new',
-      old_line: null,
-      new_line: 1,
-      discussions: [{ ...discussionsMockData }],
-      discussionsExpanded: true,
-      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,
-    };
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  const setWindowLocation = value => {
-    Object.defineProperty(window, 'location', {
-      writable: true,
-      value,
-    });
-  };
-
-  const createComponent = (props = {}) => {
-    wrapper = shallowMount(DiffTableCell, {
-      localVue,
-      store,
-      propsData: {
-        line,
-        fileHash: TEST_FILE_HASH,
-        contextLinesPath: '/context/lines/path',
-        isHighlighted: false,
-        ...props,
-      },
-    });
-  };
-
-  const findTd = () => wrapper.find({ ref: 'td' });
-  const findNoteButton = () => wrapper.find({ ref: 'addDiffNoteButton' });
-  const findLineNumber = () => wrapper.find({ ref: 'lineNumberRef' });
-  const findTooltip = () => wrapper.find({ ref: 'addNoteTooltip' });
-  const findAvatars = () => wrapper.find(DiffGutterAvatars);
-
-  describe('td', () => {
-    it('highlights when isHighlighted true', () => {
-      createComponent({ isHighlighted: true });
-
-      expect(findTd().classes()).toContain('hll');
-    });
-
-    it('does not highlight when isHighlighted false', () => {
-      createComponent({ isHighlighted: false });
-
-      expect(findTd().classes()).not.toContain('hll');
-    });
-  });
-
-  describe('comment button', () => {
-    it.each`
-      showCommentButton | userData     | query                | mergeRefHeadComments | expectation
-      ${true}           | ${TEST_USER} | ${'diff_head=false'} | ${false}             | ${true}
-      ${true}           | ${TEST_USER} | ${'diff_head=true'}  | ${true}              | ${true}
-      ${true}           | ${TEST_USER} | ${'diff_head=true'}  | ${false}             | ${false}
-      ${false}          | ${TEST_USER} | ${'diff_head=true'}  | ${true}              | ${false}
-      ${false}          | ${TEST_USER} | ${'bogus'}           | ${true}              | ${false}
-      ${true}           | ${null}      | ${''}                | ${true}              | ${false}
-    `(
-      'exists is $expectation - with showCommentButton ($showCommentButton) userData ($userData) query ($query)',
-      ({ showCommentButton, userData, query, mergeRefHeadComments, expectation }) => {
-        store.state.notes.userData = userData;
-        gon.features = { mergeRefHeadComments };
-        setWindowLocation({ href: `${TEST_HOST}?${query}` });
-        createComponent({ showCommentButton });
-
-        wrapper.setData({ isCommentButtonRendered: showCommentButton });
-
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findNoteButton().exists()).toBe(expectation);
-        });
-      },
-    );
-
-    it.each`
-      isHover  | otherProps                                      | discussions | expectation
-      ${true}  | ${{}}                                           | ${[]}       | ${true}
-      ${false} | ${{}}                                           | ${[]}       | ${false}
-      ${true}  | ${{ line: { ...line, type: 'context' } }}       | ${[]}       | ${false}
-      ${true}  | ${{ line: { ...line, type: 'old-nonewline' } }} | ${[]}       | ${false}
-      ${true}  | ${{}}                                           | ${[{}]}     | ${false}
-    `(
-      'visible is $expectation - with isHover ($isHover), discussions ($discussions), otherProps ($otherProps)',
-      ({ isHover, otherProps, discussions, expectation }) => {
-        line.discussions = discussions;
-        createComponent({
-          showCommentButton: true,
-          isHover,
-          ...otherProps,
-        });
-
-        wrapper.setData({
-          isCommentButtonRendered: true,
-        });
-
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findNoteButton().isVisible()).toBe(expectation);
-        });
-      },
-    );
-
-    it.each`
-      disabled      | commentsDisabled
-      ${'disabled'} | ${true}
-      ${undefined}  | ${false}
-    `(
-      'has attribute disabled=$disabled when the outer component has prop commentsDisabled=$commentsDisabled',
-      ({ disabled, commentsDisabled }) => {
-        line.commentsDisabled = commentsDisabled;
-
-        createComponent({
-          showCommentButton: true,
-          isHover: true,
-        });
-
-        wrapper.setData({ isCommentButtonRendered: true });
-
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findNoteButton().attributes('disabled')).toBe(disabled);
-        });
-      },
-    );
-
-    it.each`
-      tooltip                  | commentsDisabled
-      ${symlinkishFileTooltip} | ${{ wasSymbolic: true }}
-      ${symlinkishFileTooltip} | ${{ isSymbolic: true }}
-      ${realishFileTooltip}    | ${{ wasReal: true }}
-      ${realishFileTooltip}    | ${{ isReal: true }}
-      ${otherFileTooltip}      | ${false}
-    `(
-      'has the correct tooltip when commentsDisabled=$commentsDisabled',
-      ({ tooltip, commentsDisabled }) => {
-        line.commentsDisabled = commentsDisabled;
-
-        createComponent({
-          showCommentButton: true,
-          isHover: true,
-        });
-
-        wrapper.setData({ isCommentButtonRendered: true });
-
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findTooltip().attributes('title')).toBe(tooltip);
-        });
-      },
-    );
-  });
-
-  describe('line number', () => {
-    describe('without lineNumber prop', () => {
-      it('does not render', () => {
-        createComponent({ lineType: 'old' });
-
-        expect(findLineNumber().exists()).toBe(false);
-      });
-    });
-
-    describe('with lineNumber prop', () => {
-      describe.each`
-        lineProps                                                         | expectedHref            | expectedClickArg
-        ${{ line_code: TEST_LINE_CODE }}                                  | ${`#${TEST_LINE_CODE}`} | ${TEST_LINE_CODE}
-        ${{ line_code: undefined }}                                       | ${'#'}                  | ${undefined}
-        ${{ line_code: undefined, left: { line_code: TEST_LINE_CODE } }}  | ${'#'}                  | ${TEST_LINE_CODE}
-        ${{ line_code: undefined, right: { line_code: TEST_LINE_CODE } }} | ${'#'}                  | ${TEST_LINE_CODE}
-      `('with line ($lineProps)', ({ lineProps, expectedHref, expectedClickArg }) => {
-        beforeEach(() => {
-          jest.spyOn(store, 'dispatch').mockImplementation();
-          Object.assign(line, lineProps);
-          createComponent({ lineNumber: TEST_LINE_NUMBER });
-        });
-
-        it('renders', () => {
-          expect(findLineNumber().exists()).toBe(true);
-          expect(findLineNumber().attributes()).toEqual({
-            href: expectedHref,
-            'data-linenumber': TEST_LINE_NUMBER.toString(),
-          });
-        });
-
-        it('on click, dispatches setHighlightedRow', () => {
-          expect(store.dispatch).not.toHaveBeenCalled();
-
-          findLineNumber().trigger('click');
-
-          expect(store.dispatch).toHaveBeenCalledWith('diffs/setHighlightedRow', expectedClickArg);
-        });
-      });
-    });
-  });
-
-  describe('diff-gutter-avatars', () => {
-    describe('with showCommentButton', () => {
-      beforeEach(() => {
-        jest.spyOn(store, 'dispatch').mockImplementation();
-
-        createComponent({ showCommentButton: true });
-      });
-
-      it('renders', () => {
-        expect(findAvatars().props()).toEqual({
-          discussions: line.discussions,
-          discussionsExpanded: line.discussionsExpanded,
-        });
-      });
-
-      it('toggles line discussion', () => {
-        expect(store.dispatch).not.toHaveBeenCalled();
-
-        findAvatars().vm.$emit('toggleLineDiscussions');
-
-        expect(store.dispatch).toHaveBeenCalledWith('diffs/toggleLineDiscussions', {
-          lineCode: TEST_LINE_CODE,
-          fileHash: TEST_FILE_HASH,
-          expanded: !line.discussionsExpanded,
-        });
-      });
-    });
-
-    it.each`
-      props                                                             | lineProps              | expectation
-      ${{ showCommentButton: true }}                                    | ${{}}                  | ${true}
-      ${{ showCommentButton: false }}                                   | ${{}}                  | ${false}
-      ${{ showCommentButton: true, linePosition: LINE_POSITION_RIGHT }} | ${{ type: null }}      | ${false}
-      ${{ showCommentButton: true }}                                    | ${{ discussions: [] }} | ${false}
-    `(
-      'exists is $expectation - with props ($props), line ($lineProps)',
-      ({ props, lineProps, expectation }) => {
-        Object.assign(line, lineProps);
-        createComponent(props);
-
-        expect(findAvatars().exists()).toBe(expectation);
-      },
-    );
-  });
-});