Add latest changes from gitlab-org/gitlab@master

11 files changed, 104 insertions, 150 deletions

diff --git a/spec/frontend/__helpers__/mock_dom_observer.js b/spec/frontend/__helpers__/mock_dom_observer.js
index 1b93b81535d..dd26b594ad9 100644
--- a/spec/frontend/__helpers__/mock_dom_observer.js
+++ b/spec/frontend/__helpers__/mock_dom_observer.js
@@ -52,7 +52,7 @@ class MockIntersectionObserver extends MockObserver {
  *   const { trigger: triggerMutate } = useMockMutationObserver();
  *
  *   it('test', () => {
- *     trigger(el, { options: { childList: true }, entry: { } });
+ *     triggerMutate(el, { options: { childList: true }, entry: { } });
  *   });
  * })
  * ```
@@ -60,33 +60,31 @@ class MockIntersectionObserver extends MockObserver {
  * @param {String} key
  */
 const useMockObserver = (key, createMock) => {
-  let mockObserver;
+  let mockObservers = [];
   let origObserver;
 
   beforeEach(() => {
     origObserver = global[key];
     global[key] = jest.fn().mockImplementation((...args) => {
-      mockObserver = createMock(...args);
+      const mockObserver = createMock(...args);
+      mockObservers.push(mockObserver);
       return mockObserver;
     });
   });
 
   afterEach(() => {
-    mockObserver = null;
+    mockObservers.forEach((x) => x.disconnect());
+    mockObservers = [];
     global[key] = origObserver;
   });
 
   const trigger = (...args) => {
-    if (!mockObserver) {
-      return;
-    }
-
-    mockObserver.$_triggerObserve(...args);
+    mockObservers.forEach((observer) => {
+      observer.$_triggerObserve(...args);
+    });
   };
 
-  const observersCount = () => mockObserver.$_observers.length;
-
-  return { trigger, observersCount };
+  return { trigger };
 };
 
 export const useMockIntersectionObserver = () =>
diff --git a/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js b/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
index 1c4dde39585..e6a6e01c41c 100644
--- a/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
+++ b/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
@@ -6,7 +6,6 @@ import VueApollo from 'vue-apollo';
 import createHttpIntegrationMutation from 'ee_else_ce/alerts_settings/graphql/mutations/create_http_integration.mutation.graphql';
 import updateHttpIntegrationMutation from 'ee_else_ce/alerts_settings/graphql/mutations/update_http_integration.mutation.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { useMockIntersectionObserver } from 'helpers/mock_dom_observer';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import IntegrationsList from '~/alerts_settings/components/alerts_integrations_list.vue';
@@ -57,7 +56,6 @@ describe('AlertsSettingsWrapper', () => {
   let wrapper;
   let fakeApollo;
   let destroyIntegrationHandler;
-  useMockIntersectionObserver();
 
   const httpMappingData = {
     payloadExample: '{"test: : "field"}',
diff --git a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
index 03ae77d4977..57023c55878 100644
--- a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
@@ -61,6 +61,7 @@ exports[`Design management design index page renders design index 1`] = `
      
     <participants-stub
       class="gl-mb-4"
+      lazy="true"
       numberoflessparticipants="7"
       participants="[object Object]"
     />
@@ -221,6 +222,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
      
     <participants-stub
       class="gl-mb-4"
+      lazy="true"
       numberoflessparticipants="7"
       participants="[object Object]"
     />
diff --git a/spec/frontend/environment.js b/spec/frontend/environment.js
index 29aa416149c..cf47a1cd7bb 100644
--- a/spec/frontend/environment.js
+++ b/spec/frontend/environment.js
@@ -88,13 +88,32 @@ class CustomEnvironment extends JSDOMEnvironment {
       }),
     });
 
-    this.global.PerformanceObserver = class {
+    /**
+     * JSDom doesn't have an own observer implementation, so this a Noop Observer.
+     * If you are testing functionality, related to observers, have a look at __helpers__/mock_dom_observer.js
+     *
+     * JSDom actually implements a _proper_ MutationObserver, so no need to mock it!
+     */
+    class NoopObserver {
       /* eslint-disable no-useless-constructor, no-unused-vars, no-empty-function, class-methods-use-this */
       constructor(callback) {}
       disconnect() {}
       observe(element, initObject) {}
+      unobserve(element) {}
+      takeRecords() {
+        return [];
+      }
       /* eslint-enable no-useless-constructor, no-unused-vars, no-empty-function, class-methods-use-this */
-    };
+    }
+
+    ['IntersectionObserver', 'PerformanceObserver', 'ResizeObserver'].forEach((observer) => {
+      if (this.global[observer]) {
+        throw new Error(
+          `We overwrite an existing Observer in jsdom (${observer}), are you sure you want to do that?`,
+        );
+      }
+      this.global[observer] = NoopObserver;
+    });
   }
 
   async teardown() {
diff --git a/spec/frontend/issue_show/components/app_spec.js b/spec/frontend/issue_show/components/app_spec.js
index 4c06f2dca1b..babe3a66578 100644
--- a/spec/frontend/issue_show/components/app_spec.js
+++ b/spec/frontend/issue_show/components/app_spec.js
@@ -2,7 +2,6 @@ import { GlIntersectionObserver } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
-import { useMockIntersectionObserver } from 'helpers/mock_dom_observer';
 import '~/behaviors/markdown/render_gfm';
 import IssuableApp from '~/issue_show/components/app.vue';
 import DescriptionComponent from '~/issue_show/components/description.vue';
@@ -30,8 +29,6 @@ jest.mock('~/issue_show/event_hub');
 const REALTIME_REQUEST_STACK = [initialRequest, secondRequest];
 
 describe('Issuable output', () => {
-  useMockIntersectionObserver();
-
   let mock;
   let realtimeRequestCount = 0;
   let wrapper;
diff --git a/spec/frontend/issue_show/issue_spec.js b/spec/frontend/issue_show/issue_spec.js
index d043693b863..76989413edb 100644
--- a/spec/frontend/issue_show/issue_spec.js
+++ b/spec/frontend/issue_show/issue_spec.js
@@ -1,5 +1,4 @@
 import MockAdapter from 'axios-mock-adapter';
-import { useMockIntersectionObserver } from 'helpers/mock_dom_observer';
 import waitForPromises from 'helpers/wait_for_promises';
 import { initIssuableApp } from '~/issue_show/issue';
 import * as parseData from '~/issue_show/utils/parse_data';
@@ -10,8 +9,6 @@ import { appProps } from './mock_data/mock_data';
 const mock = new MockAdapter(axios);
 mock.onGet().reply(200);
 
-useMockIntersectionObserver();
-
 jest.mock('~/lib/utils/poll');
 
 const setupHTML = (initialData) => {
diff --git a/spec/frontend/popovers/components/popovers_spec.js b/spec/frontend/popovers/components/popovers_spec.js
index 0c164d97564..25c509346d1 100644
--- a/spec/frontend/popovers/components/popovers_spec.js
+++ b/spec/frontend/popovers/components/popovers_spec.js
@@ -4,7 +4,7 @@ import { useMockMutationObserver } from 'helpers/mock_dom_observer';
 import Popovers from '~/popovers/components/popovers.vue';
 
 describe('popovers/components/popovers.vue', () => {
-  const { trigger: triggerMutate, observersCount } = useMockMutationObserver();
+  const { trigger: triggerMutate } = useMockMutationObserver();
   let wrapper;
 
   const buildWrapper = (...targets) => {
@@ -120,10 +120,13 @@ describe('popovers/components/popovers.vue', () => {
 
   it('disconnects mutation observer on beforeDestroy', async () => {
     await buildWrapper(createPopoverTarget());
+    const { observer } = wrapper.vm;
+    jest.spyOn(observer, 'disconnect');
 
-    expect(observersCount()).toBe(1);
+    expect(observer.disconnect).toHaveBeenCalledTimes(0);
 
     wrapper.destroy();
-    expect(observersCount()).toBe(0);
+
+    expect(observer.disconnect).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/spec/frontend/tooltips/components/tooltips_spec.js b/spec/frontend/tooltips/components/tooltips_spec.js
index c44918ceaf3..9b703b74a1a 100644
--- a/spec/frontend/tooltips/components/tooltips_spec.js
+++ b/spec/frontend/tooltips/components/tooltips_spec.js
@@ -4,7 +4,7 @@ import { useMockMutationObserver } from 'helpers/mock_dom_observer';
 import Tooltips from '~/tooltips/components/tooltips.vue';
 
 describe('tooltips/components/tooltips.vue', () => {
-  const { trigger: triggerMutate, observersCount } = useMockMutationObserver();
+  const { trigger: triggerMutate } = useMockMutationObserver();
   let wrapper;
 
   const buildWrapper = () => {
@@ -211,11 +211,14 @@ describe('tooltips/components/tooltips.vue', () => {
   it('disconnects mutation observer on beforeDestroy', () => {
     buildWrapper();
     wrapper.vm.addTooltips([createTooltipTarget()]);
+    const { observer } = wrapper.vm;
+    jest.spyOn(observer, 'disconnect');
 
-    expect(observersCount()).toBe(1);
+    expect(observer.disconnect).toHaveBeenCalledTimes(0);
 
     wrapper.destroy();
-    expect(observersCount()).toBe(0);
+
+    expect(observer.disconnect).toHaveBeenCalledTimes(1);
   });
 
   it('exposes hidden event', async () => {
diff --git a/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap b/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
index ac20487c55f..5981d2d7849 100644
--- a/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
+++ b/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
@@ -4,8 +4,10 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have
 <div
   class="mr-widget-body media"
 >
-  <status-icon-stub
-    status="success"
+  <gl-icon-stub
+    class="gl-text-blue-500 gl-mr-3 gl-mt-1"
+    name="status_scheduled"
+    size="24"
   />
    
   <div
@@ -17,55 +19,31 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have
       <span
         class="gl-mr-3"
       >
-        <span
-          class="js-status-text-before-author"
-          data-testid="beforeStatusText"
-        >
-          Set by
-        </span>
-         
-        <mr-widget-author-stub
-          author="[object Object]"
-          showauthorname="true"
+        <gl-sprintf-stub
+          data-testid="statusText"
+          message="Set by %{merge_author} to be merged automatically when the pipeline succeeds"
         />
-         
-        <span
-          class="js-status-text-after-author"
-          data-testid="afterStatusText"
-        >
-          to be merged automatically when the pipeline succeeds
-        </span>
       </span>
        
-      <a
-        class="btn btn-sm btn-default js-cancel-auto-merge"
+      <gl-button-stub
+        buttontextclasses=""
+        category="primary"
+        class="js-cancel-auto-merge"
         data-qa-selector="cancel_auto_merge_button"
         data-testid="cancelAutomaticMergeButton"
-        href="#"
-        role="button"
+        icon=""
+        size="small"
+        variant="default"
       >
-        <!---->
         
-          Cancel
+          Cancel auto-merge
         
-      </a>
+      </gl-button-stub>
     </h4>
      
     <section
       class="mr-info-list"
     >
-      <p>
-        
-          The changes will be merged into
-          
-        <a
-          class="label-branch"
-          href="/foo/bar"
-        >
-          foo
-        </a>
-      </p>
-       
       <p
         class="gl-display-flex"
       >
@@ -75,17 +53,19 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have
           The source branch will not be deleted
         </span>
          
-        <a
-          class="btn btn-sm btn-default js-remove-source-branch"
+        <gl-button-stub
+          buttontextclasses=""
+          category="primary"
+          class="js-remove-source-branch"
           data-testid="removeSourceBranchButton"
-          href="#"
-          role="button"
+          icon=""
+          size="small"
+          variant="default"
         >
-          <!---->
           
             Delete source branch
           
-        </a>
+        </gl-button-stub>
       </p>
     </section>
   </div>
@@ -96,8 +76,10 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c
 <div
   class="mr-widget-body media"
 >
-  <status-icon-stub
-    status="success"
+  <gl-icon-stub
+    class="gl-text-blue-500 gl-mr-3 gl-mt-1"
+    name="status_scheduled"
+    size="24"
   />
    
   <div
@@ -109,55 +91,31 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c
       <span
         class="gl-mr-3"
       >
-        <span
-          class="js-status-text-before-author"
-          data-testid="beforeStatusText"
-        >
-          Set by
-        </span>
-         
-        <mr-widget-author-stub
-          author="[object Object]"
-          showauthorname="true"
+        <gl-sprintf-stub
+          data-testid="statusText"
+          message="Set by %{merge_author} to be merged automatically when the pipeline succeeds"
         />
-         
-        <span
-          class="js-status-text-after-author"
-          data-testid="afterStatusText"
-        >
-          to be merged automatically when the pipeline succeeds
-        </span>
       </span>
        
-      <a
-        class="btn btn-sm btn-default js-cancel-auto-merge"
+      <gl-button-stub
+        buttontextclasses=""
+        category="primary"
+        class="js-cancel-auto-merge"
         data-qa-selector="cancel_auto_merge_button"
         data-testid="cancelAutomaticMergeButton"
-        href="#"
-        role="button"
+        icon=""
+        size="small"
+        variant="default"
       >
-        <!---->
         
-          Cancel
+          Cancel auto-merge
         
-      </a>
+      </gl-button-stub>
     </h4>
      
     <section
       class="mr-info-list"
     >
-      <p>
-        
-          The changes will be merged into
-          
-        <a
-          class="label-branch"
-          href="/foo/bar"
-        >
-          foo
-        </a>
-      </p>
-       
       <p
         class="gl-display-flex"
       >
@@ -167,17 +125,19 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c
           The source branch will not be deleted
         </span>
          
-        <a
-          class="btn btn-sm btn-default js-remove-source-branch"
+        <gl-button-stub
+          buttontextclasses=""
+          category="primary"
+          class="js-remove-source-branch"
           data-testid="removeSourceBranchButton"
-          href="#"
-          role="button"
+          icon=""
+          size="small"
+          variant="default"
         >
-          <!---->
           
             Delete source branch
           
-        </a>
+        </gl-button-stub>
       </p>
     </section>
   </div>
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js
index 0110a76e722..4c1534574f5 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js
@@ -72,6 +72,8 @@ const defaultMrProps = () => ({
   autoMergeStrategy: MWPS_MERGE_STRATEGY,
 });
 
+const getStatusText = () => wrapper.findByTestId('statusText').attributes('message');
+
 describe('MRWidgetAutoMergeEnabled', () => {
   let oldWindowGl;
 
@@ -167,30 +169,6 @@ describe('MRWidgetAutoMergeEnabled', () => {
           });
         });
 
-        describe('statusTextBeforeAuthor', () => {
-          it('should return "Set by" if the MWPS is selected', () => {
-            factory({
-              ...defaultMrProps(),
-              autoMergeStrategy: MWPS_MERGE_STRATEGY,
-            });
-
-            expect(wrapper.findByTestId('beforeStatusText').text()).toBe('Set by');
-          });
-        });
-
-        describe('statusTextAfterAuthor', () => {
-          it('should return "to be merged automatically..." if MWPS is selected', () => {
-            factory({
-              ...defaultMrProps(),
-              autoMergeStrategy: MWPS_MERGE_STRATEGY,
-            });
-
-            expect(wrapper.findByTestId('afterStatusText').text()).toBe(
-              'to be merged automatically when the pipeline succeeds',
-            );
-          });
-        });
-
         describe('cancelButtonText', () => {
           it('should return "Cancel" if MWPS is selected', () => {
             factory({
@@ -198,7 +176,9 @@ describe('MRWidgetAutoMergeEnabled', () => {
               autoMergeStrategy: MWPS_MERGE_STRATEGY,
             });
 
-            expect(wrapper.findByTestId('cancelAutomaticMergeButton').text()).toBe('Cancel');
+            expect(wrapper.findByTestId('cancelAutomaticMergeButton').text()).toBe(
+              'Cancel auto-merge',
+            );
           });
         });
       });
@@ -279,7 +259,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
 
           await nextTick();
 
-          expect(wrapper.find('.js-cancel-auto-merge').attributes('disabled')).toBe('disabled');
+          expect(wrapper.find('.js-cancel-auto-merge').props('loading')).toBe(true);
         });
 
         it('should show source branch will be deleted text when it source branch set to remove', () => {
@@ -313,7 +293,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
 
           await nextTick();
 
-          expect(wrapper.find('.js-remove-source-branch').attributes('disabled')).toBe('disabled');
+          expect(wrapper.find('.js-remove-source-branch').props('loading')).toBe(true);
         });
 
         it('should render the status text as "...to merged automatically" if MWPS is selected', () => {
@@ -322,9 +302,9 @@ describe('MRWidgetAutoMergeEnabled', () => {
             autoMergeStrategy: MWPS_MERGE_STRATEGY,
           });
 
-          const statusText = trimText(wrapper.find('.js-status-text-after-author').text());
-
-          expect(statusText).toBe('to be merged automatically when the pipeline succeeds');
+          expect(getStatusText()).toBe(
+            'Set by %{merge_author} to be merged automatically when the pipeline succeeds',
+          );
         });
 
         it('should render the cancel button as "Cancel" if MWPS is selected', () => {
@@ -335,7 +315,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
 
           const cancelButtonText = trimText(wrapper.find('.js-cancel-auto-merge').text());
 
-          expect(cancelButtonText).toBe('Cancel');
+          expect(cancelButtonText).toBe('Cancel auto-merge');
         });
       });
     });
diff --git a/spec/frontend/vue_shared/directives/autofocusonshow_spec.js b/spec/frontend/vue_shared/directives/autofocusonshow_spec.js
index 1c9e89f99e9..59ce9f086c3 100644
--- a/spec/frontend/vue_shared/directives/autofocusonshow_spec.js
+++ b/spec/frontend/vue_shared/directives/autofocusonshow_spec.js
@@ -1,4 +1,3 @@
-import { useMockIntersectionObserver } from 'helpers/mock_dom_observer';
 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
 
 /**
@@ -7,8 +6,6 @@ import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
  * on underlying DOM methods.
  */
 describe('AutofocusOnShow directive', () => {
-  useMockIntersectionObserver();
-
   describe('with input invisible on component render', () => {
     let el;