Wire in jsdom to run browser-based code in the test runner

marijnh · marijnh · commit 99b0992fbac6 · 2014-02-07T19:10:34.000+01:00
diff --git a/12_browser.txt b/12_browser.txt
@@ -258,7 +258,7 @@ file containing the JavaScript program) to be fetched from a URL.
 ----
 <!doctype html>
 <h1>Testing alert</h1>
-<script src="http://eloquentjavascript.net/js/hello.js">
+<script src="js/hello.js">
   </script>
 ----
 
diff --git a/13_dom.txt b/13_dom.txt
@@ -215,7 +215,7 @@ and use `document.getElementById` instead.
 ----
 <!doctype html>
 <p>My ostrich Gertrude:</p>
-<p><img id="getrude" src="img/ostrich.png"></p>
+<p><img id="gertrude" src="img/ostrich.png"></p>
 
 <script>
   var ostrich = document.getElementById("gertrude");
@@ -533,6 +533,8 @@ happen, and consequently run really slowly. This page demonstrates the
 difference. It contains two different programs that build up a list of
 “X” characters 2000 pixels wide, and measures the time they take.
 
+// test: nonumbers
+
 [source,text/html]
 ----
 <!doctype html>
diff --git a/bin/run_tests.js b/bin/run_tests.js
@@ -6,15 +6,16 @@ var fs = require("fs");
 var acorn = require("acorn");
 
 var file = process.argv[2];
+var chapNum = Number(file.match(/^\d*/)[0]);
 var input = fs.readFileSync(file, "utf8");
 
-var code = "var alert = function() {}, prompt = function() { return 'x'; }, confirm = function() { return true; }; window = this;\n";
+var baseCode = "var alert = function() {}, prompt = function() { return 'x'; }, confirm = function() { return true; }; window = this; requestAnimationFrame = setTimeout = clearTimeout = setInterval = clearInterval = Math.min;\n";
 
 var include = /\n:load_files: (\[[^\]]+\])/.exec(input);
 if (include) JSON.parse(include[1]).forEach(function(fileName) {
   var text = fs.readFileSync("html/" + fileName);
   if (!/\/\/ test: no/.test(text))
-    code += text;
+    baseCode += text;
 });
 
 function wrapTestOutput(snippet, config) {
@@ -36,12 +37,27 @@ function pos(index) {
   return "line " + (input.slice(0, index).split("\n").length + 1);
 }
 
-var re = /((?:\/\/.*\n|\s)*)(?:[sandbox=.*\n)?\[source,javascript\]\n----\n([\s\S]*?\n)----/g, m;
+var sandboxes = {}, anonId = 0;
+
+var re = /((?:\/\/.*\n|\s)*)(?:\[sandbox="([^"]*)"\]\n)?\[source,([^\]]+)\]\n----\n([\s\S]*?\n)----/g, m;
 while (m = re.exec(input)) {
-  var snippet = m[2], hasConf = m[1].match(/\/\/ test: (.*)/), config = hasConf ? hasConf[1] : "";
+  var snippet = m[4], hasConf = m[1].match(/\/\/ test: (.*)/);
+  var sandbox = m[2] || "null", type = m[3], config = hasConf ? hasConf[1] : "";
   var where = pos(m.index);
+
+  if (type != "javascript" && type != "text/html") continue;
+
+  var boxId = m[2] || (type == "javascript" ? "null" : "box" + (++anonId));
+  var sandbox = sandboxes[boxId];
+  if (!sandbox)
+    sandbox = sandboxes[boxId] = {code: ""};
+
+  if (type == "text/html") {
+    var stripped = stripHTML(snippet);
+    snippet = stripped.javascript;
+  }
   try {
-    acorn.parse(snippet, {strictSemicolons: !/01_value/.test(file)});
+    acorn.parse(snippet, {strictSemicolons: chapNum != 1});
   } catch(e) {
     console.log("parse error at " + where + ": " + e.toString());
   }
@@ -50,8 +66,28 @@ while (m = re.exec(input)) {
   else if (/\/\/ →/.test(snippet)) snippet = wrapTestOutput(snippet, config);
   if (/\bwrap\b/.test(config)) snippet = "(function(){\n" + snippet + "}());\n";
 
-  code += "console.pos = " + JSON.stringify(where) + ";\n";
-  code += snippet;
+  if (type == "text/html") {
+    if (sandbox.html) console.log("Double HTML for box " + boxId);
+    sandbox.html = stripped.html;
+    sandbox.code = stripped.included + "console.pos = " + JSON.stringify(where) + ";\n" + snippet + sandbox.code;
+  } else {
+    sandbox.code += "console.pos = " + JSON.stringify(where) + ";\n";
+    sandbox.code += snippet;
+  }
+}
+
+function stripHTML(code) {
+  var included = "", script = "";
+  code = code.replace(/<script\b[^>]*?(?:\bsrc\s*=\s*('[^']+'|"[^"]+"|[^\s>]+)[^>]*)?>([\s\S]*?)<\/script>/, function(m, src, content) {
+    if (src) {
+      if (/["']/.test(src.charAt(0))) src = src.slice(1, src.length - 1);
+      included += fs.readFileSync("html/" + src, "utf8");
+    } else {
+      script += content;
+    }
+    return "";
+  });
+  return {html: code, included: included, javascript: script};
 }
 
 function represent(val) {
@@ -136,6 +172,7 @@ var accum = "", _console = {
     var clip = string.indexOf("…"), ok = false;
     if (/\btrailing\b/.test(config)) accum = accum.replace(/\s+(\n|$)/g, "$1");
     if (/\btrim\b/.test(config)) { accum = accum.trim(); string = string.trim(); }
+    if (/\bnonumbers\b/.test(config)) { accum = accum.replace(/\d/g, ""); string = string.replace(/\d/g, ""); }
     if (/\bclip\b/.test(config)) ok = compareClipped(string, accum);
     else if (/\bjoin\b/.test(config)) ok = compareJoined(string, accum);
     else if (clip > -1) ok = string.slice(0, clip) == accum.slice(0, clip);
@@ -145,7 +182,6 @@ var accum = "", _console = {
   },
   missingErr: function() {
     console.log("expected error not raised at " + this.pos);
-    console.log(code);
   },
   compareErr: function(err, string) {
     if (err.toString() != string)
@@ -154,8 +190,41 @@ var accum = "", _console = {
   pos: null
 };
 
-try {
-  (new Function("console", code))(_console);
-} catch(e) {
-  console.log("error raised (" + _console.pos + "): " + e.toString());
+function report(err) {
+  var msg = err.toString();
+  if (/^\[object/.test(msg) && err.message) msg = err.message;
+  console.log("error raised (" + _console.pos + "): " + msg, err.stack);
+}
+
+var i = 0, boxes = Object.keys(sandboxes).map(function(k) { return sandboxes[k]; });;
+function nextSandbox() {
+  if (i == boxes.length) return;
+  var sandbox = boxes[i];
+  i++;
+  if (chapNum < 12) { // Language-only
+    try {
+      (new Function("console", baseCode + sandbox.code))(_console);
+      nextSandbox();
+    } catch(e) {
+      report(e);
+    }
+  } else {
+    require("jsdom").env({
+      url: file + "/" + i,
+      html: sandbox.html || "<!doctype html><body></body>",
+      src: [baseCode],
+      done: function(err, window) {
+        if (err) report(err[0]);
+        window.console = _console;
+        window.Element.prototype.innerText = "abc";
+        try {
+          window.run(sandbox.code, file + "/" + i);
+        } catch (e) {
+          report(e);
+        }
+        nextSandbox();
+      }
+    });
+  }
 }
+nextSandbox();
diff --git a/html/js/sandbox.js b/html/js/sandbox.js
@@ -84,7 +84,7 @@
           if (/["']/.test(src.charAt(0))) src = src.slice(1, src.length - 1);
           tag.src = src;
         } else {
-          tag.innerHTML = preprocess(content, sandbox);
+          tag.text = preprocess(content, sandbox);
         }
         scriptTags.push(tag);
         return "";
diff --git a/package.json b/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "acorn": "0.3",
-    "codemirror": "3.18"
+    "codemirror": "3.18",
+    "kkoopa/contextify": "0.1",
+    "jsdom": "0.10"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -84,7 +84,7 @@`
`84`	`84`	`if (/["']/.test(src.charAt(0))) src = src.slice(1, src.length - 1);`
`85`	`85`	`tag.src = src;`
`86`	`86`	`} else {`
`87`		`- tag.innerHTML = preprocess(content, sandbox);`
	`87`	`+ tag.text = preprocess(content, sandbox);`
`88`	`88`	`}`
`89`	`89`	`scriptTags.push(tag);`
`90`	`90`	`return "";`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,8 @@`
`10`	`10`	`},`
`11`	`11`	`"dependencies": {`
`12`	`12`	`"acorn": "0.3",`
`13`		`- "codemirror": "3.18"`
	`13`	`+ "codemirror": "3.18",`
	`14`	`+ "kkoopa/contextify": "0.1",`
	`15`	`+ "jsdom": "0.10"`
`14`	`16`	`}`
`15`	`17`	`}`