模拟 $uibModal 打开和关闭的承诺

Question

我正在使用 Angular-UI 的 $uibModal 在我的代码中打开模式。调用 open 方法后，我在 opened.then() & closed.then() 承诺中将代码定义为运行。所有这些都工作正常，但是当尝试测试它时（在 Jasmine 中），我无法弄清楚如何解决打开和关闭的承诺。

这是我用来打开模式的代码（在我的控制器中）：

function backButtonClick() {
  var warningModal = $uibModal.open({
    animation: true,
    ariaLabelledBy: 'modal-warning-header',
    ariaDescribedBy: 'modal-alert-body',
    backdrop: 'static',
    templateUrl: 'app/components/directives/modals/alertModal/alertModal.html',
    controller: 'AlertModalController',
    controllerAs: 'vm',
    size: 'sm',
    resolve: {
      options: function() { 
        return {
          title: stringsService.getString('WorkNotSavedTitle'),
          message: stringsService.getString('WorkNotSavedMessage'),
          modalHeaderClass: 'modal-warning-header',
          modalHeaderIconClass: 'fa-warning modal-warning-alert-icon',
          modalHeaderTitleClass: 'modal-warning-alert-title',
          modalContentClass: 'modal-warning-content',
          modalButtonsClass: 'modal-centered-buttons',
          showModalHeader: true,
          showPrimaryButton: true,
          showSecondaryButton: false,
          showTertiaryButton: true,
          primaryButtonText: stringsService.getString('RemainInActivityButton'),
          primaryButtonClick: function() { warningModal.dismiss(); },
          tertiaryButtonText: stringsService.getString('LeaveActivityButton'),
          tertiaryButtonClick: function() { warningModal.dismiss(); leaveActivity(); }
        }; 
      }
    }
  });
  warningModal.opened.then(function() { vm.isWarningModalOpen = true; });
  warningModal.closed.then(function() { vm.isWarningModalOpen = false; });
}

以及我目前的测试：

it('should show the Warning modal if the back button is clicked', function() {
    var modalServiceMock = {
      open: function(options) {}
    };      
    sinon.stub(modalServiceMock, 'open').returns({
      dismiss: function() { return; },
      opened: {
        then: function(callback) { return callback(); }
      },
      closed: {
        then: function(callback) { return callback(); }
      }
    });        
    var ctlr = $controller('BayServiceController', { $scope: this.$scope, $uibModal: modalServiceMock});
    ctlr.backButtonClick();

    //this line passes
    expect(modalServiceMock.open).toHaveBeenCalled();
    //this line fails
    expect(ctlr.isWarningModalOpen).toBe(true); 
});

Answer 1

好的，所以可能有更好的方法，但这似乎有效，所以这就是我想出的方法。

it('should show the Warning modal if the back button is clicked', function() {
  modalServiceMock = {
    open: function(modalOptions) {
      var closedCallback;
      return {
        dismiss: function() { closedCallback(); },
        opened: { 
          then: function(callback) { callback(); }
        },
        closed: {
          then: function(callback) { closedCallback = callback; }
        },
        resolver: modalOptions.resolve
      };
    }
  };        
  var ctlr = $controller('BayServiceController', { $scope: this.$scope, $uibModal: modalServiceMock});
  ctlr.backButtonClick();

  this.rootScope.$apply();
  expect(ctlr.isWarningModalOpen).toBe(true); //this now passes

  //to test closing the modal, I access the resolver property of the mock and run the given method for dismissing the modal
  ctlr.warningModal.resolver.options().primaryButtonClick();

  expect(ctlr.isWarningModalOpen).toBe(false); 

});

模拟 $uibModal 打开和关闭的承诺

Mocking $uibModal's opened and closed promises

jasmine

sinon

angularjs

angular-ui-bootstrap