Jasmine单元测试检查Angular Bootstrap模态的范围

Question

我有一个项目清单。 当您单击某个项目时，它会显示一个模式以显示该项目的数据。 在列表的控制器中，有一个函数openRecentsModal，它从ng-repeat列表中获取数据对象，并在运行该函数时在新的作用域上创建它。 然后，新模式将该对象作为$ scope.recentsFoldersData提供。 我需要编写一个单元测试来确保在作用域上定义了recentsFolderData，但是我尝试过的所有内容都会导致“预期未定义的定义”。 我希望有人可以提供帮助。

这是列表控制器中打开模态的方法：

function openRecentsModal(obj) {
  var scope = $rootScope.$new();
  scope.recentsFoldersData = obj;
  var controller = 'recentsFoldersDetailController';
  $modal.open({
    scope: scope,
    controller: controller,
    templateUrl: 'js/modal/recents/folder/recentsFoldersDetail.tpl.html'
  });
}

这是模态的控制器：

angular.module('modal.recents.folder', [])
    .controller('recentsFoldersDetailController', recentsFoldersDetailController);

  recentsFoldersDetailController.$inject = ['$scope', '$modalInstance'];
  function recentsFoldersDetailController($scope, $modalInstance) {

    $scope.close = function close() {
      $modalInstance.dismiss('close');
    };
  }

最后，这是我正在进行的单元测试（我已经排除了正在传递的单元测试，以及此测试不需要的辅助函数）：

describe('recents folders modal controller tests', function() {
  var scope, q, modal, mockDetailController, mockListController, mockRecentService, mockFolderService, mockModalInstance, $httpBackend;

  beforeEach(module('mainApp'));

  beforeEach(inject(function($rootScope, $q, $controller, $modal, _recentService_, _folderService_, $injector) {
    q = $q;
    scope = $rootScope.$new();
    modal = $modal;
    $httpBackend = $injector.get('$httpBackend');
    $httpBackend.whenGET('js/modal/recents/folder/recentsFoldersDetail.tpl.html').respond(200, '');
    mockRecentService = _recentService_;
    mockFolderService = _folderService_;
    mockModalInstance = {
      dismiss: jasmine.createSpy('modalInstance.dismiss')
    };

    mockDetailController = function() {

      return $controller('recentsFoldersDetailController', {
        '$scope': scope,
        '$modalInstance': mockModalInstance
      });
    };

    mockListController = function() {

      return $controller('recentsListFoldersController', {
        '$scope': scope,
        '$modal': modal,
        'recentService': mockRecentService,
        'folderService': mockFolderService
      });
    };
  }));

  describe('scope tests', function() {

    it('should place the data on the scope when openRecentsModal is called', function() {
      var obj = defaultSuccessfulRecentsDataResponse();
      mockListController();
      spyOn(scope, 'openRecentsModal');

      scope.openRecentsModal(obj);
      expect(scope.openRecentsModal).toHaveBeenCalledWith(obj);
      mockDetailController();
      expect(scope.recentsFoldersData).toBeDefined();
    });

  });

  /* helper functions */
  function defaultSuccessfulRecentsDataResponse() {
    return {
      id: 'id 1',
      name: 'first name',
      description: 'first description'
    };
  }

});

Answer 1

我能够通过对调用模态的函数进行简单的更改来解决这个问题

    function openRecentsModal(obj) {
      $rootScope.recentsFoldersData = obj;
      var controller = 'recentsFoldersDetailController';
      $modal.open({
        //scope: scope,
        controller: controller,
        templateUrl: 'js/modal/recents/folder/recentsFoldersDetail.tpl.html'
      });
    }

通过允许将对象放在$ rootScope（UI-Bootstrap模式的默认设置）而不是新的$ scope上，测试以定义的值返回

it('should put recents object on the scope', function() {
  mockListController();

  scope.openRecentsModal(defaultSuccessfulRecentsDataResponse());
  mockDetailController();
  expect(scope.recentsFoldersData).toBeDefined();
});