feat: fix abtestui overlay

.github/workflows/release.yml

@@ -11,7 +11,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
-      - run: npm ci
+      - run: npm ci --legacy-peer-deps
       - run: npm run lint
       - run: npm run test
       - run: npm run build

.nvmrc

@@ -1 +1 @@
-v16.18.0
+v16

package.json

@@ -35,25 +35,26 @@
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
     "@types/jest": "^24.0.18",
-    "@types/node": "^12.7.8",
+    "@types/node": "^20.12.12",
     "ajv": "^6.10.2",
     "copyfiles": "^2.1.1",
     "css-loader": "^3.2.0",
     "css-to-string-loader": "0.1.3",
     "file-loader": "^4.2.0",
-    "html-webpack-plugin": "3.2.0",
+    "html-webpack-plugin": "^5.6.0",
     "husky": "^3.0.5",
-    "jest": "^24.9.0",
+    "jest": "^29.1.2",
+    "jest-environment-jsdom": "^29.7.0",
     "rimraf": "^3.0.0",
     "semantic-release": "^19.0.5",
     "terser-webpack-plugin": "^2.1.0",
-    "ts-jest": "^24.1.0",
-    "ts-loader": "^6.1.2",
+    "ts-jest": "^29.1.2",
+    "ts-loader": "^9.5.1",
     "tslint": "^5.20.0",
-    "typescript": "^3.6.3",
-    "webpack": "^4.41.0",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.8.1"
+    "typescript": "^5.4.5",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   },
   "files": [
     "dist",

src/index.ts

@@ -13,7 +13,8 @@ import {
 } from './main';
 import { SplitTest } from './splitTest';
 import { uiFactory } from './ui';
-import { CookiePersister, UserSessionPersister } from './userSessionPersister';
+import { CookiePersister } from './userSessionPersister';
+import { UserSessionPersister } from './userSessionPersister';
 
 const ui = uiFactory(
     testsObservable,

src/main.ts

@@ -8,6 +8,7 @@ import _getUserAgentInfo from './userAgentInfo';
 import userSession, { UserSession } from './userSession';
 
 const userAgentInfo = _getUserAgentInfo();
+let configLoaded = false;
 export const tests: SplitTest[] = [];
 export const testsObservable: BehavioralSubject<SplitTest[]> = new BehavioralSubject(tests);
 
@@ -33,8 +34,12 @@ export function config(userConfig: Partial<Config> = {}) {
     if (userConfig.sessionPersister) {
         const session = _config.sessionPersister.loadUserSession() || '';
         _config.sessionPersister = userConfig.sessionPersister;
-        _config.sessionPersister.saveUserSession(session, _config.userSessionDaysToLive);
+        _config.sessionPersister.saveUserSession(
+            session,
+            _config.userSessionDaysToLive,
+        );
     }
+    configLoaded = true;
 }
 
 /**
@@ -123,7 +128,20 @@ export function reset(): void {
     _config.onVariationChange();
 }
 
+const waitUntil = (condition: () => any, checkInterval = 100) => {
+    return new Promise<void>((resolve) => {
+        const interval = setInterval(() => {
+            if (!condition()) {
+                return;
+            }
+            clearInterval(interval);
+            resolve();
+        }, checkInterval);
+    });
+};
+
 export async function shouldShowUI() {
+    await waitUntil(() => configLoaded);
     const promises = [
         _config.globalCondition(userAgentInfo),
         _config.uiCondition(userAgentInfo),

src/styles/ui.css

@@ -11,6 +11,8 @@
   transition: all .5s ease-out;
   opacity: 1;
   border-radius: 3px;
+  overflow: auto;
+  font-size: 12px;
 }
 
 .skift li.selected {
@@ -36,10 +38,6 @@
   opacity: 0;
 }
 
-.skift .tests {
-  overflow-y: auto;
-}
-
 .skift .variations {
   background: #f4f7f9;
   box-shadow: inset 0 0 1px 1px #dfe2e5;
@@ -95,11 +93,7 @@
 }
 
 .skift .icon {
-  height: 16px;
-  width: 16px;
   display: inline-block;
-  vertical-align: middle;
-  margin: 0 4px;
   cursor: pointer;
   color: #0c59f2;
   border: none;

src/ui.dev.ts

@@ -27,13 +27,12 @@ export const uiFactory = (
     }
 
     function renderLink(splitTest: SplitTest, variation: InternalVariation) {
-        return renderButton(require('./images/link.svg'), () => {
-            const input = document.createElement('input');
-            input.value = splitTest.getVariationUrl(variation.name);
-            document.body.appendChild(input);
-            input.select();
+        return renderButton('currently active', () => {
+            const button = document.createElement('button');
+            button.value = splitTest.getVariationUrl(variation.name);
+            document.body.appendChild(button);
             document.execCommand('copy');
-            document.body.removeChild(input);
+            document.body.removeChild(button);
         });
     }
 
@@ -57,14 +56,14 @@ export const uiFactory = (
     ) {
         const item = document.createElement('li');
         item.textContent = variation.name;
-        const open = renderButton(require('./images/open.svg'), () => {
+        const open = renderButton('change to this variant', () => {
             setCurrentTestVariation(splitTest.name, variation.name);
         });
 
-        const link = renderLink(splitTest, variation);
+        // const link = renderLink(splitTest, variation);
 
         item.appendChild(open);
-        item.appendChild(link);
+        // item.appendChild(link);
 
         return item;
     }
@@ -89,8 +88,8 @@ export const uiFactory = (
                     .map(
                         (key) => `
                     <div>
-                        <span class="data-label">${key}</span>
-                        <span class="data-value">${data[key]}</span>
+                        <span class='data-label'>${key}</span>
+                        <span class='data-value'>${data[key]}</span>
                     </div>
                 `,
                     )
@@ -109,32 +108,40 @@ export const uiFactory = (
                 if (currentVariation.name === variation.name) {
                     return list.appendChild(
                         renderSelectedVaraition(splitTest, variation),
-                    );
+                    ).className = 'ab-test-variants';
                 } else {
                     return list.appendChild(
                         renderUnselectedVariation(splitTest, variation),
-                    );
+                    ).className = 'ab-test-variants';
                 }
             });
 
             variations.appendChild(legend);
             variations.appendChild(list);
 
             return [test, variations];
-        } else {
-            const canRun = await splitTest.shouldRun(getUserAgentInfo());
-            const test = document.createElement('div');
-            test.className = 'test';
-            test.innerHTML = `
-                <div>Test <span class="data-value">${splitTest.name}</span> is not initialized</div>
-                <div>
-                    <span class="data-label">Can run</span>
-                    <span class="data-value">${canRun}</span>
-                </div>
-            `;
-
-            return [test];
         }
+        /* Unsure what this does, when uncommented,
+            renders a list of the same test multiple times,
+            saying 'not initialised'
+             - perhaps the tests get mounted multiple times? */
+
+        // else {
+        //     const canRun = await splitTest.shouldRun(getUserAgentInfo());
+        //     const test = document.createElement('div');
+        //     test.className = 'test';
+        //     test.innerHTML = `
+        //         <div>Test <span class='data-value'>${splitTest.name}</span> is not initialized</div>
+        //         <div>
+        //             <span class='data-label'>Can run</span>
+        //             <span class='data-value'>${canRun}</span>
+        //         </div>
+        //     `;
+
+        //     console.log(test)
+
+        //     return [test];
+        // }
     }
 
     function showSplitTestUi() {
@@ -166,12 +173,16 @@ export const uiFactory = (
                 .reduce((promise, futureElement) => {
                     return promise.then((elements) => {
                         return futureElement.then((element) => {
-                            elements.push(...element);
+                            if (element && elements) {
+                                elements.push(...element);
+                            }
                             return elements;
                         });
                     });
                 }, Promise.resolve([]));
+            if (test) {
             test.forEach((x) => testList.appendChild(x));
+            }
         });
 
         const button = document.createElement('button');

src/userAgentInfo.ts

@@ -1,12 +1,15 @@
 function getNameAndVersion() {
     const ua = navigator.userAgent;
-    let tem: RegExpMatchArray | null;
-    let match: RegExpMatchArray = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+    let tem: RegExpMatchArray | [] | null;
+    let match: RegExpMatchArray | [] =
+        ua.match(
+            /(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i,
+        ) || [];
     if (/trident/i.test(match[1])) {
         tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
         return {
             name: 'IE',
-            version: (tem[1] || ''),
+            version: tem[1] || '',
         };
     }
     if (match[1] === 'Chrome') {
@@ -18,7 +21,9 @@ function getNameAndVersion() {
             };
         }
     }
-    match = match[2] ? [match[1], match[2]] : [navigator.appName, navigator.appVersion, '-?'];
+    match = match[2]
+        ? [match[1], match[2]]
+        : [navigator.appName, navigator.appVersion, '-?'];
     tem = ua.match(/version\/(\d+)/i);
     if (tem !== null) {
         match.splice(1, 1, tem[1]);
@@ -33,7 +38,14 @@ function isMobile() {
     const ua = navigator.userAgent || navigator.vendor;
     // Disable the rule for now and consider using RegExp constructor with a string.
     // tslint:disable-next-line:max-line-length
-    return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(ua) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(ua.substr(0, 4));
+    return (
+        /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
+            ua,
+        ) ||
+        /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
+            ua.substr(0, 4),
+        )
+    );
 }
 
 export interface UserAgentInfo {