單元測試角度自舉模態服務

Question

我創建了一個公共的ModalService並將其用於兩種不同類型的對話框。 根據傳遞給服務的參數將彈出CancelDialog和ErrorDialog 。

為什么在功能正常的情況下進行單元測試？

即這將顯示一個ErrorDialog

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

一切工作正常，但卡在單元測試中。 這是正在工作的PLUNKER 。 請幫助涵蓋此單元測試。

如何在以下服務中對openErrorModal和openCancelModal進行單元測試。

模態服務

// common modal service
validationApp.service('ModalService',
  function($uibModal) {

    return {
      openModal: openModal
    };

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

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

    function openModal(title, message, modalType, callback) {
      if (modalType === "Error") {
        openErrorModal(title, message, callback);
      } else {
        openCancelModal(title, message, callback);
      }
    }
  }
);

如何在下面的控制器中對onOk ， onContinue和onDiscard進行單元測試。

對話控制器

//controller fot dialog
validationApp.controller('ErrorDialogCtrl',
  function($uibModalInstance, message, title, callback) {
    alert('from controller');
    var vm = this;
    vm.message = message;
    vm.onOk = onOk;
    vm.onContinue = onContinue;
    vm.onDiscard = onDiscard;
    vm.callback = callback;
    vm.title = title;

    function onOk() {
      $uibModalInstance.close();
    }

    function onContinue() {
      $uibModalInstance.close();
    }

    function onDiscard() {
      vm.callback();
      $uibModalInstance.close();
    }
  });

Answer 1

您需要分別測試服務和控制器。 對於控制器，您需要測試在調用控制器方法時是否已調用uibModalInstance方法。 當調用close方法時，您實際上不需要測試對話框是否關閉。 那是那些實現uibModal的人的任務。

所以這是控制器的測試：

describe('ErrorDialogCtrl', function() {

    // inject the module of your controller
    beforeEach(module('app'));

    var $controller;

    beforeEach(inject(function(_$controller_){
        // The injector unwraps the underscores (_) from around the parameter names when matching
        $controller = _$controller_;
    }));

    it('tests that close method is called on modal dialog', function() {
        var $uibModalInstance = {
            close: jasmine.createSpy('close')
        };

        var callback = function() {};
        var controller = $controller('PasswordController', { $uibModalInstance: $uibModalInstance, message: {}, callback: callback });

        controller.onOk();
        expect($uibModalInstance.close).toHaveBeenCalled();
    });
});

這是對服務的簡單測試：

describe('ModalService', function () {

    var $injector;
    var $uibModal;

    // inject the module of your controller
    beforeEach(module('app', 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: "ErrorDialogCtrl"
        }));
    });
});