javascript - 使用 Jasmine 对 $modal 进行单元测试

Question

我有一个带有 Controller 的 Angular 应用程序，它在函数调用期间显示 Angular-Strap 模态窗口。它在 Chrome 中正常运行，但我无法进行有效的单元测试。

App 模块和 FooController:

var app = angular.module("app", ["mgcrea.ngStrap"]);

app.controller("FooController", function($scope, $modal) {
    var fooModal = $modal({
        title: 'Foo',
        content:'Bar',
        show: false,
        html: true,
        backdrop: 'static',
        placement: 'center'});
    
    angular.extend($scope, {
        makeItFoo: function() {
            fooModal.show();
        }
    });
});

Controller 规范:

describe('FooController', function () {
    var scope, controller, modal;

    beforeEach(module('app', function ($provide) {
        // Stub out $modal service
        $provide.value('$modal', function () {
            return {
                hide: function () { },
                show: function () { }
            };
        });
    }));

    beforeEach(inject(function ($rootScope, $controller, $injector) {
        //set up a new scope and the controller for the test
        scope = $rootScope.$new();
        controller = $controller('FooController', {$scope: scope});
        modal = $injector.get('$modal');
    }));

    it('should show the modal', function () {
        var modalSpy = spyOn(modal(), 'show');
        
        scope.makeItFoo();
        
        expect(modalSpy).toHaveBeenCalled();
    });
});

Here's a fiddle as well.

我希望我对 makeItFoo() 的调用能够显示模态，但 Jasmine 未能通过测试并显示错误 Expected spy show to have been called。我还尝试将模态的 show 属性设置为 true 并且不单独调用 show() ，并且我尝试了其他变体 stub $modal 服务并将其直接注入(inject) Controller ，但最终会出现相同的错误。

我正在使用 AngularJS 1.2.14、Angular-Strap 2.0.0 和 Jasmine 1.3.1。

Answer 1

而不是做这些。使用 show 和 hide 方法为 $modal 创建模拟对象，并设置您对它们的期望。

describe('FooController', function () {
    var scope, controller, modal;

    beforeEach(module('app'));

    beforeEach(inject(function ($rootScope, $controller) {
        //set up a new scope and the controller for the test
        scope = $rootScope.$new();
        //Create spy object
        modal = jasmine.createSpyObj('modal', ['show', 'hide']);
        //provide modal as dependency to the controller.
        controller = $controller('FooController', {$scope: scope, $modal:modal});

    }));

    it('should show the modal', function () {

        scope.makeItFoo();

        expect(modal.show).toHaveBeenCalled();
    });
});