单元测试角度自举模态服务

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