unit tests for size and trinsic observer

packages/overlayscrollbars/src/observers/sizeObserver.ts

@@ -24,7 +24,8 @@ import {
   classNameSizeObserverAppear,
   classNameSizeObserverListener,
 } from 'classnames';
-import { getPlugins, SizeObserverPluginInstance, sizeObserverPluginName } from 'plugins';
+import { getPlugins, sizeObserverPluginName } from 'plugins';
+import type { SizeObserverPluginInstance } from 'plugins';
 
 export interface SizeObserverOptions {
   _direction?: boolean;
@@ -207,7 +208,9 @@ export const createSizeObserver = (
         );
       }
 
-      appendChildren(target, sizeObserver);
+      if (ResizeObserverConstructor || sizeObserverPlugin) {
+        appendChildren(target, sizeObserver);
+      }
     },
   ];
 };

packages/overlayscrollbars/tests/jest-jsdom/observers/sizeObserver.test.ts

@@ -0,0 +1,120 @@
+import { createSizeObserver as originalCreateSizeObserver } from 'observers';
+import { sizeObserverPlugin, sizeObserverPluginName } from 'plugins';
+
+let createSizeObserver = originalCreateSizeObserver;
+
+const mockResizeObserverConstructor = async (value: any) => {
+  jest.resetModules();
+  jest.unmock('plugins');
+  jest.doMock('support/compatibility/apis', () => ({
+    ...jest.requireActual('support/compatibility/apis'),
+    ResizeObserverConstructor: value,
+  }));
+
+  ({ createSizeObserver } = await import('observers'));
+};
+
+describe('createSizeObserver', () => {
+  beforeEach(() => {
+    mockResizeObserverConstructor(undefined);
+    document.body.outerHTML = '';
+  });
+
+  describe('with ResizeObserver', () => {
+    const mockResizeObserver = jest.fn(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+
+    beforeEach(() => {
+      mockResizeObserver.mockClear();
+      mockResizeObserverConstructor(mockResizeObserver);
+      document.body.outerHTML = '';
+    });
+
+    test('size observer', () => {
+      const callback = jest.fn();
+      const [destroy, append] = createSizeObserver(document.body, callback);
+
+      expect(destroy).toEqual(expect.any(Function));
+      expect(append).toEqual(expect.any(Function));
+
+      expect(document.body.innerHTML).toBe('');
+
+      expect(mockResizeObserver).not.toHaveBeenCalled();
+
+      append();
+
+      expect(mockResizeObserver).toHaveBeenCalledTimes(1);
+
+      expect(document.body.innerHTML).not.toBe('');
+
+      destroy();
+
+      expect(document.body.innerHTML).toBe('');
+    });
+  });
+
+  describe('with sizeObserverPlugin', () => {
+    const mockSizeObserverPlugin = jest.fn((...a) => [
+      // @ts-ignore
+      sizeObserverPlugin[sizeObserverPluginName]._(...a),
+    ]);
+
+    beforeEach(() => {
+      mockResizeObserverConstructor(false);
+      jest.doMock('plugins', () => ({
+        ...jest.requireActual('plugins'),
+        getPlugins: () => ({
+          [sizeObserverPluginName]: {
+            _: mockSizeObserverPlugin,
+          },
+        }),
+      }));
+      document.body.outerHTML = '';
+    });
+
+    test('size observer', () => {
+      const callback = jest.fn();
+      const [destroy, append] = createSizeObserver(document.body, callback);
+
+      expect(destroy).toEqual(expect.any(Function));
+      expect(append).toEqual(expect.any(Function));
+
+      expect(document.body.innerHTML).toBe('');
+
+      expect(mockSizeObserverPlugin).not.toHaveBeenCalled();
+
+      append();
+
+      expect(mockSizeObserverPlugin).toHaveBeenCalledTimes(1);
+
+      expect(document.body.innerHTML).not.toBe('');
+
+      destroy();
+
+      expect(document.body.innerHTML).toBe('');
+    });
+  });
+
+  describe('with neither', () => {
+    test('size observer', () => {
+      const callback = jest.fn();
+      const [destroy, append] = createSizeObserver(document.body, callback);
+
+      expect(destroy).toEqual(expect.any(Function));
+      expect(append).toEqual(expect.any(Function));
+
+      expect(document.body.innerHTML).toBe('');
+
+      append();
+
+      expect(document.body.innerHTML).toBe('');
+
+      destroy();
+
+      expect(document.body.innerHTML).toBe('');
+    });
+  });
+});

packages/overlayscrollbars/tests/jest-jsdom/observers/trinsicObserver.test.ts

@@ -0,0 +1,26 @@
+import { createTrinsicObserver } from 'observers';
+
+describe('createTrinsicObserver', () => {
+  beforeEach(() => {
+    document.body.outerHTML = '';
+  });
+
+  test('trinsic observer', () => {
+    const callback = jest.fn();
+    const [destroy, append, update] = createTrinsicObserver(document.body, callback);
+
+    expect(destroy).toEqual(expect.any(Function));
+    expect(append).toEqual(expect.any(Function));
+    expect(update).toEqual(expect.any(Function));
+
+    expect(document.body.innerHTML).toBe('');
+
+    append();
+
+    expect(document.body.innerHTML).not.toBe('');
+
+    destroy();
+
+    expect(document.body.innerHTML).toBe('');
+  });
+});

packages/overlayscrollbars/tests/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts

@@ -21,14 +21,6 @@ jest.mock('environment', () => ({
   getEnvironment: jest.fn(),
 }));
 
-jest.mock('support/compatibility/apis', () => {
-  const originalModule = jest.requireActual('support/compatibility/apis');
-  return {
-    ...originalModule,
-    ResizeObserverConstructor: true,
-  };
-});
-
 addPlugin(scrollbarsHidingPlugin);
 
 interface StructureSetupElementsProxy {