0

私が取り組んでいる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');
        });
});

しかし、カルマはそれについて不平を言い続けています：

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

私はそれを間違っていますか？代わりに私がすべきことについて何か考えや提案はありますか?

4

1 に答える 1

0

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

最初にディレクティブをテストする方法を理解する必要があるかもしれませんが、良い情報がたくさんあります。次のリンクから開始できます。

于 2014-03-16T11:28:15.477 に答える