Add ability to test editor contents. Ensures classes are implemented, closes # 684

public/js/lib/coursewares/coursewaresHCJQFramework_0.1.5.js

@@ -49,14 +49,9 @@ var libraryIncludes = "<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3
   "<style>body { padding: 0px 3px 0px 3px; }</style>" +
   "<script>var expect = chai.expect; var should = chai.should(); var assert = chai.assert;</script>";
 
-var allTests = '';
-(function() {
-  tests.forEach(function(elem) {
-    allTests += elem + ' ';
-  });
-})();
 
-var otherTestsForNow = "<script src='/js/lib/coursewares/iFrameScripts_0.0.2.js'></script>";
+var editorValueForIFrame;
+var iFrameScript = "<script src='/js/lib/coursewares/iFrameScripts_0.0.3.js'></script>";
 
 var delay;
 // Initialize CodeMirror editor with a nice html5 canvas demo.
@@ -67,12 +62,13 @@ editor.on("keyup", function () {
 
 var nodeEnv = prodOrDev === 'production' ? 'http://www.freecodecamp.com' : 'http://localhost:3001';
 function updatePreview() {
+  editorValueForIFrame = editor.getValue();
   goodTests = 0;
   var previewFrame = document.getElementById('preview');
   var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
   preview.open();
   $('#testSuite').empty();
-  preview.write(libraryIncludes + editor.getValue() + otherTestsForNow);
+  preview.write(libraryIncludes + editor.getValue() + iFrameScript);
   preview.close();
 
 }
@@ -104,7 +100,6 @@ var testSuccess = function() {
   }
 };
 var challengeSeed = challengeSeed || null;
-var tests = tests || [];
 var allSeeds = '';
 (function() {
   challengeSeed.forEach(function(elem) {

public/js/lib/coursewares/iFrameScripts_0.0.2.js

@@ -1,19 +0,0 @@
-(function() {
-    var expect = chai.expect;
-    var tests = parent.tests;
-
-    for (var i = 0; i < tests.length; i++) {
-        var thisTest = true;
-        try {
-            eval(parent.tests[i]);
-        } catch (err) {
-            allTestsGood = false;
-            thisTest = false;
-            parent.postError(JSON.stringify(err.message.split(':').shift()));
-        } finally {
-            if (thisTest) {
-                parent.postSuccess(JSON.stringify(tests[i].split(',').pop().replace(/\'/g, '').replace(/\)/, '')));
-            }
-        }
-    }
-})();

public/js/lib/coursewares/iFrameScripts_0.0.3.js

@@ -0,0 +1,20 @@
+(function() {
+  var expect = chai.expect;
+  var tests = parent.tests;
+  var editor = parent.editorValueForIFrame;
+
+  for (var i = 0; i < tests.length; i++) {
+    var thisTest = true;
+    try {
+      eval(parent.tests[i]);
+    } catch (err) {
+      allTestsGood = false;
+      thisTest = false;
+      parent.postError(JSON.stringify(err.message.split(':').shift()));
+    } finally {
+      if (thisTest) {
+        parent.postSuccess(JSON.stringify(tests[i].split(',').pop().replace(/\'/g, '').replace(/\)/, '')));
+      }
+    }
+  }
+})();

seed_data/challenges/basic-html5-and-css.json

@@ -594,6 +594,9 @@
         "Now see if you can make sure the h2 element is rendered in the color red without removing the \"blue-text\" class, doing an in-line styling, or changing the sequence of CSS class declarations."
       ],
       "tests": [
+        "assert(new RegExp('.blue-text', 'gi').test(editor), 'Ensure you implemented the css class \".blue-text\"');",
+        "assert(new RegExp('.urgently-red', 'gi').test(editor), 'Ensure you implemented the css class \".urgently-red\"');",
+        "assert(new RegExp('blue !important', 'gi').test(editor), 'Ensure you added the \"!important\" declaration!');",
         "assert($('h2').hasClass('blue-text'), 'Your h2 element should have the class \"blue-text\".')",
         "assert($('h2').hasClass('urgently-red'), 'Your h2 element should have the class \"urgently-red\".')",
         "assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')"