Currently, I am in the process of writing tests for a service responsible for updating meta information on a page.
mod.service('MetaSrv', ['$rootScope', '$rootElement', function ($rootScope, $rootElement){
return {
updateMetaTitle: function(contents) {
$rootScope.metaTitle = contents;
},
updateMetaElement: function(type, contents) {
var metaEl = angular.element($rootElement.find('meta[name="'+ type +'"]')[0]);
metaEl.attr('content', contents);
}
};
}]);
To get started, I want to test each of these functions individually. The test structure is as follows:
describe('sets', function() {
it('updates the meta title element using $rootscope', function() {
MetaSrv.updateMetaTitle('Some Title');
expect(scope.metaTitle).toBe('Some Title');
});
it('updates the meta description element using $rootElement', function() {
MetaSrv.updateMetaElement('description', 'Some Description');
var el = angular.element(rootElement.find('meta[name="description"]')[0]);
expect(el.attr('content')).toBe('Some Description');
});
});
In order to run these tests successfully, I need to utilize $rootScope for the first test and then access $rootElement for the second test. This is how the describe block is structured:
var MetaSrv, scope, rootElement, element;
beforeEach(function() {
module('mod');
inject(function (_MetaSrv_, $rootScope, $rootElement) {
MetaSrv = _MetaSrv_;
scope = $rootScope.$new();
rootElement = $rootElement;
});
});
While the first test works as expected, the second test that involves $rootElement encounters issues locating the meta tags. I'm uncertain about the best approach to mock the $rootElement dependency for testing the change in meta information.