How to mock results from uibmodal?

Question

I have below code:

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);
}

Trying to mock this, Below are the declarations:

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();
        });
    });

Expectation is, it should add: {name: 'test-3'} as result to existing array.

Spy on modal open is working fine, but after results fetched, its not entering addRecords function. What am i doing wrong?

What changes need to be done here to get inside callback function after results retrieved.

score 2 · Accepted Answer · edited Jun 18 '17 at 10:52

2

.result.then callback method will get call only when you call modalInstance.close method, also don't forgot to pass data from close method something like modalInstance.close(data).

Before proceeding to test you need to do one change inside openPopup function. It should return $uibModal.open which basically returns newly created modal's instance. Thereafter you can easily have a control over modal to call dismiss/close method whenever needed.

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);
}

Spec

$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);
    });
});

Note: fakeModal has been referred from this post

edited Jun 18 '17 at 10:52

Mithun Shreevatsa

3,588
9
50
95

answered Jun 15 '17 at 14:31

Pankaj Parkar

134,766
23
234
299

`TypeError: undefined is not a constructor (near '...}).result.then(addRecords);...')` – Mithun Shreevatsa Jun 15 '17 at 14:36
@Mithun can you show me how you instantiate controller instance?? You may not be passing `$uibModal` to controller instance – Pankaj Parkar Jun 15 '17 at 14:38
Edited my question @Pankaj, plz check – Mithun Shreevatsa Jun 15 '17 at 14:43
I used to use such mocks, but actually there is no need to mock promise with something that is not promise as it greatly reduces your testing possibilities. – Petr Averyanov Jun 15 '17 at 14:55
`TypeError: undefined is not an object (evaluating 'modalInstance.close')` – Mithun Shreevatsa Jun 15 '17 at 14:57
@Mithun would you mind me to provide a simple plunker.. I would wish to dig into this.. something small thing seems to missing.. – Pankaj Parkar Jun 15 '17 at 15:04
`'modalInstance => ', undefined` when i tried to print @PankajParkar because its not returning anything to initialize to variable from `openPopup ` function. So, should i inject `uibmodalinstance` instead? – Mithun Shreevatsa Jun 15 '17 at 15:13
1

@Mithun no you shouldn't be injecting `$uibModalinstance`.. can you please provide me a plunker? – Pankaj Parkar Jun 15 '17 at 15:18
I highly appreciate your efforts, but i am trying my level best to fix this asap. If not possible, ill create a plnkr for you. – Mithun Shreevatsa Jun 15 '17 at 15:25
`Error: spyOn could not find an object to spy upon for open()` My bad i was not returning uibmodal. I have corrected inside my code, but i am getting this error. Plz help – Mithun Shreevatsa Jun 15 '17 at 17:15
Plz provide me a plunker.so that I can dig further – Pankaj Parkar Jun 15 '17 at 17:52
I finally managed to get it work with minor tweak. Editing my question with answer, plz check Pankaj. But this is an excellent answer ill accept this though – Mithun Shreevatsa Jun 16 '17 at 05:12
@Mithun Glad to hear that.. I don't see any edit.. you can propose an edit to my answer as well. Thanks :) – Pankaj Parkar Jun 16 '17 at 09:29

score 1 · Answer 2 · answered Jun 16 '17 at 05:19

Continuing with @Pankajs answer.

Here is a tweak which i made and got that worked.

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

Spec

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);
    });
});

Worked like charm for me. And i consier Pankajs answer as well which was almost 90% gave solution to my problem.

Still I don't understand, exactly where the tweak had happened?? — Pankaj Parkar, Jun 17 '17 at 00:24
wouldn't vm.data[3] be outofbound exception. vm.data[2] would point to it — Zilor, Jul 12 '18 at 14:29

score 0 · Answer 3 · answered Jun 15 '17 at 14:50

0

add $rootScope.$digest(); to resolve promises (like $q.when())

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

answered Jun 15 '17 at 14:50

Petr Averyanov

9,327
3
20
38

How could this will call `result.then` method of opened modal? – Pankaj Parkar Jun 15 '17 at 15:00
look his mock: spyOn($uibModal, 'open').and.returnValue({ result: function() { return $q.when(data); } }); – Petr Averyanov Jun 15 '17 at 15:13
then it should be `and.returnValue({ result: { then: {function() { return $q.when(data); } }});` again coming back to mock which I provided :p – Pankaj Parkar Jun 15 '17 at 15:20

How to mock results from uibmodal?

3 Answers3