I'm trying to test one of my directives and I can't work out why my scope object is undefined.
define(["require", "exports", 'angular', 'directives', "angularMocks", "chartApp"], function (require, exports, angular, Directives) {
"use strict";
describe('board controls', function () {
describe('task filter', function () {
var $compile;
var $rootScope;
var scope;
var element;
beforeEach(angular.mock.module('chartApp'));
beforeEach(angular.mock.module('partials/directives/board-controls.html'));
beforeEach(inject(function (_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
scope = $rootScope.$new();
expect(scope).toBeDefined();
element = $compile('<board-controls></board-controls>')(scope);
scope.$digest();
}));
it('displays modal', function () {
scope.showChildFilters();
});
});
});
});
In the it('displays modal')... part Karma outputs:
TypeError: undefined is not an object (evaluating 'scope.showChildFilters')
But in the beforeEach(...) part it seems to be working. I just can't see why this doesn't work.
You need to change to this
it('displays modal', function () {
//scope.showChildFilters();
var isolateScope = element.isolateScope(); //I prefer to name isolateScope
isolateScope.$apply() //cause scope to digest and watch and all that
isolateScope.showChildFilters();
});
This is a very detailed answer to your question as well.
Testing element directive - can't access isolated scope methods during tests
Related
I am trying to unit-testing for following code, I wrote following code for unit-testing like below, I have tried so many ways to work, but I keep getting error:
'Cannot read property 'num' of undefined'
I do not know why scope is not properly set. If you have any idea about it, can you please give some advices?
var angular = require('angular');
require('angular-mocks');
describe('test directive', function () {
let $rootScope;
let $compile;
let scope;
let newScope;
let element;
beforeEach(angular.mock.inject(function (_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
describe('test directive', function () {
beforeEach(function () {
newScope = $rootScope.$new();
element = $compile('<test-directive></test-directive>')(newScope);
newScope.$digest();
scope = element.isolateScope();
});
fit('scope initialized', function () {
expect(scope.num).toEqual(1);
});
});
});
module.exports = module.directive('testDirective', ['$rootScope', '$scope', function($rootScope, $scope) {
return {
template: require('./test.html'),
restrict: 'E',
controller: [
'$scope',
function ($scope) {
$scope.num = 1
$scope.sum = function(a, b) {
return a + b;
}
}]
}
}]);
The scope variable is undefined because the directive being tested does not have an isolate scope. Instead, use the scope of the element:
beforeEach(function () {
newScope = $rootScope.$new();
element = $compile('<test-directive></test-directive>')(newScope);
newScope.$digest();
̶s̶c̶o̶p̶e̶ ̶=̶ ̶e̶l̶e̶m̶e̶n̶t̶.̶i̶s̶o̶l̶a̶t̶e̶S̶c̶o̶p̶e̶(̶)̶;̶
scope = element.scope();
});
fit('scope initialized', function () {
expect(scope.num).toEqual(1);
});
Be aware that directive has a fatal flaw. It can only use it once within a given scope.
I am doing an AngularJS unit test and use Karma - Coverage to see the result. Here is my code.
todomvc.directive('todoBlur', function () {
return function (scope, elem, attrs) {
elem.bind('blur', function () {
scope.$apply(attrs.todoBlur);
});
scope.$on('$destroy', function () {
elem.unbind('blur');
});
};
});
I have written the following test case.
describe('TodoBlur', function() {
var $compile,
$rootScope;
beforeEach(module('todomvc'));
beforeEach(inject(function(_$compile_, _$rootScope_){
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it('T', function() {
var element = $compile("<todoBlur></todoBlur>")($rootScope);
$rootScope.$digest();
element.blur();
var e = $.Event('keydown');
e.which = 27;
$rootScope.trigger(e);
element.triggerHandler('keydown', 27);
element.triggerHandler('keydown', 28);
});
});
As you see, I tried many codes to try to test the keydown but none of them work. The result in Code coverage report remains unchanged. How can I test it? I am new to AngularJS and its unit test and I google and still cannot find any solutions.
Edit: I tried Unit testing Angular directive click handler and modified my code. But it still not work.
beforeEach(module('todomvc'));
describe('myCtrl', function () {
var $scope, $rootScope;
beforeEach(inject(function ($controller, _$rootScope_) {
$scope = $rootScope.$new();
$controller('myCtrl', { $scope: $scope });
$rootScope = _$rootScope_;
}));
describe('T', function () {
var element;
beforeEach(function () {
element = angular.element('<todoBlur/>');
$compile(element)(scope);
$scope.$digest();
});
});
});
I have a nested controller as below:
<div ng-controller="ParentController">{{ data.value }}
<div ng-controller="ChildController">{{ data.value }}</div>
</div>
app.controller('ParentController', function ($scope) {
$scope.data = {
value: "A"
}
});
My child controller sets the parent scope as below:
app.controller('ChildController', function ($scope) {
$scope.data.value = "B";
});
My Jasmine unit test is:
describe('ChildController', function () {
var scope, $rootScope;
beforeEach(inject(function ($controller, _$rootScope_) {
$rootScope = _$rootScope_;
scope = $rootScope.$new();
$controller('ChildController', { $scope: scope});
scope.$digest();
}));
it('should change parent scope', function () {
expect(scope.data.value).toEqual("B");
});
});
The test results in "Cannot read property 'value' of undefined".
How do I unit test a child controller that uses a parent scope?
It really depends on what you want to test. If you want to assert that the child controller changes the value during its initialization then just setup the value for the test to change. You don't need to test Angular's scope hierarchy.
So, I'd suggest just to do this:
describe('ChildController', function () {
var scope, $rootScope;
beforeEach(inject(function ($controller, _$rootScope_) {
$rootScope = _$rootScope_;
scope = $rootScope.$new();
//setup
scope.data = { value: "A" };
$controller('ChildController', { $scope: scope});
scope.$digest();
}));
it('should change parent scope', function () {
expect(scope.data.value).toEqual("B");
});
});
First initialize $scope.data={};
app.controller('ChildController', function ($scope) {
$scope.data={};
$scope.data.value = "B";
});
I'm trying to test a directive.
This directive use the $compile provider.
I would try to expect if $compile will been called but providing it in the test I'm getting this error:
TypeError: 'undefined' is not a function (evaluating '$compile(angular.element(html))(scope)')
I know why is that happening (I'm overriding with a fake mock the actual $compile provider) but I don't really know how can I fix that problem.
This is the actual test code:
describe('directive', function () {
var scope, mockCompile;
beforeEach(function () {
mockCompile = jasmine.createSpy();
module('directive', function ($provide) {
$provide.value('$compile', mockCompile);
});
var html = '<div directive="foo"></div>';
// The problem is there. I'm injecting the mocked compile service
// Not the real one
inject(function ($compile, $rootScope) {
scope = $rootScope.$new();
$compile(angular.element(html))(scope);
scope.$digest();
});
});
it("should test the directive", function () {
//Act.
scope.$apply();
//Assert.
expect(mockCompile).toHaveBeenCalled();
});
});
First, make sure you have included angular-mocks.js for testing.
Then, each service you mock needs to begin and end with an underscore;
inject(function ($compile, $rootScope)
Should really by;
inject(function (_$compile_, _$rootScope_)
I have a directive that I want to unittest, but I'm running into the issue that I can't access my isolated scope. Here's the directive:
<my-directive></my-directive>
And the code behind it:
angular.module('demoApp.directives').directive('myDirective', function($log) {
return {
restrict: 'E',
templateUrl: 'views/directives/my-directive.html',
scope: {},
link: function($scope, iElement, iAttrs) {
$scope.save = function() {
$log.log('Save data');
};
}
};
});
And here's my unittest:
describe('Directive: myDirective', function() {
var $compile, $scope, $log;
beforeEach(function() {
// Load template using a Karma preprocessor (http://tylerhenkel.com/how-to-test-directives-that-use-templateurl/)
module('views/directives/my-directive.html');
module('demoApp.directives');
inject(function(_$compile_, _$rootScope_, _$log_) {
$compile = _$compile_;
$scope = _$rootScope_.$new();
$log = _$log_;
spyOn($log, 'log');
});
});
it('should work', function() {
var el = $compile('<my-directive></my-directive>')($scope);
console.log('Isolated scope:', el.isolateScope());
el.isolateScope().save();
expect($log.log).toHaveBeenCalled();
});
});
But when I print out the isolated scope, it results in undefined. What really confuses me though, if instead of the templateUrl I simply use template in my directive, then everything works: isolateScope() has a completely scope object as its return value and everything is great. Yet, somehow, when using templateUrl it breaks. Is this a bug in ng-mocks or in the Karma preprocessor?
Thanks in advance.
I had the same problem. It seems that when calling $compile(element)($scope) in conjunction with using a templateUrl, the digest cycle isn't automatically started. So, you need to set it off manually:
it('should work', function() {
var el = $compile('<my-directive></my-directive>')($scope);
$scope.$digest(); // Ensure changes are propagated
console.log('Isolated scope:', el.isolateScope());
el.isolateScope().save();
expect($log.log).toHaveBeenCalled();
});
I'm not sure why the $compile function doesn't do this for you, but it must be some idiosyncracy with the way that templateUrl works, as you don't need to make the call to $scope.$digest() if you use an inline template.
With Angularjs 1.3, if you disable debugInfoEnabled in the app config:
$compileProvider.debugInfoEnabled(false);
isolateScope() returns undefined also!
I had to mock and flush the $httpBackend before isolateScope() became defined. Note that $scope.$digest() made no difference.
Directive:
app.directive('deliverableList', function () {
return {
templateUrl: 'app/directives/deliverable-list-directive.tpl.html',
controller: 'deliverableListDirectiveController',
restrict = 'E',
scope = {
deliverables: '=',
label: '#'
}
}
})
test:
it('should be defined', inject(function ($rootScope, $compile, $httpBackend) {
var scope = $rootScope.$new();
$httpBackend.expectGET('app/directives/deliverable-list-directive.tpl.html').respond();
var $element = $compile('<deliverable-list label="test" deliverables="[{id: 123}]"></deliverable-list>')(scope);
$httpBackend.flush();
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
expect($element).toBeDefined();
expect($element.controller).toBeDefined();
scope = $element.isolateScope();
expect(scope).toBeDefined();
expect(scope.label).toEqual('test');
expect(scope.deliverables instanceof Array).toEqual(true);
expect(scope.deliverables.length).toEqual(1);
expect(scope.deliverables[0]).toEqual({id: 123});
}));
I'm using Angular 1.3.
You could configure karma-ng-html2js-preprocessor plugin. It will convert the HTML templates into a javascript string and put it into Angular's $templateCache service.
After set a moduleName in the configuration you can declare the module in your tests and then all your production templates will available without need to mock them with $httpBackend everywhere.
beforeEach(module('partials'));
You can find how to setup the plugin here: http://untangled.io/how-to-unit-test-a-directive-with-templateurl/
In my case, I kept running into this in cases where I was trying to isolate a scope on a directive with no isolate scope property.
function testDirective() {
return {
restrict:'EA',
template:'<span>{{ message }}</span>'
scope:{} // <-- Removing this made an obvious difference
};
}
function testWithoutIsolateScopeDirective() {
return {
restrict:'EA',
template:'<span>{{ message }}</span>'
};
}
describe('tests pass', function(){
var compiledElement, isolatedScope, $scope;
beforeEach(module('test'));
beforeEach(inject(function ($compile, $rootScope){
$scope = $rootScope.$new();
compiledElement = $compile(angular.element('<div test-directive></div>'))($scope);
isolatedScope = compiledElement.isolateScope();
}));
it('element should compile', function () {
expect(compiledElement).toBeDefined();
});
it('scope should isolate', function () {
expect(isolatedScope).toBeDefined();
});
});
describe('last test fails', function(){
var compiledElement, isolatedScope, $scope;
beforeEach(module('test'));
beforeEach(inject(function ($compile, $rootScope){
$scope = $rootScope.$new();
compiledElement = $compile(angular.element('<div test-without-isolate-scope-directive></div>'))($scope);
isolatedScope = compiledElement.isolateScope();
}));
it('element should compile', function () {
expect(compiledElement).toBeDefined();
});
it('scope should isolate', function () {
expect(isolatedScope).toBeDefined();
});
});