Question

我创建了一个公共ModalService，这用于两种不同类型的对话框。将根据传递给服务的参数弹出CancelDialog和ErrorDialog。

为什么我们在功能正常工作时进行单元测试？

即这将显示ErrorDialog

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

一切正常，但我坚持单元测试。这是工作PLUNKER。请帮助我们进行单元测试。

如何对openErrorModal＆amp; openCancelModal位于以下服务中。

ModalService

// 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＆amp;在控制器下方onDiscard。

DialogController

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

单元测试角度bootstrap模态服务

1 个答案: