tests: refactor inclusion of jquery and sendkeys via script tags

Readability is increased by explicitly checking if jquery/sendkeys was
already loaded before evaluating it in the context of ace_inner and the
enclosing container (pad.html). Note that sendkeys is no longer
evaluated in the context of ace_outer, as this isn't needed

Also removes some IE 8/9 legacy code

src/tests/frontend/helper.js

@@ -4,19 +4,6 @@ const helper = {};
 
 (() => {
   let $iframe;
-  const jsLibraries = {};
-
-  helper.init = async () => {
-    [
-      jsLibraries.jquery,
-      jsLibraries.sendkeys,
-    ] = await Promise.all([
-      $.get('../../static/js/vendors/jquery.js'),
-      $.get('lib/sendkeys.js'),
-    ]);
-    // make sure we don't override existing jquery
-    jsLibraries.jquery = `if (typeof $ === 'undefined') {\n${jsLibraries.jquery}\n}`;
-  };
 
   helper.randomString = (len) => {
     const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
@@ -28,20 +15,29 @@ const helper = {};
     return randomstring;
   };
 
-  const getFrameJQuery = ($iframe) => {
-    /*
-      I tried over 9001 ways to inject javascript into iframes.
-      This is the only way I found that worked in IE 7+8+9, FF and Chrome
-    */
+  const getFrameJQuery = async ($iframe, includeJquery = false, includeSendkeys = false) => {
     const win = $iframe[0].contentWindow;
     const doc = win.document;
 
-    // IE 8+9 Hack to make eval appear
-    // https://stackoverflow.com/q/2720444
-    win.execScript && win.execScript('null');
+    const load = async (url) => {
+      const elem = doc.createElement('script');
+      elem.setAttribute('src', url);
+      const p = new Promise((resolve, reject) => {
+        const handler = (evt) => {
+          elem.removeEventListener('load', handler);
+          elem.removeEventListener('error', handler);
+          if (evt.type === 'error') return reject(new Error(`failed to load ${url}`));
+          resolve();
+        };
+        elem.addEventListener('load', handler);
+        elem.addEventListener('error', handler);
+      });
+      doc.head.appendChild(elem);
+      await p;
+    };
 
-    win.eval(jsLibraries.jquery);
-    win.eval(jsLibraries.sendkeys);
+    if (!win.$ && includeJquery) await load('../../static/js/vendors/jquery.js');
+    if (!win.bililiteRange && includeSendkeys) await load('../tests/frontend/lib/sendkeys.js');
 
     win.$.window = win;
     win.$.document = doc;
@@ -125,7 +121,7 @@ const helper = {};
     // set new iframe
     $('#iframe-container').append($iframe);
     await new Promise((resolve) => $iframe.one('load', resolve));
-    helper.padChrome$ = getFrameJQuery($('#iframe-container iframe'));
+    helper.padChrome$ = await getFrameJQuery($('#iframe-container iframe'), true, true);
     helper.padChrome$.padeditor =
         helper.padChrome$.window.require('ep_etherpad-lite/static/js/pad_editor').padeditor;
     if (opts.clearCookies) {
@@ -141,8 +137,10 @@ const helper = {};
       if (opts._retry++ >= 4) throw new Error('Pad never loaded');
       return await helper.aNewPad(opts);
     }
-    helper.padOuter$ = getFrameJQuery(helper.padChrome$('iframe[name="ace_outer"]'));
-    helper.padInner$ = getFrameJQuery(helper.padOuter$('iframe[name="ace_inner"]'));
+    helper.padOuter$ = await getFrameJQuery(
+        helper.padChrome$('iframe[name="ace_outer"]'), true, false);
+    helper.padInner$ = await getFrameJQuery(
+        helper.padOuter$('iframe[name="ace_inner"]'), true, true);
 
     // disable all animations, this makes tests faster and easier
     helper.padChrome$.fx.off = true;
@@ -184,8 +182,8 @@ const helper = {};
     $('#iframe-container iframe').remove();
     // set new iframe
     $('#iframe-container').append($iframe);
-    $iframe.one('load', () => {
-      helper.admin$ = getFrameJQuery($('#iframe-container iframe'));
+    $iframe.one('load', async () => {
+      helper.admin$ = await getFrameJQuery($('#iframe-container iframe'), true, false);
     });
   };
 

src/tests/frontend/helper/multipleUsers.js

@@ -34,18 +34,11 @@ helper.multipleUsers = {
   },
 
   async _loadJQueryForUser1Frame() {
-    const code = await $.get('/static/js/jquery.js');
-
-    // make sure we don't override existing jquery
-    const jQueryCode = `if(typeof $ === "undefined") {\n${code}\n}`;
-    const sendkeysCode = await $.get('/tests/frontend/lib/sendkeys.js');
-    const codesToLoad = [jQueryCode, sendkeysCode];
-
-    this._user1.padChrome$ = getFrameJQuery(codesToLoad, this._user1.$frame);
+    this._user1.padChrome$ = await getFrameJQuery(this._user1.$frame, true, true);
     this._user1.padOuter$ =
-        getFrameJQuery(codesToLoad, this._user1.padChrome$('iframe[name="ace_outer"]'));
+        await getFrameJQuery(this._user1.padChrome$('iframe[name="ace_outer"]'), true, false);
     this._user1.padInner$ =
-        getFrameJQuery(codesToLoad, this._user1.padOuter$('iframe[name="ace_inner"]'));
+        await getFrameJQuery(this._user1.padOuter$('iframe[name="ace_inner"]'), true, true);
 
     // update helper vars now that they are available
     helper.padChrome$ = this._user1.padChrome$;
@@ -86,14 +79,30 @@ helper.multipleUsers = {
   },
 };
 
-// adapted form helper.js on Etherpad code
-const getFrameJQuery = (codesToLoad, $iframe) => {
+// copied from helper.js
+const getFrameJQuery = async ($iframe, includeJquery = false, includeSendkeys = false) => {
   const win = $iframe[0].contentWindow;
   const doc = win.document;
 
-  for (let i = 0; i < codesToLoad.length; i++) {
-    win.eval(codesToLoad[i]);
-  }
+  const load = async (url) => {
+    const elem = doc.createElement('script');
+    elem.setAttribute('src', url);
+    const p = new Promise((resolve, reject) => {
+      const handler = (evt) => {
+        elem.removeEventListener('load', handler);
+        elem.removeEventListener('error', handler);
+        if (evt.type === 'error') return reject(new Error(`failed to load ${url}`));
+        resolve();
+      };
+      elem.addEventListener('load', handler);
+      elem.addEventListener('error', handler);
+    });
+    doc.head.appendChild(elem);
+    await p;
+  };
+
+  if (!win.$ && includeJquery) await load('../../static/js/vendors/jquery.js');
+  if (!win.bililiteRange && includeSendkeys) await load('../tests/frontend/lib/sendkeys.js');
 
   win.$.window = win;
   win.$.document = doc;

src/tests/frontend/index.html

@@ -16,6 +16,7 @@
 
     <script src="../../static/js/require-kernel.js"></script>
     <script src="../../static/js/vendors/jquery.js"></script>
+    <script src="lib/sendkeys.js"></script>
     <script src="../../static/js/vendors/browser.js"></script>
     <script src="../../static/plugins/js-cookie/src/js.cookie.js"></script>
     <script src="lib/underscore.js"></script>

src/tests/frontend/runner.js

@@ -314,7 +314,6 @@ $(() => (async () => {
   }
   $progressArea.remove();
 
-  await helper.init();
   const grep = getURLParameter('grep');
   if (grep != null) {
     mocha.grep(grep);