diff --git a/packages/overlayscrollbars/src/observers/sizeObserver.ts b/packages/overlayscrollbars/src/observers/sizeObserver.ts index c18f1f0..07f5936 100644 --- a/packages/overlayscrollbars/src/observers/sizeObserver.ts +++ b/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); + } }, ]; }; diff --git a/packages/overlayscrollbars/tests/jest-jsdom/observers/sizeObserver.test.ts b/packages/overlayscrollbars/tests/jest-jsdom/observers/sizeObserver.test.ts new file mode 100644 index 0000000..b2e3dff --- /dev/null +++ b/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(''); + }); + }); +}); diff --git a/packages/overlayscrollbars/tests/jest-jsdom/observers/trinsicObserver.test.ts b/packages/overlayscrollbars/tests/jest-jsdom/observers/trinsicObserver.test.ts new file mode 100644 index 0000000..4d31f7a --- /dev/null +++ b/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(''); + }); +}); diff --git a/packages/overlayscrollbars/tests/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts b/packages/overlayscrollbars/tests/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts index 6d03d77..19af797 100644 --- a/packages/overlayscrollbars/tests/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts +++ b/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 {