javascript – 如何在Angular-UI Bootstrap Modal组件上单元测试’resolve’属性

前端之家收集整理的这篇文章主要介绍了javascript – 如何在Angular-UI Bootstrap Modal组件上单元测试’resolve’属性前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试编写一个单元测试,断言正确的变量从Angular-UI Bootstrap组件发送到ui.bootstrap.modal的resolve属性.这是我到目前为止:
// Controller
angular.module('app')
  .controller('WorkflowListCtrl',function ($scope,$modal) {
    // Setup the edit callback to open a modal
    $scope.edit = function(name) {
      var modalInstance = $modal.open({
        templateUrl: 'partials/editWorkflowModal.html',controller: 'WorkflowEditCtrl',scope: $scope,resolve: {
          name: function() { return name; }
        }
      });
    };
  });

值得注意的是,resolve.name属性必须是Angular-UI组件正常工作的函数 – 之前我曾尝试解决:{name:name}但这不起作用.

// Unit Test
describe('Controller: WorkflowListCtrl',function () {

  // load the controller's module
  beforeEach(module('app'));

  var workflowListCtrl,scope,modal;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller,$rootScope) {

    scope = $rootScope.$new();
    modal = {
      open: jasmine.createSpy()
    };

    workflowListCtrl = $controller('WorkflowListCtrl',{
      $scope: scope,$modal: modal
    });

    it('should allow a workflow to be edited',function() {
      // Edit workflow happens in a modal.
      scope.edit('Barney Rubble');
      expect(modal.open).toHaveBeenCalledWith({
        templateUrl: 'partials/editWorkflowModal.html',scope: scope,resolve: {
          name: jasmine.any(Function)
        }
      });
    });
  }));
});

目前,这只是检查resolve.name属性是一个函数,但我真正想做的是断言resolve.name函数返回Barney Rubble.这种语法显然不起作用:

expect(modal.open).toHaveBeenCalledWith({
  templateUrl: 'partials/editWorkflowModal.html',resolve: {
    name: function() { return 'Barney Rubble'; }
  }
});

似乎我想以某种方式窥探resolve.name函数以检查它是否与Barney Rubble一起调用,但我无法找到一种方法来做到这一点.有任何想法吗?

解决方法

所以我找到了一种方法来做到这一点.

在$scope上定义’private’函数

$scope._resolve = function(item) {
  return function() {
    return item;
  };
};

修改原始$scope函数调用此’private’方法

$scope.edit = function(name) {
  var modalInstance = $modal.open({
    templateUrl: 'partials/modal.html',controller: 'ModalCtrl',resolve: {
      name: $scope._resolve(name)
    }
  });
};

更新您的测试以模拟此函数并返回原始值,然后您可以测试它是否正确传递.

it('should allow a workflow to be edited',function() {
  // Mock out the resolve fn and return our item
  spyOn($scope,'_resolve').and.callFake(function(item) {
    return item;
  });

  // Edit workflow happens in a modal.
  scope.edit('Barney Rubble');
  expect(modal.open).toHaveBeenCalledWith({
    templateUrl: 'partials/modal.html',resolve: {
      name: 'Barney Rubble'
    }
  });
});
原文链接:https://www.f2er.com/js/156712.html

猜你在找的JavaScript相关文章