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

This commit is contained in:
terakilobyte
2015-05-28 08:26:25 -04:00
parent f6cebdea27
commit 718ae04f2f
4 changed files with 27 additions and 28 deletions

View File

@ -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) {

View File

@ -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(/\)/, '')));
}
}
}
})();

View File

@ -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(/\)/, '')));
}
}
}
})();

View File

@ -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.')"