improve tests and setup test workflow

.github/workflorws/test.yml

@@ -0,0 +1,35 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - master
+
+permissions:
+  contents: read
+
+jobs:
+  test:
+    name: Run Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - name: Install dependencies
+        run: npm ci --ignore-scripts
+      - name: Run Jest
+        run: npm run jest
+      - uses: codecov/codecov-action@v3
+        with:
+          files: ./coverage1.xml,./coverage2.xml
+          flags: unittests
+      # - name: Run Playwright
+      #   run: npm run playwright
+      # - uses: codecov/codecov-action@v3
+      #   with:
+      #     files: ./coverage1.xml,./coverage2.xml
+      #     flags: uitests

local/playwright-tooling/src/expectSuccess.js

@@ -1,9 +1,13 @@
 const { expect } = require('@playwright/test');
 
+const startSelector = '#start';
 const resultSelector = '#testResult';
 
 // default timeout = // 10mins
 module.exports = async (page, timeout = 10 * 60 * 1000) => {
+  await page.waitForLoadState('domcontentloaded', { timeout: 5000 });
+  await page.click(startSelector, { timeout: 1000 });
+
   await page.locator(resultSelector).waitFor({ state: 'visible', timeout });
   await expect(page.locator(resultSelector)).toHaveClass('passed', { timeout: 1000 });
 };

local/playwright-tooling/src/playwrightRollup.js

@@ -25,7 +25,7 @@ const createRollupBundle = async (testDir, useEsbuild, dev) => {
         }
       }
       if (code === 'BUNDLE_END') {
-        bundleOutput = output;
+        bundleOutput = output[0];
         if (result) {
           result.close();
         }
@@ -59,26 +59,32 @@ module.exports = (useEsbuild = true) => {
   let close;
   let output;
 
+  const isDev = (config, timeout) =>
+    config.globalTimeout === 0 && timeout === 0 && config.workers === 1;
+
   // eslint-disable-next-line no-empty-pattern
   test.beforeAll(async ({}, { file, config, timeout }) => {
-    const isDev = config.globalTimeout === 0 && timeout === 0 && config.workers === 1;
+    if (isDev(config, timeout)) {
-
-    if (isDev) {
       test.setTimeout(0);
     }
 
-    ({ close, url, output } = await createRollupBundle(dirname(file), useEsbuild, isDev));
+    ({ close, url, output } = await createRollupBundle(
+      dirname(file),
+      useEsbuild,
+      isDev(config, timeout)
+    ));
   });
 
-  test.beforeEach(async ({ page, browserName }, { config }) => {
+  test.beforeEach(async ({ page, browserName }, { config, timeout }) => {
-    await page.goto(url);
+    await page.goto(url, { waitUntil: 'domcontentloaded' });
-    if (browserName === 'chromium' && config.quiet) {
+    await page.waitForTimeout(500);
+    if (browserName === 'chromium' && !isDev(config, timeout)) {
       await page.coverage.startJSCoverage();
     }
   });
 
-  test.afterEach(async ({ page, browserName }, { file, config }) => {
+  test.afterEach(async ({ page, browserName }, { file, config, timeout }) => {
-    if (browserName === 'chromium' && config.quiet) {
+    if (browserName === 'chromium' && !isDev(config, timeout)) {
       const coverage = await page.coverage.stopJSCoverage();
       await collectCoverage(originalCwd, dirname(output), coverage, file);
     }

packages/overlayscrollbars/tests/playwright/observers/domObserver/index.test.ts

@@ -5,7 +5,6 @@ playwrightRollup();
 
 test.describe('DOMObserver', () => {
   test('test', async ({ page }) => {
-    await page.click('#start');
     await expectSuccess(page);
   });
 });

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

@@ -5,14 +5,12 @@ playwrightRollup();
 
 test.describe('SizeObserver', () => {
   test('with ResizeOserver', async ({ page }) => {
-    await page.click('#start');
     await expectSuccess(page);
   });
 
   test('with ResizeOserver polyfill', async ({ page }) => {
     await page.click('#roPolyfill');
-    await page.waitForTimeout(500);
+
-    await page.click('#start');
     await expectSuccess(page);
   });
 });

packages/overlayscrollbars/tests/playwright/observers/trinsicObserver/index.test.ts

@@ -5,23 +5,19 @@ playwrightRollup();
 
 test.describe('TrinsicObserver', () => {
   test('with IntersectionObserver', async ({ page }) => {
-    await page.click('#start');
     await expectSuccess(page);
   });
 
   test('with ResizeObserver', async ({ page }) => {
     await page.click('#ioPolyfill');
-    await page.waitForTimeout(500);
+
-    await page.click('#start');
     await expectSuccess(page);
   });
 
   test('with ResizeObserver polyfill', async ({ page }) => {
     await page.click('#ioPolyfill');
-    await page.waitForTimeout(500);
     await page.click('#roPolyfill');
-    await page.waitForTimeout(500);
+
-    await page.click('#start');
     await expectSuccess(page);
   });
 });

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

@@ -5,7 +5,6 @@ playwrightRollup();
 
 test.describe('StructureSetup.nesting', () => {
   test('nesting updates', async ({ page }) => {
-    await page.click('#start');
     await expectSuccess(page);
   });
 });

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

@@ -830,7 +830,7 @@ const start = async () => {
   setTestResult(true);
 };
 
-startBtn?.addEventListener('click', start);
+startBtn!.addEventListener('click', start);
 
 if (!useContentElement) {
   envElms.forEach((elm) => {

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

@@ -4,22 +4,20 @@ import { test, Page } from '@playwright/test';
 playwrightRollup();
 
 test.describe('StructureSetup.update', () => {
-  [false].forEach(async (targetIsViewport) => {
+  [false].forEach((targetIsViewport) => {
     const isOrIsNot = targetIsViewport ? 'is' : 'is not';
     const setTargetIsVp = async (page: Page) => {
       if (targetIsViewport) {
         await page.click('#tvp');
-        await page.waitForTimeout(500);
       }
     };
 
     test.describe(`target ${isOrIsNot} viewport`, () => {
-      [false, true].forEach(async (nativeScrollbarStyling) => {
+      [false, true].forEach((nativeScrollbarStyling) => {
         const withText = nativeScrollbarStyling ? 'with' : 'without';
-        const nss = async (page: Page) => {
+        const nsh = async (page: Page) => {
           if (!nativeScrollbarStyling) {
-            await page.click('#nss');
+            await page.click('#nsh');
-            await page.waitForTimeout(500);
           }
         };
 
@@ -28,17 +26,17 @@ test.describe('StructureSetup.update', () => {
 
           test('default', async ({ page }) => {
             await setTargetIsVp(page);
-            await nss(page);
+            await nsh(page);
-            await page.click('#start');
+
             await expectSuccess(page);
           });
 
           test('with fully overlaid scrollbars', async ({ page }) => {
             await setTargetIsVp(page);
-            await nss(page);
+            await nsh(page);
+
             await page.click('#fo');
-            await page.waitForTimeout(500);
+
-            await page.click('#start');
             await expectSuccess(page);
           });
 
@@ -49,21 +47,20 @@ test.describe('StructureSetup.update', () => {
             );
 
             await setTargetIsVp(page);
-            await nss(page);
+            await nsh(page);
+
             await page.click('#po');
-            await page.waitForTimeout(500);
+
-            await page.click('#start');
             await expectSuccess(page);
           });
 
           test('without flexbox glue & css custom props', async ({ page }) => {
             await setTargetIsVp(page);
-            await nss(page);
+            await nsh(page);
+
             await page.click('#fbg');
-            await page.waitForTimeout(500);
             await page.click('#ccp');
-            await page.waitForTimeout(500);
+
-            await page.click('#start');
             await expectSuccess(page);
           });
         });