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

查看:97
本文介绍了AngularJS +噶:重复使用一个模拟服务时,单元测试指令或控制器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我和AngularJS +噶工作。
的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?

推荐答案

而不是与间谍喷涂测试code,你可以自己的模块中创建该服务的适当的模拟,并在任何需要它的测试添加

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.

控制器单元测试坐落在一个测试/规格/模块/用户/ controller.js文件。

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

在嘲笑服务坐落在一个测试/模拟/模块/用户/ 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: 'spirou@yahoo.se', 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 +噶:重复使用一个模拟服务时,单元测试指令或控制器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆