1

シンプルなバックエンドを Angular アプリに接続しようとしていて、過去のアプリで良い経験をしたので、Firebase を使用することにしました。

ブラウザで Firebase をロードすると、アプリは適切に Firebase をロードしますが、カルマによる単体テストが失敗する壁にぶつかりました。

アプリのカスタム ドメイン名を設定できる「設定」画面のディレクティブとコントローラーを初期化しました。

最も単純な形式では、次のようになります (完全なソースを参照)。

settingsController = function($scope, $element, $log, angularFire) {
    var domain = $scope.domain = "";
    var placeholder = $scope.placeholder = "e.g. www.strummer.io";
    console.log(angularFire);
    $scope.log = $log;
};

nav.directive('settings', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: { domain: '@' },
        controller: settingsController,
        templateUrl: 'static/nav/settings.html',
        replace: true
    };
});

ブラウザーにロードすると、console.log コマンドを介して angularFire オブジェクトが表示されます。

ただし、(カルマ/ジャスミン経由で) テストを実行すると、次のエラーが発生します。

Error: Unknown provider: angularFireProvider <- angularFire
        at Error (<anonymous>)
        at /Users/dickason/code/strummer/builder/static/lib/angular.js:2696:15
        at Object.getService [as get] (/Users/dickason/code/strummer/builder/static/lib/angular.js:2824:39)
        at /Users/dickason/code/strummer/builder/static/lib/angular.js:2701:45
        at getService (/Users/dickason/code/strummer/builder/static/lib/angular.js:2824:39)
        at invoke (/Users/dickason/code/strummer/builder/static/lib/angular.js:2842:13)
        at Object.instantiate (/Users/dickason/code/strummer/builder/static/lib/angular.js:2874:23)
        at /Users/dickason/code/strummer/builder/static/lib/angular.js:4759:24
        at /Users/dickason/code/strummer/builder/static/lib/angular.js:4338:17
        at forEach (/Users/dickason/code/strummer/builder/static/lib/angular.js:138:20)
    Error: Declaration Location
        at window.jasmine.window.inject.angular.mock.inject (/Users/dickason/code/strummer/builder/static/lib/angular-mocks.js:1744:25)
    at null.<anonymous> (/Users/dickason/code/strummer/builder/static/nav/nav.spec.js:158:13)
    Error: Circular dependency:
        at Error (<anonymous>)
        at getService (/Users/dickason/code/strummer/builder/static/lib/angular.js:2817:17)
        at invoke (/Users/dickason/code/strummer/builder/static/lib/angular.js:2842:13)
        at Object.instantiate (/Users/dickason/code/strummer/builder/static/lib/angular.js:2874:23)
        at /Users/dickason/code/strummer/builder/static/lib/angular.js:4759:24
        at null.<anonymous> (/Users/dickason/code/strummer/builder/static/nav/nav.spec.js:170:20)
        at Object.invoke     (/Users/dickason/code/strummer/builder/static/lib/angular.js:2864:28)
        at workFn (/Users/dickason/code/strummer/builder/static/lib/angular-    mocks.js:1758:20)

問題のテスト セットアップは次のとおりです (完全なソースを参照してください)。

describe("directive: settings", function() {
        var scope;

        // Setup DOM
        var html, element, compiled;
        beforeEach(function() {
            html = '' +
            '<settings></settings>' +

            inject(function($compile, $rootScope) {
                scope = $rootScope;
                element = angular.element(html);
                compiled = $compile(element)(scope);
                scope.$digest();
            });
        });


        // Setup Controller
        var ctrl;
        beforeEach(inject(function($controller) {
            ctrl = $controller('settingsController', {$scope: scope, $element: null});
        }));

        it("Should retrieve the domain from the datastore", inject(function($controller, $rootScope) {
            // Test Controller

        }));

グーグルで調べた後、これはangularFireがコントローラーに注入される方法と関係があると思われます。

私は次の解決策を試しました：

settingsController.$inject = ['$scope', '$element', '$log', 'angularFire'];

と

settingsController = ['$scope', '$element', '$log', 'angularFire', function($scope, $element, $log, angularFire) { ... }];

どちらも同じエラーを残しました。

任意の提案をいただければ幸いです。

4

2 に答える 2

3

試行錯誤を繰り返しながら、それを理解しました。

アプリが初期化されると、firebase がメイン モジュール (「nav」) と共に挿入されます。

ただし、テストが初期化されると、何らかの理由で firebase が挿入されません。各テストの前に手動でモジュールとして挿入することで、「unknownProvider」エラーを回避できます。

それ以外の：

beforeEach(module('nav'));

使用する：

beforeEach(module('nav', 'firebase'));

it('...')このアプローチを採用すると、各句の間にコントローラーに「angularFire」を挿入できます。

it("Should retrieve the domain from the datastore", inject(function($controller, $rootScope, angularFire) {
于 2013-09-11T22:41:24.743 に答える