Directive with template and test
by IgorMinar
HTML
<div ng-app="cb">
<script type="text/ng-template" id="folderItemTemplate">
<div>{{item.name}}</div>
</script>
<div ng-init="item={name:'Bob'}">
<cb-folder-item item="item"></cb-folder-item>
</div>
<hr/>
Debug: {{item}}
</div>
<hr/>
CSS
</style>
<script src="http://ci.angularjs.org/job/angular.js-angular-master/292/artifact/build/pkg/1.0.0rc3-5c5b1183/angular-1.0.0rc3-5c5b1183.min.js"></script>
<script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine.js"></script>
<script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine-html.js"></script>
<script src="http://ci.angularjs.org/job/angular.js-angular-master/292/artifact/build/pkg/1.0.0rc3-5c5b1183/angular-mocks-1.0.0rc3-5c5b1183.js"></script>
<link rel="stylesheet" type="text/css" href="http://tryjasmine.com/js/vendor/jasmine-1.1.0/jasmine.css">
<style>
JavaScript
angular.module("cb", [])
.directive('cbFolderItem', function () {
return {
restrict: 'E',
replace: true,
scope: { item: 'evaluate' },
templateUrl: 'folderItemTemplate'
}
}
);
describe('directives', function(){
beforeEach(module('cb'));
describe('cb-folder-item', function () {
it('should show item.name',
inject(function ($rootScope, $compile) {
$rootScope.passedItem = {name: "Phil"};
$rootScope.$apply();
var templateAndElement =
'<script type="text/ng-template" id="folderItemTemplate">' +
'<div>{{item.name}}</div>' +
'<\/script>' +
'<cb-folder-item item="passedItem"></cb-folder-item>';
element = $compile(templateAndElement)($rootScope);
$rootScope.$apply()
expect(element.eq(1).text()).toBe("Phil");
}));
});
});
(function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var trivialReporter = new jasmine.TrivialReporter();
jasmineEnv.addReporter(trivialReporter);
jasmineEnv.specFilter = function(spec) {
return trivialReporter.specFilter(spec);
};
$(function() {
jasmineEnv.execute();
});
})();