added toc.html test, pulled out some code to share between prince/js-…

…test.html and toc.html
stenington · Dec 2, 2011 · e88609f · e88609f
1 parent 305395c
commit e88609f
Show file tree

Hide file tree

Showing 10 changed files with 218 additions and 1,926 deletions.
diff --git a/test/index.html b/test/index.html
diff --git a/test/jquery.min.js b/test/jquery.min.js
diff --git a/test/prince/style.css → test/lib/colorTests.css b/test/prince/style.css → test/lib/colorTests.css
@@ -1,18 +1,24 @@
 /* test coloring */
-.pass .actual {
+.pass .actual,
+#overall.pass {
   background-color: #C6E746;
 }
 
-.fail .actual {
+.fail .actual,
+#overall.fail {
   background-color: #FFCACA;
 }
 
-/* overall styles */
+/* general styling */
 body > section {
   margin-bottom: 50px;
   margin-left: 10px;
 }
 
+#overall {
+  padding: 3px;
+}
+
 .test {
   margin: 15px;
   padding-left: 15px;

diff --git a/test/lib/colorTests.js b/test/lib/colorTests.js
@@ -0,0 +1,86 @@
+/*
+  For each .test element, compare DOM trees in 
+  .actual and .expected for "visual" equality (html elements and text content).
+  Publish results to #overall.
+
+  Note: Keep this code prince-safe!
+*/
+(function(){
+  function normalize(value){
+    if( value ){
+      value.replace(/\s+/, '');
+    } 
+    return value;
+  };
+
+  function normalizeChildren(children){
+    var normalized = [];
+    for(var i = 0; i < children.length; i++) {
+      var node = children[i];
+      if( !node ){
+        continue;
+      }
+      if( node.nodeType == 3 && node.nodeValue.match(/^\s*$/) ){
+        continue;
+      }
+      normalized.push(node);
+    }
+    return normalized;
+  }
+
+  function looksLike(actual, expected){
+    if( !actual && !expected ) {
+      return true;
+    }
+
+    if( expected.hasChildNodes() ){
+      var expectedKids = normalizeChildren(expected.childNodes);
+      var actualKids = normalizeChildren(actual.childNodes);
+      for(var i = 0; i < expectedKids.length; i++){
+        if( !looksLike(actualKids[i], expectedKids[i]) ){
+          return false;
+        }
+      }
+    }
+
+    if( expected.nodeType !== actual.nodeType ){
+      return false;
+    }
+
+    if( expected.nodeValue && actual.nodeValue && expected.nodeValue !== actual.nodeValue ){
+      return false;
+    }
+
+    return true;
+  };
+
+  console.log("\nColoring the tests...");
+  var tests = getElementsByClassName("test", "div", document);
+  var failCount = 0;
+  tests.forEach(function(test, i, arr){
+    var expected = getElementsByClassName("expected", null, test)[0];
+    var actual = getElementsByClassName("actual", null, test)[0];
+    if( looksLike(actual, expected) ){
+      test.className += " pass";
+    }
+    else {
+      failCount++;
+      test.className += " fail";
+    }
+  });
+  var overall = document.getElementById("overall");
+  var msg; 
+  if( failCount == 0 ){
+    msg = tests.length + " tests pass!";
+    overall.className = "pass";
+  }
+  else {
+    msg = failCount + " out of " + tests.length + " tests failed.";
+    overall.className = "fail";
+  }
+  var msgNode = document.createTextNode(msg);
+  overall.appendChild(msgNode);
+  console.log(msg);
+  console.log("done.");
+})();
+
diff --git a/vendor/getElementsByClassName-1.0.1.js → test/lib/getElementsByClassName-1.0.1.js b/vendor/getElementsByClassName-1.0.1.js → test/lib/getElementsByClassName-1.0.1.js
diff --git a/test/prince/js-test.html b/test/prince/js-test.html
@@ -2,16 +2,18 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<link rel="stylesheet" href="style.css">
-<script src="../../vendor/getElementsByClassName-1.0.1.js"></script>
+<link rel="stylesheet" href="../lib/colorTests.css">
+<script src="../lib/getElementsByClassName-1.0.1.js"></script>
 </head>
 <body>
 
 <h1>Prince Javascript Tests</h1>
+<div id="overall"></div>
+
 <p>
   <kbd>prince</kbd>'s javascript handling is somewhat limited as of version 8.0. It can't handle 
   <kbd>jQuery</kbd> and lacks some methods and attributes that I'm accustomed to using. This 
-  increases my desire to test while making it harder to find a test framework to use. <kbd>prince</kbd> 
+  increases my desire to test while making it harder to find a test framework to use&mdash;<kbd>prince</kbd> 
   can't handle <kbd>qUnit</kbd>, so a homegrown testing option was needed. 
 </p>
 
@@ -285,74 +287,7 @@ <h3>Actual:</h3>
 but should be present for pass/fail coloring. 
 -->
 
-<script>
-(function(){
-
-  function normalize(value){
-    if( value ){
-      value.replace(/\s+/, '');
-    } 
-    return value;
-  };
-
-  function normalizeChildren(children){
-    var normalized = [];
-    for(var i = 0; i < children.length; i++) {
-      var node = children[i];
-      if( !node ){
-        continue;
-      }
-      if( node.nodeType == 3 && node.nodeValue.match(/^\s*$/) ){
-        continue;
-      }
-      normalized.push(node);
-    }
-    return normalized;
-  }
-
-  function equals(actual, expected){
-    if( !actual && !expected ) {
-      return true;
-    }
-
-    if( expected.hasChildNodes() ){
-      var expectedKids = normalizeChildren(expected.childNodes);
-      var actualKids = normalizeChildren(actual.childNodes);
-      for(var i = 0; i < expectedKids.length; i++){
-        if( !equals(actualKids[i], expectedKids[i]) ){
-          return false;
-        }
-      }
-    }
-
-    if( expected.nodeType !== actual.nodeType ){
-      return false;
-    }
-
-    if( expected.nodeValue && actual.nodeValue && expected.nodeValue !== actual.nodeValue ){
-      return false;
-    }
-
-    return true;
-  };
-
-  console.log("\nColoring the tests...");
-  var tests = getElementsByClassName("test", "div", document);
-  tests.forEach(function(test, i, arr){
-    var expected = getElementsByClassName("expected", null, test)[0];
-    var actual = getElementsByClassName("actual", null, test)[0];
-    if( equals(actual, expected) ){
-      console.log("pass");
-      test.className += " pass";
-    }
-    else {
-      console.log("fail");
-      test.className += " fail";
-    }
-  });
-  console.log("done.");
-})();
-</script>
+<script src="../lib/colorTests.js"></script>
 
 </body>
 </html>