Add latest changes from gitlab-org/gitlab@master

16 files changed, 276 insertions, 258 deletions

diff --git a/spec/frontend/__helpers__/init_vue_mr_page_helper.js b/spec/frontend/__helpers__/init_vue_mr_page_helper.js
index 6b719a32480..83ed0a869dc 100644
--- a/spec/frontend/__helpers__/init_vue_mr_page_helper.js
+++ b/spec/frontend/__helpers__/init_vue_mr_page_helper.js
@@ -1,7 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import initMRPage from '~/mr_notes';
-import diffFileMockData from '../diffs/mock_data/diff_file';
+import { getDiffFileMock } from '../diffs/mock_data/diff_file';
 import { userDataMock, notesDataMock, noteableDataMock } from '../notes/mock_data';
 
 export default function initVueMRPage() {
@@ -39,7 +39,7 @@ export default function initVueMRPage() {
   const mock = new MockAdapter(axios);
   mock.onGet(diffsAppEndpoint).reply(200, {
     branch_name: 'foo',
-    diff_files: [diffFileMockData],
+    diff_files: [getDiffFileMock()],
   });
 
   initMRPage();
diff --git a/spec/frontend/diffs/components/collapsed_files_warning_spec.js b/spec/frontend/diffs/components/collapsed_files_warning_spec.js
index 8cc342e45a7..cc4f13ab0cf 100644
--- a/spec/frontend/diffs/components/collapsed_files_warning_spec.js
+++ b/spec/frontend/diffs/components/collapsed_files_warning_spec.js
@@ -6,7 +6,7 @@ import { EVT_EXPAND_ALL_FILES } from '~/diffs/constants';
 import eventHub from '~/diffs/event_hub';
 import createStore from '~/diffs/store/modules';
 
-import file from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 
 const propsData = {
   limited: true,
@@ -15,7 +15,7 @@ const propsData = {
 };
 
 async function files(store, count) {
-  const copies = Array(count).fill(file);
+  const copies = Array(count).fill(getDiffFileMock());
   store.state.diffs.diffFiles.push(...copies);
 
   await nextTick();
diff --git a/spec/frontend/diffs/components/diff_content_spec.js b/spec/frontend/diffs/components/diff_content_spec.js
index 7d2afe105a5..6844e6e497a 100644
--- a/spec/frontend/diffs/components/diff_content_spec.js
+++ b/spec/frontend/diffs/components/diff_content_spec.js
@@ -10,7 +10,7 @@ import { diffViewerModes } from '~/ide/constants';
 import NoteForm from '~/notes/components/note_form.vue';
 import NoPreviewViewer from '~/vue_shared/components/diff_viewer/viewers/no_preview.vue';
 import NotDiffableViewer from '~/vue_shared/components/diff_viewer/viewers/not_diffable.vue';
-import diffFileMockData from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 
 Vue.use(Vuex);
 
@@ -28,7 +28,7 @@ describe('DiffContent', () => {
   const getCommentFormForDiffFileGetterMock = jest.fn();
 
   const defaultProps = {
-    diffFile: JSON.parse(JSON.stringify(diffFileMockData)),
+    diffFile: getDiffFileMock(),
   };
 
   const createComponent = ({ props, state, provide } = {}) => {
@@ -70,7 +70,7 @@ describe('DiffContent', () => {
             isInlineView: isInlineViewGetterMock,
             isParallelView: isParallelViewGetterMock,
             getCommentFormForDiffFile: getCommentFormForDiffFileGetterMock,
-            diffLines: () => () => [...diffFileMockData.parallel_diff_lines],
+            diffLines: () => () => [...getDiffFileMock().parallel_diff_lines],
             fileLineCodequality: () => () => [],
           },
           actions: {
diff --git a/spec/frontend/diffs/components/diff_expansion_cell_spec.js b/spec/frontend/diffs/components/diff_expansion_cell_spec.js
index 5ff0728b358..34bb73ccf26 100644
--- a/spec/frontend/diffs/components/diff_expansion_cell_spec.js
+++ b/spec/frontend/diffs/components/diff_expansion_cell_spec.js
@@ -1,10 +1,9 @@
 import { mount } from '@vue/test-utils';
-import { cloneDeep } from 'lodash';
 import DiffExpansionCell from '~/diffs/components/diff_expansion_cell.vue';
 import { INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants';
 import { getPreviousLineIndex } from '~/diffs/store/utils';
 import { createStore } from '~/mr_notes/stores';
-import diffFileMockData from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 
 const EXPAND_UP_CLASS = '.js-unfold';
 const EXPAND_DOWN_CLASS = '.js-unfold-down';
@@ -26,7 +25,7 @@ function makeLoadMoreLinesPayload({
   isExpandDown = false,
 }) {
   return {
-    endpoint: diffFileMockData.context_lines_path,
+    endpoint: getDiffFileMock().context_lines_path,
     params: {
       since: sinceLine,
       to: toLine,
@@ -57,7 +56,7 @@ describe('DiffExpansionCell', () => {
   let store;
 
   beforeEach(() => {
-    mockFile = cloneDeep(diffFileMockData);
+    mockFile = getDiffFileMock();
     mockLine = getLine(mockFile, INLINE_DIFF_VIEW_TYPE, 8);
     store = createStore();
     store.state.diffs.diffFiles = [mockFile];
@@ -117,102 +116,102 @@ describe('DiffExpansionCell', () => {
   });
 
   describe('any row', () => {
-    [
-      { diffViewType: INLINE_DIFF_VIEW_TYPE, lineIndex: 8, file: cloneDeep(diffFileMockData) },
-    ].forEach(({ diffViewType, file, lineIndex }) => {
-      describe(`with diffViewType (${diffViewType})`, () => {
-        beforeEach(() => {
-          mockLine = getLine(mockFile, diffViewType, lineIndex);
-          store.state.diffs.diffFiles = [{ ...mockFile, ...file }];
-          store.state.diffs.diffViewType = diffViewType;
-        });
-
-        it('does not initially dispatch anything', () => {
-          expect(store.dispatch).not.toHaveBeenCalled();
-        });
-
-        it('on expand all clicked, dispatch loadMoreLines', () => {
-          const oldLineNumber = mockLine.meta_data.old_pos;
-          const newLineNumber = mockLine.meta_data.new_pos;
-          const previousIndex = getPreviousLineIndex(mockFile, {
-            oldLineNumber,
-            newLineNumber,
+    [{ diffViewType: INLINE_DIFF_VIEW_TYPE, lineIndex: 8, file: getDiffFileMock() }].forEach(
+      ({ diffViewType, file, lineIndex }) => {
+        describe(`with diffViewType (${diffViewType})`, () => {
+          beforeEach(() => {
+            mockLine = getLine(mockFile, diffViewType, lineIndex);
+            store.state.diffs.diffFiles = [{ ...mockFile, ...file }];
+            store.state.diffs.diffViewType = diffViewType;
           });
 
-          const wrapper = createComponent({ file, lineCountBetween: 10 });
-
-          findExpandAll(wrapper).trigger('click');
+          it('does not initially dispatch anything', () => {
+            expect(store.dispatch).not.toHaveBeenCalled();
+          });
 
-          expect(store.dispatch).toHaveBeenCalledWith(
-            'diffs/loadMoreLines',
-            makeLoadMoreLinesPayload({
-              fileHash: mockFile.file_hash,
-              toLine: newLineNumber - 1,
-              sinceLine: previousIndex,
+          it('on expand all clicked, dispatch loadMoreLines', () => {
+            const oldLineNumber = mockLine.meta_data.old_pos;
+            const newLineNumber = mockLine.meta_data.new_pos;
+            const previousIndex = getPreviousLineIndex(mockFile, {
               oldLineNumber,
-            }),
-          );
-        });
+              newLineNumber,
+            });
+
+            const wrapper = createComponent({ file, lineCountBetween: 10 });
+
+            findExpandAll(wrapper).trigger('click');
+
+            expect(store.dispatch).toHaveBeenCalledWith(
+              'diffs/loadMoreLines',
+              makeLoadMoreLinesPayload({
+                fileHash: mockFile.file_hash,
+                toLine: newLineNumber - 1,
+                sinceLine: previousIndex,
+                oldLineNumber,
+              }),
+            );
+          });
 
-        it('on expand up clicked, dispatch loadMoreLines', () => {
-          mockLine.meta_data.old_pos = 200;
-          mockLine.meta_data.new_pos = 200;
+          it('on expand up clicked, dispatch loadMoreLines', () => {
+            mockLine.meta_data.old_pos = 200;
+            mockLine.meta_data.new_pos = 200;
 
-          const oldLineNumber = mockLine.meta_data.old_pos;
-          const newLineNumber = mockLine.meta_data.new_pos;
+            const oldLineNumber = mockLine.meta_data.old_pos;
+            const newLineNumber = mockLine.meta_data.new_pos;
 
-          const wrapper = createComponent({ file });
+            const wrapper = createComponent({ file });
 
-          findExpandUp(wrapper).trigger('click');
+            findExpandUp(wrapper).trigger('click');
 
-          expect(store.dispatch).toHaveBeenCalledWith(
-            'diffs/loadMoreLines',
-            makeLoadMoreLinesPayload({
-              fileHash: mockFile.file_hash,
-              toLine: newLineNumber - 1,
-              sinceLine: 179,
-              oldLineNumber,
-              diffViewType,
-              unfold: true,
-            }),
-          );
-        });
+            expect(store.dispatch).toHaveBeenCalledWith(
+              'diffs/loadMoreLines',
+              makeLoadMoreLinesPayload({
+                fileHash: mockFile.file_hash,
+                toLine: newLineNumber - 1,
+                sinceLine: 179,
+                oldLineNumber,
+                diffViewType,
+                unfold: true,
+              }),
+            );
+          });
 
-        it('on expand down clicked, dispatch loadMoreLines', () => {
-          mockFile[lineSources[diffViewType]][lineIndex + 1] = cloneDeep(
-            mockFile[lineSources[diffViewType]][lineIndex],
-          );
-          const nextLine = getLine(mockFile, diffViewType, lineIndex + 1);
-
-          nextLine.meta_data.old_pos = 300;
-          nextLine.meta_data.new_pos = 300;
-          mockLine.meta_data.old_pos = 200;
-          mockLine.meta_data.new_pos = 200;
-
-          const wrapper = createComponent({ file });
-
-          findExpandDown(wrapper).trigger('click');
-
-          expect(store.dispatch).toHaveBeenCalledWith('diffs/loadMoreLines', {
-            endpoint: diffFileMockData.context_lines_path,
-            params: {
-              since: 1,
-              to: 21, // the load amount, plus 1 line
-              offset: 0,
-              unfold: true,
-              bottom: true,
-            },
-            lineNumbers: {
-              // when expanding down, these are based on the previous line, 0, in this case
-              oldLineNumber: 0,
-              newLineNumber: 0,
-            },
-            nextLineNumbers: { old_line: 200, new_line: 200 },
-            fileHash: mockFile.file_hash,
-            isExpandDown: true,
+          it('on expand down clicked, dispatch loadMoreLines', () => {
+            mockFile[lineSources[diffViewType]][lineIndex + 1] = getDiffFileMock()[
+              lineSources[diffViewType]
+            ][lineIndex];
+            const nextLine = getLine(mockFile, diffViewType, lineIndex + 1);
+
+            nextLine.meta_data.old_pos = 300;
+            nextLine.meta_data.new_pos = 300;
+            mockLine.meta_data.old_pos = 200;
+            mockLine.meta_data.new_pos = 200;
+
+            const wrapper = createComponent({ file });
+
+            findExpandDown(wrapper).trigger('click');
+
+            expect(store.dispatch).toHaveBeenCalledWith('diffs/loadMoreLines', {
+              endpoint: mockFile.context_lines_path,
+              params: {
+                since: 1,
+                to: 21, // the load amount, plus 1 line
+                offset: 0,
+                unfold: true,
+                bottom: true,
+              },
+              lineNumbers: {
+                // when expanding down, these are based on the previous line, 0, in this case
+                oldLineNumber: 0,
+                newLineNumber: 0,
+              },
+              nextLineNumbers: { old_line: 200, new_line: 200 },
+              fileHash: mockFile.file_hash,
+              isExpandDown: true,
+            });
           });
         });
-      });
-    });
+      },
+    );
   });
 });
diff --git a/spec/frontend/diffs/components/diff_file_spec.js b/spec/frontend/diffs/components/diff_file_spec.js
index a0aa4c784bf..9e8d9e1ca29 100644
--- a/spec/frontend/diffs/components/diff_file_spec.js
+++ b/spec/frontend/diffs/components/diff_file_spec.js
@@ -20,7 +20,7 @@ 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 { getDiffFileMock } from '../mock_data/diff_file';
 import diffFileMockDataUnreadable from '../mock_data/diff_file_unreadable';
 
 jest.mock('~/lib/utils/common_utils');
@@ -106,7 +106,7 @@ const findLoader = (wrapper) => wrapper.find('[data-testid="loader-icon"]');
 const findToggleButton = (wrapper) => wrapper.find('[data-testid="expand-button"]');
 
 const toggleFile = (wrapper) => findDiffHeader(wrapper).vm.$emit('toggleFile');
-const getReadableFile = () => JSON.parse(JSON.stringify(diffFileMockDataReadable));
+const getReadableFile = () => getDiffFileMock();
 const getUnreadableFile = () => JSON.parse(JSON.stringify(diffFileMockDataUnreadable));
 
 const makeFileAutomaticallyCollapsed = (store, index = 0) =>
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 b59043168b8..542d61c4680 100644
--- a/spec/frontend/diffs/components/diff_line_note_form_spec.js
+++ b/spec/frontend/diffs/components/diff_line_note_form_spec.js
@@ -1,200 +1,207 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import Vuex from 'vuex';
+import Autosave from '~/autosave';
 import DiffLineNoteForm from '~/diffs/components/diff_line_note_form.vue';
-import { createStore } from '~/mr_notes/stores';
+import { createModules } 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';
 import { noteableDataMock } from 'jest/notes/mock_data';
-import diffFileMockData from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 
-jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal', () => {
-  return {
-    confirmAction: jest.fn(),
-  };
-});
+jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
+jest.mock('~/autosave');
 
 describe('DiffLineNoteForm', () => {
   let wrapper;
   let diffFile;
   let diffLines;
-  const getDiffFileMock = () => ({ ...diffFileMockData });
+  let actions;
+  let store;
 
-  const createComponent = (args = {}) => {
-    diffFile = getDiffFileMock();
-    diffLines = diffFile.highlighted_diff_lines;
-    const store = createStore();
+  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;
+
+    store = new Vuex.Store({ modules });
     store.state.notes.userData.id = 1;
     store.state.notes.noteableData = noteableDataMock;
+
+    store.replaceState({ ...store.state, ...state });
+  };
+
+  const createComponent = ({ props, state } = {}) => {
+    wrapper?.destroy();
+    diffFile = getDiffFileMock();
+    diffLines = diffFile.highlighted_diff_lines;
+
+    createStore(state);
     store.state.diffs.diffFiles = [diffFile];
 
-    store.replaceState({ ...store.state, ...args.state });
+    const propsData = {
+      diffFileHash: diffFile.file_hash,
+      diffLines,
+      line: diffLines[1],
+      range: { start: diffLines[0], end: diffLines[1] },
+      noteTargetLine: diffLines[1],
+      ...props,
+    };
 
-    return shallowMount(DiffLineNoteForm, {
+    wrapper = shallowMount(DiffLineNoteForm, {
       store,
-      propsData: {
-        ...{
-          diffFileHash: diffFile.file_hash,
-          diffLines,
-          line: diffLines[1],
-          range: { start: diffLines[0], end: diffLines[1] },
-          noteTargetLine: diffLines[1],
-        },
-        ...(args.props || {}),
-      },
+      propsData,
     });
   };
 
   const findNoteForm = () => wrapper.findComponent(NoteForm);
+  const findCommentForm = () => wrapper.findComponent(MultilineCommentForm);
 
-  describe('methods', () => {
-    beforeEach(() => {
-      wrapper = createComponent();
-    });
-
-    describe('handleCancelCommentForm', () => {
-      afterEach(() => {
-        confirmAction.mockReset();
-      });
-
-      it('should ask for confirmation when shouldConfirm and isDirty passed as truthy', () => {
-        confirmAction.mockResolvedValueOnce(false);
-
-        findNoteForm().vm.$emit('cancelForm', true, true);
-
-        expect(confirmAction).toHaveBeenCalled();
-      });
+  beforeEach(() => {
+    Autosave.mockClear();
+    createComponent();
+  });
 
-      it('should only ask for confirmation once', () => {
-        // Never resolve so we can test what happens when triggered while "confirmAction" is loading
-        confirmAction.mockImplementation(() => new Promise(() => {}));
+  it('shows note form', () => {
+    expect(wrapper.find(NoteForm).exists()).toBe(true);
+  });
 
-        findNoteForm().vm.$emit('cancelForm', true, true);
-        findNoteForm().vm.$emit('cancelForm', true, true);
+  it('passes the provided range of lines to comment form', () => {
+    expect(findCommentForm().props('lineRange')).toMatchObject({
+      start: diffLines[0],
+      end: diffLines[1],
+    });
+  });
 
-        expect(confirmAction).toHaveBeenCalledTimes(1);
-      });
+  it('respects empty range when passing a range of lines', () => {
+    createComponent({ props: { range: null } });
+    expect(findCommentForm().props('lineRange')).toMatchObject({
+      start: diffLines[1],
+      end: diffLines[1],
+    });
+  });
 
-      it('should not ask for confirmation when one of the params false', () => {
-        confirmAction.mockResolvedValueOnce(false);
+  it('should init autosave', () => {
+    expect(Autosave).toHaveBeenCalledWith({}, [
+      'Note',
+      'Issue',
+      98,
+      undefined,
+      'DiffNote',
+      undefined,
+      '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_2',
+    ]);
+  });
 
-        findNoteForm().vm.$emit('cancelForm', true, false);
+  describe('when cancelling form', () => {
+    afterEach(() => {
+      confirmAction.mockReset();
+    });
 
-        expect(confirmAction).not.toHaveBeenCalled();
+    it('should only ask for confirmation once', () => {
+      let finalizePromise;
+      confirmAction.mockImplementation(
+        () =>
+          new Promise((resolve) => {
+            finalizePromise = resolve;
+          }),
+      );
 
-        findNoteForm().vm.$emit('cancelForm', false, true);
+      findNoteForm().vm.$emit('cancelForm', true, true);
+      findNoteForm().vm.$emit('cancelForm', true, true);
 
-        expect(confirmAction).not.toHaveBeenCalled();
-      });
+      expect(confirmAction).toHaveBeenCalledTimes(1);
+      finalizePromise();
+    });
 
-      it('should call cancelCommentForm with lineCode', async () => {
+    describe('with confirmation', () => {
+      beforeEach(() => {
         confirmAction.mockResolvedValueOnce(true);
-        jest.spyOn(wrapper.vm, 'cancelCommentForm').mockImplementation(() => {});
-        jest.spyOn(wrapper.vm, 'resetAutoSave').mockImplementation(() => {});
+      });
 
+      it('should ask form confirmation and hide form for a line', async () => {
         findNoteForm().vm.$emit('cancelForm', true, true);
-
         await nextTick();
-
         expect(confirmAction).toHaveBeenCalled();
-
         await nextTick();
 
-        expect(wrapper.vm.cancelCommentForm).toHaveBeenCalledWith({
-          lineCode: diffLines[1].line_code,
-          fileHash: wrapper.vm.diffFileHash,
-        });
-        expect(wrapper.vm.resetAutoSave).toHaveBeenCalled();
+        expect(getSelectedLine().hasForm).toBe(false);
+        expect(Autosave.mock.instances[0].reset).toHaveBeenCalled();
       });
     });
 
-    describe('saveNoteForm', () => {
-      it('should call saveNote action with proper params', async () => {
-        const saveDiffDiscussionSpy = jest
-          .spyOn(wrapper.vm, 'saveDiffDiscussion')
-          .mockReturnValue(Promise.resolve());
-
-        const lineRange = {
-          start: {
-            line_code: wrapper.vm.commentLineStart.line_code,
-            type: wrapper.vm.commentLineStart.type,
-            new_line: 2,
-            old_line: null,
-          },
-          end: {
-            line_code: wrapper.vm.line.line_code,
-            type: wrapper.vm.line.type,
-            new_line: 2,
-            old_line: null,
-          },
-        };
-
-        const formData = {
-          ...wrapper.vm.formData,
-          lineRange,
-        };
-
-        await wrapper.vm.handleSaveNote('note body');
-        expect(saveDiffDiscussionSpy).toHaveBeenCalledWith({
-          note: 'note body',
-          formData,
-        });
+    describe('without confirmation', () => {
+      beforeEach(() => {
+        confirmAction.mockResolvedValueOnce(false);
       });
-    });
-  });
 
-  describe('created', () => {
-    it('should use the provided `range` of lines', () => {
-      wrapper = createComponent();
+      it('should ask for confirmation when shouldConfirm and isDirty passed as truthy', () => {
+        findNoteForm().vm.$emit('cancelForm', true, true);
 
-      expect(wrapper.vm.lines.start).toBe(diffLines[0]);
-      expect(wrapper.vm.lines.end).toBe(diffLines[1]);
-    });
+        expect(confirmAction).toHaveBeenCalled();
+      });
 
-    it("should fill the internal `lines` data with the provided `line` if there's no provided `range", () => {
-      wrapper = createComponent({ props: { range: null } });
+      it('should not ask for confirmation when one of the params false', () => {
+        findNoteForm().vm.$emit('cancelForm', true, false);
 
-      expect(wrapper.vm.lines.start).toBe(diffLines[1]);
-      expect(wrapper.vm.lines.end).toBe(diffLines[1]);
-    });
-  });
+        expect(confirmAction).not.toHaveBeenCalled();
 
-  describe('mounted', () => {
-    it('should init autosave', () => {
-      const key = 'autosave/Note/Issue/98//DiffNote//1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_2';
-      wrapper = createComponent();
+        findNoteForm().vm.$emit('cancelForm', false, true);
 
-      expect(wrapper.vm.autosave).toBeDefined();
-      expect(wrapper.vm.autosave.key).toEqual(key);
+        expect(confirmAction).not.toHaveBeenCalled();
+      });
     });
+  });
 
-    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',
-            },
-          },
+  describe('saving note', () => {
+    it('should save original line', async () => {
+      const lineRange = {
+        start: {
+          line_code: diffLines[1].line_code,
+          type: diffLines[1].type,
+          new_line: 2,
+          old_line: null,
+        },
+        end: {
+          line_code: diffLines[1].line_code,
+          type: diffLines[1].type,
+          new_line: 2,
+          old_line: null,
         },
       };
-      wrapper = createComponent({ state });
-      startLineCode = wrapper.vm.commentLineStart.line_code;
-      lineCode = state.notes.selectedCommentPosition.start.line_code;
-      expect(startLineCode).toEqual(lineCode);
+      await findNoteForm().vm.$emit('handleFormUpdate', 'note body');
+      expect(actions.saveDiffDiscussion.mock.calls[0][1].formData).toMatchObject({
+        lineRange,
+      });
     });
-  });
 
-  describe('template', () => {
-    it('should have note form', () => {
-      wrapper = createComponent();
-      expect(wrapper.find(NoteForm).exists()).toBe(true);
+    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,
+      );
     });
   });
 });
diff --git a/spec/frontend/diffs/components/diff_row_spec.js b/spec/frontend/diffs/components/diff_row_spec.js
index 4c5ce429c9d..be81508213b 100644
--- a/spec/frontend/diffs/components/diff_row_spec.js
+++ b/spec/frontend/diffs/components/diff_row_spec.js
@@ -6,7 +6,7 @@ import DiffRow from '~/diffs/components/diff_row.vue';
 import { mapParallel } from '~/diffs/components/diff_row_utils';
 import diffsModule from '~/diffs/store/modules';
 import { findInteropAttributes } from '../find_interop_attributes';
-import diffFileMockData from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 
 const showCommentForm = jest.fn();
 const enterdragging = jest.fn();
@@ -210,6 +210,7 @@ describe('DiffRow', () => {
   });
 
   describe('sets coverage title and class', () => {
+    const diffFileMockData = getDiffFileMock();
     const thisLine = diffFileMockData.parallel_diff_lines[2];
     const rightLine = diffFileMockData.parallel_diff_lines[2].right;
 
diff --git a/spec/frontend/diffs/components/diff_stats_spec.js b/spec/frontend/diffs/components/diff_stats_spec.js
index 4ef1ec55cb0..09fe69e97de 100644
--- a/spec/frontend/diffs/components/diff_stats_spec.js
+++ b/spec/frontend/diffs/components/diff_stats_spec.js
@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 import DiffStats from '~/diffs/components/diff_stats.vue';
-import mockDiffFile from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 
 const TEST_ADDED_LINES = 100;
 const TEST_REMOVED_LINES = 200;
@@ -48,6 +48,7 @@ describe('diff_stats', () => {
     const getBytesContainer = () => wrapper.find('.diff-stats > div:first-child');
 
     beforeEach(() => {
+      const mockDiffFile = getDiffFileMock();
       file = {
         ...mockDiffFile,
         viewer: {
diff --git a/spec/frontend/diffs/mock_data/diff_file.js b/spec/frontend/diffs/mock_data/diff_file.js
index 9ebcd5ef26b..dd200b0248c 100644
--- a/spec/frontend/diffs/mock_data/diff_file.js
+++ b/spec/frontend/diffs/mock_data/diff_file.js
@@ -1,4 +1,4 @@
-export default {
+export const getDiffFileMock = () => ({
   submodule: false,
   submodule_link: null,
   blob: {
@@ -305,4 +305,4 @@ export default {
   ],
   discussions: [],
   renderingLines: false,
-};
+});
diff --git a/spec/frontend/diffs/store/actions_spec.js b/spec/frontend/diffs/store/actions_spec.js
index cc595e58dda..346e43e5a72 100644
--- a/spec/frontend/diffs/store/actions_spec.js
+++ b/spec/frontend/diffs/store/actions_spec.js
@@ -3,7 +3,7 @@ import Cookies from '~/lib/utils/cookies';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
-import mockDiffFile from 'jest/diffs/mock_data/diff_file';
+import { getDiffFileMock } from 'jest/diffs/mock_data/diff_file';
 import {
   DIFF_VIEW_COOKIE_NAME,
   INLINE_DIFF_VIEW_TYPE,
@@ -754,7 +754,7 @@ describe('DiffsStoreActions', () => {
     it('dispatches actions', () => {
       const commitId = 'something';
       const formData = {
-        diffFile: { ...mockDiffFile },
+        diffFile: getDiffFileMock(),
         noteableData: {},
       };
       const note = {};
diff --git a/spec/frontend/diffs/store/mutations_spec.js b/spec/frontend/diffs/store/mutations_spec.js
index 57e623b843d..031e4fe2be2 100644
--- a/spec/frontend/diffs/store/mutations_spec.js
+++ b/spec/frontend/diffs/store/mutations_spec.js
@@ -3,7 +3,7 @@ import createState from '~/diffs/store/modules/diff_state';
 import * as types from '~/diffs/store/mutation_types';
 import mutations from '~/diffs/store/mutations';
 import * as utils from '~/diffs/store/utils';
-import diffFileMockData from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 
 describe('DiffsStoreMutations', () => {
   describe('SET_BASE_CONFIG', () => {
@@ -71,6 +71,7 @@ describe('DiffsStoreMutations', () => {
 
   describe('SET_DIFF_METADATA', () => {
     it('should overwrite state with the camelCased data that is passed in', () => {
+      const diffFileMockData = getDiffFileMock();
       const state = {
         diffFiles: [],
       };
@@ -94,7 +95,7 @@ describe('DiffsStoreMutations', () => {
     it('should set diff data batch type properly', () => {
       const state = { diffFiles: [] };
       const diffMock = {
-        diff_files: [diffFileMockData],
+        diff_files: [getDiffFileMock()],
       };
 
       mutations[types.SET_DIFF_DATA_BATCH](state, diffMock);
diff --git a/spec/frontend/diffs/store/utils_spec.js b/spec/frontend/diffs/store/utils_spec.js
index 6f55f76d7b5..8852c6c62c5 100644
--- a/spec/frontend/diffs/store/utils_spec.js
+++ b/spec/frontend/diffs/store/utils_spec.js
@@ -1,4 +1,3 @@
-import { clone } from 'lodash';
 import {
   LINE_POSITION_LEFT,
   LINE_POSITION_RIGHT,
@@ -14,10 +13,9 @@ import {
 import * as utils from '~/diffs/store/utils';
 import { MERGE_REQUEST_NOTEABLE_TYPE } from '~/notes/constants';
 import { noteableDataMock } from 'jest/notes/mock_data';
-import diffFileMockData from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 import { diffMetadata } from '../mock_data/diff_metadata';
 
-const getDiffFileMock = () => JSON.parse(JSON.stringify(diffFileMockData));
 const getDiffMetadataMock = () => JSON.parse(JSON.stringify(diffMetadata));
 
 describe('DiffsStoreUtils', () => {
@@ -47,7 +45,7 @@ describe('DiffsStoreUtils', () => {
     let diffFile;
 
     beforeEach(() => {
-      diffFile = { ...clone(diffFileMockData) };
+      diffFile = getDiffFileMock();
     });
 
     it('should return the correct previous line number', () => {
diff --git a/spec/frontend/diffs/utils/diff_file_spec.js b/spec/frontend/diffs/utils/diff_file_spec.js
index 778897be3ba..b062a156216 100644
--- a/spec/frontend/diffs/utils/diff_file_spec.js
+++ b/spec/frontend/diffs/utils/diff_file_spec.js
@@ -6,7 +6,7 @@ import {
   match,
 } from '~/diffs/utils/diff_file';
 import { diffViewerModes } from '~/ide/constants';
-import mockDiffFile from '../mock_data/diff_file';
+import { getDiffFileMock } from '../mock_data/diff_file';
 
 function getDiffFiles() {
   const loadFull = 'namespace/project/-/merge_requests/12345/diff_for_path?file_identifier=abc';
@@ -210,7 +210,7 @@ describe('diff_file utilities', () => {
     ];
     const validFile = [
       'computes the correct stats from a file',
-      mockDiffFile,
+      getDiffFileMock(),
       {
         changed: 1024,
         percent: 100,
@@ -223,7 +223,7 @@ describe('diff_file utilities', () => {
     const negativeChange = [
       'computed the correct states from a file with a negative size change',
       {
-        ...mockDiffFile,
+        ...getDiffFileMock(),
         new_size: 0,
         old_size: 1024,
       },
diff --git a/spec/frontend/notes/components/noteable_discussion_spec.js b/spec/frontend/notes/components/noteable_discussion_spec.js
index ddfa77117ca..603db56a098 100644
--- a/spec/frontend/notes/components/noteable_discussion_spec.js
+++ b/spec/frontend/notes/components/noteable_discussion_spec.js
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import discussionWithTwoUnresolvedNotes from 'test_fixtures/merge_requests/resolved_diff_discussion.json';
 import { trimText } from 'helpers/text_helper';
-import mockDiffFile from 'jest/diffs/mock_data/diff_file';
+import { getDiffFileMock } from 'jest/diffs/mock_data/diff_file';
 import DiscussionNotes from '~/notes/components/discussion_notes.vue';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
 import ResolveWithIssueButton from '~/notes/components/discussion_resolve_with_issue_button.vue';
@@ -45,7 +45,7 @@ describe('noteable_discussion component', () => {
 
   it('should render thread header', async () => {
     const discussion = { ...discussionMock };
-    discussion.diff_file = mockDiffFile;
+    discussion.diff_file = getDiffFileMock();
     discussion.diff_discussion = true;
     discussion.expanded = false;
 
@@ -57,7 +57,7 @@ describe('noteable_discussion component', () => {
 
   it('should hide actions when diff refs do not exists', async () => {
     const discussion = { ...discussionMock };
-    discussion.diff_file = { ...mockDiffFile, diff_refs: null };
+    discussion.diff_file = { ...getDiffFileMock(), diff_refs: null };
     discussion.diff_discussion = true;
     discussion.expanded = false;
 
diff --git a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_value_spec.js b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_value_spec.js
index f22592dd604..5bbdb136353 100644
--- a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_value_spec.js
+++ b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_value_spec.js
@@ -33,7 +33,7 @@ describe('DropdownValue', () => {
 
     it.each`
       index | cssClass
-      ${0}  | ${['gl-font-base', 'gl-line-height-24']}
+      ${0}  | ${[]}
       ${1}  | ${['hide-collapsed']}
     `(
       'passes correct props to the ColorItem with CSS class `$cssClass`',
diff --git a/spec/lib/gitlab/data_builder/pipeline_spec.rb b/spec/lib/gitlab/data_builder/pipeline_spec.rb
index c2bd20798f1..469812c80fc 100644
--- a/spec/lib/gitlab/data_builder/pipeline_spec.rb
+++ b/spec/lib/gitlab/data_builder/pipeline_spec.rb
@@ -36,6 +36,7 @@ RSpec.describe Gitlab::DataBuilder::Pipeline do
       expect(build_data).to be_a(Hash)
       expect(build_data[:id]).to eq(build.id)
       expect(build_data[:status]).to eq(build.status)
+      expect(build_data[:failure_reason]).to be_nil
       expect(build_data[:allow_failure]).to eq(build.allow_failure)
       expect(build_data[:environment]).to be_nil
       expect(runner_data).to eq(nil)
@@ -197,4 +198,14 @@ RSpec.describe Gitlab::DataBuilder::Pipeline do
       end
     end
   end
+
+  describe '.build failed' do
+    let(:build) { create(:ci_build, :failed, pipeline: pipeline, failure_reason: :script_failure) }
+    let(:data) { described_class.build(pipeline) }
+    let(:build_data) { data[:builds].last }
+
+    it 'has failure_reason' do
+      expect(build_data[:failure_reason]).to eq(build.failure_reason)
+    end
+  end
 end