Can't check scope with mocha
I have a simple isolated scoped directive that I am trying to test. The problem is that I cannot validate the scope variables defined in the function link
. A scorched sample of my directive and specification is below.
Directive
angular.module('myApp').directive('myDirective', [function(){
return {
scope: {},
restrict: 'AE',
replace: 'true',
templateUrl: 'template.html',
link: function link(scope, element, attrs){
scope.screens = [
'Screen_1.jpg',
'Screen_2.jpg',
'Screen_3.jpg',
];
}
};
}]);
Spec
describe.only('myDirective', function(){
var $scope, $compile;
beforeEach(module('myApp'));
beforeEach(inject(function(_$rootScope_, _$compile_, $httpBackend){
$scope = _$rootScope_.$new();
$compile = _$compile_;
$httpBackend.when('GET', 'template.html').respond();
}));
function create(html) {
var elem, compiledElem;
elem = angular.element(html);
compiledElem = $compile(elem)($scope);
$scope.$digest();
return compiledElem;
};
it('should have an isolated scope', function(){
var element = create('<my-directive></my-directive>');
expect(element.isolateScope()).to.be.exist;
});
});
According to what I've read on the internet this should work. So after a few hours of researching> fail> repeat, I tend to think that this is a bug or an issue with source code versions. Any ideas?
NOTE: I test Angular 1.2.17
, jQuery 1.11.0
, Karma ~0.8.3
and the lastMocha
UPDATE 9/19
I updated my directive above, I wrote inline template for simplicity, but my actual code is external templateUrl
. I also added $httpBackend.when()
to my test to prevent the test from trying to get the html file.
I noticed that nesting the template makes everything work fine, but when I use the external template it doesn't trigger the function link
.
UPDATE 9/19
I have integrated html2js
and now I can actually load templates from cache and run the function link
. Unfortunately, isolateScope()
everything is still going up undefined
.
source to share
For those who have the same problem as me, below is the solution.
In MOCHA , if you are using external html templates for directives, you must use the ng-html2js preprocessor which will cache all your templates in the js file. Once you've set this preference, karma will read them instead of trying to extract the actual html file (this will prevent the error UNEXPECTED REQUEST: GET(somepath.html)
).
After correct setup. The directive function link
or controller
will be available for your test via isolateScope()
. Below is the updated code:
Spec
describe('myDirective', function(){
var $scope, $compile;
beforeEach(module('myApp'));
beforeEach(module('ngMockE2E')); // You need to declare the ngMockE2E module
beforeEach(module('templates')); // This is the moduleName you define in the karma.conf.js for ngHtml2JsPreprocessor
beforeEach(inject(function(_$rootScope_, _$compile_){
$scope = _$rootScope_.$new();
$compile = _$compile_;
}));
function create(html) {
var compiledElem,
elem = angular.element(html);
compiledElem = $compile(elem)($scope);
$scope.$digest();
return compiledElem;
};
it('should have an isolated scope', function(){
var elm = create('<my-directive></my-directive>');
expect(elm.isolateScope()).to.be.defined;
});
});
NOTE . I ran into problems where I still had an error UNEXPECTED REQUEST: GET...
after I thought everything was set up correctly and it turned out that my cached files had a different path than the actual file, please read this article for more help:
"Unexpected karma request" when testing angular directive, even with ng-html2js
source to share