diff --git a/packages/overlayscrollbars/src/observers/trinsicObserver.ts b/packages/overlayscrollbars/src/observers/trinsicObserver.ts index 225b9a8..d57a631 100644 --- a/packages/overlayscrollbars/src/observers/trinsicObserver.ts +++ b/packages/overlayscrollbars/src/observers/trinsicObserver.ts @@ -1,7 +1,7 @@ import { WH, CacheValues, - createDOM, + createDiv, offsetSize, runEach, prependChildren, @@ -26,7 +26,7 @@ export const createTrinsicObserver = ( target: HTMLElement, onTrinsicChangedCallback: (heightIntrinsic: CacheValues) => any ): TrinsicObserver => { - const trinsicObserver = createDOM(`
`)[0] as HTMLElement; + const trinsicObserver = createDiv(classNameTrinsicObserver); const offListeners: (() => void)[] = []; const { _update: updateHeightIntrinsicCache, _current: getCurrentHeightIntrinsicCache } = createCache< boolean, diff --git a/packages/overlayscrollbars/tests/browser/observers/sizeObserver/handleEnvironment.ts b/packages/overlayscrollbars/tests/browser/observers/sizeObserver/handleEnvironment.ts new file mode 100644 index 0000000..bacfe82 --- /dev/null +++ b/packages/overlayscrollbars/tests/browser/observers/sizeObserver/handleEnvironment.ts @@ -0,0 +1,15 @@ +{ + const url = new URL(window.location.toString()); + const params = url.searchParams; + const useResizeObserverPolyfill = Boolean(params.get('roPolyfill')); + + if (useResizeObserverPolyfill) { + // @ts-ignore + window.ResizeObserver = undefined; + } else { + document.getElementById('roPolyfill')?.addEventListener('click', () => { + params.set('roPolyfill', 'true'); + window.location.assign(url.toString()); + }); + } +} diff --git a/packages/overlayscrollbars/tests/browser/observers/sizeObserver/handleResizeObserver.ts b/packages/overlayscrollbars/tests/browser/observers/sizeObserver/handleResizeObserver.ts deleted file mode 100644 index 183faa3..0000000 --- a/packages/overlayscrollbars/tests/browser/observers/sizeObserver/handleResizeObserver.ts +++ /dev/null @@ -1,13 +0,0 @@ -const url = new URL(window.location.toString()); -const params = url.searchParams; -const useResizeObserverPolyfill = Boolean(params.get('resizeobserverpolyfill')); - -if (useResizeObserverPolyfill) { - // @ts-ignore - window.ResizeObserver = undefined; -} else { - document.getElementById('resizeobserver-polyfill')?.addEventListener('click', () => { - params.set('resizeobserverpolyfill', 'true'); - window.location.assign(url.toString()); - }); -} diff --git a/packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.browser.ts b/packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.browser.ts index b7dcb61..98ffee7 100644 --- a/packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.browser.ts +++ b/packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.browser.ts @@ -1,6 +1,6 @@ import 'styles/overlayscrollbars.scss'; import './index.scss'; -import './handleResizeObserver'; +import './handleEnvironment'; import should from 'should'; import { generateClassChangeSelectCallback, iterateSelect } from '@/testing-browser/Select'; import { setTestResult, waitForOrFailTest } from '@/testing-browser/TestResult'; @@ -33,6 +33,7 @@ const displaySelect: HTMLSelectElement | null = document.querySelector('#display const directionSelect: HTMLSelectElement | null = document.querySelector('#direction'); const startBtn: HTMLButtonElement | null = document.querySelector('#start'); const resizesSlot: HTMLButtonElement | null = document.querySelector('#resizes'); +const preInitChildren = targetElm?.children.length; const sizeObserver = createSizeObserver( targetElm as HTMLElement, @@ -175,7 +176,7 @@ const start = async () => { }); sizeObserver._destroy(); - should.ok(targetElm?.children.length === 0); + should.equal(targetElm?.children.length, preInitChildren); setTestResult(true); }; diff --git a/packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.html b/packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.html index b1bca45..ae16fe7 100644 --- a/packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.html +++ b/packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.html @@ -1,5 +1,5 @@
-
+
diff --git a/packages/overlayscrollbars/tests/browser/observers/trinsicObserver/index.test.ts b/packages/overlayscrollbars/tests/browser/observers/trinsicObserver/index.test.ts index b1b1767..b160e0f 100644 --- a/packages/overlayscrollbars/tests/browser/observers/trinsicObserver/index.test.ts +++ b/packages/overlayscrollbars/tests/browser/observers/trinsicObserver/index.test.ts @@ -7,7 +7,23 @@ describe('TrinsicObserver', () => { await page.goto(url); }); - test('test', async () => { + test('with IntersectionObserver', async () => { + await page.click('#start'); + await expect(page).toHaveSelector('#testResult.passed'); + }); + + test('with ResizeObserver', async () => { + await page.click('#ioPolyfill'); + await page.waitForTimeout(500); + await page.click('#start'); + await expect(page).toHaveSelector('#testResult.passed'); + }); + + test('with ResizeObserver polyfill', async () => { + await page.click('#ioPolyfill'); + await page.waitForTimeout(500); + await page.click('#roPolyfill'); + await page.waitForTimeout(500); await page.click('#start'); await expect(page).toHaveSelector('#testResult.passed'); });