卡玛 - 茉莉花：如何正确窥探一个模式？ [英] Karma-Jasmine: How to properly spy on a Modal?

问题描述

局势：

我是单元测试我的角/离子应用。

I am unit testing my Angular / Ionic app.

我有模态的烦恼。
目前，我可以测试模态被调用。这一切至今。我无法测试适当的节目（）和模态的隐藏（）方法。

I am having troubles with the modal. At the moment i can test that the modal has been called. That's all so far. I cannot test the proper show() and hide() method of the modal.

我收到以下错误：

TypeError: $scope.modal_login.show is not a function
Error: show() method does not exist

TypeError: $scope.modal_login.hide is not a function
Error: hide() method does not exist

我认为这完全取决于间谍。我不知道如何正确的模式间谍，我认为一旦做到这一点，一切都将正常工作。

I think it depends entirely on the spy. I don't know how to properly spy on the modal, and i think that once that is done, everything will work fine.

总code：

控制器：

$scope.open_login_modal = function() 
{
    var temp = $ionicModal.fromTemplateUrl('templates/login.html',{scope: $scope});

    temp.then(function(modal) { 
        $scope.modal_login = modal;
        $scope.modal_login.show();

        $scope.for_test_only = true;
    });
};

$scope.close_login_modal = function() 
{
    $scope.modal_login.hide();
};

请注意：open_login_modal功能的code已被重构，以方便测试。原来的code是：

Note: the code of open_login_modal function has been refactored to facilitate the test. The original code was:

$scope.open_login_modal = function() 
{
    $ionicModal.fromTemplateUrl('templates/login.html', {
        scope: $scope
    }).then(function(modal) {

        $scope.modal_login = modal;
        $scope.modal_login.show();
    }); 
};

测试：

describe('App tests', function() 
{
    beforeEach(module('my_app.controllers'));

    function fakeTemplate() 
    {
        return { 
            then: function(modal){
                $scope.modal_login = modal;
            }
        }
    }

    beforeEach(inject(function(_$controller_, _$rootScope_)
    {
        $controller = _$controller_;
        $rootScope = _$rootScope_;
        $scope = _$rootScope_.$new();

        $ionicModal = 
        {
            fromTemplateUrl: jasmine.createSpy('$ionicModal.fromTemplateUrl').and.callFake(fakeTemplate)
        }; 

        var controller = $controller('MainCtrl', { $scope: $scope, $rootScope: $rootScope, $ionicModal: $ionicModal });
    }));


    describe('Modal tests', function() 
    {
        beforeEach(function()
        {
            $scope.open_login_modal();
            spyOn($scope.modal_login, 'show'); // NOT WORKING
            spyOn($scope.modal_login, 'hide'); // NOT WORKING
        });

        it('should open login modal', function() 
        {
            expect($ionicModal.fromTemplateUrl).toHaveBeenCalled(); // OK
            expect($ionicModal.fromTemplateUrl.calls.count()).toBe(1); // OK
            expect($scope.modal_login.show()).toHaveBeenCalled(); // NOT PASS
            expect($scope.for_test_only).toEqual(true); // NOT PASS
        });

        it('should close login modal', function() 
        {
            $scope.close_login_modal();     
            expect($scope.modal_login.hide()).toHaveBeenCalled(); // NOT PASS
        });
    });

});

你可以从code $看到scope.for_test_only应该等于真实的，但不被认可。我得到这个错误消息，而不是：

As you can see from the code $scope.for_test_only it should be equal to true but is not recognized. I get this error message instead:

Expected undefined to equal true.

同样的情况，到展（）和隐藏（）方法。它们不是由测试看到。

The same happens to the show() and hide() method. They are not seen by the test.

，我想是因为他们没有在间谍声明。

And i think because they are not declared in the spy.

问题：

我怎样才能正确地对一个模式间谍吗？

How can i properly spy on a modal?

非常感谢你！

推荐答案

这里的问题可以推广到如何正确对承诺间谍。您现在的位置在正确的轨道上非常多。

The question here could be extrapolated to how to properly spy on a promise. You are very much on the right track here.

不过，如果你想测试你的任何回调的承诺的成功被调用时，你必须执行两个步骤：

However, if you want to test that whatever your callback to the success of the promise is called, you have to execute two steps:

1. 莫克（你的情况$ ionicModal）服务，并返回一些假的功能


2. 在假的功能，执行由生产code传递给你回调。

下面是一个例子：

//create a mock of the service (step 1)
var $ionicModal = jasmine.createSpyObj('$ionicModal', ['fromTemplateUrl']);

//create an example response which just calls your callback (step2)
var successCallback = {
   then: function(callback){
       callback.apply(arguments);
   }
};

$ionicModal.fromTemplateUrl.and.returnValue(successCallback);

当然，你总是可以使用$ Q，如果你不希望被保留在自己的诺言：

Of course, you can always use $q if you don't want to be maintaining the promise on your own:

//in your beforeeach
var $ionicModal = jasmine.createSpyObj('$ionicModal', ['fromTemplateUrl']);
//create a mock of the modal you gonna pass and resolve at your fake resolve
var modalMock = jasmine.createSpyObj('modal', ['show', 'hide']);
$ionicModal.fromTemplateUrl.and.callFake(function(){
    return $q.when(modalMock);
});


//in your test
//call scope $digest to trigger the angular digest/apply lifecycle
$scope.$digest();
//expect stuff to happen
expect(modalMock.show).toHaveBeenCalled();

这篇关于卡玛 - 茉莉花：如何正确窥探一个模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！