I need to test a directive in my AngularJS app called gmGravatar. This directive is responsible for displaying a player's Gravatar image on the screen.
'use strict';
angular.module('gameApp')
.directive('gmGravatar', gmGravatar);
gmGravatar.$inject = ['$routeParams', 'playersService'];
function gmGravatar() {
var directive = {
restrict: 'E',
template: '<img gravatar-src="gravatar.email" alt="" id="gravatar" class="img-rounded" style="margin: auto; display: block;">',
controller: function($routeParams, playersService) {
var vm = this;
var playerId = $routeParams.playerId;
playersService.getPlayerInfo({
playerId: playerId
}).$promise.then(function(player) {
vm.email = player.email;
});
},
controllerAs: 'gravatar'
};
return directive;
}
As I work on setting up the unit test for this directive, I've managed to pass my initial assertion test. The challenge now lies in testing the vm.email property:
'use strict';
describe('gmGravatar directive', function() {
var element;
var scope;
var $httpBackend;
beforeEach(module('gameApp'));
beforeEach(module('templates'));
beforeEach(inject(function($rootScope, $compile, _$httpBackend_) {
scope = $rootScope.$new();
element = '<gm-gravatar></gm-gravatar>';
element = $compile(element)(scope);
$httpBackend = _$httpBackend_;
$httpBackend.whenGET('/api/players/playerInfo').respond(200, '');
scope.$digest();
}));
it('should replace the element with the appropriate content', function() {
expect(element.html()).toContain('<img gravatar-src="gravatar.email"');
expect(scope.email).toEqual('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cda7a2a88da8b5aca0bda1a8e3aea2a0">[email protected]</a>');
});
});