added a coverage task to the gulpfile

improved the debugger controls in the demo app
kevinbarabash · Nov 18, 2014 · 7c5147f · 7c5147f
1 parent 4183ad3
commit 7c5147f
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 49 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 # Created by .gitignore support plugin (hsz.mobi)
 bower_components
 node_modules
+report
diff --git a/demo/app.js b/demo/app.js
@@ -15,27 +15,6 @@ var processing = new Processing(canvas);
 processing.size(400,400);
 processing.resetMatrix();
 
-//with (processing) {
-//    // preamble
-//    size(400, 400);
-//    background(255);
-//
-//    setup = function () {
-//        noStroke();
-//        fill(255,0,0);
-//        ellipse(200,200,75,75);
-//    };
-//
-//    draw = function () {
-//        fill(random(255),random(255),random(255));
-//        ellipse(random(400),random(400),75,75);
-//    };
-//
-//    // start
-//    setup();
-//    noLoop();   // call "loop();" when the draw function has been defined
-//}
-
 var getFunctionBody = function(func) {
     var funcString = func.toString();
     var start = funcString.indexOf("{") + 2;
@@ -48,9 +27,6 @@ var code = getFunctionBody(function () {
 background(255);
 noStroke();
 
-var x = 5;
-var y = 10;
-
 var randomColor = function () {
     var r;
     r = random(255);
@@ -59,29 +35,58 @@ var randomColor = function () {
     fill(r,g,b);
 };
 
-for (var i = 0; i < 10; i++) {
+for (var i = 0; i < 3; i++) {
     randomColor();
     ellipse(random(400),random(400),75,75);
 }
+
+draw = function () {
+    randomColor();
+    ellipse(random(400),random(400),75,75);
+};
 });
 
 editor.getSession().setValue(code);
 
 var stepper = new Stepper(processing);
 stepper.load(code);
 stepper.run();
-stepper.reset();
 editor.setHighlightActiveLine(false);
-updateLocals(stepper.stack.peek().scope);
 
-processing.size(400,400);
-processing.resetMatrix();
 
-$("#runButton").click(function () {
+$("#restartButton").click(function () {
+    // reset processing
+    processing.size(400,400);
+    processing.resetMatrix();
+
+    // reload the code and run it
     code = session.getValue();
     stepper.load(code);
     stepper.run();
-    editor.setHighlightActiveLine(false);
+
+    enableButtons();
+
+    if (stepper.halted()) {
+        editor.setHighlightActiveLine(false);
+        disableButtons();
+    } else {
+        editor.gotoLine(stepper._line);
+        editor.setHighlightActiveLine(true);
+        updateLocals(stepper.stack.peek().scope);
+    }
+});
+
+
+$("#continueButton").click(function () {
+    stepper.run();
+    if (stepper.halted()) {
+        editor.setHighlightActiveLine(false);
+        disableButtons();
+    } else {
+        editor.gotoLine(stepper._line);
+        editor.setHighlightActiveLine(true);
+        updateLocals(stepper.stack.peek().scope);
+    }
 });
 
 function updateLocals(scope) {
@@ -103,20 +108,14 @@ function updateLocals(scope) {
     });
 }
 
-$("#resetButton").click(function () {
-    processing.size(400,400);
-    processing.resetMatrix();
-    stepper.reset();
-    editor.setHighlightActiveLine(false);
-    var action = stepper.stepOver();
-    editor.gotoLine(action.line);
-    editor.setHighlightActiveLine(true);
-
-    updateLocals(stepper.stack.peek().scope);
-});
 
 $("#stepInButton").click(function () {
     var action = stepper.stepIn();
+    if (stepper.halted()) {
+        disableButtons();
+        editor.setHighlightActiveLine(false);
+        return;
+    }
     if (action.type === "stepIn") {
         console.log("stepIn: stack size = " + stepper.stack.size());
     } else if (action.type === "stepOver") {
@@ -133,6 +132,11 @@ $("#stepInButton").click(function () {
 
 $("#stepOverButton").click(function () {
     var action = stepper.stepOver();
+    if (stepper.halted()) {
+        disableButtons();
+        editor.setHighlightActiveLine(false);
+        return;
+    }
     if (action.type === "stepOut") {
         console.log("stepOut: stack size = " + stepper.stack.size());
     }
@@ -145,6 +149,11 @@ $("#stepOverButton").click(function () {
 
 $("#stepOutButton").click(function () {
     var action = stepper.stepOut();
+    if (stepper.halted()) {
+        disableButtons();
+        editor.setHighlightActiveLine(false);
+        return;
+    }
     if (action.type === "stepOut") {
         console.log("stepOut: stack size = " + stepper.stack.size());
     }
@@ -155,3 +164,35 @@ $("#stepOutButton").click(function () {
     editor.setHighlightActiveLine(true);
 });
 
+function disableButtons() {
+    $("#continueButton,#stepOverButton,#stepInButton,#stepOutButton").attr("disabled", "");
+}
+
+function enableButtons() {
+    $("#continueButton,#stepOverButton,#stepInButton,#stepOutButton").removeAttr("disabled");
+}
+
+// set/clear breakpoints by clicking in the gutter
+editor.on("guttermousedown", function(e){
+    var target = e.domEvent.target;
+    if (target.className.indexOf("ace_gutter-cell") == -1) {
+        return;
+    }
+
+    // only set a breakpoint when clicking on the left side of the target
+    if (e.clientX > 25 + target.getBoundingClientRect().left) {
+        return;
+    }
+
+    var row = e.getDocumentPosition().row;
+
+    if (e.editor.session.getBreakpoints()[row]) {
+        e.editor.session.clearBreakpoint(row);
+        stepper.clearBreakpoint(row + 1);
+    } else {
+        e.editor.session.setBreakpoint(row);
+        stepper.setBreakpoint(row + 1);
+    }
+
+    e.stop();
+});
diff --git a/demo/index.html b/demo/index.html
@@ -95,6 +95,19 @@
 
     .tab.button {
       background-color: lightgray;
+      cursor: pointer;
+    }
+
+    .tab.button button {
+      cursor: pointer;
+    }
+
+    button:focus {
+      outline: none;
+    }
+
+    .tab.button[disabled] {
+      color: gray;
     }
 
     #debugControls {
@@ -123,6 +136,10 @@
     .object {
       color: black;
     }
+
+    .ace_breakpoint {
+      background-color: rgb(0, 128, 255);
+    }
   </style>
 </head>
 <body>
@@ -143,11 +160,11 @@
 
     <div class="header">
       <span class="tab">Debugger</span>
-      <span class="tab button"><button id="resetButton">Reset</button></span>
-      <span class="tab button"><button id="runButton">Run</button></span>
-      <span class="tab button"><button id="stepInButton">Step In</button></span>
-      <span class="tab button"><button id="stepOverButton">Step Over</button></span>
-      <span class="tab button"><button id="stepOutButton">Step Out</button></span>
+      <span class="tab button"><button id="restartButton">Restart</button></span>
+      <span class="tab button"><button id="continueButton">Continue</button></span>
+      <span class="tab button"><button id="stepInButton">In</button></span>
+      <span class="tab button"><button id="stepOverButton">Over</button></span>
+      <span class="tab button"><button id="stepOutButton">Out</button></span>
 
     </div>
     <div id="inspector" class="ace_editor">
@@ -158,7 +175,6 @@ <h2>Local Variables:</h2>
 
 </div>
 
-
 </body>
 </html>
 

diff --git a/gulpfile.js b/gulpfile.js
@@ -34,7 +34,29 @@ gulp.task("watch", function() {
 });
 
 gulp.task("test", ["build"], function() {
-    testee.test(["test/runner.html"], ["firefox"], { browsers: "firefox" })
+    var options = {
+        browsers: "firefox",
+        coverage: {
+            dir: "./report"
+        }
+    };
+    testee.test(["test/runner.html"], ["firefox"], options)
+        .then(function() {
+            process.exit(0);
+        }, function() {
+            process.exit(1);
+        });
+});
+
+gulp.task("coverage", ["build"], function() {
+    var options = {
+        browsers: "firefox",
+        coverage: {
+            dir: "./report",
+            reporters: ["html"]     // requires patch line 383 of node_modules/testee/node_modules/istanbul/lib/report/html.js by prepending a "." to the path
+        }
+    };
+    testee.test(["test/runner.html"], ["firefox"], options)
         .then(function() {
             process.exit(0);
         }, function() {