Add latest changes from gitlab-org/gitlab@master

13 files changed, 105 insertions, 67 deletions

diff --git a/spec/frontend/vue_merge_request_widget/components/approvals/approvals_spec.js b/spec/frontend/vue_merge_request_widget/components/approvals/approvals_spec.js
index 3fa0780a3c4..bf208f16d18 100644
--- a/spec/frontend/vue_merge_request_widget/components/approvals/approvals_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/approvals/approvals_spec.js
@@ -105,21 +105,18 @@ describe('MRWidget approvals', () => {
   });
 
   describe('when created', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('shows loading message', () => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({ fetchingApprovals: true });
+    it('shows loading message', async () => {
+      service = {
+        fetchApprovals: jest.fn().mockReturnValue(new Promise(() => {})),
+      };
 
-      return nextTick().then(() => {
-        expect(wrapper.text()).toContain(FETCH_LOADING);
-      });
+      createComponent();
+      await nextTick();
+      expect(wrapper.text()).toContain(FETCH_LOADING);
     });
 
     it('fetches approvals', () => {
+      createComponent();
       expect(service.fetchApprovals).toHaveBeenCalled();
     });
   });
diff --git a/spec/frontend/vue_merge_request_widget/components/mr_widget_rebase_spec.js b/spec/frontend/vue_merge_request_widget/components/mr_widget_rebase_spec.js
index 7b52773e92d..ec047fe0714 100644
--- a/spec/frontend/vue_merge_request_widget/components/mr_widget_rebase_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/mr_widget_rebase_spec.js
@@ -219,18 +219,15 @@ describe('Merge request widget rebase component', () => {
       it('renders a message explaining user does not have permissions', () => {
         const text = findRebaseMessageText();
 
-        expect(text).toContain(
-          'Merge blocked: the source branch must be rebased onto the target branch.',
-        );
+        expect(text).toContain('Merge blocked:');
         expect(text).toContain('the source branch must be rebased');
       });
 
       it('renders the correct target branch name', () => {
-        const elem = findRebaseMessage();
+        const text = findRebaseMessageText();
 
-        expect(elem.text()).toContain(
-          'Merge blocked: the source branch must be rebased onto the target branch.',
-        );
+        expect(text).toContain('Merge blocked:');
+        expect(text).toContain('the source branch must be rebased onto the target branch.');
       });
     });
 
diff --git a/spec/frontend/vue_merge_request_widget/components/states/merge_checks_failed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/merge_checks_failed_spec.js
index 8eeba4d6274..e4448346685 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/merge_checks_failed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/merge_checks_failed_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import MergeChecksFailed from '~/vue_merge_request_widget/components/states/merge_checks_failed.vue';
 import { DETAILED_MERGE_STATUS } from '~/vue_merge_request_widget/constants';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 
 let wrapper;
 
@@ -23,6 +24,7 @@ describe('Merge request widget merge checks failed state component', () => {
   `('display $displayText text for $mrState', ({ mrState, displayText }) => {
     factory({ mr: mrState });
 
-    expect(wrapper.text()).toContain(MergeChecksFailed.i18n[displayText]);
+    const message = wrapper.findComponent(BoldText).props('message');
+    expect(message).toContain(MergeChecksFailed.i18n[displayText]);
   });
 });
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_archived_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_archived_spec.js
index 5c07f4ce143..08700e834d7 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_archived_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_archived_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import archivedComponent from '~/vue_merge_request_widget/components/states/mr_widget_archived.vue';
 import StateContainer from '~/vue_merge_request_widget/components/state_container.vue';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 
 describe('MRWidgetArchived', () => {
   let wrapper;
@@ -20,8 +21,8 @@ describe('MRWidgetArchived', () => {
   });
 
   it('renders information about merging', () => {
-    expect(wrapper.text()).toContain(
-      'Merge unavailable: merge requests are read-only on archived projects.',
-    );
+    const message = wrapper.findComponent(BoldText).props('message');
+    expect(message).toContain('Merge unavailable:');
+    expect(message).toContain('merge requests are read-only on archived projects.');
   });
 });
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_conflicts_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_conflicts_spec.js
index a16e4d4a6ea..f13fc8a5007 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_conflicts_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_conflicts_spec.js
@@ -12,9 +12,9 @@ describe('MRWidgetConflicts', () => {
   const findResolveButton = () => wrapper.findByTestId('resolve-conflicts-button');
   const findMergeLocalButton = () => wrapper.findByTestId('merge-locally-button');
 
-  const mergeConflictsText = 'Merge blocked: merge conflicts must be resolved.';
+  const mergeConflictsText = 'merge conflicts must be resolved.';
   const fastForwardMergeText =
-    'Merge blocked: fast-forward merge is not possible. To merge this request, first rebase locally.';
+    'fast-forward merge is not possible. To merge this request, first rebase locally.';
   const userCannotMergeText =
     'Users who can write to the source or target branches can resolve the conflicts.';
   const resolveConflictsBtnText = 'Resolve conflicts';
@@ -76,8 +76,9 @@ describe('MRWidgetConflicts', () => {
     });
 
     it('should tell you about conflicts without bothering other people', () => {
-      expect(wrapper.text()).toContain(mergeConflictsText);
-      expect(wrapper.text()).not.toContain(userCannotMergeText);
+      const text = removeBreakLine(wrapper.text()).trim();
+      expect(text).toContain(mergeConflictsText);
+      expect(text).not.toContain(userCannotMergeText);
     });
 
     it('should not allow you to resolve the conflicts', () => {
@@ -102,8 +103,9 @@ describe('MRWidgetConflicts', () => {
     });
 
     it('should tell you about conflicts', () => {
-      expect(wrapper.text()).toContain(mergeConflictsText);
-      expect(wrapper.text()).toContain(userCannotMergeText);
+      const text = removeBreakLine(wrapper.text()).trim();
+      expect(text).toContain(mergeConflictsText);
+      expect(text).toContain(userCannotMergeText);
     });
 
     it('should allow you to resolve the conflicts', () => {
@@ -129,8 +131,9 @@ describe('MRWidgetConflicts', () => {
     });
 
     it('should tell you about conflicts without bothering other people', () => {
-      expect(wrapper.text()).toContain(mergeConflictsText);
-      expect(wrapper.text()).not.toContain(userCannotMergeText);
+      const text = removeBreakLine(wrapper.text()).trim();
+      expect(text).toContain(mergeConflictsText);
+      expect(text).not.toContain(userCannotMergeText);
     });
 
     it('should allow you to resolve the conflicts', () => {
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_merging_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_merging_spec.js
index 49bd3739fdb..5408f731b34 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_merging_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_merging_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import simplePoll from '~/lib/utils/simple_poll';
 import MrWidgetMerging from '~/vue_merge_request_widget/components/states/mr_widget_merging.vue';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 
 jest.mock('~/lib/utils/simple_poll', () =>
   jest.fn().mockImplementation(jest.requireActual('~/lib/utils/simple_poll').default),
@@ -33,14 +34,8 @@ describe('MRWidgetMerging', () => {
   });
 
   it('renders information about merge request being merged', () => {
-    expect(
-      wrapper
-        .find('.media-body')
-        .text()
-        .trim()
-        .replace(/\s\s+/g, ' ')
-        .replace(/[\r\n]+/g, ' '),
-    ).toContain('Merging!');
+    const message = wrapper.findComponent(BoldText).props('message');
+    expect(message).toContain('Merging!');
   });
 
   describe('initiateMergePolling', () => {
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_not_allowed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_not_allowed_spec.js
index c6e7198c678..42515c597c5 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_not_allowed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_not_allowed_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import notAllowedComponent from '~/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue';
 import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 
 describe('MRWidgetNotAllowed', () => {
   let wrapper;
@@ -20,8 +21,9 @@ describe('MRWidgetNotAllowed', () => {
   });
 
   it('renders informative text', () => {
-    expect(wrapper.text()).toContain('Ready to be merged automatically.');
-    expect(wrapper.text()).toContain(
+    const message = wrapper.findComponent(BoldText).props('message');
+    expect(message).toContain('Ready to be merged automatically.');
+    expect(message).toContain(
       'Ask someone with write access to this repository to merge this request',
     );
   });
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked_spec.js
index 4219ad70b4c..c0197b5e20a 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import PipelineBlockedComponent from '~/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue';
 import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 
 describe('MRWidgetPipelineBlocked', () => {
   let wrapper;
@@ -20,8 +21,10 @@ describe('MRWidgetPipelineBlocked', () => {
   });
 
   it('renders information text', () => {
-    expect(wrapper.text()).toBe(
-      "Merge blocked: pipeline must succeed. It's waiting for a manual action to continue.",
+    const message = wrapper.findComponent(BoldText).props('message');
+    expect(message).toContain('Merge blocked:');
+    expect(message).toContain(
+      "pipeline must succeed. It's waiting for a manual action to continue.",
     );
   });
 });
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_failed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_failed_spec.js
index bd158d59d74..8bae2b62ed1 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_failed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_failed_spec.js
@@ -1,7 +1,9 @@
 import { GlSprintf, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { removeBreakLine } from 'helpers/text_helper';
 import PipelineFailed from '~/vue_merge_request_widget/components/states/pipeline_failed.vue';
 import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
+import BoldText from '~/vue_merge_request_widget/components/bold_text.vue';
 
 describe('PipelineFailed', () => {
   let wrapper;
@@ -32,16 +34,20 @@ describe('PipelineFailed', () => {
   it('should render error message with a disabled merge button', () => {
     createComponent();
 
-    expect(wrapper.text()).toContain('Merge blocked: pipeline must succeed.');
-    expect(wrapper.text()).toContain('Push a commit that fixes the failure');
+    const text = removeBreakLine(wrapper.text()).trim();
+    expect(text).toContain('Merge blocked:');
+    expect(text).toContain('pipeline must succeed');
+    expect(text).toContain('Push a commit that fixes the failure');
     expect(wrapper.findComponent(GlLink).text()).toContain('learn about other solutions');
   });
 
   it('should render pipeline blocked message', () => {
     createComponent({ isPipelineBlocked: true });
 
-    expect(wrapper.text()).toContain(
-      "Merge blocked: pipeline must succeed. It's waiting for a manual action to continue.",
+    const message = wrapper.findComponent(BoldText).props('message');
+    expect(message).toContain('Merge blocked:');
+    expect(message).toContain(
+      "pipeline must succeed. It's waiting for a manual action to continue.",
     );
   });
 });
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_sha_mismatch_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_sha_mismatch_spec.js
index 2a343997cf5..aaa4591d67d 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_sha_mismatch_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_sha_mismatch_spec.js
@@ -25,7 +25,7 @@ describe('ShaMismatch', () => {
   });
 
   it('should render warning message', () => {
-    expect(wrapper.element.innerText).toContain(I18N_SHA_MISMATCH.warningMessage);
+    expect(wrapper.text()).toContain('Merge blocked: new changes were just added.');
   });
 
   it('action button should have correct label', () => {
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions_spec.js
index e2d79c61b9b..c97b42f61ac 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions_spec.js
@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { TEST_HOST } from 'helpers/test_constants';
+import { removeBreakLine } from 'helpers/text_helper';
 import notesEventHub from '~/notes/event_hub';
 import UnresolvedDiscussions from '~/vue_merge_request_widget/components/states/unresolved_discussions.vue';
 
@@ -42,7 +43,9 @@ describe('UnresolvedDiscussions', () => {
     });
 
     it('should have correct elements', () => {
-      expect(wrapper.element.innerText).toContain(`Merge blocked: all threads must be resolved.`);
+      const text = removeBreakLine(wrapper.text()).trim();
+      expect(text).toContain('Merge blocked:');
+      expect(text).toContain('all threads must be resolved.');
 
       expect(wrapper.element.innerText).toContain('Jump to first unresolved thread');
       expect(wrapper.element.innerText).toContain('Create issue to resolve all threads');
@@ -54,7 +57,9 @@ describe('UnresolvedDiscussions', () => {
 
   describe('without threads path', () => {
     it('should not show create issue link if user cannot create issue', () => {
-      expect(wrapper.element.innerText).toContain(`Merge blocked: all threads must be resolved.`);
+      const text = removeBreakLine(wrapper.text()).trim();
+      expect(text).toContain('Merge blocked:');
+      expect(text).toContain('all threads must be resolved.');
 
       expect(wrapper.element.innerText).toContain('Jump to first unresolved thread');
       expect(wrapper.element.innerText).not.toContain('Create issue to resolve all threads');
diff --git a/spec/frontend/vue_merge_request_widget/components/states/work_in_progress_spec.js b/spec/frontend/vue_merge_request_widget/components/states/work_in_progress_spec.js
index 72c61b99cf4..e610ceb2122 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/work_in_progress_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/work_in_progress_spec.js
@@ -4,7 +4,6 @@ import getStateQueryResponse from 'test_fixtures/graphql/merge_requests/get_stat
 import { createAlert } from '~/flash';
 import WorkInProgress, {
   MSG_SOMETHING_WENT_WRONG,
-  MSG_MERGE_BLOCKED,
   MSG_MARK_READY,
 } from '~/vue_merge_request_widget/components/states/work_in_progress.vue';
 import draftQuery from '~/vue_merge_request_widget/queries/states/draft.query.graphql';
@@ -110,7 +109,9 @@ describe('~/vue_merge_request_widget/components/states/work_in_progress.vue', ()
     });
 
     it('renders text', () => {
-      expect(wrapper.text()).toContain(MSG_MERGE_BLOCKED);
+      const message = wrapper.text();
+      expect(message).toContain('Merge blocked:');
+      expect(message).toContain('Select Mark as ready to remove it from Draft status.');
     });
 
     it('renders mark ready button', () => {
diff --git a/spec/frontend/vue_shared/components/url_sync_spec.js b/spec/frontend/vue_shared/components/url_sync_spec.js
index 4ade168aa84..30a7439579f 100644
--- a/spec/frontend/vue_shared/components/url_sync_spec.js
+++ b/spec/frontend/vue_shared/components/url_sync_spec.js
@@ -1,7 +1,10 @@
 import { shallowMount } from '@vue/test-utils';
-import { historyPushState } from '~/lib/utils/common_utils';
+import { historyPushState, historyReplaceState } from '~/lib/utils/common_utils';
 import { mergeUrlParams, setUrlParams } from '~/lib/utils/url_utility';
-import UrlSyncComponent, { URL_SET_PARAMS_STRATEGY } from '~/vue_shared/components/url_sync.vue';
+import UrlSyncComponent, {
+  URL_SET_PARAMS_STRATEGY,
+  HISTORY_REPLACE_UPDATE_METHOD,
+} from '~/vue_shared/components/url_sync.vue';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   mergeUrlParams: jest.fn((query, url) => `urlParams: ${JSON.stringify(query)} ${url}`),
@@ -10,6 +13,7 @@ jest.mock('~/lib/utils/url_utility', () => ({
 
 jest.mock('~/lib/utils/common_utils', () => ({
   historyPushState: jest.fn(),
+  historyReplaceState: jest.fn(),
 }));
 
 describe('url sync component', () => {
@@ -18,14 +22,12 @@ describe('url sync component', () => {
 
   const findButton = () => wrapper.find('button');
 
-  const createComponent = ({
-    query = mockQuery,
-    scopedSlots,
-    slots,
-    urlParamsUpdateStrategy,
-  } = {}) => {
+  const createComponent = ({ props = {}, scopedSlots, slots } = {}) => {
     wrapper = shallowMount(UrlSyncComponent, {
-      propsData: { query, ...(urlParamsUpdateStrategy && { urlParamsUpdateStrategy }) },
+      propsData: {
+        query: mockQuery,
+        ...props,
+      },
       scopedSlots,
       slots,
     });
@@ -35,14 +37,19 @@ describe('url sync component', () => {
     wrapper.destroy();
   });
 
-  const expectUrlSyncWithMergeUrlParams = (query, times, mergeUrlParamsReturnValue) => {
+  const expectUrlSyncWithMergeUrlParams = (
+    query,
+    times,
+    mergeUrlParamsReturnValue,
+    historyMethod = historyPushState,
+  ) => {
     expect(mergeUrlParams).toHaveBeenCalledTimes(times);
     expect(mergeUrlParams).toHaveBeenCalledWith(query, window.location.href, {
       spreadArrays: true,
     });
 
-    expect(historyPushState).toHaveBeenCalledTimes(times);
-    expect(historyPushState).toHaveBeenCalledWith(mergeUrlParamsReturnValue);
+    expect(historyMethod).toHaveBeenCalledTimes(times);
+    expect(historyMethod).toHaveBeenCalledWith(mergeUrlParamsReturnValue);
   };
 
   const expectUrlSyncWithSetUrlParams = (query, times, setUrlParamsReturnValue) => {
@@ -76,13 +83,32 @@ describe('url sync component', () => {
   describe('with url-params-update-strategy equals to URL_SET_PARAMS_STRATEGY', () => {
     it('uses setUrlParams to generate URL', () => {
       createComponent({
-        urlParamsUpdateStrategy: URL_SET_PARAMS_STRATEGY,
+        props: {
+          urlParamsUpdateStrategy: URL_SET_PARAMS_STRATEGY,
+        },
       });
 
       expectUrlSyncWithSetUrlParams(mockQuery, 1, setUrlParams.mock.results[0].value);
     });
   });
 
+  describe('with history-update-method equals to HISTORY_REPLACE_UPDATE_METHOD', () => {
+    it('uses historyReplaceState to update the URL', () => {
+      createComponent({
+        props: {
+          historyUpdateMethod: HISTORY_REPLACE_UPDATE_METHOD,
+        },
+      });
+
+      expectUrlSyncWithMergeUrlParams(
+        mockQuery,
+        1,
+        mergeUrlParams.mock.results[0].value,
+        historyReplaceState,
+      );
+    });
+  });
+
   describe('with scoped slot', () => {
     const scopedSlots = {
       default: `
@@ -91,13 +117,13 @@ describe('url sync component', () => {
     };
 
     it('renders the scoped slot', () => {
-      createComponent({ query: null, scopedSlots });
+      createComponent({ props: { query: null }, scopedSlots });
 
       expect(findButton().exists()).toBe(true);
     });
 
     it('syncs the url with the scoped slots function', () => {
-      createComponent({ query: null, scopedSlots });
+      createComponent({ props: { query: null }, scopedSlots });
 
       findButton().trigger('click');
 
@@ -111,7 +137,7 @@ describe('url sync component', () => {
     };
 
     it('renders the default slot', () => {
-      createComponent({ query: null, slots });
+      createComponent({ props: { query: null }, slots });
 
       expect(findButton().exists()).toBe(true);
     });