I have recently started trying to learn how to test angular. I have had some success but at the moment I am trying to test a directive and I cannot seem to make it work.
Test code
describe('navigation test', function(){
var element, location, route, rootScope, scope, httpBackend;
var elm;
beforeEach(module('myApp'));
beforeEach(inject(function($compile,$rootScope,$location,$httpBackend,$route) {
location = $location;
scope = $rootScope.$new();
route = $route;
$httpBackend.whenGET('partials/nav/nav.html')
.respond(200);
element = $compile("<navigation></navigation>")(scope);
httpBackend = $httpBackend;
scope.$digest();
}));
describe('Change page function',function(){
it('should flip the location between /home and /test', function(){
location.path('/home')
scope.changePage();
scope.$digest();
expect(location.path()).to.equal('/test');
})
})
});
Directive function
var app = angular.module('myApp');
app.directive('navigation', function($location, $q, $sce, $timeout, $mdSidenav, $mdComponentRegistry) {
return {
restrict: 'E',
templateUrl: 'partials/nav/nav.html',
link: function(scope, elements, attrs) {
scope.changePage = function() {
if($location.path() == '/home') {
$location.path('/builder')
} else {
$location.path('/home');
}
};
});
The error I am receiving is
error message
TypeError: 'undefined' is not a function
(evaluating 'scope.changePage()')
I cannot figure out why it cannot see the scope. Any help would be greatly appreciated. And if anyone could shed some light on angular testing that would be great.
You forgot to call $httpBackend.flush() to serve the request to partials/nav/nav.html when you construct the directive. Just add it in and it should be working fine.
Working fiddle
Related
I have a directive that accesses the $routeParams of the page as such:
myApp.directive("myList", function ($routeParams) {
return {
restrict: 'E',
templateUrl: 'tabs/my-list.html',
link: function (scope) {
scope.year = $routeParams.year;
}
};
});
The directive works as expected and correctly accesses the $routeParams
I am trying to test using angular-mock/jasmine. I can't figure out how to pass mock $routeParams to the directive. This is what I have:
describe('myList', function () {
var scope, compile, element, compiledDirective;
var mockParams = { 'year': 1996 };
beforeEach(function () {
module('templates', 'MyApp');
inject(function ($compile, $rootScope, $routeParams) {
compile = $compile;
scope = $rootScope.$new();
});
element = angular.element('<my-list></my-list>');
compiledDirective = compile(element)(scope);
scope.$digest();
});
it('should fill in the year', function () {
expect(scope.year).toEqual(mockParams.year);
});
});
Which obviously doesn't work because I never passed passed mockParams to the directive. Is there a way to do this?
Mock the $routeParams object mockParams using angular.extend OR do assign mockParams object directly to $routeParams. In that way $routeParams will be available before directive gets compiled.
inject(function ($compile, $rootScope, $routeParams) {
compile = $compile;
scope = $rootScope.$new();
angular.extend($routeParams, mockParams);
});
I have a super simple directive that overrides click behavior and does a full page reload on click. I'm having trouble writing a Unit Test for this directive. It looks like the $window doesn't get injected properly as well as this error when running the test:
TypeError: 'undefined' is not an object (evaluating '$event.preventDefault')
reload.directive.js
angular.module('myModule')
.directive('reload', ['$window', function($window) {
return {
restrict: 'A',
scope: {},
transclude: true,
replace: true,
template: '<a ng-click="reload($event)" ng-transclude></a>',
link: function(scope, element, attrs) {
scope.reload = function($event) {
$event.preventDefault();
$window.location.href = attrs.href;
};
}
};
}]);
An example of how I'm using it
<a ui-sref="home", reload>Home Example</a>
Here is my unit test: reload-test.directive.js
describe('Testing reload directive', function() {
beforeEach(module('myModule'));
var window, element, scope;
beforeEach(inject(function($compile, $rootScope, $window) {
scope = $rootScope.$new();
window = $window;
element = $compile('<a reload href="/"></a>')(scope);
scope.$digest();
}));
it('should reload the page with the right url', function() {
var compiledElementScope = element.isolateScope();
compiledElementScope.reload();
expect(window.location.href).toEqual('/');
});
});
UPDATED
Instead of doing any of this, I can just use target="_self" on links which triggers a full page reload.
Your test would be more natural if you will trigger an event.
element.triggerHandler('click');
Then your handler will be called by internal angular mechanisms.
Also your test will be failed when you trying to update window.location, because it causes full page reload. So, you need to mock window here:
var fakeWindow, element, scope;
beforeEach(module('myModule'));
beforeEach(function() {
// define fake instance for $window
module(function($provide) {
fakeWindow = {location: {}};
$provide.value('$window', fakeWindow)
});
});
beforeEach(inject(function($compile, $rootScope) {
scope = $rootScope.$new();
element = $compile('<a reload href="/"></a>')(scope);
scope.$digest();
}));
it('should reload the page with the right url', function() {
var event = jasmine.createSpyObj('clickEvent', ['preventDefault']);
event.type = 'click';
element.triggerHandler(event)
expect(fakeWindow.location.href).toEqual('/');
expect(event.preventDefault).toHaveBeenCalled();
});
Now you can safely test your behaviour without side-effects.
I'm having an issue with a test (Karma+Mocha+Chai). I'm testing a pretty simple directive, part of a bigger angular module (webapp). The issue is that, when calling $timeout.flush() in my test, the module/app get's initialized and makes a request to get the template for the homepage. As $httpBackend (part of ng-mock) is not expecting any request it fails:
Unexpected request: GET /partials/homepage
No more request expected
$httpBackend#/Users/doup/Sites/projects/visitaste-web/bower_components/angular-mocks/angular-mocks.js:1208:1
...
continues
How is possible that a directive is triggering the module initialization?? Any idea how to avoid this issue? Preferably without cutting this code into another module.
Thanks!
Here the directive:
module.exports = ['$timeout', function ($timeout) {
return {
restrict: 'A', // only for attribute names
link: function ($scope, element, attrs) {
$scope.$on('vtFocus', function (event, id) {
if (id === attrs.vtFocus) {
$timeout(function () {
element.focus();
}, 0, false);
}
});
}
};
}];
And here the actual test:
describe('vtFocus', function() {
var $scope, $timeout, element;
beforeEach(module('visitaste'));
beforeEach(inject(function ($injector, $compile, $rootScope) {
$scope = $rootScope.$new();
$timeout = $injector.get('$timeout');
element = angular.element('<input vt-focus="my-focus-id"/>');
$compile(element)($scope);
}));
it('should focus the element when a vtFocus event is broadcasted with the correct focus ID', function () {
expect(element.is(':focus')).to.be.false;
$scope.$broadcast('vtFocus', 'my-focus-id');
$timeout.flush();
expect(element.is(':focus')).to.be.true;
});
it('should NOT focus the element when a vtFocus event is broadcasted with a different focus ID', function () {
expect(element.is(':focus')).to.be.false;
$scope.$broadcast('vtFocus', 'wrong-id');
$timeout.flush();
expect(element.is(':focus')).to.be.false;
});
});
This is the part where I configure UI-Router for path / in app.config():
// ...
$stateProvider
.state('homepage', {
url: '/',
templateUrl: '/partials/homepage',
});
// ...
As a workaround, I just moved the directives into it's own module visitaste.directives and loaded that module in the test, so now it's sepparated from UI-Router and it doesn't trigger a request to the template.
Still I'll wait for another solution, before I accept this answer.
describe('vtFocus', function() {
var $scope, $timeout, element;
beforeEach(module('visitaste.directives'));
beforeEach(inject(function ($compile, $rootScope, _$timeout_) {
$scope = $rootScope.$new();
$timeout = _$timeout_;
element = angular.element('<input vt-focus="my-focus-id"/>');
element.appendTo(document.body);
$compile(element)($scope);
}));
afterEach(function () {
element.remove();
});
it('should focus the element when a vtFocus event is broadcasted with the correct focus ID', function () {
expect(document.activeElement === element[0]).to.be.false;
$scope.$broadcast('vtFocus', 'my-focus-id');
$timeout.flush();
expect(document.activeElement === element[0]).to.be.true;
});
it('should NOT focus the element when a vtFocus event is broadcasted with a different focus ID', function () {
expect(document.activeElement === element[0]).to.be.false;
$scope.$broadcast('vtFocus', 'wrong-id');
expect(document.activeElement === element[0]).to.be.false;
});
});
I'm using Videogular in an Angular app I'm working on. I wrote a plugin directive for it that listens to an event broadcast from $rootScope, and, if a video is playing, automatically pauses it when the event is broadcast.
omgYesDirectives.directive('vgAutoPause',
['$rootScope',
function($rootScope) {
return {
restrict: 'E',
require: '^videogular',
link: function($scope, $elem, $attr, $API) {
$rootScope.$on('onGameEnable', onGameEnable);
function onGameEnable(event, data)
{
$API.pause();
}
}
}
}
]);
But I'm having trouble figuring out how to unit test it. I can't seem to properly inject Videogular itself into my test. I've tried variations on this:
describe('vgAutoPause', function () {
var scope, compile, elm, videogular;
beforeEach(inject(function ($compile, $rootScope, videogularDirective) {
videogular = videogularDirective;
scope = $rootScope.$new();
compile = $compile;
}));
it('should instantiate as an HTML element', function () {
elm = compile('<videogular><vg-auto-pause></vg-auto-pause></videogular>')(scope);
scope.$digest();
expect(elm.html()).toContain('vg-auto-pause');
});
});
but Karma keeps complaining about it:
Error: [$injector:unpr] Unknown provider: videogularDirectiveProvider <- videogularDirective
Am I doing it wrong? Do you have any thoughts or suggestions on what I ought to be doing instead?
In AngularJS You can't inject a directive, you must create the HTML and then $compile it to start the $digest cycle.
For example, this is a simple videogular testing:
'use strict';
describe('Directive: Videogular', function () {
var element;
var scope;
beforeEach(module('myApp'));
beforeEach(inject(function ($compile, $rootScope) {
scope = $rootScope;
element = angular.element("<div><videogular><video></video></videogular></div>");
$compile(element)($rootScope);
}));
describe("videogular", function() {
it("should have videogular", function() {
scope.$digest();
expect(element.html()).toContain('<video></video>');
});
});
});
Maybe you need to understand first how to test directives, there's a lot of good info out there. You can start with this links:
http://docs.angularjs.org/guide/unit-testing
https://egghead.io/lessons/angularjs-unit-testing-a-directive
http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/
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();
});
});