Let's discuss a straightforward directive:
'use strict';
angular
.module('app')
.directive('ngEmailMask', ngEmailMask);
function ngEmailMask() {
var directive = {
replace: true,
restrict: 'EA',
scope: {
user: '@',
host: '@'
},
template: '<a href="mailto:{{user}}@{{host}}">{{user}}@{{host}}</a>'
};
return directive;
}
The goal is to create a Karma unit test that confirms the directive generates the correct HTML. Here’s what we have so far:
describe('ngEmailMask', function() {
// Bindable members
var $compile,
$rootScope;
// Load module
beforeEach(angular.mock.module('app'));
// Bind injected references to local variables
beforeEach(inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
// Verify service returns
it('Replaces the tag with the correct HTML', function() {
// Compile element
var element = $compile('<ng-email-mask data-user="test" data-host="gmail.com"></ng-email-mask>')($rootScope);
// Evaluate scope
$rootScope.$digest();
console.log(element.html());
});
});
Following Angular's guidelines as outlined here, I encounter an unexpected error in my example:
Error: Unexpected request: GET /app/home/home.htmlThis error pertains to paths outside the directive's scope and could fluctuate due to other features like UI Router states. How can I conduct tests on this directive without being disrupted by irrelevant errors about various files?