如何使用 Jasmine 和 Karma 将实际依赖项加载到 Angularjs 测试中？

Question

我一直在网上四处寻找，但似乎没有人真正将实际依赖项注入到使用 Jasmine 和 Karma 的 Angularjs 单元测试中。

我认为测试过程肯定存在关注点分离，但我也想知道它如何与当前使用的依赖项很好地集成......所以以防万一依赖项不能很好地与我的组件一起工作，我会注意的！

所以，我想知道如何注入实际的依赖项？到目前为止，我发现网上的文章都是关于用假的来嘲笑它的……但我想用真正的。现在，当我输入karma start 时，我收到Error: [$injector:unpr] Unknown provider: _Provider <- _ <-MyService 的错误

我像这样在 forEach 块中注入服务

beforeEach(angular.mock.inject(function(_MyService_) {

不知道是不是因为我没有使用假服务？

describe('MyCtrl', function() {

  //Data Exposure Prep
  var $controller;
  var $rootScope;
  var $scope;
  var controller;
  var MyService;

  dd1 = {
    itinerary: globalMockData.d1,//I stored globalMockData somewhere else
  };

  beforeEach(angular.mock.module('myapp'));
  beforeEach(angular.mock.inject(function(_$rootScope_, _$controller_, _$httpBackend_) {
    $rootScope = _$rootScope_;
    $controller = _$controller_;
    $httpBackend = _$httpBackend_;
    $scope = $rootScope.$new();
    controller = $controller('MyCtrl', { $scope: $scope }, dd1);
  }));

  //BASIC INFO
  describe('should receive sth', function() {
    it('finds sth', function() {
      expect(controller.answer).toBeDefined();
    });
  });

});

Answer 1

这真的取决于你的控制器实现。 如果您正在使用范围，您可能希望在控制器的范围上进行测试，而不是在控制器本身上。

使用 $scope 测试控制器

function MyController($scope, MyService) {
 $scope.greetUpperCase = function(name) {
  return MyService.greet(name).toUpperCase();
 }
}

基本上，当您使用 $scope 时，您并不真正关心控制器本身，因为它在其作用域上做所有事情。

所以，我们需要：

注入$rootScope 创建一个新范围 将其注入新控制器 测试 $scope

it('test greetUpperCase()', function() {
 var myScope = $rootScope.$new();
 $controller('MyController', {
  $scope: myScope
 });
 expect(myScope .greetUpperCase('bob')).toBe('HELLO BOB');
});

https://jsfiddle.net/ronapelbaum/pkhaxmdg/