测试AngularJS服务 - 模拟$rootElement和$rootScope

Question

我目前正在为更新页面上元信息的服务编写一些测试。

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);
    }
};
}]);

我想测试这些函数中的每一个作为起点。测试如下所示：

describe('sets', function() {
    it('meta title element using $rootscope', function() {
        MetaSrv.updateMetaTitle('Some Title');
        expect(scope.metaTitle).toBe('Some Title');
    });
    it('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');
    });
});

我需要能够在第一次测试中使用$rootScope，然后需要访问$rootElement进行第二次测试。描述块如下：

var MetaSrv, scope, rootElement, element;
beforeEach(function() {
    module('mod');
    inject(function (_MetaSrv_, $rootScope, $rootElement) {
        MetaSrv = _MetaSrv_;
        scope = $rootScope.$new();
        rootElement = $rootElement;
    });
});

目前第一个测试工作正常。使用$rootElement的第二个测试无法正常工作，它无法在$rootElement上找到元标记。我不确定如何模拟$rootElement依赖性以测试元信息更改。

Answer 1

这是更新的描述：

var MetaSrv, scope, rootElement, element;
element = '<div><title ng-bind-template="{{ metaTitle }}">Initial Title</title>';
element += '<meta name="description" content="Initial Description" /></div>';
beforeEach(function() {
    module('mod');
    module(function($provide) {
        $provide.value('$rootElement', angular.element(element));
    });
    inject(function (_MetaSrv_, $rootScope, $rootElement) {
        MetaSrv = _MetaSrv_;
        scope = $rootScope;
        rootElement = $rootElement;
    });
});

创建了一个包含所需 html 的元素，并使用提供程序将新元素用作$rootElement 。测试现在使用这个新$rootElement，它允许元服务更新和检查测试所需的值。

所有测试现在都按预期运行。