Question

我在我正在开发的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

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

Answer 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>');
        });
    });
});

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

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

1 个答案: