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 parent module", function () {
    var $compile;
    var $httpBackend;
    var $rootScope;
    var $q;
    var scope;
    beforeEach(function () {
        angular.mock.module('parentModule');
        angular.mock.module(function ($provide) {
            $provide.value('fooService', {
                get: function () {
                    return 4
                }
            });
        });
        angular.mock.inject(function (_$compile_, _$httpBackend_, _$rootScope_, _$q_) {
            $compile = _$compile_;
            $httpBackend = _$httpBackend_;
            $rootScope = _$rootScope_;
            $q = _$q_;
            scope = $rootScope.$new();
        });


    });
    it("It compiles", function () {
        var element = $compile('<foo  ></foo>')(scope);
        $httpBackend.whenGET('/echo/html/foo.html').respond(200, 'This is {{value}}<span ng-transclude></span>');
        $rootScope.$digest();
        $httpBackend.flush();
        expect(element.html()).toEqual('This is foo4<span ng-transclude=""></span>');
    });
   ...