33

分度器で角度アプリをテストしたい。アプリには、サーバーと通信する API モジュールがあります。これらのテスト中に、この API モジュールをモックしたいと思います。完全な統合テストはしたくありませんが、API からの期待値を使用してユーザー入力からテストします。これにより、クライアントのテストが高速化されるだけでなく、接続エラーなどのエッジ ケースをテストできるようになります。

分度器でこれを行うにはどうすればよいですか？統合テストのセットアップを開始しました。

npm 分度器モジュールを使用し、セレンをインストールし、デフォルトの構成を調整し、onProtractorRunner.jsを使用してセットアップが機能することを確認しました。

おすすめのいじめ方は？モックはブラウザ内で行う必要があり、テスト ファイルで直接行う必要はないと思います。テスト ファイル内のコマンドは分度器固有のものであり、セレン ランナーに送信されると想定しています。したがって、セッション中およびテスト中に JavaScript オブジェクトを共有することはできません。

sinon.jsのようなスパイ ライブラリが必要になると思いますか、それとも分度器に既に含まれていますか?

編集:分度器の問題トラッカーでこの問題について読みました。これは、それを行う方法である可能性があります。基本的に、テストでモックモジュールを作成し、ブラウザ/アプリケーションスコープで実行するために送信します。

編集：これはより有望な問題です。最初の話は、Angular App にモックを追加することについてです。2 つ目は、バックエンドのモックについてです。

この場合、Angular アプリは元の形式のままです。ただし、これは現在、非推奨の ng-scenarios でのみ機能します。

4

8 に答える 8

4

分度器テスト内から $httpBackend、コントローラー、またはサービスにアクセスできないため、別の角度モジュールを作成し、テスト中にブラウザーに含めることをお勧めします。

  beforeEach(function(){
    var httpBackendMock = function() {
      angular.module('httpBackendMock', ['ngMockE2E', 'myApp'])
        .run(function($httpBackend) {
          $httpBackend.whenPOST('/api/packages').respond(200, {} );
        })
    }
    browser.addMockModule('httpBackendMock', httpBackendMock)
  })

ngMockE2E を使用すると、アプリケーションの偽のバックエンド実装を作成できます。これは、トピックに関するより詳細な投稿ですhttp://product.moveline.com/testing-angular-apps-end-to-end-with-protractor.html

于 2014-08-21T02:51:57.020 に答える
2

この時点では自分で試したことはありませんが、Angular は E2E テスト用に $httpBackend のモックを提供しています。

http://docs.angularjs.org/api/ngMockE2E/service/$httpBackend

したがって、上記のドキュメントページから取得すると、テストの前に次のようなものを使用できると思われます

beforeEach(function() {
  $httpBackend.whenGET('/remote-url').respond(edgeCaseData);
});
于 2014-03-27T09:17:16.243 に答える
1

分度器でいくつかのサービスをモックしようとしてきましたが、いくつかのブログを見た後、自分に合ったソリューションにたどり着きました。アイデアは、重いモッキングを行うことではなく、いくつかのエラー応答を生成することです。フィクスチャについては、API サーバーにバックエンドを設定するためのバックドアが既にあるためです。

このソリューションでは、 を使用して$provide.decorator()一部のメソッドを変更するだけです。テストでの使用方法は次のとおりです。

it('should mock a service', function () {
    app.mock.decorateService({
        // This will return a rejected promise when calling to "user"
        // service "login()" method resolved with the given object.
        // rejectPromise() is a convenience method
        user: app.mock.rejectPromise('login', { type: 'MockError' }),

        // You can decorate the service
        // Warning! This code get's stringified and send to the browser
        // it does not have access to node
        api: function ($delegate, $q) {
            $delegate.get = function () {
                var deferred = $q.defer();

                deferred.resolve({ id: 'whatever', name: 'tess' });

                return defer.promise;
            };

            return $delegate;
        },

        // Internally decorateService converts the function to string
        // so if you prefer you can set an string. Usefull for creating your
        // own helper methods like "rejectPromise()".
        dialog: [
            "function ($delegate, $window) {",
                "$delegate.alert = $window.alert;",
                "return $delegate;",
            "}"
        ].join('\n')
    });

    // ...

    // Important!
    app.mock.clearDecorators();
});

ここにコード：

App.prototype.mock = {
    // This must be called before ".get()"
    decorateService: function (services) {
        var code = [
            'var decorer = angular.module("serviceDecorator", ["visitaste"]);',
            'decorer.config(function ($provide) {'
        ];

        for (var service in services) {
            var fn = services[service];

            if (_.isFunction(fn)) {
                code.push('$provide.decorator("'+ service +'", '+ String(fn) +');');
            } else if (_.isString(fn)) {
                code.push('$provide.decorator("'+ service +'", '+ fn +');');
            }
        }

        code.push('});');

        browser.addMockModule('serviceDecorator', code.join('\n'));
    },
    clearDecorators: function () {
        browser.clearMockModules();
    },
    rejectPromise: function (method, error, delay) {
        return [
            'function ($delegate, $q) {',
                '$delegate.'+ method +' = function () {',
                    'var deferred = $q.defer();',
                    '',
                    'setTimeout(function () {',
                        'deferred.reject('+ JSON.stringify(error) +');',
                    '}, '+ (delay || 200) +');',
                    '',
                    'return deferred.promise;',
                '};',
                '',
                'return $delegate;',
            '}'
        ].join('\n');
    }
};
于 2014-07-13T10:30:21.043 に答える
1

成功とエラーのシナリオを処理するのに役立つ、少しカスタマイズ可能なモック モジュールを作成しました。

https://github.com/unDemian/protractor-mock

于 2014-04-10T19:28:14.700 に答える