unit test resolve of angular bootstrap modal with johnpapa vm style

Question

I have created a common ModalService and this is used for two different type of dialogs. CancelDialog and ErrorDialog will be popped up as per parameter passed to service.

i.e This will show an ErrorDialog

ModalService.openModal('Analysis Error', 'I am Error Type', 'Error');

Unit test for resolve is failing. Check this PLUNKER for running Unit Test.

This is in file ModalDialogService.js. See sample code here:

function openCancelModal(title, message, callback) {
  $uibModal.open({
    templateUrl: 'CancelDialog.html',
    controller: 'DialogController',
    controllerAs: 'vm',
    backdrop: 'static',
    size: 'md',
    resolve: {
      message: function() {
        return message;
      },
      title: function() {
        return title;
      },
      callback: function() {
        return callback;
      }
    }
  });
}

This is test file ModalService.spec.js

describe('ModalService', function() {

var $injector;
var $uibModal;

// inject the module of your controller
beforeEach(module('validationApp', function($provide) {
  $uibModal = {
    open: jasmine.createSpy('open')
  };

  $provide.value('$uibModal', $uibModal);
}));

beforeEach(inject(function(_$injector_) {
  $injector = _$injector_;
}));

it('tests that openErrorModal is called', function() {
  var modalService = $injector.get('ModalService');
  modalService.openModal(null, null, "Error");

  expect($uibModal.open).toHaveBeenCalledWith(jasmine.objectContaining({
    controller: "DialogController",
    templateUrl: 'ErrorDialog.html',
    resolve: {
      message: function() {
        return message;
      },
      title: function() {
        return title;
      },
      callback: function() {
        return callback;
      }
    }
  }));
});


it('tests that openCancelModal is called', function() {
  var modalService = $injector.get('ModalService');
  modalService.openModal(null, null, "Cancel");

  expect($uibModal.open).toHaveBeenCalledWith(jasmine.objectContaining({
    controller: "DialogController",
    templateUrl: 'CancelDialog.html'
  }));
});

});

Failing Error

Expected spy open to have been called with [ <jasmine.objectContaining(Object({ controller: 'DialogController', templateUrl: 'ErrorDialog.html', resolve: Object({ message: Function, title: Function, callback: Function }) }))> ] but actual calls were [ Object({ templateUrl: 'ErrorDialog.html', controller: 'DialogController', controllerAs: 'vm', backdrop: 'static', size: 'md', resolve: Object({ message: Function, title: Function, callback: Function }) }) ].

I found this ANSWER helpful but not able to replicate. How to cover unit test for resolve with vm style?

I found this answers helpful but not able to replicate. This is testing `resolve` http://stackoverflow.com/questions/26853603/unit-testing-angular-bootstrap-modal/26942188 — ankitd, Oct 15 '16 at 08:51

Max Koretskyi · Accepted Answer · 2016-10-15T09:06:39.380

2

fdescribe('ModalService', function () {

    var $injector;
    var $uibModal;
    var actualOptions;

    // inject the module of your controller
    beforeEach(module('validationApp', function ($provide) {
        $uibModal = {
            open: jasmine.createSpy('open').and.callFake(function (options) {
                actualOptions = options;
            })
        };

        $provide.value('$uibModal', $uibModal);
    }));

    beforeEach(inject(function (_$injector_) {
        $injector = _$injector_;
    }));

    it('tests that resolve returns the same values', function () {
        var title = {};
        var message = {};
        var callback = {};

        var modalService = $injector.get('ModalService');
        modalService.openModal(title, message, "Error", callback);

        expect(actualOptions.resolve.title()).toEqual(title);
        expect(actualOptions.resolve.message()).toEqual(message);
        expect(actualOptions.resolve.callback()).toEqual(callback);
    });

});

and the plunker

edited Oct 15 '16 at 09:06

answered Oct 15 '16 at 07:30

Max Koretskyi

101,079
60
333
488

not sure why but this doesn't shows as covered in coverage reporter. also it conflicts with existing test of `vm.onOk`, `vm.onContinue` & `vm.onDiscard`. It would be great if you can update the plunker with working changes. – ankitd Oct 15 '16 at 08:14
here is the [updated plunker](https://plnkr.co/edit/bmpTZsETJeYXSlNzfXH4?p=preview). Coverage report for what? Do you expect that this line `return message;` is actually executed? – Max Koretskyi Oct 15 '16 at 08:19
lets discuss ove chat http://chat.stackoverflow.com/rooms/125753/discussion-between-ankitd-and-maximus – ankitd Oct 15 '16 at 08:30

unit test resolve of angular bootstrap modal with johnpapa vm style

1 Answers1