程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了在AngularJS单元测试中模拟$ modal大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决在AngularJS单元测试中模拟$ modal?

开发过程中遇到在AngularJS单元测试中模拟$ modal的问题如何解决?下面主要结合日常开发的经验,给出你关于在AngularJS单元测试中模拟$ modal的解决方法建议,希望对你解决在AngularJS单元测试中模拟$ modal有所启发或帮助;

当您在beforeEach中监视$ modal.open函数时,

spyOn($modal, 'open').andReturn(fakeModal);

or

spyOn($modal, 'open').and.returnValue(fakeModal); //For Jasmine 2.0+

您需要返回$ modal.open通常返回的内容的模拟,而不是$ modal的模拟,该模拟不包含openfakeModal模拟中列出的函数。伪模式必须具有result包含then用于存储回调的函数的对象(单击“确定”或“取消”按钮时将调用该函数)。它还需要一个close函数(模拟在模态上单击“确定”按钮)和一个dismiss函数(模拟在模态上单击“取消”按钮)。在closedismiss调用时函数调用必要的回调函数。

将更fakeModal改为以下内容,单元测试将通过:

var fakeModal = {
    result: {
        then: function(confirmCallBACk, cancelCallBACk) {
            //Store the callBACks for later when the user clicks on the OK or Cancel button of the dialog
            this.confirmCallBACk = confirmCallBACk;
            this.cancelCallBACk = cancelCallBACk;
        }
    },
    close: function( item ) {
        //The user clicked OK on the modal dialog, call the stored confirm callBACk with the SELEcted item
        this.result.confirmCallBACk( item );
    },
    dismiss: function( type ) {
        //The user clicked cancel on the modal dialog, call the stored cancel callBACk
        this.result.cancelCallBACk( type );
    }
};

此外,您可以通过在取消处理程序中添加一个要测试的属性来测试取消对话框的情况,在这种情况下$scope.canceled

$scope.modalinstance.result.then(function (SELEctedItem) {
    $scope.SELEcted = SELEctedItem;
}, function () {
    $scope.canceled = true; //Mark the modal as canceled
    $log.info('Modal dismissed at: ' + new Date());
});

设置了cancel标志后,单元测试将如下所示:

it("should cancel the dialog when dismiss is called, and $scope.canceled should be true", function () {
    expect( scope.canceled ).toBeUndefined();

    scope.open(); // Open the modal
    scope.modalinstance.dismiss( "cancel" ); //Call dismiss (simulaTing clicking the cancel button on the modal)
    expect( scope.canceled ).toBe( true );
});

解决方法

我正在为启动a $modal并使用返回的诺言执行一些逻辑的控制器编写单元测试。我可以测试触发$
modal的父控制器,但是我一生无法弄清楚如何模拟成功的诺言。

我尝试了多种方法,包括使用$q$scope.$apply()强制履行承诺。但是,我得到的最接近的结果是与本 SO帖子中的最后一个答案相似的东西。

我已经在“旧的” $dialog模式中看到了几次这样的问题。在“新” $dialog模式下,我找不到太多的方法。

一些指针将不胜感激。

为了说明问题,我使用了UI Bootstrap文档中提供的示例,并进行了一些小的编辑。

控制器(主和模态)

'use Strict';

angular.module('angularUiModalApp')
    .controller('MainCtrl',function($scope,$modal,$log) {
        $scope.items = ['item1','item2','item3'];

        $scope.open = function() {

            $scope.modalInstance = $modal.open({
                templateUrl: 'mymodalContent.html',controller: 'ModalInstanceCtrl',resolve: {
                    items: function() {
                        return $scope.items;
                    }
                }
            });

            $scope.modalInstance.result.then(function(SELEctedItem) {
                $scope.SELEcted = SELEctedItem;
            },function() {
                $log.info('Modal dismissed at: ' + new Date());
            });
        };
    })
    .controller('ModalInstanceCtrl',$modalInstance,items) {
        $scope.items = items;
        $scope.SELEcted = {
            item: $scope.items[0]
        };

        $scope.ok = function() {
            $modalInstance.close($scope.SELEcted.item);
        };

        $scope.cancel = function() {
            $modalInstance.dismiss('cancel');
        };
    });

视图(main.html)

<div ng-controller="MainCtrl">
    <script type="text/ng-template" id="mymodalContent.html">
        <div class="modal-header">
            <h3>I is a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="SELEcted.item = item">{{ item }}</a>
                </li>
            </ul>
            SELEcted: <b>{{ SELEcted.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-priMary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn btn-default" ng-click="open()">Open me!</button>
    <div ng-show="SELEcted">SELEction from a modal: {{ SELEcted }}</div>
</div>

'use Strict';

describe('Controller: MainCtrl',function() {

    // load the controller's module
    beforeEach(module('angularUiModalApp'));

    var MainCtrl,scope;

    var fakeModal = {
        open: function() {
            return {
                result: {
                    then: function(callBACk) {
                        callBACk("item1");
                    }
                }
            };
        }
    };

    beforeEach(inject(function($modal) {
        spyOn($modal,'open').andReturn(fakeModal);
    }));


    // Initialize the controller and a mock scope
    beforeEach(inject(function($controller,$rootScope,_$modal_) {
        scope = $rootScope.$new();
        MainCtrl = $controller('MainCtrl',{
            $scope: scope,$modal: _$modal_
        });
    }));

    it('should show success when modal login returns success response',function() {
        expect(scope.items).toEqual(['item1','item3']);

        // mock out the modal closing,resolving with a SELEcted item,say 1
        scope.open(); // Open the modal
        scope.modalInstance.close('item1');
        expect(scope.SELEcted).toEqual('item1'); 
        // No Dice (scope.SELEcted) is not defined according to Jasmine.
    });
});

大佬总结

以上是大佬教程为你收集整理的在AngularJS单元测试中模拟$ modal全部内容,希望文章能够帮你解决在AngularJS单元测试中模拟$ modal所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:modal