Use standard mock IntersectionObserver in specs

Also updates snapshots which are capturing default
prop.

ee/spec/frontend/epic/components/epic_app_spec.js

@@ -9,17 +9,15 @@ import { initialRequest } from 'jest/issue_show/mock_data';
 import { TEST_HOST } from 'spec/test_constants';
 import axios from '~/lib/utils/axios_utils';
 import { mockEpicMeta, mockEpicData } from '../mock_data';
+import { useMockIntersectionObserver } from 'helpers/mock_dom_observer';
 describe('EpicAppComponent', () => {
+  useMockIntersectionObserver();
+
   let vm;
   let mock;
   beforeEach(() => {
-    window.IntersectionObserver = class {
-      disconnect = jest.fn();
-      observe = jest.fn();
-    };
-
     mock = new MockAdapter(axios);
     mock.onGet(`${TEST_HOST}/realtime_changes`).reply(200, initialRequest);
@@ -34,7 +32,6 @@ describe('EpicAppComponent', () => {
   });
   afterEach(() => {
-    delete window.IntersectionObserver;
     mock.restore();
     vm.$destroy();
   });

ee/spec/frontend/epic/components/epic_body_spec.js

@@ -9,17 +9,15 @@ import { initialRequest } from 'jest/issue_show/mock_data';
 import { TEST_HOST } from 'spec/test_constants';
 import axios from '~/lib/utils/axios_utils';
 import { mockEpicMeta, mockEpicData } from '../mock_data';
+import { useMockIntersectionObserver } from 'helpers/mock_dom_observer';
 describe('EpicBodyComponent', () => {
+  useMockIntersectionObserver();
+
   let vm;
   let mock;
   beforeEach(() => {
-    window.IntersectionObserver = class {
-      disconnect = jest.fn();
-      observe = jest.fn();
-    };
-
     mock = new MockAdapter(axios);
     mock.onGet(`${TEST_HOST}/realtime_changes`).reply(200, initialRequest);
@@ -34,7 +32,6 @@ describe('EpicBodyComponent', () => {
   });
   afterEach(() => {
-    delete window.IntersectionObserver;
     mock.restore();
     vm.$destroy();
   });

spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap

@@ -31,9 +31,7 @@ exports[`Design management list item component with no notes renders item with c
       </span>
     </div>
      
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
+    <gl-intersection-observer-stub>
       <!---->
        
       <img
@@ -99,9 +97,7 @@ exports[`Design management list item component with no notes renders item with c
       </span>
     </div>
      
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
+    <gl-intersection-observer-stub>
       <!---->
        
       <img
@@ -167,9 +163,7 @@ exports[`Design management list item component with no notes renders item with c
       </span>
     </div>
      
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
+    <gl-intersection-observer-stub>
       <!---->
        
       <img
@@ -222,9 +216,7 @@ exports[`Design management list item component with no notes renders item with n
   >
     <!---->
      
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
+    <gl-intersection-observer-stub>
       <!---->
        
       <img
@@ -277,9 +269,7 @@ exports[`Design management list item component with no notes renders loading spi
   >
     <!---->
      
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
+    <gl-intersection-observer-stub>
       <gl-loading-icon-stub
         color="orange"
         label="Loading"
@@ -337,9 +327,7 @@ exports[`Design management list item component with notes renders item with mult
   >
     <!---->
      
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
+    <gl-intersection-observer-stub>
       <!---->
        
       <img
@@ -409,9 +397,7 @@ exports[`Design management list item component with notes renders item with sing
   >
     <!---->
      
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
+    <gl-intersection-observer-stub>
       <!---->
        
       <img

spec/frontend/design_management_new/components/list/__snapshots__/item_spec.js.snap

@@ -31,9 +31,7 @@ exports[`Design management list item component with no notes renders item with c
       </span>
     </div>
      
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
+    <gl-intersection-observer-stub>
       <!---->
        
       <img
@@ -99,9 +97,7 @@ exports[`Design management list item component with no notes renders item with c
       </span>
     </div>
      
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
+    <gl-intersection-observer-stub>
       <!---->
        
       <img
@@ -167,9 +163,7 @@ exports[`Design management list item component with no notes renders item with c
       </span>
     </div>
      
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
+    <gl-intersection-observer-stub>
       <!---->
        
       <img
@@ -222,9 +216,7 @@ exports[`Design management list item component with no notes renders item with n
   >
     <!---->
      
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
+    <gl-intersection-observer-stub>
       <!---->
        
       <img
@@ -277,9 +269,7 @@ exports[`Design management list item component with no notes renders loading spi
   >
     <!---->
      
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
+    <gl-intersection-observer-stub>
       <gl-loading-icon-stub
         color="orange"
         label="Loading"
@@ -337,9 +327,7 @@ exports[`Design management list item component with notes renders item with mult
   >
     <!---->
      
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
+    <gl-intersection-observer-stub>
       <!---->
        
       <img
@@ -409,9 +397,7 @@ exports[`Design management list item component with notes renders item with sing
   >
     <!---->
      
-    <gl-intersection-observer-stub
-      options="[object Object]"
-    >
+    <gl-intersection-observer-stub>
       <!---->
        
       <img

spec/frontend/issue_show/components/app_spec.js

@@ -8,6 +8,7 @@ import '~/behaviors/markdown/render_gfm';
 import IssuableApp from '~/issue_show/components/app.vue';
 import eventHub from '~/issue_show/event_hub';
 import { initialRequest, secondRequest } from '../mock_data';
+import { useMockIntersectionObserver } from 'helpers/mock_dom_observer';
 function formatText(text) {
   return text.trim().replace(/\s\s+/g, ' ');
@@ -22,6 +23,8 @@ const zoomMeetingUrl = 'https://gitlab.zoom.us/j/95919234811';
 const publishedIncidentUrl = 'https://status.com/';
 describe('Issuable output', () => {
+  useMockIntersectionObserver();
+
   let mock;
   let realtimeRequestCount = 0;
   let wrapper;
@@ -45,11 +48,6 @@ describe('Issuable output', () => {
       </div>
     `);
-    window.IntersectionObserver = class {
-      disconnect = jest.fn();
-      observe = jest.fn();
-    };
-
     mock = new MockAdapter(axios);
     mock
       .onGet('/gitlab-org/gitlab-shell/-/issues/9/realtime_changes/realtime_changes')
@@ -84,7 +82,6 @@ describe('Issuable output', () => {
   });
   afterEach(() => {
-    delete window.IntersectionObserver;
     mock.restore();
     realtimeRequestCount = 0;

spec/frontend/vue_shared/directives/autofocusonshow_spec.js

 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
+import { useMockIntersectionObserver } from 'helpers/mock_dom_observer';
 /**
  * We're testing this directive's hooks as pure functions
@@ -6,20 +7,14 @@ import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
  * on underlying DOM methods.
  */
 describe('AutofocusOnShow directive', () => {
+  useMockIntersectionObserver();
+
   describe('with input invisible on component render', () => {
     let el;
     beforeEach(() => {
       setFixtures('<div id="container" style="display: none;"><input id="inputel"/></div>');
       el = document.querySelector('#inputel');
-
-      window.IntersectionObserver = class {
-        observe = jest.fn();
-      };
-    });
-
-    afterEach(() => {
-      delete window.IntersectionObserver;
     });
     it('should bind IntersectionObserver on input element', () => {