Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

6 files changed, 116 insertions, 114 deletions

diff --git a/spec/frontend/diffs/components/compare_versions_spec.js b/spec/frontend/diffs/components/compare_versions_spec.js
index a01ec1db35c..80a51ee137a 100644
--- a/spec/frontend/diffs/components/compare_versions_spec.js
+++ b/spec/frontend/diffs/components/compare_versions_spec.js
@@ -19,8 +19,11 @@ describe('CompareVersions', () => {
   const targetBranchName = 'tmp-wine-dev';
   const { commit } = getDiffWithCommit();
 
-  const createWrapper = (props = {}, commitArgs = {}) => {
-    store.state.diffs.commit = { ...store.state.diffs.commit, ...commitArgs };
+  const createWrapper = (props = {}, commitArgs = {}, createCommit = true) => {
+    if (createCommit) {
+      store.state.diffs.commit = { ...store.state.diffs.commit, ...commitArgs };
+    }
+
     wrapper = mount(CompareVersionsComponent, {
       localVue,
       store,
@@ -59,7 +62,7 @@ describe('CompareVersions', () => {
 
   describe('template', () => {
     beforeEach(() => {
-      createWrapper();
+      createWrapper({}, {}, false);
     });
 
     it('should render Tree List toggle button with correct attribute values', () => {
diff --git a/spec/frontend/diffs/components/diff_file_spec.js b/spec/frontend/diffs/components/diff_file_spec.js
index 9c3c3e82ad5..1e8ad9344f2 100644
--- a/spec/frontend/diffs/components/diff_file_spec.js
+++ b/spec/frontend/diffs/components/diff_file_spec.js
@@ -1,5 +1,6 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import DiffContentComponent from '~/diffs/components/diff_content.vue';
@@ -16,11 +17,14 @@ import createDiffsStore from '~/diffs/store/modules';
 
 import { diffViewerModes, diffViewerErrors } from '~/ide/constants';
 import axios from '~/lib/utils/axios_utils';
+import { scrollToElement } from '~/lib/utils/common_utils';
 import httpStatus from '~/lib/utils/http_status';
 import createNotesStore from '~/notes/stores/modules';
 import diffFileMockDataReadable from '../mock_data/diff_file';
 import diffFileMockDataUnreadable from '../mock_data/diff_file_unreadable';
 
+jest.mock('~/lib/utils/common_utils');
+
 function changeViewer(store, index, { automaticallyCollapsed, manuallyCollapsed, name }) {
   const file = store.state.diffs.diffFiles[index];
   const newViewer = {
@@ -355,6 +359,49 @@ describe('DiffFile', () => {
         });
       });
 
+      describe('scoll-to-top of file after collapse', () => {
+        beforeEach(() => {
+          jest.spyOn(wrapper.vm.$store, 'dispatch').mockImplementation(() => {});
+        });
+
+        it("scrolls to the top when the file is open, the users initiates the collapse, and there's a content block to scroll to", async () => {
+          makeFileOpenByDefault(store);
+          await nextTick();
+
+          toggleFile(wrapper);
+
+          expect(scrollToElement).toHaveBeenCalled();
+        });
+
+        it('does not scroll when the content block is missing', async () => {
+          makeFileOpenByDefault(store);
+          await nextTick();
+          findDiffContentArea(wrapper).element.remove();
+
+          toggleFile(wrapper);
+
+          expect(scrollToElement).not.toHaveBeenCalled();
+        });
+
+        it("does not scroll if the user doesn't initiate the file collapse", async () => {
+          makeFileOpenByDefault(store);
+          await nextTick();
+
+          wrapper.vm.handleToggle();
+
+          expect(scrollToElement).not.toHaveBeenCalled();
+        });
+
+        it('does not scroll if the file is already collapsed', async () => {
+          makeFileManuallyCollapsed(store);
+          await nextTick();
+
+          toggleFile(wrapper);
+
+          expect(scrollToElement).not.toHaveBeenCalled();
+        });
+      });
+
       describe('fetch collapsed diff', () => {
         const prepFile = async (inlineLines, parallelLines, readableText) => {
           forceHasDiff({
diff --git a/spec/frontend/diffs/components/diff_row_spec.js b/spec/frontend/diffs/components/diff_row_spec.js
index 0bc1bd40f06..137cc7e3f86 100644
--- a/spec/frontend/diffs/components/diff_row_spec.js
+++ b/spec/frontend/diffs/components/diff_row_spec.js
@@ -1,5 +1,6 @@
 import { getByTestId, fireEvent } from '@testing-library/dom';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import DiffRow from '~/diffs/components/diff_row.vue';
 import { mapParallel } from '~/diffs/components/diff_row_utils';
@@ -28,12 +29,12 @@ describe('DiffRow', () => {
     },
   ];
 
-  const createWrapper = ({ props, state, isLoggedIn = true }) => {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
+  const createWrapper = ({ props, state, actions, isLoggedIn = true }) => {
+    Vue.use(Vuex);
 
     const diffs = diffsModule();
     diffs.state = { ...diffs.state, ...state };
+    diffs.actions = { ...diffs.actions, ...actions };
 
     const getters = { isLoggedIn: () => isLoggedIn };
 
@@ -54,7 +55,7 @@ describe('DiffRow', () => {
       glFeatures: { dragCommentSelection: true },
     };
 
-    return shallowMount(DiffRow, { propsData, localVue, store, provide });
+    return shallowMount(DiffRow, { propsData, store, provide });
   };
 
   it('isHighlighted returns true given line.left', () => {
@@ -95,6 +96,9 @@ describe('DiffRow', () => {
     expect(wrapper.vm.isHighlighted).toBe(false);
   });
 
+  const getCommentButton = (wrapper, side) =>
+    wrapper.find(`[data-testid="${side}-comment-button"]`);
+
   describe.each`
     side
     ${'left'}
@@ -102,18 +106,59 @@ describe('DiffRow', () => {
   `('$side side', ({ side }) => {
     it(`renders empty cells if ${side} is unavailable`, () => {
       const wrapper = createWrapper({ props: { line: testLines[2], inline: false } });
-      expect(wrapper.find(`[data-testid="${side}LineNumber"]`).exists()).toBe(false);
-      expect(wrapper.find(`[data-testid="${side}EmptyCell"]`).exists()).toBe(true);
+      expect(wrapper.find(`[data-testid="${side}-line-number"]`).exists()).toBe(false);
+      expect(wrapper.find(`[data-testid="${side}-empty-cell"]`).exists()).toBe(true);
     });
 
-    it('renders comment button', () => {
-      const wrapper = createWrapper({ props: { line: testLines[3], inline: false } });
-      expect(wrapper.find(`[data-testid="${side}CommentButton"]`).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);
+      });
+
+      it('responds to click and keyboard events', async () => {
+        const wrapper = createWrapper({
+          props: { line, inline: false },
+          actions: { showCommentForm },
+        });
+        const commentButton = getCommentButton(wrapper, side);
+
+        await commentButton.trigger('click');
+        await commentButton.trigger('keydown.enter');
+        await commentButton.trigger('keydown.space');
+
+        expect(showCommentForm).toHaveBeenCalledTimes(3);
+      });
+
+      it('ignores click and keyboard events when comments are disabled', async () => {
+        line[side].commentsDisabled = true;
+        const wrapper = createWrapper({
+          props: { line, inline: false },
+          actions: { showCommentForm },
+        });
+        const commentButton = getCommentButton(wrapper, side);
+
+        await commentButton.trigger('click');
+        await commentButton.trigger('keydown.enter');
+        await commentButton.trigger('keydown.space');
+
+        expect(showCommentForm).not.toHaveBeenCalled();
+      });
     });
 
     it('renders avatars', () => {
       const wrapper = createWrapper({ props: { line: testLines[0], inline: false } });
-      expect(wrapper.find(`[data-testid="${side}Discussions"]`).exists()).toBe(true);
+      expect(wrapper.find(`[data-testid="${side}-discussions"]`).exists()).toBe(true);
     });
   });
 
diff --git a/spec/frontend/diffs/components/inline_diff_table_row_spec.js b/spec/frontend/diffs/components/inline_diff_table_row_spec.js
index 66b63a7a1d0..9c3e00cd6cf 100644
--- a/spec/frontend/diffs/components/inline_diff_table_row_spec.js
+++ b/spec/frontend/diffs/components/inline_diff_table_row_spec.js
@@ -216,14 +216,14 @@ describe('InlineDiffTableRow', () => {
         const TEST_LINE_NUMBER = 1;
 
         describe.each`
-          lineProps                                                                                     | findLineNumber       | expectedHref            | expectedClickArg  | expectedQaSelector
-          ${{ line_code: TEST_LINE_CODE, old_line: TEST_LINE_NUMBER }}                                  | ${findLineNumberOld} | ${`#${TEST_LINE_CODE}`} | ${TEST_LINE_CODE} | ${undefined}
-          ${{ line_code: undefined, old_line: TEST_LINE_NUMBER }}                                       | ${findLineNumberOld} | ${'#'}                  | ${undefined}      | ${undefined}
-          ${{ line_code: undefined, left: { line_code: TEST_LINE_CODE }, old_line: TEST_LINE_NUMBER }}  | ${findLineNumberOld} | ${'#'}                  | ${TEST_LINE_CODE} | ${undefined}
-          ${{ line_code: undefined, right: { line_code: TEST_LINE_CODE }, new_line: TEST_LINE_NUMBER }} | ${findLineNumberNew} | ${'#'}                  | ${TEST_LINE_CODE} | ${'new_diff_line_link'}
+          lineProps                                                                                     | findLineNumber       | expectedHref            | expectedClickArg
+          ${{ line_code: TEST_LINE_CODE, old_line: TEST_LINE_NUMBER }}                                  | ${findLineNumberOld} | ${`#${TEST_LINE_CODE}`} | ${TEST_LINE_CODE}
+          ${{ line_code: undefined, old_line: TEST_LINE_NUMBER }}                                       | ${findLineNumberOld} | ${'#'}                  | ${undefined}
+          ${{ line_code: undefined, left: { line_code: TEST_LINE_CODE }, old_line: TEST_LINE_NUMBER }}  | ${findLineNumberOld} | ${'#'}                  | ${TEST_LINE_CODE}
+          ${{ line_code: undefined, right: { line_code: TEST_LINE_CODE }, new_line: TEST_LINE_NUMBER }} | ${findLineNumberNew} | ${'#'}                  | ${TEST_LINE_CODE}
         `(
           'with line ($lineProps)',
-          ({ lineProps, findLineNumber, expectedHref, expectedClickArg, expectedQaSelector }) => {
+          ({ lineProps, findLineNumber, expectedHref, expectedClickArg }) => {
             beforeEach(() => {
               jest.spyOn(store, 'dispatch').mockImplementation();
               createComponent({
@@ -236,7 +236,6 @@ describe('InlineDiffTableRow', () => {
               expect(findLineNumber().attributes()).toEqual({
                 href: expectedHref,
                 'data-linenumber': TEST_LINE_NUMBER.toString(),
-                'data-qa-selector': expectedQaSelector,
               });
             });
 
diff --git a/spec/frontend/diffs/mock_data/diff_metadata.js b/spec/frontend/diffs/mock_data/diff_metadata.js
index cfa0038c06f..ce79843b8b1 100644
--- a/spec/frontend/diffs/mock_data/diff_metadata.js
+++ b/spec/frontend/diffs/mock_data/diff_metadata.js
@@ -3,7 +3,7 @@ export const diffMetadata = {
   size: 1,
   branch_name: 'update-changelog',
   source_branch_exists: true,
-  target_branch_name: 'master',
+  target_branch_name: 'main',
   commit: null,
   context_commits: null,
   merge_request_diff: {
diff --git a/spec/frontend/diffs/utils/uuids_spec.js b/spec/frontend/diffs/utils/uuids_spec.js
deleted file mode 100644
index 8d0a01e8cbd..00000000000
--- a/spec/frontend/diffs/utils/uuids_spec.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { uuids } from '~/diffs/utils/uuids';
-
-const HEX = /[a-f0-9]/i;
-const HEX_RE = HEX.source;
-const UUIDV4 = new RegExp(
-  `${HEX_RE}{8}-${HEX_RE}{4}-4${HEX_RE}{3}-[89ab]${HEX_RE}{3}-${HEX_RE}{12}`,
-  'i',
-);
-
-describe('UUIDs Util', () => {
-  describe('uuids', () => {
-    const SEQUENCE_FOR_GITLAB_SEED = [
-      'a1826a44-316c-480e-a93d-8cdfeb36617c',
-      'e049db1f-a4cf-4cba-aa60-6d95e3b547dc',
-      '6e3c737c-13a7-4380-b17d-601f187d7e69',
-      'bee5cc7f-c486-45c0-8ad3-d1ac5402632d',
-      'af248c9f-a3a6-4d4f-a311-fe151ffab25a',
-    ];
-    const SEQUENCE_FOR_12345_SEED = [
-      'edfb51e2-e3e1-4de5-90fd-fd1d21760881',
-      '2f154da4-0a2d-4da9-b45e-0ffed391517e',
-      '91566d65-8836-4222-9875-9e1df4d0bb01',
-      'f6ea6c76-7640-4d71-a736-9d3bec7a1a8e',
-      'bfb85869-5fb9-4c5b-a750-5af727ac5576',
-    ];
-
-    it('returns version 4 UUIDs', () => {
-      expect(uuids()[0]).toMatch(UUIDV4);
-    });
-
-    it('outputs an array of UUIDs', () => {
-      const ids = uuids({ count: 11 });
-
-      expect(ids.length).toEqual(11);
-      expect(ids.every((id) => UUIDV4.test(id))).toEqual(true);
-    });
-
-    it.each`
-      seeds                          | uuid
-      ${['some', 'special', 'seed']} | ${'6fa53e51-0f70-4072-9c84-1c1eee1b9934'}
-      ${['magic']}                   | ${'fafae8cd-7083-44f3-b82d-43b30bd27486'}
-      ${['seeded']}                  | ${'e06ed291-46c5-4e42-836b-e7c772d48b49'}
-      ${['GitLab']}                  | ${'a1826a44-316c-480e-a93d-8cdfeb36617c'}
-      ${['JavaScript']}              | ${'12dfb297-1560-4c38-9775-7178ef8472fb'}
-      ${[99, 169834, 2619]}          | ${'3ecc8ad6-5b7c-4c9b-94a8-c7271c2fa083'}
-      ${[12]}                        | ${'2777374b-723b-469b-bd73-e586df964cfd'}
-      ${[9876, 'mixed!', 7654]}      | ${'865212e0-4a16-4934-96f9-103cf36a6931'}
-      ${[123, 1234, 12345, 6]}       | ${'40aa2ee6-0a11-4e67-8f09-72f5eba04244'}
-      ${[0]}                         | ${'8c7f0aac-97c4-4a2f-b716-a675d821ccc0'}
-    `(
-      'should always output the UUID $uuid when the options.seeds argument is $seeds',
-      ({ uuid, seeds }) => {
-        expect(uuids({ seeds })[0]).toEqual(uuid);
-      },
-    );
-
-    describe('unseeded UUID randomness', () => {
-      const nonRandom = Array(6)
-        .fill(0)
-        .map((_, i) => uuids({ seeds: [i] })[0]);
-      const random = uuids({ count: 6 });
-      const moreRandom = uuids({ count: 6 });
-
-      it('is different from a seeded result', () => {
-        random.forEach((id, i) => {
-          expect(id).not.toEqual(nonRandom[i]);
-        });
-      });
-
-      it('is different from other random results', () => {
-        random.forEach((id, i) => {
-          expect(id).not.toEqual(moreRandom[i]);
-        });
-      });
-
-      it('never produces any duplicates', () => {
-        expect(new Set(random).size).toEqual(random.length);
-      });
-    });
-
-    it.each`
-      seed        | sequence
-      ${'GitLab'} | ${SEQUENCE_FOR_GITLAB_SEED}
-      ${12345}    | ${SEQUENCE_FOR_12345_SEED}
-    `(
-      'should output the same sequence of UUIDs for the given seed "$seed"',
-      ({ seed, sequence }) => {
-        expect(uuids({ seeds: [seed], count: 5 })).toEqual(sequence);
-      },
-    );
-  });
-});