Question

我有这个控制器：

angular.module('clientApp')
  .controller('MainCtrl', function ($scope, projects) {
    $scope.projects = projects;
  });

项目是数据库的解决方案。它适用于视图。

这是我的服务：

angular.module('clientApp.services', ['ngResource'])
  .factory('Projects', function($resource){
    return $resource('/api/project/:prj_id', {'prj_id':'@prj_id'});
  })
  .factory('MultiProjectsLoader',['Projects', '$q', '$stateParams',
    function(Projects, $q) {
      return function() {
        var delay = $q.defer();
        Projects.query(function(projects) {
          delay.resolve(projects);
        }, function() {
          delay.reject('Unable to fetch sizes');
        });
        return delay.promise;
      };
    }
  ]);

这是我的app.js

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'views/home.html',
    resolve:{
      projects: ['MultiProjectsLoader', function(MultiProjectsLoader){
        return new MultiProjectsLoader();
      }]
    },
    controller: 'MainCtrl'
  });

尝试为此编写测试：

'use strict';

describe('Controller: MainCtrl', function () {

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

  beforeEach(function () {
    angular.module('clientApp.services');
  });

  var MainCtrl,
    scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    MainCtrl = $controller('MainCtrl', {
      $scope: scope
    });

  }));

  it('should attach a list of projects to the scope', function () {
    expect(scope.projects.length).toBeGreaterThan(1);
  });
});

我明白了：

Error: [$injector:unpr] Unknown provider: projectsProvider <- projects

我想我需要在每个（...）之前以某种方式包含服务。但我无法让它发挥作用。有什么想法吗？

Answer 1

您可以通过几种方式注入服务，但我推荐的方法是模拟服务。

describe('Controller: MainCtrl', function () {
   var 
       projectServiceMock = {
           getData: function() {}
       },
       DATA_FROM_SERVER = {}
   ;

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

  beforeEach(function () {
    angular.module('clientApp.services');
    //angular.module('project'); // But dont use this method as you will be testing the       service in the controller:
  });

  var MainCtrl,
    scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    spyOn(projectServiceMock, 'getData').andReturn(DATA_FROM_SERVER);
    MainCtrl = $controller('MainCtrl', {
      $scope: scope, 
      project: projectServiceMock
    });

  }));

  it('should attach a list of projects to the scope', function () {
    expect(projectServiceMock.getData).toHaveBeenCalledWith(DATA_FROM_SERVER);
    expect(scope.projects.length).toBeGreaterThan(1);
  });
});

您的服务应公开一种方法，用于返回从服务器获取的数据，而不仅仅是直接数据到项目。

例如：

project.getData();

在单元测试中使用服务，角度

1 个答案: