prettify_tests: add a simple module loader instead of document.write

It is needed because lang-*.js files are dependent on prettify.js being
loaded first, but scripts dynamically inserted using document.write are
executed asynchronously in no guaranteed order..

This was causing the tests to fail when run under zombie/jsdom (using
test_in_node), while running in a live browser didn't always manifest
the problem.

Author: amroamroamro

tests/prettify_test.html

@@ -7,10 +7,19 @@
 <link rel="stylesheet" type="text/css" href="test_styles.css">
 <script type="text/javascript">
 (function () {
+  // keep track of when window.onload fires, this is to make sure that we dont
+  // miss it as it might occur before or after dynamic scripts are loaded
+  var isReady = false;
+  window.onload = function () { isReady = true; };
+
+  // run tests when page is fully loaded
+  function onReady() {
+    runTests(goldens);
+  }
+
   // JS & CSS prettify files to load
   var base = /[&?]loader\b/.test(location.search) ? '../loader/' : '../src/';
   var sources = [
-    'prettify.js',
     'lang-css.js',
     'lang-erlang.js',
     'lang-go.js',
@@ -30,25 +39,28 @@
   var styles = [
     'prettify.css'
   ];
-  for (var i = 0; i < sources.length; ++i) {
-    document.write('<script src="' + base + sources[i] + '"><\/script>');
-  }
-  for (var i = 0; i < styles.length; ++i) {
-    document.write('<link rel="stylesheet" href="' + base + styles[i] + '">');
+
+  // load skin(s)
+  while (styles.length) {
+    injectCSS(base + styles.shift());
   }
-})();
 
-window.onload = (function() {
-  var attempt = function() {
-    var prettyPrint = window['prettyPrint'];
-    var goldens = window['goldens'];
-    if(prettyPrint && goldens) {
-      runTests(goldens);
-    } else {
-      setTimeout(attempt, 20);
+  // first load prettify.js
+  injectJS(base + 'prettify.js', function () {
+    // then load all lang-*.js concurrently
+    while (sources.length) {
+      injectJS(base + sources.shift(),
+        (sources.length) ? undefined : function () {
+          // then after last one is loaded, run tests when page is ready
+          // (piggyback on window.onload if it hasn't already fired)
+          if (isReady) {
+            onReady();
+          } else {
+            window.onload = onReady;
+          }
+        });
     }
-  };
-  return attempt;
+  });
 })();
 </script>
 </head>

tests/prettify_test_2.html

@@ -7,10 +7,19 @@
 <link rel="stylesheet" type="text/css" href="test_styles.css">
 <script type="text/javascript">
 (function () {
+  // keep track of when window.onload fires, this is to make sure that we dont
+  // miss it as it might occur before or after dynamic scripts are loaded
+  var isReady = false;
+  window.onload = function () { isReady = true; };
+
+  // run tests when page is fully loaded
+  function onReady() {
+    runTests(goldens);
+  }
+
   // JS & CSS prettify files to load
   var base = /[&?]loader\b/.test(location.search) ? '../loader/' : '../src/';
   var sources = [
-    'prettify.js',
     'lang-basic.js',
     'lang-clj.js',
     'lang-css.js',
@@ -29,25 +38,28 @@
   var styles = [
     'prettify.css'
   ];
-  for (var i = 0; i < sources.length; ++i) {
-    document.write('<script src="' + base + sources[i] + '"><\/script>');
-  }
-  for (var i = 0; i < styles.length; ++i) {
-    document.write('<link rel="stylesheet" href="' + base + styles[i] + '">');
+
+  // load skin(s)
+  while (styles.length) {
+    injectCSS(base + styles.shift());
   }
-})();
 
-window.onload = (function() {
-  var attempt = function() {
-    var prettyPrint = window['prettyPrint'];
-    var goldens = window['goldens'];
-    if(prettyPrint && goldens) {
-      runTests(goldens);
-    } else {
-      setTimeout(attempt, 20);
+  // first load prettify.js
+  injectJS(base + 'prettify.js', function () {
+    // then load all lang-*.js concurrently
+    while (sources.length) {
+      injectJS(base + sources.shift(),
+        (sources.length) ? undefined : function () {
+          // then after last one is loaded, run tests when page is ready
+          // (piggyback on window.onload if it hasn't already fired)
+          if (isReady) {
+            onReady();
+          } else {
+            window.onload = onReady;
+          }
+        });
     }
-  };
-  return attempt;
+  });
 })();
 </script>
 </head>

tests/test_base.js

@@ -15,6 +15,41 @@
  * limitations under the License.
  */
 
+/**
+ * Dynamically load script
+ *
+ * @param {string} url JavaScript file
+ * @param {Function=} opt_func onload callback
+ */
+function injectJS(url, opt_func) {
+  var el = document.createElement('script');
+  if (typeof opt_func === 'function') {
+    el.onload = el.onerror = el.onreadystatechange = function () {
+      if (el && (!el.readyState || /loaded|complete/.test(el.readyState))) {
+        el.onerror = el.onload = el.onreadystatechange = null;
+        el = null;
+        opt_func();
+      }
+    };
+  }
+  el.type = 'text/javascript';
+  el.src = url;
+  document.getElementsByTagName('head')[0].appendChild(el);
+}
+
+/**
+ * Dynamically load stylesheet
+ *
+ * @param {string} url CSS file
+ */
+function injectCSS(url) {
+  var el = document.createElement('link');
+  el.rel = 'stylesheet';
+  el.type = 'text/css';
+  el.href = url;
+  document.getElementsByTagName('head')[0].appendChild(el);
+}
+
 /**
  * Perform syntax highlighting and execute tests to verify results.
  *