具有要求的单元测试插件指令答案

【问题标题】：Unit testing plugin directives with requirements具有要求的单元测试插件指令
【发布时间】：2014-03-13 17:23:49
【问题描述】：

我在我正在开发的 Angular 应用程序中使用 Videogular。我为它编写了一个插件指令，它监听来自 $rootScope 的事件广播，如果正在播放视频，则在事件广播时自动暂停它。

omgYesDirectives.directive('vgAutoPause',
        ['$rootScope',
                function($rootScope) {
                        return {
                                restrict: 'E',
                                require: '^videogular',
                                link: function($scope, $elem, $attr, $API) {

                                        $rootScope.$on('onGameEnable', onGameEnable);

                                        function onGameEnable(event, data)
                                        {
                                                $API.pause();
                                        }
                                }
                        }
                }
        ]);

但我无法弄清楚如何对其进行单元测试。我似乎无法将 Videogular 本身正确地注入到我的测试中。我已经尝试过这方面的变化：

describe('vgAutoPause', function () {
        var scope, compile, elm, videogular;

        beforeEach(inject(function ($compile, $rootScope, videogularDirective) {
                videogular = videogularDirective;
                scope = $rootScope.$new();
                compile = $compile;
        }));

        it('should instantiate as an HTML element', function () {
                elm = compile('<videogular><vg-auto-pause></vg-auto-pause></videogular>')(scope);
                scope.$digest();
                expect(elm.html()).toContain('vg-auto-pause');
        });
});

但 Karma 一直在抱怨：

Error: [$injector:unpr] Unknown provider: videogularDirectiveProvider <- videogularDirective

我做错了吗？你对我应该做什么有什么想法或建议吗？

【问题讨论】：

标签： angularjs videogular

【解决方案1】：

在 AngularJS 中你不能注入指令，你必须创建 HTML 然后$compile 它来启动$digest 循环。

例如，这是一个简单的videogular 测试：

'use strict';
describe('Directive: Videogular', function () {
    var element;
    var scope;

    beforeEach(module('myApp'));

    beforeEach(inject(function ($compile, $rootScope) {
        scope = $rootScope;
        element = angular.element("<div><videogular><video></video></videogular></div>");
        $compile(element)($rootScope);
    }));

    describe("videogular", function() {
        it("should have videogular", function() {
            scope.$digest();
            expect(element.html()).toContain('<video></video>');
        });
    });
});

也许您首先需要了解如何测试指令，那里有很多很好的信息。您可以从以下链接开始：

【讨论】：

也许我仍然缺少一些东西。我正在创建和编译 HTML；我只是在 it() 块中而不是在 beforeEach() 中执行它。不过，这不应该有任何区别，不是吗？问题是我的指令是 videogular 的插件，但我不知道如何为单元测试提供 videogular。如果我不注入 Videogular，Karma 会抱怨： > 错误：找不到指令“vgAutoPause”所需的控制器“videogular”！但是如果我确实注入了 Videogular，它仍然会抱怨：> 错误：[$injector:unpr] 未知提供者：videogularProvider
您可能需要在 beforeEach() 中 $compile videogular 并在 it() 中将指令（插件）添加到 videogular。您应该先添加 HTML，然后 $compile 才能正确启动 $digest 循环。
$compile 函数本身不会启动摘要循环。为此，您需要明确调用 scope.$digest。