单元测试Angularjs引导模式

Question

我有一个指令，其中有一个链接，点击显示数据在一个模态弹出。

如何为链接单击编写单元测试(jasmine)，以及如何测试模型是否打开，模态中的数据是否正确显示。

你能提供一些参考吗?

下面是我要测试的内容

angular.module(’sample', [
    'ui.bootstrap'
])
.controller(’ employeeController

","美元范围","美元模态",函数(范围、模态美元){

    $scope.clickMe = function() {
        var ModalInstanceCtrl = $modal.open({
            templateUrl: ‘template/empView.html',
            controller: ‘employeeController',
            resolve: {
                employees: function () {
                    return $scope.depEmps;
                }
            },
            size: 'lg'
        });
    };
}]).directive(‘empInfo', function() {
    return {
        restrict: 'E',
        templateUrl: ‘asdf,
        replace: true,
        controller: 'employeeController',
        scope: {
            employees: "="
        }
    };
})

我想检查当ClickMe被调用时，打开模型并在模型中正确填充数据。到目前为止，模型只能在按转义键时关闭。

Answer 1

首先必须创建一个模态模拟:

function  ModalMock  {
    this.open = function(modalArgs) {
     return
   };
}

然后在测试中初始化:

beforeEach(() => {
        // create mocks
        modalMock = new ModalMock(); 
        controller = $controller('MyCtrl', {
        $scope: scope,
        $modal: modalMock,
     });
 });

在实际的测试块中，你应该使用spyon方法:

 it('should do something', function() {
            var modalPromise = q.defer().promise;
            spyOn(modalMock, 'open').andReturn({ result: modalPromise });
            controller.doSomething(arg);

            // make sure that angular resolves/rejects the deferreds
            scope.$digest();
            // verify that the modal is opened
            expect(modalMock.open).toHaveBeenCalled();
        });

Answer 2

你可以编译你的指令，然后用jQuery点击它，之后你可以创建监视"modal"函数，并期望"modal"函数将在元素上被调用。如果你有这样的内容:

$(element).modal('show');

你可以在元素和模态函数上添加spy，并期望模态函数会被'show'参数调用。这就是单元测试，你只需要测试你的逻辑是否有效。如果您需要测试Modal组件，并且它是否正确显示，则需要在端到端测试中进行测试。