1

最初の Angular ディレクティブを作成していて、エンド ツー エンドのテストを行いたいのですが、バックエンドへの呼び出しをモックする方法がわかりません。

テストを行うために ng-scenario と karma を使用しています

// Scenarios relating to the posting of the timesheets

describe('Post timesheet', function(){

    it("after post message should vanish", function(){
        browser().navigateTo('/examples/directive.html')
        element('#stop').click();
        expect(element('#message:visible').count()).toBe(1)
        element('#post').click();
        expect(element('#message:visible').count()).toBe(0)
    });



});

これが私のモジュールです

angular.module('timesheet', ['timer'])
    .directive('timesheet', function($http) {
        return {
            restrict: 'EA',
            scope: {
                postUrl: '@'    // Allow passing a variable
            },
            controller: function($scope, $element, $attrs, $transclude){
                $scope.timerRunning = true;
                $scope.toPost = false;
                $scope.time = null;

                $scope.startTimer = function(){
                    $scope.$broadcast('timer-start');
                    $scope.timerRunning = true;
                };

                $scope.stopTimer = function(){
                    $scope.$broadcast('timer-stop');
                    $scope.timerRunning = false;
                    $scope.message = '';
                    $scope.toPost = true;
                };

                $scope.postTimesheet = function(){
                    // Compile the data into JSON
                    data = {message: this.message, hrs: time.hours, mins: time.minutes, secs: time.seconds}

                    // Post the timesheet to the backend with supplied URL
                    $http.post(this.postUrl, data).
                        success( function(response, status, headers, config) {
                            $scope.toPost = false;
                        })

                }
            },
            templateUrl: '../templates/timesheet.html'

        };
    });

$http 行をコメントアウトすると、テストに合格します。それでは、エンド ツー エンド テストで $http 呼び出しをモックアウトする最良の方法は何でしょうか?

アップデート

ngMockE2E を読み込もうとしています

リクエストをモックする myAppDev.js ファイルを作成しました

console.log('myAppDev enter');
angular.module('myAppDev', ['timesheet', 'ngMockE2E'])
    .run(function($httpBackend){
        console.log('myAppDev running');
        $httpBackend.whenPOST('/test/e2e/timesheets.json').respond(200)
        $httpBackend.whenGET().passThrough();
    });

E2E テスト用のすべてをロードする runner.html ファイル

<html ng-app="myApp">
  <head>
    <title>Directive test</title>
  </head>

  <body>
    <timesheet post-url="timesheets.json" />


    <script type="text/javascript" src="../../app/bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="../../app/bower_components/angular-mocks/angular-mocks.js"></script>
    <script type="text/javascript" src="../../app/bower_components/angular-timer/app/js/timer.js"></script>
    <script type="text/javascript" src="../../lib/timesheet.js"></script>
    <script type="text/javascript" src="../../examples/myApp.js"></script>
    <script type="text/javascript" src="myAppDev.js"></script>
  </body>
</html>

そして、代わりにランナーファイルに移動するようにテストを変更しました。

beforeEach(function(){
    browser().navigateTo('/test/e2e/runner.html')
});

モッキングが機能していないため、まだエラーが発生しています。

4

0 に答える 0