2017-08-09 50 views
0

我正在使用Angular-UI的$ uibModal在我的代碼中打開一個模式。在調用open方法之後,我定義了在open.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); 
}); 

回答

0

好了,有可能是一個更好的方式,但這似乎工作,所以這就是我想出的。

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

});