Template for Testing with Jasmine

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

HTML

<script src="http://searls.github.com/jasmine-all/jasmine-all-min.js"></script>
<script src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.3/angular-mocks.js"></script>

CSS

body {
    background-color: #eeeeee;
    padding: 0;
    margin: 5px;
    overflow-y: scroll;
}
https://jsfiddle.net/openspectrum/wzAyL/ #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:...

JavaScript

//--- Angular code --------------------------
angular.module("parentModule", [])
    .directive('foo', function () {
    return {
        restrict: 'E',
        templateUrl: '/echo/html/foo.html',
        transclude: true,
        link: function () {
            console.log('on link');
        },
        controller: function ($scope, fooService) {
            $scope.value = "foo" + fooService.get()
        }
    };
})
    .directive('baz', function () {
    return {
        restrict: 'E',
        templateUrl: '/echo/html/baz.html',
        transclude: true,
        link: function () {
            console.log('on link');
        },
        controller: function ($scope, fooService) {
            $scope.value = "baz"
        }
    };
});
angular.module("testModule", ['parentModule'])
    .directive('bar', function () {
    return {
        restrict: 'CE',
        template: 'I\'m bar',
        require: '^baz',
    };
});





describe("Test child module", function () {
    var $compile;
    var $httpBackend;
    var $rootScope;
    var $q;
    var scope;
    beforeEach(function () {
        //Mocking the required module as a dummy empty module
        angular.mock.module('testModule');
        angular.mock.module(function ($compileProvider, $provide) {
            // Creating the directive we want to mock, we don't care about it's behaviour
            // We are just trying to comply with require
            $provide.value('fooService', {
                get: function () {
                    return 3
                }
            });
            $provide.decorator('bazDirective', function ($delegate) {
              var dir = $delegate[0];

              dir.template = '{{value}}<div ng-transclude></div>';
                
              dir.controller = function ($scope, fooService) {
                  $scope.value = 'baz' + fooService.get();
              };

              delete dir.templateUrl;

              return $delegate;
            });
        });

       ...