javascript - 单元测试 Angular Bootstrap 模式服务

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

如何在下面的 Controller 中对 onOk 、 onContinue 和 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

您需要单独测试服务和 Controller 。对于 Controller ，您需要测试调用 Controller 方法时是否调用 uibModalInstance 的方法。当调用 close 方法时，您实际上不需要测试对话框是否关闭。这是那些实现 uibModal 的人的任务。

这是 Controller 的测试:

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