test: Transpile tests to run older browsers in browserstack (#795)

mParticle · Oct 26, 2023 · 69533b6 · 69533b6
1 parent c3a125d
commit 69533b6
Show file tree

Hide file tree

Showing 8 changed files with 38,555 additions and 42 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,4 +10,5 @@ test/stub/test-stub-bundle.js
 **/dist
 test/integrations/requirejs/test-requirejs-bundle.js
 browserstack.err
-local.log
+local.log
+test/cross-browser-testing/CBT-tests-es5.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,12 +22,14 @@
     "repository": "https://github.com/mParticle/mparticle-web-sdk",
     "scripts": {
         "build": "cross-env ENVIRONMENT=prod BUILDALL=true rollup --config rollup.config.js",
+        "build:cbt": "rollup --config test/cross-browser-testing/rollup.CBT.config.js && rm test/cross-browser-testing/CBT-tests.js",
         "build:dev": "cross-env ENVIRONMENT=dev BUILD=iife rollup --config rollup.config.js",
         "build:iife": "cross-env ENVIRONMENT=prod BUILD=iife rollup --config rollup.config.js",
         "build:npm": "cross-env ENVIRONMENT=prod BUILD=cjs rollup --config rollup.config.js",
         "build:esm": "cross-env ENVIRONMENT=prod BUILD=esm rollup --config rollup.config.js",
         "build:stub": "cross-env ENVIRONMENT=prod BUILD=stub rollup --config rollup.config.js",
         "build:snippet": "uglifyjs snippet.js -m -o snippet.min.js",
+        "build:tests": "cross-env ENVIRONMENT=prod TESTTYPE=main rollup --config rollup.test.config.js",
         "build:test-bundle": "cross-env TESTTYPE=main ENVIRONMENT=prod rollup --config rollup.test.config.js",
         "build:browserify:cjs": "browserify test/integrations/cjs/browserify/index.js -o test/integrations/cjs/dist/browserify-output.js",
         "build:rollup:cjs": "rollup --config test/integrations/cjs/rollup/rollup.config.js",
@@ -104,6 +106,7 @@
         "browser-sync": "^2.26.3",
         "browserify": "^17.0.0",
         "chai": "^4.2.0",
+        "core-js": "^3.33.0",
         "cross-env": "^7.0.3",
         "eslint": "^8.36.0",
         "eslint-config-prettier": "9.0.0",
@@ -138,6 +141,6 @@
         "webpack-cli": "^5.0.2"
     },
     "dependencies": {
-        "@babel/runtime": "^7.6.0"
+        "@babel/runtime": "^7.23.2"
     }
 }
diff --git a/test/cross-browser-testing/babel.CBT.config.js b/test/cross-browser-testing/babel.CBT.config.js
@@ -0,0 +1,12 @@
+export default {
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "usage",
+        "corejs": "3.33",
+      },
+    ]
+  ],
+  "plugins": ['@babel/plugin-transform-runtime'],
+}
diff --git a/test/cross-browser-testing/browserstack.karma.config.js b/test/cross-browser-testing/browserstack.karma.config.js
@@ -2,12 +2,8 @@ const { DEBUG } = process.env;
 
 const files = [
   '../lib/geomock.js',
-  '../../node_modules/fetch-mock/dist/es5/client-bundle.js',
   '../../dist/mparticle.js',
-  // TODO: the current test suite includes modern syntax which run successfully
-  // on newer browsers.  We will need to transpile tests to work with older
-  // browsers - go.mparticle.com/work/SQDSDKS-5834
-  '../test-bundle.js',
+  './CBT-tests-es5.js',
 ];
 
 let captureConsole = false;
@@ -28,39 +24,23 @@ if (DEBUG === 'true') {
 }
 
 const customLaunchers = {
-    // These 2 browsers pass because they are capable of running ES6 syntax
-    // Our tests currently have ES6 syntax in them.  They need to be transpiled
-    bs_firefox_mac_100: {
+    // Full list of supported browsers - https://www.browserstack.com/list-of-browsers-and-platforms/live
+    // Fails a few tests related to setTimeout
+    bs_chrome_mac_48: {
       base: 'BrowserStack',
-      browser: 'firefox',
-      browser_version: '100.0',
+      browser: 'chrome',
+      browser_version: '48.0',
       os: 'OS X',
-      os_version: 'Ventura'
+      os_version: 'Mojave'
     },
-    bs_chrome_mac_100: {
+    // Oldest Chrome version to pass all tests
+    bs_chrome_mac_49: {
       base: 'BrowserStack',
       browser: 'chrome',
-      browser_version: '100.0',
+      browser_version: '49.0',
       os: 'OS X',
-      os_version: 'Ventura'
+      os_version: 'Mojave'
     },
-    // These two browsers fail because they cannot run ES6 syntax.  
-    // Our tests have some ES6 syntax in them, so we need to transpile the tests
-    // to get them to run properly.
-    // bs_firefox_mac_21: {
-    //   base: 'BrowserStack',
-    //   browser: 'firefox',
-    //   browser_version: '21.0',
-    //   os: 'OS X',
-    //   os_version: 'Snow Leopard'
-    // },
-    // bs_chrome_mac_38: {
-    //   base: 'BrowserStack',
-    //   browser: 'chrome',
-    //   browser_version: '38.0',
-    //   os: 'OS X',
-    //   os_version: 'Mojave'
-    // },
 }
 
 module.exports = function(config) {

diff --git a/test/cross-browser-testing/rollup.CBT.config.js b/test/cross-browser-testing/rollup.CBT.config.js
@@ -0,0 +1,63 @@
+import resolve from '@rollup/plugin-node-resolve';
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import babelSettings from './babel.CBT.config.js'
+const extensions = ['.js', '.ts'];
+import typescript from '@rollup/plugin-typescript';
+import json from '@rollup/plugin-json';
+
+export default [
+    {
+        input: 'test/src/tests-main.js',
+        output: {
+            file: 'test/cross-browser-testing/CBT-tests.js',
+            format: 'umd',
+            name: 'mParticleTests',
+        },
+        plugins: [
+            resolve({
+                preferBuiltins: true,
+            }),
+            commonjs({
+                include: 'node_modules/**',
+            }),
+            typescript({
+                tsconfig: './tsconfig.json',
+                sourceMap: false,
+            }),
+            babel({
+                presets: ['@babel/preset-env'],
+                plugins: ['@babel/plugin-transform-runtime'],
+                extensions,
+                // ...babelSettings,
+                // exclude: ['node_modules/**/*'],
+                babelHelpers: 'runtime',
+            }),
+            json()
+        ],
+    },
+    {
+        input: 'test/cross-browser-testing/CBT-tests.js',
+        output: {
+            file: 'test/cross-browser-testing/CBT-tests-es5.js',
+            format: 'umd',
+            name: 'mParticleTests',
+        },
+        plugins: [
+            resolve({
+                preferBuiltins: true
+            }),
+            commonjs({
+                include: 'node_modules/**',
+            }),
+            babel({
+                presets: ['@babel/preset-env'],
+                plugins: ['@babel/plugin-transform-runtime'],
+                ...babelSettings,
+                exclude: ['node_modules/**/*'],
+                babelHelpers: 'runtime',
+            }),
+            json()
+        ],
+    },
+]
diff --git a/test/cross-browser-testing/test-cross-browser.js b/test/cross-browser-testing/test-cross-browser.js
diff --git a/test/karma.config.js b/test/karma.config.js
@@ -2,7 +2,6 @@ const { DEBUG } = process.env;
 
 const files = [
     'lib/geomock.js',
-    'config.js',
     '../dist/mparticle.js',
     'test-bundle.js',
 ];