improve trinsic observer code and tests

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<boolean>) => any
 ): TrinsicObserver => {
-  const trinsicObserver = createDOM(`<div class="${classNameTrinsicObserver}"></div>`)[0] as HTMLElement;
+  const trinsicObserver = createDiv(classNameTrinsicObserver);
   const offListeners: (() => void)[] = [];
   const { _update: updateHeightIntrinsicCache, _current: getCurrentHeightIntrinsicCache } = createCache<
     boolean,

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());
+    });
+  }
+}

packages/overlayscrollbars/tests/browser/observers/sizeObserver/handleResizeObserver.ts

@@ -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());
-  });
-}

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);
 };
 

packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.html

@@ -1,5 +1,5 @@
 <div id="controls">
-  <button id="resizeobserver-polyfill">ResizeObserver polyfill</button><br />
+  <button id="roPolyfill">ResizeObserver polyfill</button><br />
   <label for="height">height</label>
   <select name="height" id="height">
     <option value="heightAuto">auto</option>

packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.test.ts

@@ -13,7 +13,7 @@ describe('SizeObserver', () => {
   });
 
   test('with ResizeOserver polyfill', async () => {
-    await page.click('#resizeobserver-polyfill');
+    await page.click('#roPolyfill');
     await page.waitForTimeout(500);
     await page.click('#start');
     await expect(page).toHaveSelector('#testResult.passed');

packages/overlayscrollbars/tests/browser/observers/trinsicObserver/handleEnvironment.ts

@@ -0,0 +1,26 @@
+{
+  const url = new URL(window.location.toString());
+  const params = url.searchParams;
+  const useIntersectionObserverPolyfill = Boolean(params.get('ioPolyfill'));
+  const useResizeObserverPolyfill = Boolean(params.get('roPolyfill'));
+
+  if (useIntersectionObserverPolyfill) {
+    // @ts-ignore
+    window.IntersectionObserver = undefined;
+  } else {
+    document.getElementById('ioPolyfill')?.addEventListener('click', () => {
+      params.set('ioPolyfill', 'true');
+      window.location.assign(url.toString());
+    });
+  }
+
+  if (useResizeObserverPolyfill) {
+    // @ts-ignore
+    window.ResizeObserver = undefined;
+  } else {
+    document.getElementById('roPolyfill')?.addEventListener('click', () => {
+      params.set('roPolyfill', 'true');
+      window.location.assign(url.toString());
+    });
+  }
+}

packages/overlayscrollbars/tests/browser/observers/trinsicObserver/index.browser.ts

@@ -1,5 +1,6 @@
 import 'styles/overlayscrollbars.scss';
 import './index.scss';
+import './handleEnvironment';
 import should from 'should';
 import { generateClassChangeSelectCallback, iterateSelect, selectOption } from '@/testing-browser/Select';
 import { timeout } from '@/testing-browser/timeout';
@@ -18,6 +19,19 @@ const targetHeightSelect: HTMLSelectElement | null = document.querySelector('#ta
 const displaySelect: HTMLSelectElement | null = document.querySelector('#display');
 const startBtn: HTMLButtonElement | null = document.querySelector('#start');
 const changesSlot: HTMLButtonElement | null = document.querySelector('#changes');
+const preInitChildren = targetElm?.children.length;
+
+const trinsicObserver = createTrinsicObserver(targetElm as HTMLElement, (heightIntrinsicCache) => {
+  if (heightIntrinsicCache._changed) {
+    heightIterations += 1;
+    heightIntrinsic = heightIntrinsicCache._value;
+  }
+  requestAnimationFrame(() => {
+    if (changesSlot) {
+      changesSlot.textContent = heightIterations.toString();
+    }
+  });
+});
 
 const envElmSelectCallback = generateClassChangeSelectCallback(envElm as HTMLElement);
 const targetElmSelectCallback = generateClassChangeSelectCallback(targetElm as HTMLElement);
@@ -53,6 +67,7 @@ const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any)
         if (trinsicHeightChanged) {
           should.equal(heightIterations, currHeightIterations + 1);
         }
+        should.equal(trinsicObserver._getCurrentCacheValues()._heightIntrinsic._value, newHeightIntrinsic);
       });
     },
     afterEach,
@@ -113,21 +128,11 @@ const start = async () => {
   });
   await changeWhileHidden();
 
+  trinsicObserver._destroy();
+  should.equal(targetElm?.children.length, preInitChildren);
   setTestResult(true);
 };
 
 startBtn?.addEventListener('click', start);
 
-createTrinsicObserver(targetElm as HTMLElement, (heightIntrinsicCache) => {
-  if (heightIntrinsicCache._changed) {
-    heightIterations += 1;
-    heightIntrinsic = heightIntrinsicCache._value;
-  }
-  requestAnimationFrame(() => {
-    if (changesSlot) {
-      changesSlot.textContent = heightIterations.toString();
-    }
-  });
-});
-
 export { start };

packages/overlayscrollbars/tests/browser/observers/trinsicObserver/index.html

@@ -1,4 +1,6 @@
 <div id="controls">
+  <button id="ioPolyfill">ResizeObserver polyfill</button>
+  <button id="roPolyfill">IntersectionObserver polyfill</button><br />
   <label for="display">display</label>
   <select name="display" id="display">
     <option value="displayBlock">block</option>

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');
   });