单元测试angular引导模态服务

unit test angular bootstrap modal service

本文关键字:模态 服务 angular 单元测试      更新时间:2023-09-26

我创建了一个通用的ModalService,它用于两种不同类型的对话框。CancelDialogErrorDialog将根据传递给服务的参数弹出。

当功能正常工作时,我们为什么要进行单元测试?

。e这将显示一个ErrorDialog

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

一切都很好,但我坚持单元测试。这是正在工作的PLUNKER。请帮忙覆盖单元测试。

如何为openErrorModal &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 &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();
    }
  });

您需要分别测试服务和控制器。对于控制器,您需要测试在调用控制器方法时是否调用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();
    });
});

下面是service的简单测试:

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