Add ResizeObserver polyfill globally in Jest tests (#173772)

## Summary

This PR adds the ResizeObserver polyfill in Jest Tests reusing a
polyfill already used in Kibana.
The PR also removes all the mocks for the ResizeObserver used in tests.
The polyfill is no longer needed in code running on a browser as the
[ResizeObserver API is already
available](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#browser_compatibility)
in every Kibana-supported browser.


There is still one last polyfill to remove `@juggle/resize-observer` but
this is used internally by the `use-resize-observer` hook. A following
PR could probably replace that hook with a different hook that doesn't
require that polyfill to cleanup a bit our dependencies

package.json

@@ -131,7 +131,6 @@
     "@hapi/inert": "^6.0.4",
     "@hapi/wreck": "^17.1.0",
     "@hello-pangea/dnd": "16.2.0",
-    "@juggle/resize-observer": "^3.4.0",
     "@kbn/aad-fixtures-plugin": "link:x-pack/test/alerting_api_integration/common/plugins/aad",
     "@kbn/ace": "link:packages/kbn-ace",
     "@kbn/actions-plugin": "link:x-pack/plugins/actions",
@@ -1089,6 +1088,7 @@
     "remark-stringify": "^8.0.3",
     "require-in-the-middle": "^7.2.0",
     "reselect": "^4.1.8",
+    "resize-observer-polyfill": "1.5.1",
     "rison-node": "1.0.2",
     "rxjs": "^7.5.5",
     "safe-squel": "^5.12.5",

packages/kbn-test/src/jest/setup/polyfills.jsdom.js

@@ -28,3 +28,7 @@ if (!global.hasOwnProperty('TextEncoder')) {
 //
 // https://github.com/jsdom/jsdom/issues/2555
 global.Blob = require('blob-polyfill').Blob;
+
+if (!global.hasOwnProperty('ResizeObserver')) {
+  global.ResizeObserver = require('resize-observer-polyfill');
+}

packages/shared-ux/code_editor/impl/code_editor.test.tsx

@@ -68,11 +68,6 @@ describe('<CodeEditor />', () => {
         dispatchEvent: jest.fn(),
       })),
     });
-    window.ResizeObserver = class ResizeObserver {
-      observe() {}
-      unobserve() {}
-      disconnect() {}
-    };
 
     monaco.languages.register({ id: 'loglang' });
     monaco.languages.setMonarchTokensProvider('loglang', simpleLogLang);

packages/shared-ux/code_editor/impl/languages/grok/language.test.ts

@@ -23,12 +23,6 @@ beforeAll(() => {
       dispatchEvent: jest.fn(),
     })),
   });
-  window.ResizeObserver = class ResizeObserver {
-    observe() {}
-    unobserve() {}
-    disconnect() {}
-  };
-
   registerLanguage(Lang);
 
   // trigger tokenizer creation by instantiating a model,

src/plugins/kibana_utils/public/resize_checker/resize_checker.test.ts

@@ -11,8 +11,8 @@ import { EventEmitter } from 'events';
 
 // If you want to know why these mocks are created,
 // please check: https://github.com/elastic/kibana/pull/44750
-jest.mock('@juggle/resize-observer');
-import { ResizeObserver } from '@juggle/resize-observer';
+jest.mock('resize-observer-polyfill');
+import ResizeObserver from 'resize-observer-polyfill';
 
 class MockElement {
   public clientWidth: number;

src/plugins/kibana_utils/public/resize_checker/resize_checker.ts

@@ -8,7 +8,7 @@
 
 import { EventEmitter } from 'events';
 import { isEqual } from 'lodash';
-import { ResizeObserver } from '@juggle/resize-observer';
+import ResizeObserver from 'resize-observer-polyfill';
 
 function getSize(el: HTMLElement): [number, number] {
   return [el.clientWidth, el.clientHeight];

x-pack/plugins/cloud_defend/public/test/__mocks__/resizeobserver.js

@@ -1,21 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-class ResizeObserver {
-  observe() {
-    // do nothing
-  }
-  unobserve() {
-    // do nothing
-  }
-  disconnect() {
-    // do nothing
-  }
-}
-
-window.ResizeObserver = ResizeObserver;
-export default ResizeObserver;

x-pack/plugins/cloud_defend/public/test/test_provider.tsx

@@ -16,7 +16,6 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { fleetMock } from '@kbn/fleet-plugin/public/mocks';
 import type { CloudDefendPluginStartDeps } from '../types';
 import './__mocks__/worker';
-import './__mocks__/resizeobserver';
 import '@kbn/code-editor-mock/jest_helper';
 
 // @ts-ignore-next

x-pack/plugins/security_solution/public/resolver/types.ts

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import type { ResizeObserver } from '@juggle/resize-observer';
 import type React from 'react';
 import type { Store, Middleware, Dispatch, AnyAction } from 'redux';
 import type { BBox } from 'rbush';

x-pack/plugins/security_solution/public/resolver/view/side_effect_context.ts

@@ -7,7 +7,6 @@
 
 import type { Context } from 'react';
 import { createContext } from 'react';
-import { ResizeObserver } from '@juggle/resize-observer';
 import type { SideEffectors } from '../types';
 
 /**

x-pack/plugins/session_view/public/components/session_view/index.test.tsx

@@ -18,7 +18,6 @@ import { SessionView } from '.';
 import userEvent from '@testing-library/user-event';
 import { useDateFormat } from '../../hooks';
 import { GET_TOTAL_IO_BYTES_ROUTE, PROCESS_EVENTS_ROUTE } from '../../../common/constants';
-import { ResizeObserver } from '@juggle/resize-observer';
 
 jest.mock('../../hooks/use_date_format');
 const mockUseDateFormat = useDateFormat as jest.Mock;
@@ -45,8 +44,6 @@ describe('SessionView component', () => {
         dispatchEvent: jest.fn(),
       })),
     });
-
-    global.ResizeObserver = ResizeObserver;
   });
 
   beforeEach(() => {

x-pack/plugins/session_view/public/components/tty_player/index.test.tsx

@@ -15,7 +15,6 @@ import { sessionViewIOEventsMock } from '../../../common/mocks/responses/session
 import { AppContextTestRender, createAppRootMockRenderer } from '../../test';
 import { TTYPlayerDeps, TTYPlayer } from '.';
 import userEvent from '@testing-library/user-event';
-import { ResizeObserver } from '@juggle/resize-observer';
 
 describe('TTYPlayer component', () => {
   beforeAll(() => {
@@ -34,8 +33,6 @@ describe('TTYPlayer component', () => {
         dispatchEvent: jest.fn(),
       })),
     });
-
-    global.ResizeObserver = ResizeObserver;
   });
 
   let render: () => ReturnType<AppContextTestRender['render']>;

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/request_body_field.test.tsx

@@ -10,13 +10,10 @@ import 'jest-canvas-mock';
 import React, { useState, useCallback } from 'react';
 import userEvent from '@testing-library/user-event';
 import { fireEvent, waitFor } from '@testing-library/react';
-import { mockGlobals } from '../../../utils/testing';
 import { render } from '../../../utils/testing/rtl_helpers';
 import { RequestBodyField } from './request_body_field';
 import { CodeEditorMode } from '../types';
 
-mockGlobals();
-
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
   htmlIdGenerator: () => () => `id-${Math.random()}`,
 }));

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/source_field.test.tsx

@@ -7,12 +7,9 @@
 
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { mockGlobals } from '../../../utils/testing';
 import { render } from '../../../utils/testing/rtl_helpers';
 import { SourceField } from './source_field';
 
-mockGlobals();
-
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
   ...jest.requireActual('@elastic/eui/lib/services/accessibility/html_id_generator'),
   htmlIdGenerator: () => () => `id-${Math.random()}`,

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/monitor_add_page.test.tsx

@@ -6,12 +6,9 @@
  */
 
 import React from 'react';
-import { mockGlobals } from '../../utils/testing';
 import { render } from '../../utils/testing/rtl_helpers';
 import { MonitorAddPage } from './monitor_add_page';
 
-mockGlobals();
-
 describe('MonitorAddPage', () => {
   it('renders correctly', async () => {
     const { getByText } = render(<MonitorAddPage />, {

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/monitor_edit_page.test.tsx

@@ -8,7 +8,6 @@
 import React from 'react';
 import { fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { mockGlobals } from '../../utils/testing';
 import { render } from '../../utils/testing/rtl_helpers';
 import { MonitorEditPage } from './monitor_edit_page';
 import { useMonitorName } from '../../hooks/use_monitor_name';
@@ -20,8 +19,6 @@ import {
   PROFILES_MAP,
 } from '../../../../../common/constants/monitor_defaults';
 
-mockGlobals();
-
 jest.mock('@kbn/observability-shared-plugin/public');
 
 jest.mock('../../hooks/use_monitor_name', () => ({

x-pack/plugins/synthetics/public/apps/synthetics/utils/testing/__mocks__/resize_observer.mock.ts

@@ -1,20 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-export class MockResizeObserver implements ResizeObserver {
-  private elements: Set<Element> = new Set();
-
-  observe(target: Element) {
-    this.elements.add(target);
-  }
-  unobserve(target: Element) {
-    this.elements.delete(target);
-  }
-  disconnect() {
-    this.elements.clear();
-  }
-}

x-pack/plugins/synthetics/public/apps/synthetics/utils/testing/index.ts

@@ -5,5 +5,4 @@
  * 2.0.
  */
 
-export * from './mock_globals';
 export * from './rtl_helpers';

x-pack/plugins/synthetics/public/apps/synthetics/utils/testing/mock_globals.ts

@@ -1,12 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { MockResizeObserver } from './__mocks__/resize_observer.mock';
-
-export function mockGlobals() {
-  global.ResizeObserver = MockResizeObserver;
-}

yarn.lock

@@ -3060,7 +3060,7 @@
   resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
   integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==
 
-"@juggle/resize-observer@^3.3.1", "@juggle/resize-observer@^3.4.0":
+"@juggle/resize-observer@^3.3.1":
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
@@ -26968,7 +26968,7 @@ reselect@^4.0.0, reselect@^4.1.8:
   resolved "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz"
   integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==
 
-resize-observer-polyfill@^1.5.1:
+resize-observer-polyfill@1.5.1, resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==