Merge branch 'bonfire-improvement' of https://github.com/FreeCodeCamp/freecodecamp into bonfire-improvement
Conflicts: public/css/main.less
This commit is contained in:
Michael Q Larson
@ -526,10 +526,9 @@ thead {
|
||||
}
|
||||
}
|
||||
|
||||
.codeMirrorView {
|
||||
font-size: 22px;
|
||||
font-family: 'Inconsolata', monospace;
|
||||
font-weight: 300;
|
||||
form.code {
|
||||
font-size: 16px;
|
||||
font-family: "Courier New", "Lucida Console", monospace;
|
||||
}
|
||||
|
||||
//uncomment this to see the dimensions of all elements outlined in red
|
||||
@ -537,4 +536,4 @@ thead {
|
||||
// border-color: red;
|
||||
// border-width: 1px;
|
||||
// border-style: solid;
|
||||
//}
|
||||
//}
|
||||
|
||||
@ -42,7 +42,12 @@ var runHidden = function(code) {
|
||||
var onoffline = null;
|
||||
var ononline = null;
|
||||
var importScripts = null;
|
||||
var console = null;
|
||||
var console = {
|
||||
panel: $(parent.document.body).append('<div>'),
|
||||
log: function(m){
|
||||
this.panel.prepend('<div>'+m+'</div>');
|
||||
}
|
||||
};
|
||||
var application = null;
|
||||
|
||||
return eval(code);
|
||||
|
||||
4800
public/js/lib/chai/chai.js
Normal file
4800
public/js/lib/chai/chai.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -6,16 +6,15 @@ block content
|
||||
script(src='/js/lib/codemirror/addon/lint/lint.js')
|
||||
script(src='/js/lib/codemirror/addon/lint/javascript-lint.js')
|
||||
script(src='//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js')
|
||||
|
||||
script(src='/js/lib/chai/chai.js')
|
||||
link(rel='stylesheet', href='/js/lib/codemirror/lib/codemirror.css')
|
||||
link(rel='stylesheet', href='/js/lib/codemirror/addon/lint/lint.css')
|
||||
link(rel='stylesheet', href='/js/lib/codemirror/theme/monokai.css')
|
||||
script(src='/js/lib/codemirror/mode/javascript/javascript.js')
|
||||
script(src='js/lib/jailed/jailed.js')
|
||||
script(src='/js/lib/bonfire/bonfire.js')
|
||||
|
||||
.row
|
||||
.col-sm-12.col-md-12.col-xs-12
|
||||
#mainEditorPanel.col-sm-12.col-md-12.col-xs-12
|
||||
.panel.panel-primary
|
||||
.panel-heading.text-center Bonfire Playground
|
||||
.panel.panel-body
|
||||
@ -26,9 +25,51 @@ block content
|
||||
.form-group.codeMirrorView
|
||||
textarea#codeOutput
|
||||
#submitButton.btn.btn-primary.btn-big.btn-block Run my code
|
||||
//#hintButton.btn.btn-info.btn-big.btn-block Show me hints
|
||||
|
||||
.hidden-xs
|
||||
br
|
||||
#sideBySide.btn.btn-primary.btn-block.btn-big Tests side by side
|
||||
#testCreatePanel.col-sm-6.col-md-6.col-xs-12
|
||||
.panel.panel-primary
|
||||
.panel-heading Test Code
|
||||
.panel.panel-body
|
||||
form#testCreateForm.form-horizontal
|
||||
.form-group
|
||||
label(for='function-select').col-sm-6 Select function
|
||||
select#testFunctionName.col-sm-6.text-info
|
||||
option
|
||||
#testInputs.form-group
|
||||
#testOutputs.form-group
|
||||
br
|
||||
#addTest.btn.text-info Create test
|
||||
#hideTestCreate.btn.text-info Hide test creation dialogue
|
||||
#testSuitePanel.col-sm-6.col-md-6.col-xs-12
|
||||
.panel.panel-primary
|
||||
.panel-heading Test Suite
|
||||
.panel.panel-body
|
||||
ul#testSuite.list-group
|
||||
br
|
||||
#runTests.btn.btn-primary.btn-big.btn-block Run my test suite
|
||||
textarea#testOutput
|
||||
//#hintButton.btn.btn-info.btn-big.btn-block Show me hints
|
||||
script.
|
||||
//Button for moving test window to side
|
||||
$('#sideBySide').on('click', function () {
|
||||
var main = $('#mainEditorPanel');
|
||||
if (main.hasClass('col-md-12')) {
|
||||
replaceColClz(main, 'md', 12, 6);
|
||||
replaceColClz(main, 'sm', 12, 6);
|
||||
$(this).text("Original Layout")
|
||||
} else {
|
||||
replaceColClz(main, 'md', 6, 12);
|
||||
replaceColClz(main, 'sm', 6, 12);
|
||||
$(this).text("Tests side by side")
|
||||
}
|
||||
});
|
||||
//Replace a bootstrap column number by browser size
|
||||
var replaceColClz = function (elt, size, oldVal, newVal) {
|
||||
elt.removeClass('col-' + size + '-' + oldVal);
|
||||
elt.addClass('col-' + size + '-' + newVal);
|
||||
};
|
||||
var widgets = [];
|
||||
var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("codeEditor"), {
|
||||
lineNumbers: true,
|
||||
@ -41,20 +82,18 @@ block content
|
||||
cursorHeight: 0.85,
|
||||
lineWrapping: true,
|
||||
gutters: ["CodeMirror-lint-markers"],
|
||||
onKeyEvent : doLinting
|
||||
onKeyEvent: doLinting
|
||||
});
|
||||
var editor = myCodeMirror;
|
||||
myCodeMirror.setValue('/*Welcome to Bonfire, Free Code Camp\'s future CoderByte replacement.\n'+
|
||||
'Please feel free to use Bonfire as an in-browser playground and linting tool.*/\n\n\n' +
|
||||
|
||||
'function test() {\n' +
|
||||
' return [1,2,3].map(function(elem) {\n' +
|
||||
' return elem * elem;\n' +
|
||||
' });\n' +
|
||||
'}\n\n' +
|
||||
'test();');
|
||||
myCodeMirror.setValue('/*Welcome to Bonfire, Free Code Camp\'s future CoderByte replacement.\n' +
|
||||
'Please feel free to use Bonfire as an in-browser playground and linting tool.*/\n\n\n' +
|
||||
'function test() {\n' +
|
||||
' return [1,2,3].map(function(elem) {\n' +
|
||||
' return elem * elem;\n' +
|
||||
' });\n' +
|
||||
'}\n\n' +
|
||||
'test();');
|
||||
myCodeMirror.setSize("100%", 500);
|
||||
|
||||
var codeOutput = CodeMirror.fromTextArea(document.getElementById("codeOutput"), {
|
||||
lineNumbers: false,
|
||||
mode: "text",
|
||||
@ -62,12 +101,11 @@ block content
|
||||
readOnly: 'nocursor'
|
||||
});
|
||||
codeOutput.setSize("100%", 100);
|
||||
|
||||
var info = editor.getScrollInfo();
|
||||
var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
|
||||
if (info.top + info.clientHeight < after)
|
||||
editor.scrollTo(null, after - info.clientHeight + 3);
|
||||
var doLinting = function() {
|
||||
var doLinting = function () {
|
||||
editor.operation(function () {
|
||||
for (var i = 0; i < widgets.length; ++i)
|
||||
editor.removeLineWidget(widgets[i]);
|
||||
@ -92,6 +130,189 @@ block content
|
||||
$('#submitButton').on('click', function () {
|
||||
$('#codeOutput').empty();
|
||||
var js = myCodeMirror.getValue();
|
||||
submit(js);
|
||||
submit(js);
|
||||
});
|
||||
|
||||
var assert = chai.assert;
|
||||
$('#runTests').on('click', function () {
|
||||
clearTestOutput();
|
||||
var testCaseList = [],
|
||||
testResults = [],
|
||||
jsCode = myCodeMirror.getValue();
|
||||
getTestSuite().each(function () {
|
||||
testCaseList.push([$(this).data("input"), $(this).data("output"), $(this)]);
|
||||
});
|
||||
testCaseList.forEach(function (input) {
|
||||
var testCode = jsCode + "\n\n" + input[0] + ";";
|
||||
//TODO use plugin for this with the rest as a callback?
|
||||
var output = eval(testCode);
|
||||
try {
|
||||
testEquality(output, input[1]);
|
||||
appendTestOutput("\n" + createTestString(input[0], input[1]) + "\nTest passed!\n");
|
||||
setTestBackground(input[2], "passed");
|
||||
testResults.push(1);
|
||||
} catch (err) {
|
||||
setTestBackground(input[2], "failed");
|
||||
appendTestOutput(createTestString(input[0], input[1]));
|
||||
appendTestOutput("Test failed: \nOutput was: " + output + "\nType of output was: " + (typeof output));
|
||||
testResults.push(0);
|
||||
}
|
||||
if (testResults.length === testCaseList.length) {
|
||||
var sum = testResults.reduce(function (a, b) {
|
||||
return a + b
|
||||
});
|
||||
prependTestOutput("======Testing========\n" + Math.round(100 * sum / testResults.length) + "% tests passed\n");
|
||||
}
|
||||
});
|
||||
});
|
||||
//After looking at chai assert, this is the way to go if you don't know the type
|
||||
var testEquality = function (output, input) {
|
||||
switch (typeof output) {
|
||||
case 'object':
|
||||
assert.deepEqual(output, input);
|
||||
break;
|
||||
case 'string':
|
||||
assert(output.localeCompare(input));
|
||||
break
|
||||
default:
|
||||
assert.equal(output, input);
|
||||
}
|
||||
};
|
||||
var setTestBackground = function (elt, result) {
|
||||
if (result.localeCompare('failed')) {
|
||||
elt.css("background-color", "rgba(255,0,0,.2)");
|
||||
} else {
|
||||
elt.css("background-color", "rgba(0,255,0,.2)");
|
||||
}
|
||||
};
|
||||
var getTestSuite = function () {
|
||||
return $('#testSuite').find('li');
|
||||
};
|
||||
var clearTestOutput = function () {
|
||||
testOutput.setValue("");
|
||||
};
|
||||
var appendTestOutput = function (msg) {
|
||||
writeToTest(msg, CodeMirror.Pos(editor.lastLine()));
|
||||
};
|
||||
var prependTestOutput = function (msg) {
|
||||
writeToTest(msg, CodeMirror.Pos(editor.firstLine()));
|
||||
};
|
||||
var writeToTest = function (msg, location) {
|
||||
testOutput.replaceRange("\n" + msg, location);
|
||||
};
|
||||
$('#addTest').on('click', function () {
|
||||
var functionName = $('#testFunctionName option:selected').text();
|
||||
var inputs = [];
|
||||
var output;
|
||||
$('#testInputs').find('input').each(function () {
|
||||
if ($(this).val() != null && $(this).val().length !== 0) {
|
||||
} else {
|
||||
var keepGoing = prompt("You have submitted a test with empty input. Enter yes to continue.");
|
||||
if (/yes/.test(keepGoing.toLowerCase())) {
|
||||
inputs.push($(this).val());
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
output = $('#testOutputs').find('input').val();
|
||||
var functionCall = functionName + "(" + inputs.join(",") + ")";
|
||||
var test = document.createElement("li");
|
||||
$(test)
|
||||
.addClass('list-group-item')
|
||||
.addClass('well')
|
||||
.addClass('well-sm')
|
||||
.attr({"data-input": functionCall, "data-output": output})
|
||||
.html(createTestString(functionCall, output))
|
||||
.appendTo($('#testSuite'));
|
||||
var closeLink = document.createElement('i');
|
||||
var closeSpan = document.createElement('span');
|
||||
$(closeSpan)
|
||||
.addClass("glyphicon glyphicon-remove-sign")
|
||||
.css("float", "right")
|
||||
.click(function () {
|
||||
var input = prompt("This will remove the test permanently.\n If you want to do this, type delete");
|
||||
if (/delete/.test(input.toLowerCase())) {
|
||||
$(this).parent().remove();
|
||||
}
|
||||
}).appendTo($(test));
|
||||
//blank out the form
|
||||
$("#testCreateForm").find("input[type=text]").val("");
|
||||
});
|
||||
var createTestString = function (inputs, output) {
|
||||
return "Input: " + inputs + "\nExpect:" + output;
|
||||
};
|
||||
var testOutput = CodeMirror.fromTextArea(document.getElementById("testOutput"), {
|
||||
lineNumbers: false,
|
||||
mode: "javascript",
|
||||
theme: 'monokai',
|
||||
readOnly: 'nocursor'
|
||||
});
|
||||
testOutput.setSize("100%", 200);
|
||||
var createOptions = function (re, code) {
|
||||
var m = re.exec(code);
|
||||
while (m != null) {
|
||||
var functionName = m[1];
|
||||
if (functionName !== undefined && currentState.length === 0) {
|
||||
var option = document.createElement('option');
|
||||
$(option)
|
||||
.html(functionName)
|
||||
.attr({"data-args": m[2]})
|
||||
.appendTo($('#testFunctionName'));
|
||||
}
|
||||
m = re.exec(code);
|
||||
}
|
||||
};
|
||||
$('#testFunctionName').on('change', function () {
|
||||
$('#testInputs').children().remove();
|
||||
$('#testOutputs').children().remove();
|
||||
var args = $('#testFunctionName option:selected').data("args");
|
||||
var argArray = args.split(",");
|
||||
argArray.forEach(function (arg) {
|
||||
if (arg.length > 0) {
|
||||
createInputField('#testInputs', arg);
|
||||
}
|
||||
});
|
||||
createInputField('#testOutputs', 'Expected output');
|
||||
});
|
||||
var createInputField = function (className, arg) {
|
||||
var inputDiv = document.createElement('div');
|
||||
$(inputDiv)
|
||||
.addClass("control-group")
|
||||
.appendTo($(className));
|
||||
var inputLabel = document.createElement('label');
|
||||
$(inputLabel)
|
||||
.attr("for", "inputs")
|
||||
.html(arg)
|
||||
.addClass("col-xs-4 control-label")
|
||||
.appendTo($(inputDiv));
|
||||
var textDiv = document.createElement('div');
|
||||
$(textDiv)
|
||||
.addClass("col-xs-8 controls")
|
||||
.appendTo($(inputDiv));
|
||||
var inputArea = document.createElement('input');
|
||||
$(inputArea)
|
||||
.attr("type", "text")
|
||||
.addClass("form-control")
|
||||
.appendTo($(inputDiv));
|
||||
$(document.createElement("br")).appendTo($(textDiv));
|
||||
};
|
||||
$('#testFunctionName').on('focus', function () {
|
||||
$('#testFunctionName').children().remove();
|
||||
var blankOpt = document.createElement("option");
|
||||
$(blankOpt).addClass("selected").appendTo($('#testFunctionName'));
|
||||
var re = /function\s+(\w+)\s*\(([\w\s,]*)\)/g;
|
||||
var code = myCodeMirror.getValue();
|
||||
createOptions(re, code);
|
||||
re = /var (\w+)\s*=\s*function\s*\(([\s\w,]*)\)/g;
|
||||
createOptions(re, code);
|
||||
});
|
||||
$('#hideTestCreate').on('click', function () {
|
||||
var testForm = $("#testCreateForm");
|
||||
if (testForm.is(":visible")) {
|
||||
testForm.hide();
|
||||
$(this).text("Create more tests");
|
||||
} else {
|
||||
testForm.show();
|
||||
$(this).text("Hide test creation dialogue")
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user