Add latest changes from gitlab-org/gitlab@master

5 files changed, 186 insertions, 136 deletions

diff --git a/spec/frontend/diffs/components/compare_versions_spec.js b/spec/frontend/diffs/components/compare_versions_spec.js
index 47a266c2e36..cbbfd88260b 100644
--- a/spec/frontend/diffs/components/compare_versions_spec.js
+++ b/spec/frontend/diffs/components/compare_versions_spec.js
@@ -1,15 +1,14 @@
 import { mount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
-import Vuex from 'vuex';
+import { nextTick } from 'vue';
 import getDiffWithCommit from 'test_fixtures/merge_request_diffs/with_commit.json';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import { trimText } from 'helpers/text_helper';
 import CompareVersionsComponent from '~/diffs/components/compare_versions.vue';
-import { createStore } from '~/mr_notes/stores';
+import store from '~/mr_notes/stores';
 import diffsMockData from '../mock_data/merge_request_diffs';
 
-Vue.use(Vuex);
+jest.mock('~/mr_notes/stores', () => jest.requireActual('helpers/mocks/mr_notes/stores'));
 
 const NEXT_COMMIT_URL = `${TEST_HOST}/?commit_id=next`;
 const PREV_COMMIT_URL = `${TEST_HOST}/?commit_id=prev`;
@@ -20,8 +19,6 @@ beforeEach(() => {
 
 describe('CompareVersions', () => {
   let wrapper;
-  let store;
-  let dispatchMock;
   const targetBranchName = 'tmp-wine-dev';
   const { commit } = getDiffWithCommit;
 
@@ -30,10 +27,10 @@ describe('CompareVersions', () => {
       store.state.diffs.commit = { ...store.state.diffs.commit, ...commitArgs };
     }
 
-    dispatchMock = jest.spyOn(store, 'dispatch');
-
     wrapper = mount(CompareVersionsComponent, {
-      store,
+      mocks: {
+        $store: store,
+      },
       propsData: {
         mergeRequestDiffs: diffsMockData,
         diffFilesCountText: '1',
@@ -50,8 +47,25 @@ describe('CompareVersions', () => {
     getCommitNavButtonsElement().find('.btn-group > *:first-child');
 
   beforeEach(() => {
-    store = createStore();
+    store.reset();
+
     const mergeRequestDiff = diffsMockData[0];
+    const version = {
+      ...mergeRequestDiff,
+      href: `${TEST_HOST}/latest/version`,
+      versionName: 'latest version',
+    };
+    store.getters['diffs/diffCompareDropdownSourceVersions'] = [version];
+    store.getters['diffs/diffCompareDropdownTargetVersions'] = [
+      {
+        ...version,
+        selected: true,
+        versionName: targetBranchName,
+      },
+    ];
+    store.getters['diffs/whichCollapsedTypes'] = { any: false };
+    store.getters['diffs/isInlineView'] = false;
+    store.getters['diffs/isParallelView'] = false;
 
     store.state.diffs.addedLines = 10;
     store.state.diffs.removedLines = 20;
@@ -104,7 +118,6 @@ describe('CompareVersions', () => {
 
     it('should not render Tree List toggle button when there are no changes', () => {
       createWrapper();
-
       const treeListBtn = wrapper.find('.js-toggle-tree-list');
 
       expect(treeListBtn.exists()).toBe(false);
@@ -118,7 +131,10 @@ describe('CompareVersions', () => {
       const viewTypeBtn = wrapper.find('#inline-diff-btn');
       viewTypeBtn.trigger('click');
 
-      expect(window.location.toString()).toContain('?view=inline');
+      expect(store.dispatch).toHaveBeenCalledWith(
+        'diffs/setInlineDiffViewType',
+        expect.any(MouseEvent),
+      );
     });
   });
 
@@ -128,13 +144,16 @@ describe('CompareVersions', () => {
       const viewTypeBtn = wrapper.find('#parallel-diff-btn');
       viewTypeBtn.trigger('click');
 
-      expect(window.location.toString()).toContain('?view=parallel');
+      expect(store.dispatch).toHaveBeenCalledWith(
+        'diffs/setParallelDiffViewType',
+        expect.any(MouseEvent),
+      );
     });
   });
 
   describe('commit', () => {
     beforeEach(() => {
-      store.state.diffs.commit = getDiffWithCommit.commit;
+      store.state.diffs.commit = commit;
       createWrapper();
     });
 
@@ -218,7 +237,7 @@ describe('CompareVersions', () => {
 
         link.trigger('click');
         await nextTick();
-        expect(dispatchMock).toHaveBeenCalledWith('diffs/moveToNeighboringCommit', {
+        expect(store.dispatch).toHaveBeenCalledWith('diffs/moveToNeighboringCommit', {
           direction: 'previous',
         });
       });
@@ -248,7 +267,7 @@ describe('CompareVersions', () => {
 
         link.trigger('click');
         await nextTick();
-        expect(dispatchMock).toHaveBeenCalledWith('diffs/moveToNeighboringCommit', {
+        expect(store.dispatch).toHaveBeenCalledWith('diffs/moveToNeighboringCommit', {
           direction: 'next',
         });
       });
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 eb895bd9057..e42b98e4d68 100644
--- a/spec/frontend/diffs/components/diff_line_note_form_spec.js
+++ b/spec/frontend/diffs/components/diff_line_note_form_spec.js
@@ -1,8 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import Vuex from 'vuex';
 import DiffLineNoteForm from '~/diffs/components/diff_line_note_form.vue';
-import { createModules } from '~/mr_notes/stores';
+import store from '~/mr_notes/stores';
 import NoteForm from '~/notes/components/note_form.vue';
 import MultilineCommentForm from '~/notes/components/multiline_comment_form.vue';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
@@ -10,51 +9,25 @@ import { noteableDataMock } from 'jest/notes/mock_data';
 import { getDiffFileMock } from '../mock_data/diff_file';
 
 jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
+jest.mock('~/mr_notes/stores', () => jest.requireActual('helpers/mocks/mr_notes/stores'));
 
 describe('DiffLineNoteForm', () => {
   let wrapper;
   let diffFile;
   let diffLines;
-  let actions;
-  let store;
 
-  const getSelectedLine = () => {
-    const lineCode = diffLines[1].line_code;
-    return diffFile.highlighted_diff_lines.find((l) => l.line_code === lineCode);
-  };
-
-  const createStore = (state) => {
-    const modules = createModules();
-    modules.diffs.actions = {
-      ...modules.diffs.actions,
-      saveDiffDiscussion: jest.fn(() => Promise.resolve()),
-    };
-    modules.diffs.getters = {
-      ...modules.diffs.getters,
-      diffCompareDropdownTargetVersions: jest.fn(),
-      diffCompareDropdownSourceVersions: jest.fn(),
-      selectedSourceIndex: jest.fn(),
-    };
-    modules.notes.getters = {
-      ...modules.notes.getters,
-      noteableType: jest.fn(),
-    };
-    actions = modules.diffs.actions;
+  beforeEach(() => {
+    diffFile = getDiffFileMock();
+    diffLines = diffFile.highlighted_diff_lines;
 
-    store = new Vuex.Store({ modules });
-    store.state.notes.userData.id = 1;
     store.state.notes.noteableData = noteableDataMock;
 
-    store.replaceState({ ...store.state, ...state });
-  };
+    store.getters.isLoggedIn = jest.fn().mockReturnValue(true);
+    store.getters['diffs/getDiffFileByHash'] = jest.fn().mockReturnValue(diffFile);
+  });
 
-  const createComponent = ({ props, state } = {}) => {
+  const createComponent = ({ props } = {}) => {
     wrapper?.destroy();
-    diffFile = getDiffFileMock();
-    diffLines = diffFile.highlighted_diff_lines;
-
-    createStore(state);
-    store.state.diffs.diffFiles = [diffFile];
 
     const propsData = {
       diffFileHash: diffFile.file_hash,
@@ -66,7 +39,9 @@ describe('DiffLineNoteForm', () => {
     };
 
     wrapper = shallowMount(DiffLineNoteForm, {
-      store,
+      mocks: {
+        $store: store,
+      },
       propsData,
     });
   };
@@ -129,7 +104,10 @@ describe('DiffLineNoteForm', () => {
         expect(confirmAction).toHaveBeenCalled();
         await nextTick();
 
-        expect(getSelectedLine().hasForm).toBe(false);
+        expect(store.dispatch).toHaveBeenCalledWith('diffs/cancelCommentForm', {
+          lineCode: diffLines[1].line_code,
+          fileHash: diffFile.file_hash,
+        });
       });
     });
 
@@ -157,6 +135,10 @@ describe('DiffLineNoteForm', () => {
   });
 
   describe('saving note', () => {
+    beforeEach(() => {
+      store.getters.noteableType = 'merge-request';
+    });
+
     it('should save original line', async () => {
       const lineRange = {
         start: {
@@ -172,20 +154,65 @@ describe('DiffLineNoteForm', () => {
           old_line: null,
         },
       };
-      await findNoteForm().vm.$emit('handleFormUpdate', 'note body');
-      expect(actions.saveDiffDiscussion.mock.calls[0][1].formData).toMatchObject({
-        lineRange,
+
+      const noteBody = 'note body';
+      await findNoteForm().vm.$emit('handleFormUpdate', noteBody);
+
+      expect(store.dispatch).toHaveBeenCalledWith('diffs/saveDiffDiscussion', {
+        note: noteBody,
+        formData: {
+          noteableData: noteableDataMock,
+          noteableType: store.getters.noteableType,
+          noteTargetLine: diffLines[1],
+          diffViewType: store.state.diffs.diffViewType,
+          diffFile,
+          linePosition: '',
+          lineRange,
+        },
+      });
+      expect(store.dispatch).toHaveBeenCalledWith('diffs/cancelCommentForm', {
+        lineCode: diffLines[1].line_code,
+        fileHash: diffFile.file_hash,
       });
     });
 
     it('should save selected line from the store', async () => {
       const lineCode = 'test';
       store.state.notes.selectedCommentPosition = { start: { line_code: lineCode } };
-      createComponent({ state: store.state });
-      await findNoteForm().vm.$emit('handleFormUpdate', 'note body');
-      expect(actions.saveDiffDiscussion.mock.calls[0][1].formData.lineRange.start.line_code).toBe(
-        lineCode,
-      );
+      createComponent();
+      const noteBody = 'note body';
+
+      await findNoteForm().vm.$emit('handleFormUpdate', noteBody);
+
+      expect(store.dispatch).toHaveBeenCalledWith('diffs/saveDiffDiscussion', {
+        note: noteBody,
+        formData: {
+          noteableData: noteableDataMock,
+          noteableType: store.getters.noteableType,
+          noteTargetLine: diffLines[1],
+          diffViewType: store.state.diffs.diffViewType,
+          diffFile,
+          linePosition: '',
+          lineRange: {
+            start: {
+              line_code: lineCode,
+              new_line: undefined,
+              old_line: undefined,
+              type: undefined,
+            },
+            end: {
+              line_code: diffLines[1].line_code,
+              new_line: diffLines[1].new_line,
+              old_line: diffLines[1].old_line,
+              type: diffLines[1].type,
+            },
+          },
+        },
+      });
+      expect(store.dispatch).toHaveBeenCalledWith('diffs/cancelCommentForm', {
+        lineCode: diffLines[1].line_code,
+        fileHash: diffFile.file_hash,
+      });
     });
   });
 });
diff --git a/spec/frontend/diffs/components/no_changes_spec.js b/spec/frontend/diffs/components/no_changes_spec.js
index e637b1dd43d..fd89d52a59e 100644
--- a/spec/frontend/diffs/components/no_changes_spec.js
+++ b/spec/frontend/diffs/components/no_changes_spec.js
@@ -1,55 +1,53 @@
 import { GlButton } from '@gitlab/ui';
 import { shallowMount, mount } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex from 'vuex';
 import NoChanges from '~/diffs/components/no_changes.vue';
-import { createStore } from '~/mr_notes/stores';
+import store from '~/mr_notes/stores';
 import diffsMockData from '../mock_data/merge_request_diffs';
 
-Vue.use(Vuex);
+jest.mock('~/mr_notes/stores', () => jest.requireActual('helpers/mocks/mr_notes/stores'));
 
 const TEST_TARGET_BRANCH = 'foo';
 const TEST_SOURCE_BRANCH = 'dev/update';
+const latestVersionNumber = Math.max(...diffsMockData.map((version) => version.version_index));
 
 describe('Diff no changes empty state', () => {
-  let wrapper;
-  let store;
-
-  function createComponent(mountFn = shallowMount) {
-    wrapper = mountFn(NoChanges, {
-      store,
+  const createComponent = (mountFn = shallowMount) =>
+    mountFn(NoChanges, {
+      mocks: {
+        $store: store,
+      },
       propsData: {
         changesEmptyStateIllustration: '',
       },
     });
-  }
 
   beforeEach(() => {
-    store = createStore();
-    store.state.diffs.mergeRequestDiff = {};
-    store.state.notes.noteableData = {
+    store.reset();
+
+    store.getters.getNoteableData = {
       target_branch: TEST_TARGET_BRANCH,
       source_branch: TEST_SOURCE_BRANCH,
     };
-    store.state.diffs.mergeRequestDiffs = diffsMockData;
+    store.getters['diffs/diffCompareDropdownSourceVersions'] = [];
+    store.getters['diffs/diffCompareDropdownTargetVersions'] = [];
   });
 
-  const findMessage = () => wrapper.find('[data-testid="no-changes-message"]');
+  const findMessage = (wrapper) => wrapper.find('[data-testid="no-changes-message"]');
 
   it('prevents XSS', () => {
-    store.state.notes.noteableData = {
+    store.getters.getNoteableData = {
       source_branch: '<script>alert("test");</script>',
       target_branch: '<script>alert("test");</script>',
     };
 
-    createComponent();
+    const wrapper = createComponent();
 
     expect(wrapper.find('script').exists()).toBe(false);
   });
 
   describe('Renders', () => {
     it('Show create commit button', () => {
-      createComponent();
+      const wrapper = createComponent();
 
       expect(wrapper.findComponent(GlButton).exists()).toBe(true);
     });
@@ -64,15 +62,28 @@ describe('Diff no changes empty state', () => {
       'renders text "$expectedText" (sourceIndex=$sourceIndex and targetIndex=$targetIndex)',
       ({ expectedText, targetIndex, sourceIndex }) => {
         if (targetIndex !== null) {
-          store.state.diffs.startVersion = { version_index: targetIndex };
+          store.getters['diffs/diffCompareDropdownTargetVersions'] = [
+            {
+              selected: true,
+              version_index: targetIndex,
+              versionName: `version ${targetIndex}`,
+            },
+          ];
         }
         if (sourceIndex !== null) {
-          store.state.diffs.mergeRequestDiff.version_index = sourceIndex;
+          store.getters['diffs/diffCompareDropdownSourceVersions'] = [
+            {
+              isLatestVersion: sourceIndex === latestVersionNumber,
+              selected: true,
+              version_index: targetIndex,
+              versionName: `version ${sourceIndex}`,
+            },
+          ];
         }
 
-        createComponent(mount);
+        const wrapper = createComponent(mount);
 
-        expect(findMessage().text()).toBe(expectedText);
+        expect(findMessage(wrapper).text()).toBe(expectedText);
       },
     );
   });
diff --git a/spec/frontend/diffs/components/settings_dropdown_spec.js b/spec/frontend/diffs/components/settings_dropdown_spec.js
index 3d2bbe43746..cbd2ae3e525 100644
--- a/spec/frontend/diffs/components/settings_dropdown_spec.js
+++ b/spec/frontend/diffs/components/settings_dropdown_spec.js
@@ -5,44 +5,34 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import SettingsDropdown from '~/diffs/components/settings_dropdown.vue';
 import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants';
 import eventHub from '~/diffs/event_hub';
+import store from '~/mr_notes/stores';
 
-import createDiffsStore from '../create_diffs_store';
+jest.mock('~/mr_notes/stores', () => jest.requireActual('helpers/mocks/mr_notes/stores'));
 
 describe('Diff settings dropdown component', () => {
-  let wrapper;
-  let store;
-
-  function createComponent(extendStore = () => {}) {
-    store = createDiffsStore();
-
-    extendStore(store);
-
-    wrapper = extendedWrapper(
+  const createComponent = () =>
+    extendedWrapper(
       mount(SettingsDropdown, {
-        store,
+        mocks: {
+          $store: store,
+        },
       }),
     );
-  }
 
   function getFileByFileCheckbox(vueWrapper) {
     return vueWrapper.findByTestId('file-by-file');
   }
 
-  function setup({ storeUpdater } = {}) {
-    createComponent(storeUpdater);
-    jest.spyOn(store, 'dispatch').mockImplementation(() => {});
-  }
-
   beforeEach(() => {
-    setup();
-  });
+    store.reset();
 
-  afterEach(() => {
-    store.dispatch.mockRestore();
+    store.getters['diffs/isInlineView'] = false;
+    store.getters['diffs/isParallelView'] = false;
   });
 
   describe('tree view buttons', () => {
     it('list view button dispatches setRenderTreeList with false', () => {
+      const wrapper = createComponent();
       wrapper.find('.js-list-view').trigger('click');
 
       expect(store.dispatch).toHaveBeenCalledWith('diffs/setRenderTreeList', {
@@ -51,6 +41,7 @@ describe('Diff settings dropdown component', () => {
     });
 
     it('tree view button dispatches setRenderTreeList with true', () => {
+      const wrapper = createComponent();
       wrapper.find('.js-tree-view').trigger('click');
 
       expect(store.dispatch).toHaveBeenCalledWith('diffs/setRenderTreeList', {
@@ -59,19 +50,18 @@ describe('Diff settings dropdown component', () => {
     });
 
     it('sets list button as selected when renderTreeList is false', () => {
-      setup({
-        storeUpdater: (origStore) =>
-          Object.assign(origStore.state.diffs, { renderTreeList: false }),
-      });
+      store.state.diffs = { renderTreeList: false };
+
+      const wrapper = createComponent();
 
       expect(wrapper.find('.js-list-view').classes('selected')).toBe(true);
       expect(wrapper.find('.js-tree-view').classes('selected')).toBe(false);
     });
 
     it('sets tree button as selected when renderTreeList is true', () => {
-      setup({
-        storeUpdater: (origStore) => Object.assign(origStore.state.diffs, { renderTreeList: true }),
-      });
+      store.state.diffs = { renderTreeList: true };
+
+      const wrapper = createComponent();
 
       expect(wrapper.find('.js-list-view').classes('selected')).toBe(false);
       expect(wrapper.find('.js-tree-view').classes('selected')).toBe(true);
@@ -80,32 +70,36 @@ describe('Diff settings dropdown component', () => {
 
   describe('compare changes', () => {
     it('sets inline button as selected', () => {
-      setup({
-        storeUpdater: (origStore) =>
-          Object.assign(origStore.state.diffs, { diffViewType: INLINE_DIFF_VIEW_TYPE }),
-      });
+      store.state.diffs = { diffViewType: INLINE_DIFF_VIEW_TYPE };
+      store.getters['diffs/isInlineView'] = true;
+
+      const wrapper = createComponent();
 
       expect(wrapper.find('.js-inline-diff-button').classes('selected')).toBe(true);
       expect(wrapper.find('.js-parallel-diff-button').classes('selected')).toBe(false);
     });
 
     it('sets parallel button as selected', () => {
-      setup({
-        storeUpdater: (origStore) =>
-          Object.assign(origStore.state.diffs, { diffViewType: PARALLEL_DIFF_VIEW_TYPE }),
-      });
+      store.state.diffs = { diffViewType: PARALLEL_DIFF_VIEW_TYPE };
+      store.getters['diffs/isParallelView'] = true;
+
+      const wrapper = createComponent();
 
       expect(wrapper.find('.js-inline-diff-button').classes('selected')).toBe(false);
       expect(wrapper.find('.js-parallel-diff-button').classes('selected')).toBe(true);
     });
 
     it('calls setInlineDiffViewType when clicking inline button', () => {
+      const wrapper = createComponent();
+
       wrapper.find('.js-inline-diff-button').trigger('click');
 
       expect(store.dispatch).toHaveBeenCalledWith('diffs/setInlineDiffViewType', expect.anything());
     });
 
     it('calls setParallelDiffViewType when clicking parallel button', () => {
+      const wrapper = createComponent();
+
       wrapper.find('.js-parallel-diff-button').trigger('click');
 
       expect(store.dispatch).toHaveBeenCalledWith(
@@ -117,23 +111,23 @@ describe('Diff settings dropdown component', () => {
 
   describe('whitespace toggle', () => {
     it('does not set as checked when showWhitespace is false', () => {
-      setup({
-        storeUpdater: (origStore) =>
-          Object.assign(origStore.state.diffs, { showWhitespace: false }),
-      });
+      store.state.diffs = { showWhitespace: false };
+
+      const wrapper = createComponent();
 
       expect(wrapper.findByTestId('show-whitespace').element.checked).toBe(false);
     });
 
     it('sets as checked when showWhitespace is true', () => {
-      setup({
-        storeUpdater: (origStore) => Object.assign(origStore.state.diffs, { showWhitespace: true }),
-      });
+      store.state.diffs = { showWhitespace: true };
+
+      const wrapper = createComponent();
 
       expect(wrapper.findByTestId('show-whitespace').element.checked).toBe(true);
     });
 
     it('calls setShowWhitespace on change', async () => {
+      const wrapper = createComponent();
       const checkbox = wrapper.findByTestId('show-whitespace');
       const { checked } = checkbox.element;
 
@@ -157,10 +151,9 @@ describe('Diff settings dropdown component', () => {
     `(
       'sets the checkbox to { checked: $checked } if the fileByFile setting is $fileByFile',
       ({ fileByFile, checked }) => {
-        setup({
-          storeUpdater: (origStore) =>
-            Object.assign(origStore.state.diffs, { viewDiffsFileByFile: fileByFile }),
-        });
+        store.state.diffs = { viewDiffsFileByFile: fileByFile };
+
+        const wrapper = createComponent();
 
         expect(getFileByFileCheckbox(wrapper).element.checked).toBe(checked);
       },
@@ -173,11 +166,9 @@ describe('Diff settings dropdown component', () => {
     `(
       'when the file by file setting starts as $start, toggling the checkbox should call setFileByFile with $setting',
       async ({ start, setting }) => {
-        setup({
-          storeUpdater: (origStore) =>
-            Object.assign(origStore.state.diffs, { viewDiffsFileByFile: start }),
-        });
+        store.state.diffs = { viewDiffsFileByFile: start };
 
+        const wrapper = createComponent();
         await getFileByFileCheckbox(wrapper).setChecked(setting);
 
         expect(store.dispatch).toHaveBeenCalledWith('diffs/setFileByFile', {
diff --git a/spec/frontend/diffs/store/actions_spec.js b/spec/frontend/diffs/store/actions_spec.js
index f883aea764f..f084458b5c7 100644
--- a/spec/frontend/diffs/store/actions_spec.js
+++ b/spec/frontend/diffs/store/actions_spec.js
@@ -707,6 +707,7 @@ describe('DiffsStoreActions', () => {
         [{ type: types.SET_DIFF_VIEW_TYPE, payload: INLINE_DIFF_VIEW_TYPE }],
         [],
       );
+      expect(window.location.toString()).toContain('?view=inline');
       expect(Cookies.get('diff_view')).toEqual(INLINE_DIFF_VIEW_TYPE);
     });
   });
@@ -720,6 +721,7 @@ describe('DiffsStoreActions', () => {
         [{ type: types.SET_DIFF_VIEW_TYPE, payload: PARALLEL_DIFF_VIEW_TYPE }],
         [],
       );
+      expect(window.location.toString()).toContain('?view=parallel');
       expect(Cookies.get(DIFF_VIEW_COOKIE_NAME)).toEqual(PARALLEL_DIFF_VIEW_TYPE);
     });
   });