Allow user to stop a specs execution when an expectation fails

[finish #1165916] #577

src/html/HtmlReporter.js

@@ -11,6 +11,7 @@ jasmineRequire.HtmlReporter = function(j$) {
       createElement = options.createElement,
       createTextNode = options.createTextNode,
       onRaiseExceptionsClick = options.onRaiseExceptionsClick || function() {},
+      onThrowExpectationsClick = options.onThrowExpectationsClick || function() {},
       addToExistingQueryString = options.addToExistingQueryString || defaultQueryString,
       timer = options.timer || noopTimer,
       results = [],
@@ -116,22 +117,51 @@ jasmineRequire.HtmlReporter = function(j$) {
 
     this.jasmineDone = function() {
       var banner = find('.banner');
-      banner.appendChild(createDom('span', {className: 'duration'}, 'finished in ' + timer.elapsed() / 1000 + 's'));
-
       var alert = find('.alert');
+      alert.appendChild(createDom('span', {className: 'duration'}, 'finished in ' + timer.elapsed() / 1000 + 's'));
 
-      alert.appendChild(createDom('span', { className: 'exceptions' },
-        createDom('label', { className: 'label', 'for': 'raise-exceptions' }, 'raise exceptions'),
-        createDom('input', {
-          className: 'raise',
-          id: 'raise-exceptions',
-          type: 'checkbox'
-        })
-      ));
-      var checkbox = find('#raise-exceptions');
+      banner.appendChild(
+        createDom('div', { className: 'run-options' },
+          createDom('span', { className: 'trigger' }, 'Options'),
+          createDom('div', { className: 'payload' },
+            createDom('div', { className: 'exceptions' },
+              createDom('input', {
+                className: 'raise',
+                id: 'raise-exceptions',
+                type: 'checkbox'
+              }),
+              createDom('label', { className: 'label', 'for': 'raise-exceptions' }, 'raise exceptions')),
+            createDom('div', { className: 'throw-failures' },
+              createDom('input', {
+                className: 'throw',
+                id: 'throw-failures',
+                type: 'checkbox'
+              }),
+              createDom('label', { className: 'label', 'for': 'throw-failures' }, 'stop spec on expectation failure'))
+          )
+        ));
 
-      checkbox.checked = !env.catchingExceptions();
-      checkbox.onclick = onRaiseExceptionsClick;
+      var raiseCheckbox = find('#raise-exceptions');
+
+      raiseCheckbox.checked = !env.catchingExceptions();
+      raiseCheckbox.onclick = onRaiseExceptionsClick;
+
+      var throwCheckbox = find('#throw-failures');
+      throwCheckbox.checked = env.throwingExpectationFailures();
+      throwCheckbox.onclick = onThrowExpectationsClick;
+
+      var optionsMenu = find('.run-options'),
+          optionsTrigger = optionsMenu.querySelector('.trigger'),
+          optionsPayload = optionsMenu.querySelector('.payload'),
+          isOpen = /\bopen\b/;
+
+      optionsTrigger.onclick = function() {
+        if (isOpen.test(optionsPayload.className)) {
+          optionsPayload.className = optionsPayload.className.replace(isOpen, '');
+        } else {
+          optionsPayload.className += ' open';
+        }
+      };
 
       if (specsExecuted < totalSpecsDefined) {
         var skippedMessage = 'Ran ' + specsExecuted + ' of ' + totalSpecsDefined + ' specs - run all';

src/html/_HTMLReporter.scss

@@ -14,6 +14,7 @@ $failing-color: #ca3a11;
 $pending-color: #ba9d37;
 $empty-color: #eff543;
 $neutral-color: #bababa;
+$jasmine-color: #8a4182;
 
 $font-size: 11px;
 $large-font-size: 14px;
@@ -77,12 +78,6 @@ body {
     top: 6px;
   }
 
-  .banner .duration {
-    position: absolute;
-    right: 14px;
-    top: 6px;
-   }
-
   // This div is available for testing elements that must be added to the DOM.
   // We position it out of view, so it doesn't obstruct the runner.
   #jasmine_content {
@@ -101,8 +96,10 @@ body {
   }
 
   .duration {
-    color: $faint-text-color;
+    color: #fff;
     float: right;
+    line-height: $line-height * 2;
+    padding-right: 9px;
   }
 
   //--- Symbol summary ---//
@@ -166,11 +163,32 @@ body {
     }
   }
 
-  .exceptions {
-    color: #fff;
+  .run-options {
     float: right;
-    margin-top: 5px;
     margin-right: 5px;
+    border: 1px solid $jasmine-color;
+    color: $jasmine-color;
+    position: relative;
+    line-height: 20px;
+
+    .trigger {
+      cursor: pointer;
+      padding: 8px 16px;
+    }
+
+    .payload {
+      position: absolute;
+      display: none;
+      right: -1px;
+      border: 1px solid $jasmine-color;
+      background-color: $page-background-color;
+      white-space: nowrap;
+      padding: 4px 8px;
+
+      &.open {
+        display: block;
+      }
+    }
   }
 
   //--- Alerts: status bars ---//