improve size observer code and tests

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

@@ -0,0 +1,13 @@
+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,7 +1,7 @@
 import 'styles/overlayscrollbars.scss';
 import './index.scss';
+import './handleResizeObserver';
 import should from 'should';
-// import { generateClassChangeSelectCallback, iterateSelect, setTestResult, waitForOrFailTest, timeout } from '@/testing-browser';
 import { generateClassChangeSelectCallback, iterateSelect } from '@/testing-browser/Select';
 import { setTestResult, waitForOrFailTest } from '@/testing-browser/TestResult';
 import { timeout } from '@/testing-browser/timeout';
@@ -34,6 +34,23 @@ const directionSelect: HTMLSelectElement | null = document.querySelector('#direc
 const startBtn: HTMLButtonElement | null = document.querySelector('#start');
 const resizesSlot: HTMLButtonElement | null = document.querySelector('#resizes');
 
+const sizeObserver = createSizeObserver(
+  targetElm as HTMLElement,
+  (directionIsRTLCache?: any) => {
+    if (directionIsRTLCache) {
+      directionIterations += 1;
+    } else {
+      sizeIterations += 1;
+    }
+    requestAnimationFrame(() => {
+      if (resizesSlot) {
+        resizesSlot.textContent = (directionIterations + sizeIterations).toString();
+      }
+    });
+  },
+  { _direction: true, _appear: true }
+);
+
 const selectCallback = generateClassChangeSelectCallback(targetElm as HTMLElement);
 const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any) => {
   interface IterateSelect {
@@ -84,7 +101,9 @@ const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any)
             should.equal(sizeIterations, currSizeIterations + 1);
           }
           if (dirChanged) {
+            const expectedCacheValue = newDir === 'rtl';
             should.equal(directionIterations, currDirectionIterations + 1);
+            should.equal(sizeObserver._getCurrentCacheValues()._directionIsRTL._value, expectedCacheValue);
           }
         });
       }
@@ -133,7 +152,6 @@ const iterateDisplay = async (afterEach?: () => any) => {
 const iterateDirection = async (afterEach?: () => any) => {
   await iterate(directionSelect, afterEach);
 };
-
 const start = async () => {
   setTestResult(null);
 
@@ -156,26 +174,11 @@ const start = async () => {
     });
   });
 
+  sizeObserver._destroy();
+  should.ok(targetElm?.children.length === 0);
   setTestResult(true);
 };
 
 startBtn?.addEventListener('click', start);
 
-createSizeObserver(
-  targetElm as HTMLElement,
-  (directionIsRTLCache?: any) => {
-    if (directionIsRTLCache) {
-      directionIterations += 1;
-    } else {
-      sizeIterations += 1;
-    }
-    requestAnimationFrame(() => {
-      if (resizesSlot) {
-        resizesSlot.textContent = (directionIterations + sizeIterations).toString();
-      }
-    });
-  },
-  { _direction: true, _appear: true }
-);
-
 export { start };

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

@@ -1,4 +1,5 @@
 <div id="controls">
+  <button id="resizeobserver-polyfill">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

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

packages/overlayscrollbars/tests/jsdom/support/dom/events.test.ts

@@ -1,4 +1,4 @@
-import { off, preventDefault, stopPropagation, OnOptions } from 'support/dom/events';
+import { off, preventDefault, stopPropagation, stopAndPrevent, OnOptions } from 'support/dom/events';
 
 const testElm = document.body;
 const mockEventListener = (passive?: boolean, add?: (...args: any) => any, remove?: (...args: any) => any) => {
@@ -80,7 +80,7 @@ describe('dom events', () => {
     [true, false].forEach((passiveSupport) => {
       describe(`passive event listeners support: ${passiveSupport}`, () => {
         ['testEventName', 'testEventName testEventName2 testEventName3'].forEach((eventNames) => {
-          const title = eventNames.split(' ').length === 1 ? 'signle' : 'multiple';
+          const title = eventNames.split(' ').length === 1 ? 'single' : 'multiple';
           test(title, () => {
             onOffTest(passiveSupport, eventNames);
             onOffTest(passiveSupport, eventNames, { _capture: true });
@@ -113,7 +113,7 @@ describe('dom events', () => {
     };
 
     ['testEventName', 'testEventName testEventName2 testEventName3'].forEach((eventNames) => {
-      const title = eventNames.split(' ').length === 1 ? 'signle' : 'multiple';
+      const title = eventNames.split(' ').length === 1 ? 'single' : 'multiple';
       test(title, () => {
         offTest(eventNames, false);
         offTest(eventNames, true);
@@ -138,4 +138,15 @@ describe('dom events', () => {
     stopPropagation(fakeEvent);
     expect(fakeEvent.stopPropagation).toHaveBeenCalled();
   });
+
+  test('stopAndPrevent', () => {
+    // @ts-ignore
+    const fakeEvent: Event = {
+      stopPropagation: jest.fn(),
+      preventDefault: jest.fn(),
+    };
+    stopAndPrevent(fakeEvent);
+    expect(fakeEvent.stopPropagation).toHaveBeenCalled();
+    expect(fakeEvent.preventDefault).toHaveBeenCalled();
+  });
 });