I'm having trouble testing an Angular directive due to encountering the following unexpected error:
Error: Unexpected request: GET /api/players/info
It seems that the issue may stem from references to my controller within the directive definition object, but I'm not sure how to resolve it. Below is the code for my directive and the corresponding test:
The directive (playerInfo.directive.js):
'use strict';
angular.module('gameApp')
.directive('playerInfo', playerInfo);
function playerInfo() {
var directive = {
link: link,
restrict: 'E',
templateUrl: '/app/player/playerInfo.directive.html',
controller: 'PlayerInfoController',
controllerAs: 'playerInfo'
};
return directive;
function link(scope, element) {
var address = angular.element(element[0].getElementsByClassName('blur'));
address.on('click', function() {
address.css({'-webkit-filter': 'none'});
});
}
}
The test (playerInfoSpec.js):
'use strict';
describe('playerInfo directive', function() {
var element;
var scope;
beforeEach(module('gameApp'));
beforeEach(inject(function($templateCache) {
var templateUrl = '/app/player/playerInfo.directive.html';
var asynchronous = false;
var req = new XMLHttpRequest();
req.onload = function() {
$templateCache.put(templateUrl, this.responseText);
};
req.open('get', '/base' + templateUrl, asynchronous);
req.send();
}));
beforeEach(inject(function($rootScope, $compile) {
scope = $rootScope.$new();
element = '<player-info></player-info>';
element = $compile(element)(scope);
}));
it('should replace the element with the appropriate content', function() {
scope.$digest();
expect(element.html()).toContain("Score:");
});
});
In my controller, a service is used to make a GET request to /api/players/info. The error related to the reference in the directive definition object might be linked to this.