2

私はangular-ui/bootstrapからのダイアログを使用するコントローラーを持っています：

   function ClientFeatureController($dialog, $scope, ClientFeature, Country, FeatureService) {

        //Get list of client features for selected client (that is set in ClientController)
        $scope.clientFeatures = ClientFeature.query({clientId: $scope.selected.client.id}, function () {
            console.log('getting clientfeatures for clientid: ' + $scope.selected.client.id);
            console.log($scope.clientFeatures);
        });

        //Selected ClientFeature
        $scope.selectedClientFeature = {};

        /**
         * Edit selected clientFeature.
         * @param clientFeature
         */
        $scope.editClientFeature = function (clientFeature) {
            //set selectedClientFeature for data binding
            $scope.selectedClientFeature = clientFeature;

            var dialogOpts = {
                templateUrl: 'partials/clients/dialogs/clientfeature-edit.html',
                controller: 'EditClientFeatureController',
                resolve: {selectedClientFeature: function () {
                    return clientFeature;
                } }
            };
            //open dialog box
            $dialog.dialog(dialogOpts).open().then(function (result) {
                if (result) {
                    $scope.selectedClientFeature = result;
                    $scope.selectedClientFeature.$save({clientId: $scope.selectedClientFeature.client.id}, function (data, headers) {
                        console.log('saved.');
                    }, null);
                }
            });
        };
    });

私はテストにほぼ完全に慣れていないので、2つのことをテストする必要があるかもしれないと考えました。

  1. $ scope.editClientFeature（）が呼び出されたときにダイアログが開くこと
  2. その$saveは、ダイアログが閉じられた後に正常に呼び出され、「結果」を返します。

私の本当にめちゃくちゃなテストは次のようになります：

describe('ClientFeatureController', function () {
    var scope, $dialog, provider;

    beforeEach(function () {
            inject(function ($controller, $httpBackend, $rootScope, _$dialog_) {
            scope = $rootScope;
            $dialog = _$dialog_;

            //mock client
            scope.selected = {};
            scope.selected.client = {
                id: 23805
            };

            $httpBackend.whenGET('http://localhost:3001/client/' + scope.selected.client.id + '/clientfeatures').respond(mockClientFeatures);
            $controller('ClientFeatureController', {$scope: scope});
            $httpBackend.flush();
        });
    });


    it('should inject dialog service from angular-ui-bootstrap module', function () {
        expect($dialog).toBeDefined();
        console.log($dialog); //{}
    });

    var dialog;

    var createDialog = function (opts) {
        dialog = $dialog.dialog(opts);
    };

    describe('when editing a clientfeature', function () {
        createDialog({});
        console.log(dialog); //undefined
//        var res;
//        var d;
//        beforeEach(function () {
//            var dialogOpts = {
//                template: '<div>dummy template</div>'
//            };
//            console.log(dialog);
//            d = $dialog.dialog(dialogOpts);
//            d.open();
//        });
//
//        it('should open a dialog when editing a client feature', function () {
//            expect(d.isOpen()).toBe(true);
//        });
    });

});

現在の当面の問題は、ダイアログを作成/開くことができないことです。次のエラーが発生します。

Chrome 25.0 (Mac) ClientFeatureController when editing a clientfeature encountered a declaration exception FAILED
    TypeError: Cannot call method 'dialog' of undefined

誰かがすでに同様のユースケースのテストを作成していて、私がかなり迷っているので、例を提供してくれるといいですね。

ありがとう、ショーン

4

4 に答える 4

6

私は今まで同じ問題に苦しんでいました。githubリポジトリをトローリングした後、ダイアログテストを見つけ、それを開始点として使用しました。

var $dialog,$scope,$httpBackend;
  beforeEach(module('ui.bootstrap.dialog'));
  beforeEach(function(){
    inject(function (_$dialog_, _$httpBackend_, $controller){
      $dialog = _$dialog_;
      $httpBackend = _$httpBackend_;
      $httpBackend.expectGET('/appServer/list')
        .respond([{
            id:1,
            name:'test1'
          },
          {
            id:2,
            name:'test2'
          },
          {
            id:3,
            name:'test3'
          }]);


      //setup controller scope
      scope = {};
      ServerCtrl = $controller('ServerCtrl', {
        $scope: scope,
        $dialog:$dialog
      });
    });
  });
于 2013-04-25T16:44:31.610 に答える
3

私も適切なモックを好みます。利用できない場合は、サービスにパッチを適用します

これをテストするには：

$dialog.messageBox(title, msg, btns)
   .open()
   .then(function (result) {
       if (result == 'ok') {
            // block executed if user click OK
       }
});

次のように$dialogにパッチを適用できます。

$dialog.messageBox = function (title, msg, btns) {
    return {
        open: function () {
            return {
                 then: function (callback) {
                      callback('ok'); // 'ok' will be set to param result
                 }
             }
        }
    }
 };
于 2013-04-14T10:06:33.207 に答える
2

個人的には、すべてのサービスをモックアウトしようとしています。ui-bootstrapプロジェクトが$dialogモックを提供しない場合は、そこでバグチケットを開いて、バグチケットを要求する必要があります。ただし、作成は簡単です。

モックサービスには、promiseを返すだけの偽のメソッドが必要です。また、同期テストを簡単に実行できるように、すべての非同期メソッドをフラッシュするメソッドも提供する必要があります。

于 2013-03-19T02:59:09.067 に答える
2

ダイアログのモックを自分で書くのが最も明確だと思います。これは、選択されている「はい」をシミュレートするためにダイアログをモックアウトする例です。

テスト中のコード

.controller('AdminListingCtrl', function AdminListingController($scope, $dialog, houseRepository) {
    $scope.houses = houseRepository.query();
    $scope.remove = function (house) {
        var dlg = $dialog.messageBox('Delete house', 'Are you sure?', [
            {label: 'Yep', result: 'yes'},
            {label: 'Nope', result: 'no'}
        ]);
        dlg.open().then(function (result) {
            if (result == 'yes') {
                houseRepository.remove(house.id);
                $scope.houses = houseRepository.query();
            }
        });
    };
}

テスト

    describe('when deleting a house', function () {

        var fakeDialog = {
            open: function()
            {
                return {
                    then: function(callback) {
                        callback("yes");
                    }
                };
            }
        };

        beforeEach(inject(function($dialog) {
            spyOn($dialog, 'messageBox').andReturn(fakeDialog);
        }));

        it('should call the remove method on the houseRepository', function () {
            scope.remove({id: 99});
            expect(houseRepository.remove).toHaveBeenCalledWith(99);
        });

        // etc
    });
于 2013-07-16T14:08:02.577 に答える