refine browser testing

config/jest-puppeteer.env.js

@@ -1,5 +1,5 @@
 const PuppeteerEnvironment = require('jest-environment-puppeteer');
-const pti = require('puppeteer-to-istanbul');
+// const pti = require('puppeteer-to-istanbul');
 const { setupRollupTest, cleanupRollupTest } = require('./jest-puppeteer.rollup.js');
 
 class PuppeteerRollupEnvironment extends PuppeteerEnvironment {
@@ -22,9 +22,9 @@ class PuppeteerRollupEnvironment extends PuppeteerEnvironment {
 
   async teardown() {
     // coverage
-    const { page } = this.global;
+    // const { page } = this.global;
-    const [jsCoverage, cssCoverage] = await Promise.all([page.coverage.stopJSCoverage(), page.coverage.stopCSSCoverage()]);
+    // const [jsCoverage, cssCoverage] = await Promise.all([page.coverage.stopJSCoverage(), page.coverage.stopCSSCoverage()]);
-    pti.write([...jsCoverage, ...cssCoverage], { includeHostname: true, storagePath: './.pptr' });
+    // pti.write([...jsCoverage, ...cssCoverage], { includeHostname: true, storagePath: './.pptr' });
 
     // cleanup
     cleanupRollupTest(this.ctx.testPath, this.cfg.cache);

config/jest-puppeteer.rollup.js

@@ -87,20 +87,6 @@ const genHtmlTemplateFunc = (content) => ({ attributes, files, meta, publicPath,
     ${content || ''}
     ${scripts}
     <div id="testResult"></div>
-    <script>
-      var testResultElm = document.getElementById('testResult');
-      window.setTestResult = function(result) {
-        if (typeof result === 'boolean') {
-          testResultElm.setAttribute('class', result ? 'passed' : 'failed');
-        }
-        else {
-          testResultElm.removeAttribute('class');
-        }
-      };
-      window.testPassed = function() {
-        return testResultElm.getAttribute('class') === 'passed';
-      }
-    </script>
   </body>
 </html>`;
 };

jest-puppeteer.config.base.js

@@ -15,6 +15,6 @@ module.exports = {
   server: {
     command: `cross-env TEST_SERVER_PORT=${port} node ${testServerPath}`,
     port,
-    launchTimeout: 4000,
+    launchTimeout: 10000,
   },
 };

packages/overlayscrollbars/tests/puppeteer/Environment/index.browser.ts

@@ -1,7 +1,7 @@
 import 'overlayscrollbars.scss';
 import { Environment } from 'environment';
 
-window.envInstance = new Environment();
+const envInstance = new Environment();
-document.body.textContent = JSON.stringify(window.envInstance);
+document.body.textContent = JSON.stringify(envInstance);
 
-export { Environment };
+export { envInstance };

packages/overlayscrollbars/tests/puppeteer/Environment/index.test.ts

@@ -7,7 +7,8 @@ describe('Environment', () => {
   });
 
   it('should be titled "Environment"', async () => {
-    const a: Environment = await page.evaluate(() => window.envInstance);
+    // @ts-ignore
+    const a: Environment = await page.evaluate(() => window.Environment.envInstance);
     console.log(a);
     await expect(page.title()).resolves.toMatch('Environment');
   });

packages/overlayscrollbars/tests/puppeteer/SizeObserver/index.browser.ts

@@ -3,6 +3,7 @@ import './index.scss';
 import should from 'should';
 import { waitFor } from '@testing-library/dom';
 import { generateSelectCallback, iterateSelect } from '@/testing-browser/Select';
+import { setTestResult } from '@/testing-browser/TestResult';
 import { hasDimensions, offsetSize, WH } from 'support';
 
 import { createSizeObserver } from 'overlayscrollbars/observers/createSizeObserver';
@@ -48,7 +49,7 @@ const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any)
         // eslint-disable-next-line
         await waitFor(() => should.equal(iterations, currIterations + 1), {
           onTimeout(error): Error {
-            window.setTestResult(false);
+            setTestResult(false);
             return error;
           },
         });
@@ -65,24 +66,12 @@ borderSelect?.addEventListener('change', selectCallback);
 boxSizingSelect?.addEventListener('change', selectCallback);
 displaySelect?.addEventListener('change', selectCallback);
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+selectCallback(heightSelect);
-// @ts-ignore
+selectCallback(widthSelect);
-selectCallback({ target: heightSelect });
+selectCallback(paddingSelect);
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+selectCallback(borderSelect);
-// @ts-ignore
+selectCallback(boxSizingSelect);
-selectCallback({ target: widthSelect });
+selectCallback(displaySelect);
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-selectCallback({ target: paddingSelect });
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-selectCallback({ target: borderSelect });
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-selectCallback({ target: boxSizingSelect });
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-selectCallback({ target: displaySelect });
 
 const iteratePadding = async (afterEach?: () => any) => {
   await iterate(paddingSelect, afterEach);
@@ -104,7 +93,8 @@ const iterateDisplay = async (afterEach?: () => any) => {
 };
 
 const start = async () => {
-  window.setTestResult(null);
+  setTestResult(null);
+
   targetElm?.removeAttribute('style');
   await iterateDisplay();
   await iterateBoxSizing(async () => {
@@ -116,7 +106,8 @@ const start = async () => {
       });
     });
   });
-  window.setTestResult(true);
+
+  setTestResult(true);
 };
 
 startBtn?.addEventListener('click', start);

packages/overlayscrollbars/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "baseUrl": "./src/",
     "paths": {
-      "@/testing-browser/*": ["../../testing-browser/src/*"]
+      "@/testing-browser*": ["../../testing-browser/src/*"]
     }
   }
 }

packages/testing-browser/src/Select.ts

@@ -1,17 +1,24 @@
+function isEvent(obj: any): obj is Event {
+  return obj instanceof Event || !!obj.target;
+}
+
 // eslint-disable-next-line
 const noop = <T>(): T => {
   return {} as T;
 };
+
 const getSelectOptions = (selectElement: HTMLSelectElement) => Array.from(selectElement.options).map((option) => option.value);
 
-export const generateSelectCallback = (targetElm: HTMLElement | null) => (event: Event) => {
+export const generateSelectCallback = (targetElm: HTMLElement | null) => (event: Event | HTMLSelectElement | null) => {
-  const target = event.target as HTMLSelectElement;
+  const target: HTMLSelectElement | null = isEvent(event) ? (event.target as HTMLSelectElement) : event;
-  const selectedOption = target.value;
+  if (target) {
-  const selectOptions = getSelectOptions(target);
+    const selectedOption = target.value;
+    const selectOptions = getSelectOptions(target);
 
-  if (targetElm) {
+    if (targetElm) {
-    targetElm.classList.remove(...selectOptions);
+      targetElm.classList.remove(...selectOptions);
-    targetElm.classList.add(selectedOption);
+      targetElm.classList.add(selectedOption);
+    }
   }
 };
 

packages/testing-browser/src/TestResult.ts

@@ -0,0 +1,17 @@
+const getTestResultElm = () => document.getElementById('testResult');
+
+export const setTestResult = (result: boolean | null) => {
+  const elm = getTestResultElm();
+  if (elm) {
+    if (typeof result === 'boolean') {
+      elm.setAttribute('class', result ? 'passed' : 'failed');
+    } else {
+      elm.removeAttribute('class');
+    }
+  }
+};
+
+export const testPassed = (): boolean => {
+  const elm = getTestResultElm();
+  return elm ? elm.getAttribute('class') === 'passed' : false;
+};

rollup.config.base.js

@@ -254,8 +254,14 @@ const rollupConfig = (config = {}, { project = process.cwd(), overwrite = {}, si
         });
       }
       if (isLast) {
-        build.plugins.unshift({
+        build.plugins.push({
           name: 'deleteCacheDirs',
+          moduleParsed(moduleInfo) {
+            //if (filename.includes('index.browser')) {
+            console.log('moduleInfo', moduleInfo);
+            //console.log('importer', filename);
+            //}
+          },
           writeBundle() {
             const cacheDirs = cache.map((dir) => path.resolve(projectPath, dir));
             const deletedDirs = del.sync(cacheDirs);