StackOverflow_23871901: trouble-unit-testing-directives-that-use-templateurl

Illustration of answer to http://stackoverflow.com/questions/23871901/trouble-unit-testing-directives-that-use-templateurl.

by ExpertSystem

HTML

<script src="http://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script>
<script src="http://cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css">
<script src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.16/angular-mocks.js"></script>

JavaScript

/* App-specific code */
var app = angular.module('myApp', []);
app.directive('helloWorld', function () {
    return {
      restrict: 'E',
      replace: true,
      scope: {},
      template: '<div>hello world!</div>',
      controller: ['$scope', function ($scope) {}]
    }
});
app.directive('helloWorld2', function () {
    return {
      restrict: 'E',
      replace: true,
      scope: {},
      templateUrl: 'mytemplate.html',
      controller: ['$scope', function ($scope) {}]
    }
});


/* Test-specific code */
angular.module('specApp', ['myApp']);
describe('My Angular App', function () {
    var tmplText = 'Hello, world 2 !';
    var $compile, $rootScope, $templateCache;

    beforeEach(module('myApp'));
    beforeEach(inject(['$compile','$rootScope', '$templateCache', 
        function($c, $r, $tc) {
            $compile = $c;
            $rootScope = $r;
            $templateCache = $tc;

            $templateCache.put('mytemplate.html', '<div>' + tmplText + '</div>');
        }]
    ));

    it("should render inline templates", function () {
        var element = $compile('<hello-world></hello-world>')($rootScope);
        expect(element.text()).toBe("hello world!");
    });

    it("should render cached templates", function() {
        var element = $compile('<hello-world2></hello-world2>')($rootScope);
        $rootScope.$digest();
        expect(element.text()).toBe(tmplText);
    });
});


/* Jasmine init */
(function () {
    var env = jasmine.getEnv();
    env.addReporter(new jasmine.HtmlReporter());
    env.execute();
}());