improve types for events, configure codecov add fast test for setup update

.github/workflows/test.yml

@@ -23,12 +23,12 @@ jobs:
         run: npm ci --install-links
       - name: Run Jest
         run: npm run jest
-      - uses: codecov/codecov-action@v3
-        with:
-          flags: unit
-          files: "**/jest/coverage*.json"
       - name: Run Playwright
         run: xvfb-run npm run playwright
+      - uses: codecov/codecov-action@v3
+        with:
+          flags: unit
+          files: "**/jest/coverage*.json"
       - uses: codecov/codecov-action@v3
         with:
           flags: ui

README.md

@@ -7,11 +7,10 @@
     <a href="https://www.npmjs.com/package/overlayscrollbars"><img src="https://img.shields.io/npm/dm/overlayscrollbars.svg?style=flat-square" alt="Downloads"></a>
     <a href="https://www.npmjs.com/package/overlayscrollbars"><img src="https://img.shields.io/npm/v/overlayscrollbars.svg?style=flat-square" alt="Version"></a>
     <a href="https://github.com/KingSora/OverlayScrollbars/blob/master/LICENSE"><img src="https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square" alt="License"></a>
+    <a href="https://app.codecov.io/gh/KingSora/OverlayScrollbars"><img src="https://img.shields.io/codecov/c/github/KingSora/OverlayScrollbars?style=flat-square" alt="Code Coverage"></a>
     <a href="https://bundlephobia.com/package/overlayscrollbars"><img src="https://img.shields.io/bundlephobia/minzip/overlayscrollbars?label=max.%20bundle%20size&style=flat-square" alt="Max. Bundle Size"></a>
 </h6>
 
-
-
 > OverlayScrollbars is a javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.
 
 > This is the documentation for version `2.x`. which is currently in beta. You can read the version `1.x` docs [here](https://github.com/KingSora/OverlayScrollbars/tree/v1.x) or on the [website](https://kingsora.github.io/OverlayScrollbars/#!overview).  

local/browser-testing/src/select.ts

@@ -91,7 +91,9 @@ export const iterateSelect = async <T>(
   if (select) {
     const { beforeEach = noop, check = noop, afterEach = noop, filter } = options || {};
     const selectOptions = getSelectOptions(select);
-    const selectOptionsReversed = getSelectOptions(select).reverse();
+    const selectOptionsReversed = getSelectOptions(select)
+      .reverse()
+      .filter((_, i) => i > 0);
     const iterateOptions = [...selectOptions, ...selectOptionsReversed].filter(
       filter || (() => true)
     );

local/playwright-tooling/index.d.ts

@@ -1,4 +1,4 @@
 declare module '@~local/playwright-tooling' {
   export function playwrightRollup(): void;
-  export function expectSuccess(page: any): void;
+  export function expectSuccess(page: any): Promise<void>;
 }

packages/overlayscrollbars/README.md

@@ -7,14 +7,14 @@
     <a href="https://www.npmjs.com/package/overlayscrollbars"><img src="https://img.shields.io/npm/dm/overlayscrollbars.svg?style=flat-square" alt="Downloads"></a>
     <a href="https://www.npmjs.com/package/overlayscrollbars"><img src="https://img.shields.io/npm/v/overlayscrollbars.svg?style=flat-square" alt="Version"></a>
     <a href="https://github.com/KingSora/OverlayScrollbars/blob/master/LICENSE"><img src="https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square" alt="License"></a>
+    <a href="https://app.codecov.io/gh/KingSora/OverlayScrollbars"><img src="https://img.shields.io/codecov/c/github/KingSora/OverlayScrollbars?style=flat-square" alt="Code Coverage"></a>
     <a href="https://bundlephobia.com/package/overlayscrollbars"><img src="https://img.shields.io/bundlephobia/minzip/overlayscrollbars?label=max.%20bundle%20size&style=flat-square" alt="Max. Bundle Size"></a>
 </h6>
 
-
-
 > OverlayScrollbars is a javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.
 
 > This is the documentation for version `2.x`. which is currently in beta. You can read the version `1.x` docs [here](https://github.com/KingSora/OverlayScrollbars/tree/v1.x) or on the [website](https://kingsora.github.io/OverlayScrollbars/#!overview).  
+
 ## Why
 
 I've created this plugin because I hate ugly and space consuming scrollbars. Similar plugins haven't met my requirements in terms of features, quality, simplicity, license or browser support.

packages/overlayscrollbars/package.json

@@ -42,11 +42,11 @@
   "sideEffects": ["*.css", "*.scss", "*.sass"],
   "scripts": {
     "build": "rollup -c",
-    "test": "jest --coverage && playwright test",
+    "test": "jest --coverage && playwright test --grep-invert @special",
     "jest": "jest --coverage --testPathPattern",
     "jest:node": "jest --selectProjects node --testPathPattern",
     "jest:jsdom": "jest --selectProjects jsdom --testPathPattern",
-    "playwright": "playwright test",
+    "playwright": "playwright test --grep-invert @special",
     "playwright:dev": "playwright test --workers 1 --timeout 0 --global-timeout 0",
     "posttest": "playwright-merge-coverage && full-coverage",
     "postjest": "full-coverage",

packages/overlayscrollbars/src/support/eventListeners.ts

@@ -2,18 +2,17 @@ import { isArray } from 'support/utils/types';
 import { keys } from 'support/utils/object';
 import { each, from, isEmptyArray } from 'support/utils/array';
 
-export type EventListener<
+export type EventListener<EventMap extends Record<string, any[]>, N extends keyof EventMap> = (
-  EventMap extends Record<string, any[]>,
+  ...args: EventMap[N]
-  N extends keyof EventMap = keyof EventMap
+) => void;
-> = (...args: EventMap[N]) => void;
 
 export type InitialEventListeners<EventMap extends Record<string, any[]>> = {
-  [K in keyof EventMap]?: EventListener<EventMap> | EventListener<EventMap>[];
+  [K in keyof EventMap]?: EventListener<EventMap, K> | EventListener<EventMap, K>[];
 };
 
-const manageListener = <EventMap extends Record<string, any[]>>(
+const manageListener = <EventMap extends Record<string, any[]>, N extends keyof EventMap>(
-  callback: (listener?: EventListener<EventMap>) => void,
+  callback: (listener?: EventListener<EventMap, N>) => void,
-  listener?: EventListener<EventMap> | EventListener<EventMap>[]
+  listener?: EventListener<EventMap, N> | EventListener<EventMap, N>[]
 ) => {
   each(isArray(listener) ? listener : [listener], callback);
 };
@@ -22,7 +21,7 @@ export const createEventListenerHub = <EventMap extends Record<string, any[]>>(
   initialEventListeners?: InitialEventListeners<EventMap>
 ) => {
   // eslint-disable-next-line @typescript-eslint/no-shadow
-  type EventListener<N extends keyof EventMap = keyof EventMap> = (...args: EventMap[N]) => void;
+  type EventListener<N extends keyof EventMap> = (...args: EventMap[N]) => void;
   type RemoveEvent = {
     <N extends keyof EventMap>(name?: N, listener?: EventListener<N>): void;
     <N extends keyof EventMap>(name?: N, listener?: EventListener<N>[]): void;
@@ -40,7 +39,7 @@ export const createEventListenerHub = <EventMap extends Record<string, any[]>>(
     <N extends keyof EventMap>(name: N, args?: EventMap[N]): void;
   };
 
-  const events = new Map<keyof EventMap, Set<EventListener>>();
+  const events = new Map<keyof EventMap, Set<EventListener<keyof EventMap>>>();
 
   const removeEvent: RemoveEvent = <N extends keyof EventMap>(
     name?: N,
@@ -50,9 +49,9 @@ export const createEventListenerHub = <EventMap extends Record<string, any[]>>(
       const eventSet = events.get(name);
       manageListener((currListener) => {
         if (eventSet) {
-          eventSet[currListener ? 'delete' : 'clear'](currListener!);
+          eventSet[currListener ? 'delete' : 'clear'](currListener! as any);
         }
-      }, listener as any);
+      }, listener);
     } else {
       events.forEach((eventSet) => {
         eventSet.clear();

packages/overlayscrollbars/tests/jest-jsdom/support/eventListeners.test.ts

@@ -1,14 +1,14 @@
 import { createEventListenerHub } from 'support/eventListeners';
 
 type EventMap = {
-  onBoolean: [boolean, string];
+  onBoolean: [a: boolean, b: string];
   onUndefined: [];
 };
 
 describe('eventListeners', () => {
   describe('createEventListenerHub', () => {
     test('initialization', () => {
-      const onBooleanA = jest.fn();
+      const onBooleanA = jest.fn((a: boolean, b: string) => a + b);
       const onBooleanB = jest.fn();
       const onUndefined = jest.fn();
       const [, , triggerEvent] = createEventListenerHub<EventMap>({
@@ -28,7 +28,7 @@ describe('eventListeners', () => {
     });
 
     test('addEvent', () => {
-      const onBooleanA = jest.fn();
+      const onBooleanA = jest.fn((a: boolean, b: string) => a + b);
       const onBooleanB = jest.fn();
       const onUndefinedA = jest.fn();
       const onUndefinedB = jest.fn();

packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/handleEnvironment.ts

@@ -6,6 +6,7 @@ import { addClass } from 'support';
   const params = url.searchParams;
 
   /**
+   * fast: faster but not so accurate run
    * nsh: native scrollbar hiding
    * fbg: flexbox glue
    * ccp: css custom props
@@ -14,7 +15,7 @@ import { addClass } from 'support';
    * vpt: viewport is target
    * pa: padding absolute
    */
-  ['nsh', 'fbg', 'ccp', 'po', 'fo', 'vpt', 'pa'].forEach((param) => {
+  ['fast', 'nsh', 'fbg', 'ccp', 'po', 'fo', 'vpt', 'pa'].forEach((param) => {
     const paramValue = Boolean(params.get(param));
 
     if (paramValue) {

packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts

@@ -27,6 +27,8 @@ import {
   createDOM,
   hasClass,
   createDiv,
+  removeElements,
+  removeClass,
 } from 'support';
 import { Options } from 'options';
 import { DeepPartial } from 'typings';
@@ -77,7 +79,6 @@ interface Metrics {
     height: number;
   };
 }
-
 interface CheckComparisonObj {
   updCount: number;
   metrics: Metrics;
@@ -102,7 +103,8 @@ const msedge = window.navigator.userAgent.toLowerCase().indexOf('edge') > -1;
 
 msie11 && addClass(document.body, 'msie11');
 
-const paddingAbsolute = hasClass(document.body, 'pa');
+const initialPaddingAbsolute = hasClass(document.body, 'pa');
+const isFastTestRun = hasClass(document.body, 'fast');
 const useContentElement = false;
 const fixedDigits = msie11 ? 1 : 3;
 const fixedDigitsOffset = 3;
@@ -122,6 +124,8 @@ const targetOptionsSlot: HTMLElement | null = document.querySelector('#options')
 const targetUpdatesSlot: HTMLElement | null = document.querySelector('#updates');
 const comparisonContentElm: HTMLElement = document.createElement('div');
 const envElms = document.querySelectorAll<HTMLElement>('.env');
+const getComparisonViewport = () =>
+  (comparison?.querySelector(`.${classNameViewport}`) || comparison) as HTMLElement;
 
 const initObj = hasClass(document.body, 'vpt')
   ? {
@@ -146,19 +150,37 @@ const osInstance =
   (window.os = OverlayScrollbars(
     initObj,
     {
-      paddingAbsolute,
+      paddingAbsolute: initialPaddingAbsolute,
     },
     {
-      updated() {
+      updated(instance) {
         updateCount++;
+        const { paddingAbsolute, overflow } = instance.options();
+        const comparisonViewport = getComparisonViewport();
+
+        if (paddingAbsolute) {
+          if (comparisonViewport === comparison) {
+            addClass(document.body, 'pa');
+            const absoluteWrapper = createDiv(classNameViewport);
+            appendChildren(absoluteWrapper, contents(comparison));
+
+            appendChildren(comparison, absoluteWrapper);
+          }
+        } else if (comparisonViewport !== comparison) {
+          removeClass(document.body, 'pa');
+          appendChildren(comparison, contents(comparisonViewport));
+          removeElements(comparisonViewport);
+        }
+
         requestAnimationFrame(() => {
           if (targetUpdatesSlot) {
             targetUpdatesSlot.textContent = `${updateCount}`;
           }
           if (targetOptionsSlot) {
             targetOptionsSlot.textContent = JSON.stringify(
-              assignDeep({}, osInstance.options().overflow, {
+              assignDeep({}, overflow, {
-                paddingAbsolute: osInstance.options().paddingAbsolute,
+                paddingAbsolute,
+                viewportIsTarget: instance.elements().viewport === target,
               }),
               null,
               2
@@ -169,8 +191,6 @@ const osInstance =
     }
   ));
 
-const getComparisonViewport = () =>
-  paddingAbsolute ? (comparison!.firstElementChild as HTMLElement) : comparison;
 const getMetrics = (elm: HTMLElement): Metrics => {
   // const rounding = isFractionalPixelRatio() ? Math.round : (num: number) => num;
   const elmIsTarget = elm === target;
@@ -185,7 +205,6 @@ const getMetrics = (elm: HTMLElement): Metrics => {
       width: Math.max(0, comparisonViewport!.scrollWidth - comparisonViewport!.clientWidth),
       height: Math.max(0, comparisonViewport!.scrollHeight - comparisonViewport!.clientHeight),
     };
-    console.log(elm, amount, comparisonViewport);
     return {
       width: condition(amount.width) ? amount.width : 0,
       height: condition(amount.height) ? amount.height : 0,
@@ -348,8 +367,6 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
       const scrollWidth = targetMetrics.scroll.width - comparisonMetrics.scroll.width;
       const scrollHeight = targetMetrics.scroll.height - comparisonMetrics.scroll.height;
       if (scrollWidth !== 0 || scrollHeight !== 0) {
-        console.log(scrollWidth);
-        console.log(scrollHeight);
         roundingElm!.textContent = `${(parseInt(roundingElm!.textContent || '0', 10) || 0) + 1}`;
       }
     } else {
@@ -550,10 +567,10 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
 const iterate = async (
   select: HTMLSelectElement | null,
   afterEach?: () => any,
-  skippedItems?: string[]
+  skippedItems?: string[] | false | null
 ) => {
   await iterateSelect<CheckComparisonObj>(select, {
-    filter: (item: string) => !skippedItems?.includes(item),
+    filter: skippedItems ? (item: string) => !skippedItems?.includes(item) : undefined,
     beforeEach() {
       const metrics = getMetrics(comparison!);
       return {
@@ -575,10 +592,10 @@ const iterateEnvHeight = async (afterEach?: () => any) => {
   await iterate(envHeightSelect, afterEach);
 };
 */
-const iterateHeight = async (afterEach?: () => any, skippedItems?: string[]) => {
+const iterateHeight = async (afterEach?: () => any, skippedItems?: string[] | false | null) => {
   await iterate(containerHeightSelect, afterEach, skippedItems);
 };
-const iterateWidth = async (afterEach?: () => any, skippedItems?: string[]) => {
+const iterateWidth = async (afterEach?: () => any, skippedItems?: string[] | false | null) => {
   await iterate(containerWidthSelect, afterEach, skippedItems);
 };
 /*
@@ -586,10 +603,10 @@ const iterateFloat = async (afterEach?: () => any) => {
   await iterate(containerFloatSelect, afterEach);
 };
 */
-const iteratePadding = async (afterEach?: () => any, skippedItems?: string[]) => {
+const iteratePadding = async (afterEach?: () => any, skippedItems?: string[] | false | null) => {
   await iterate(containerPaddingSelect, afterEach, skippedItems);
 };
-const iterateBorder = async (afterEach?: () => any, skippedItems?: string[]) => {
+const iterateBorder = async (afterEach?: () => any, skippedItems?: string[] | false | null) => {
   await iterate(containerBorderSelect, afterEach, skippedItems);
 };
 /*
@@ -765,45 +782,34 @@ const overflowTest = async (osOptions?: DeepPartial<Options>) => {
     removeAttr(comparisonEnd, 'style');
   };
 
+  const withSkippedItems = osOptions || isFastTestRun;
+
   if (osOptions) {
     osInstance.options(osOptions);
-
-    await iterateMinMax(async () => {
-      await iterateBoxSizing(async () => {
-        await iterateHeight(async () => {
-          await iterateWidth(async () => {
-            await iterateBorder(async () => {
-              await iteratePadding(async () => {
-                await iterateOverflow();
-              }, ['paddingLarge']);
-            }, ['borderSmall']);
-          }, ['widthHundred']);
-        }, ['heightHundred']);
-      });
-    });
-  } else {
-    await iterateMinMax(async () => {
-      await iterateBoxSizing(async () => {
-        await iterateHeight(async () => {
-          await iterateWidth(async () => {
-            await iterateBorder(async () => {
-              // assume this part isn't critical
-              /*
-            await iterateFloat(async () => {
-              await iterateMargin();
-            });
-            */
-
-              await iteratePadding(async () => {
-                await iterateOverflow();
-              });
-              await iterateDirection();
-            });
-          });
-        });
-      });
-    });
   }
+
+  await iterateMinMax(async () => {
+    await iterateBoxSizing(async () => {
+      await iterateHeight(async () => {
+        await iterateWidth(async () => {
+          await iterateBorder(async () => {
+            // assume this part isn't critical
+            // await iterateFloat(async () => {
+            //   await iterateMargin();
+            // });
+            await iteratePadding(async () => {
+              await iterateOverflow();
+            }, withSkippedItems && ['paddingLarge']);
+
+            // assume this part isn't critical for special options
+            if (!osOptions) {
+              await iterateDirection();
+            }
+          }, withSkippedItems && ['borderSmall']);
+        }, withSkippedItems && ['widthHundred']);
+      }, withSkippedItems && ['heightHundred']);
+    });
+  });
 };
 
 const start = async () => {
@@ -812,17 +818,28 @@ const start = async () => {
   target?.removeAttribute('style');
   try {
     await overflowTest();
+
+    osInstance.options({ paddingAbsolute: !initialPaddingAbsolute });
+
+    await overflowTest();
+
+    osInstance.options({ paddingAbsolute: initialPaddingAbsolute });
+
     await overflowTest({ overflow: { x: 'visible', y: 'visible' } });
-    await overflowTest({ overflow: { x: 'visible-scroll', y: 'visible-hidden' } });
-    await overflowTest({ overflow: { x: 'visible-hidden', y: 'hidden' } });
-    await overflowTest({ overflow: { x: 'visible', y: 'visible-scroll' } });
-    await overflowTest({ overflow: { x: 'scroll', y: 'visible-scroll' } });
     await overflowTest({ overflow: { x: 'hidden', y: 'scroll' } });
-    await overflowTest({ overflow: { x: 'scroll', y: 'hidden' } });
+    await overflowTest({ overflow: { x: 'visible-hidden', y: 'scroll' } });
-    await overflowTest({ overflow: { x: 'visible', y: 'scroll' } });
+    await overflowTest({ overflow: { x: 'visible-scroll', y: 'visible-hidden' } });
-    await overflowTest({ overflow: { x: 'scroll', y: 'visible' } });
+
-    await overflowTest({ overflow: { x: 'visible', y: 'hidden' } });
+    if (!isFastTestRun) {
-    await overflowTest({ overflow: { x: 'hidden', y: 'visible' } });
+      await overflowTest({ overflow: { x: 'hidden', y: 'visible' } });
+      await overflowTest({ overflow: { x: 'visible', y: 'scroll' } });
+      await overflowTest({ overflow: { x: 'visible-hidden', y: 'hidden' } });
+      await overflowTest({ overflow: { x: 'visible', y: 'visible-scroll' } });
+      await overflowTest({ overflow: { x: 'scroll', y: 'visible-scroll' } });
+      await overflowTest({ overflow: { x: 'scroll', y: 'hidden' } });
+      await overflowTest({ overflow: { x: 'scroll', y: 'visible' } });
+      await overflowTest({ overflow: { x: 'visible', y: 'hidden' } });
+    }
   } catch (e) {
     console.log(e);
   }
@@ -842,10 +859,3 @@ if (!useContentElement) {
   appendChildren(comparison, comparisonContentElm);
   appendChildren(comparisonContentElm, elms);
 }
-
-if (paddingAbsolute) {
-  const absoluteWrapper = createDiv(classNameViewport);
-  appendChildren(absoluteWrapper, contents(comparison));
-
-  appendChildren(comparison, absoluteWrapper);
-}

packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.html

@@ -1,4 +1,5 @@
 <div id="controls">
+  <button id="fast">Fast</button>
   <button id="nsh">Without Native Scrollbar Hiding</button>
   <button id="fbg">Without Flexbox Glue</button>
   <button id="ccp">Without CSS Custom Props</button>

packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.test.ts

@@ -3,12 +3,17 @@ import { test, Page } from '@playwright/test';
 
 playwrightRollup();
 
-test.describe('StructureSetup.update', () => {
+const createTests = (fast?: boolean) => {
-  [false].forEach((targetIsViewport) => {
+  [false, true].forEach((targetIsViewport) => {
     const isOrIsNot = targetIsViewport ? 'is' : 'is not';
     const setTargetIsVp = async (page: Page) => {
       if (targetIsViewport) {
-        await page.click('#tvp');
+        await page.click('#vpt');
+      }
+    };
+    const setFast = async (page: Page) => {
+      if (fast || targetIsViewport) {
+        await page.click('#fast');
       }
     };
 
@@ -21,20 +26,20 @@ test.describe('StructureSetup.update', () => {
           }
         };
 
+        test.beforeEach(async ({ page }) => {
+          await setFast(page);
+          await setTargetIsVp(page);
+          await nsh(page);
+        });
+
         test.describe(`${withText} native scrollbar styling`, () => {
-          test.describe.configure({ mode: 'parallel' });
+          // test.describe.configure({ mode: 'parallel' });
 
           test('default', async ({ page }) => {
-            await setTargetIsVp(page);
-            await nsh(page);
-
             await expectSuccess(page);
           });
 
           test('with fully overlaid scrollbars', async ({ page }) => {
-            await setTargetIsVp(page);
-            await nsh(page);
-
             await page.click('#fo');
 
             await expectSuccess(page);
@@ -46,18 +51,12 @@ test.describe('StructureSetup.update', () => {
               "firefox can't simulate partially overlaid scrollbars, boost speed by omitting webkit"
             );
 
-            await setTargetIsVp(page);
-            await nsh(page);
-
             await page.click('#po');
 
             await expectSuccess(page);
           });
 
           test('without flexbox glue & css custom props', async ({ page }) => {
-            await setTargetIsVp(page);
-            await nsh(page);
-
             await page.click('#fbg');
             await page.click('#ccp');
 
@@ -67,4 +66,12 @@ test.describe('StructureSetup.update', () => {
       });
     });
   });
+};
+
+test.describe('StructureSetup.update @special', () => {
+  createTests();
+});
+
+test.describe('StructureSetup.update', () => {
+  createTests(true);
 });