如何模拟 uibmodal 的结果？

Question

我有以下代码：

vm.data = [{name: 'test-1'},{name: 'test-2'}];

function addRecords(data) {
    vm.data.push(data);
}

function openPopup() {

    $uibModal.open({
        templateUrl: 'modal-popup/modal-popup.html',
        controller: 'ModalPopupController',
        controllerAs: 'vm',
        resolve: {
            id: _.constant('123')
        }
    }).result.then(addRecords);
}

试图模拟这个，下面是声明：

let allData = [{name: 'test-1'},{name: 'test-2'}];
let data = {name: 'test-3'};

    beforeEach(inject(function (_$q_, _$rootScope_, _$componentController_, _$uibModal_) {
        $q = _$q_;
        $rootScope = _$rootScope_;
        $scope = $rootScope.$new();
        controller = _$componentController_;
        $uibModal = _$uibModal_;

        spyOn($uibModal, 'open').and.returnValue({
            result: function() {
                return $q.when(data);
            }
        });

        vm = controller('bvcListings', {
            $q,
            data: allData,
            $uibModal
        });

        $scope.$apply();
    }));

    describe('openPopup', function () {
        it('should add records on modal results', function () {
            vm.openPopup();
            expect($uibModal.open).toHaveBeenCalled();
        });
    });

期望是，它应该添加：{name: 'test-3'} 作为现有数组的结果。

Spy on modal open 工作正常，但在获取结果后，它没有进入 addRecords 函数。我做错了什么？

在检索结果后需要在此处进行哪些更改才能进入回调函数。

Answer 1

.result.then 回调方法只有在你调用modalInstance.close 方法时才会被调用，也不要忘记从close 方法传递data 类似modalInstance.close(data)。

在继续测试之前，您需要在openPopup 函数中进行一项更改。它应该返回$uibModal.open，它基本上返回新创建的模态实例。此后，您可以轻松控制模态以在需要时调用 dismiss/close 方法。

function openPopup() {
    vm.modalInstance = $uibModal.open({
        templateUrl: 'modal-popup/modal-popup.html',
        controller: 'ModalPopupController',
        controllerAs: 'vm',
        resolve: {
            id: _.constant('123')
        }
    });

   vm.modalInstance.result.then(addRecords);
}

规格

$uibModal = _$uibModal_;
var data = {name: 'test-3'};
//creating fake modal which will help you to mock 
var fakeModal = {
    result: {
        then: function(confirmCallback) {
            //Store the callbacks
            this.confirmCallBack = confirmCallback;
        }
    },
    close: function( item ) {
        //The user clicked OK on the modal dialog
        this.result.confirmCallBack( item );
    }
};
spyOn($uibModal, 'open').and.returnValue(fakeModal);

describe('It should data to vm.data when popup closed', function () {
    it('should add records on modal results', function () {
       vm.data = [{name: 'test-1'},{name: 'test-2'}];
       let data = {name: 'test-3'};
       vm.openPopup();
       expect($uibModal.open).toHaveBeenCalled();
       vm.modalInstance.close(data);
       expect(vm.data.length).toBe(4);
       expect(vm.data[3]).toBe(data);
    });
});

注意： fakeModal 已被 this post 引用

Answer 2

继续@Pankajs 的回答。

这是我做的一个调整并得到了它的工作。

function openPopup() {
    vm.modalInstance = $uibModal.open({
        templateUrl: 'modal-popup/modal-popup.html',
        controller: 'ModalPopupController',
        controllerAs: 'vm',
        resolve: {
            id: _.constant('123')
        }
    }).result.then(addRecords);
}

规格

describe('modalpopup', function () {
    it('should add records on modal results', function () {
        vm.data = [{name: 'test-1'},{name: 'test-2'}];
        let data = {name: 'test-3'};
        vm.openPopup();
        expect($uibModal.open).toHaveBeenCalled();
        vm.modalInstance.close(data);
        expect(vm.data.length).toBe(4);
        expect(vm.data[3]).toBe(data);
    });
});

对我来说就像魅力一样。我也考虑 Pankajs 的回答，几乎 90% 都解决了我的问题。

Answer 3

添加 $rootScope.$digest(); 以解决承诺（如 $q.when()）

vm.openPopup();
expect($uibModal.open).toHaveBeenCalled();
$rootScope.$digest(); >> triggers your callback