如何模拟uibmodal的结果?

时间:2017-06-15 14:04:55

标签: javascript angularjs modal-dialog karma-jasmine

我的代码如下:

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'}作为现有数组的结果。

关于模态打开的间谍工作正常,但是在获取结果后,它没有进入addRecords函数。我做错了什么?

在检索结果后需要进行哪些更改以获取内部回调函数。

3 个答案:

答案 0 :(得分:2)

.result.then回调方法只有在您调用modalInstance.close方法时才会收到通话,也不会忘记从data方法传递close类似{{1} }}

在继续测试之前,您需要在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); }); }); 来自this post

答案 1 :(得分:1)

  

继续@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%的人都解决了我的问题。

答案 2 :(得分:0)

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

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