AngularJS + Karma:在单元测试指令或控制器时重用模拟服务 [英] AngularJS + Karma: reuse a mock service when unit testing directives or controllers

问题描述

我正在使用 AngularJS + Karma.configService 管理我的应用程序的设置(例如背景颜色、是否处于调试模式、一般权限...).它使用 $http 加载初始数据.我成功地为服务编写了测试，但我的指令和控制器使用它.

I'm working with AngularJS + Karma. configService manages the settings of my app (e.g. the background-color, wether it's on debug mode, general permissions...). It loads initial data with $http. I wrote the test successfully for the service but my directives and controllers use it.

当我为指令编写单元测试时，我必须模拟服务.

When I write the unit tests for directives, I have to mock the service.

我知道我能做到:

spyOn(configService, 'getBackgroundColor').andCallFake(function (params) {
   return "red";
});

但该服务有 25 多种方法和初始数据加载.我不想在每个测试套件中编写(和维护)这个 spyOn 东西.更重要的是，我在工厂中使用 $http 加载数据，这也应该被嘲笑.如果我只是注入服务并模拟调用，我仍然会发出 http get 请求.

but the service has 25+ methods and initial data load. I don't feel like writing (and maintaining) this spyOn thing in every test suite. What's more, I load data in the factory with $http, and that should be mocked as well. if I just inject the service and mock the calls, I'll still make the http get request.

您认为重用模拟的最佳方式是什么?

What do you think would be the best way to reuse a mock?

推荐答案

您可以在其自己的模块中创建一个适当的服务模拟并将其添加到任何需要它的测试中，而不是用间谍喷洒测试代码.

Instead of spraying the testing code with spies you can create a proper mock of the service in its own module and add it in any test that needs it.

控制器单元测试位于 test/spec/modules/user/controller.js 文件中.

The controller unit test sits in a test/spec/modules/user/controller.js file.

模拟服务位于 test/mock/modules/user/service.js 文件中.

The mocked service sits in a test/mock/modules/user/service.js file.

对于控制器方法:

$scope.refreshList = function() {
  UserService.all(pageNumber, size, sort, function(data) {
    $scope.users = data.content;
    $scope.page = data.page;
  });
};

模拟的服务:

(function () {

'use strict';

angular.module('app.user.mock', ['app.user']);

angular.module('app.user.mock').factory('UserServiceMock',
  ['$q',
  function($q) {
    var factory = {};

    factory.mockedUsers = { 
      content: [ { firstname: 'Spirou', lastname: 'Fantasio', email: '[e-mail]', workPhone: '983743464365' } ],
      page: '1'
    };

    factory.search = function(searchTerm, page, size, sort, callback) {
      var defer = $q.defer();
      defer.resolve(this.mockedUsers);
      defer.promise.then(callback);
      return defer.promise;
    };

    factory.all = function(page, size, sort, callback) {
      var defer = $q.defer();
      defer.resolve(this.mockedUsers);
      defer.promise.then(callback);
      return defer.promise;
    };

    return factory;
  }
]);

})();

和控制器单元测试:

(function () {

'use strict';

var $scope;
var listController;
var UserServiceMock;

beforeEach(function() {
  module('app.project');
  module('app.user.mock'); // (1)
});

beforeEach(inject(function($rootScope, _UserServiceMock_) {
  $scope = $rootScope.$new();
  UserServiceMock = _UserServiceMock_; // (2)
}));

describe('user.listCtrl', function() {

  beforeEach(inject(function($controller) {
    listController = $controller('user.listCtrl', {
      $scope: $scope,
      UserService: UserServiceMock
    });
  }));

  it('should have a search function', function () { // (3)
    expect(angular.isFunction(UserServiceMock.search)).toBe(true);
  });

  it('should have an all function', function () {
    expect(angular.isFunction(UserServiceMock.all)).toBe(true);
  });

  it('should have mocked users in the service', function () {
    expect(UserServiceMock.mockedUsers).toBeDefined();
  });

  it('should set the list of users in the scope', function (){
    expect($scope.users).not.toEqual(UserServiceMock.mockedUsers);
    $scope.refreshList();
    $scope.$digest();
    expect($scope.users).toEqual(UserServiceMock.mockedUsers.content);
  });

});

})();

添加包含模拟服务的 app.user.mock 模块 (1) 并将模拟服务注入控制器 (2).

You add the app.user.mock module containing the mocked service (1) and inject the mocked service in the controller (2).

然后您可以测试您的模拟服务是否已被注入 (3).

You can then test your mocked service has been injected (3).

这篇关于AngularJS + Karma:在单元测试指令或控制器时重用模拟服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！