Template for Testing with Jasmine

Drop in your code, drop in your Jasmine specs, and away you go!

by bullrout

HTML

<script src="http://jeromecovington.github.io/jasmine-all/jasmine-all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-mocks.js"></script>
<div ng-controller="MyCtrl">
    
   

    <input type="text" ui-Blur="testfn2()" />
    {{testModel}}
</div>

CSS

body { background-color: #eeeeee; padding: 0; margin: 5px; overflow-y: scroll; }

#HTMLReporter { font-size: 11px; font-family: Monaco, "Lucida Console", monospace; line-height: 14px; color: #333333; }
#HTMLReporter a { text-decoration: none; }
#HTMLReporter a:hover { text-decoration: underline; }
#HTMLReporter p, #HTMLReporter h1, #HTMLReporter h2, #HTMLReporter h3, #HTMLReporter h4, #HTMLReporter h5, #HTMLReporter h6 { margin: 0; line-height: 14px; }
#HTMLReporter .banner, #HTMLReporter .symbolSummary, #HTMLReporter .summary, #HTMLReporter .resultMessage, #HTMLReporter .specDetail .description, #HTMLReporter .alert .bar, #HTMLReporter .stackTrace { padding-left: 9px; padding-right: 9px; }
#HTMLReporter #jasmine_content { position: fixed; right: 100%; }
#HTMLReporter .version { color: #aaaaaa; }
#HTMLReporter .banner { margin-top: 14px; }
#HTMLReporter .duration { color: #aaaaaa; float: right; }
#HTMLReporter .symbolSummary { overflow: hidden; *zoom: 1; margin: 14px 0; }
#HTMLReporter .symbolSummary li { display: block; float: left; height: 7px; width: 14px; margin-bottom: 7px; font-size: 16px; }
#HTMLReporter .symbolSummary li.passed { font-size: 14px; }
#HTMLReporter .symbolSummary li.passed:before { color: #5e7d00; content: "\02022"; }
#HTMLReporter .symbolSummary li.failed { line-height: 9px; }
#HTMLReporter .symbolSummary li.failed:before { color: #b03911; content: "x"; font-weight: bold; margin-left: -1px; }
#HTMLReporter .symbolSummary li.skipped { font-size: 14px; }
#HTMLReporter .symbolSummary li.skipped:before { color: #bababa; content: "\02022"; }
#HTMLReporter .symbolSummary li.pending { line-height: 11px; }
#HTMLReporter .symbolSummary li.pending:before { color: #aaaaaa; content: "-"; }
#HTMLReporter .exceptions { color: #fff; float: right; margin-top: 5px; margin-right: 5px; }
#HTMLReporter .bar { line-height: 28px; font-size: 14px; display: block; color: #eee; }
#HTMLReporter .runningAlert { background-color: #666666; }
#HTMLReporter .skippedAlert...

JavaScript

var app = angular.module('myApp', ['my_ui']);
angular.module("my_ui", [])
  .directive('uiBlur', function() {
    return function( scope, elem, attrs ) {
      elem.bind('blur', function() {
        scope.$apply(attrs.uiBlur);
      });
    };
  });

function MyCtrl($scope) {
    $scope.testModel="null";    
    $scope.testfn = function(strings){
        alert(strings);
    }
    
    $scope.testfn2 = function(){
       $scope.testModel="onBlur";  
    }
}


describe("first suite", function() {
  it("first test", function(done) {
    expect(true).toBeTruthy();
    setTimeout(done, 1000);
  });

  it("second test", function(done) {
    expect(true).toBeTruthy();
    setTimeout(done, 1000);
  });
});

describe("second suite", function() {
  it("first test", function(done) {
    expect(true).toBeTruthy();
    setTimeout(done, 1000);
  });

  it("second test", function(done) {
    expect(true).toBeTruthy();
    setTimeout(done, 1000);
  });
});