Angular + Karma + Jasmine - 使用假后端进行测试和应用

时间:2014-06-06 12:34:17

标签: angularjs unit-testing jasmine karma-runner httpbackend

我正在开发一个有角度的WebApp,由于BackEnd还没有准备就绪,我使用假后端($httpBackend)来测试我的REST请求。

它在app.js中以这种方式定义:

// we want to use $httpBackend mock
app.config(function($provide) {
  $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
});
// define our fake backend
app.run(function($http, $httpBackend, url) {
  //Escape string to be able to use it in a regular expression
    function regEsc(str) {
        return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    }

  // Mocking the login request
  //define the success var
  var user = {username: "me@stuff.it", password: "pass"};
  var userResponse = {
       "succes": "true",
       "user":{
       "id":"8490394",
       "username": "me",
       "token": "asd8u09u900asduijjaijjHJ"
      }
  };
  //success case
  $httpBackend.whenPOST(url.login, user).respond(200,userResponse);

  //other cases
  $httpBackend.whenPOST(url.login).respond(403,{success: false, message: 'Wrong username or password'});

  //let pass all views request
  $httpBackend.whenGET(function(string){
    console.log(string);
    return true;
  }).passThrough();

  $httpBackend.whenGET( RegExp( regEsc( "views/" ) ) ).passThrough();
});

当我使用grunt serve

运行应用程序时,它可以正常工作

当我尝试运行测试时,问题就开始了(在Jasmine中并通过Karma执行),这是一个示例测试:

'use strict';

describe('Service: Loginservice', function () {

  // load the service's module
  beforeEach(module('cmmApp'));

  // instantiate service
  var Loginservice, $rootScope, $httpBackend, url;
  beforeEach(inject(function (_Loginservice_, _$rootScope_ , $injector, _url_) {
    Loginservice = _Loginservice_;
    $rootScope = _$rootScope_;
    url = _url_;

    //questo serve per iniettare httpBackend
    $httpBackend = $injector.get('$httpBackend');

    $httpBackend.when('POST', url.login, {username:     "me@stuff.it",password:"pass"}).respond({success: true, user:{"id":"8490394","username": "me","token": "asd8u09u900asduijjaijjHJ"}});

    $httpBackend.whenPOST(url.login).respond(403, {success: false, message: 'Wrong username or password'});
  }));

it('should return user object', function () {

    var f;

    //se i valori sono corretti ritona un oggetto che contiene l'utente
    inject(function(Loginservice, $rootScope){
      Loginservice.login({username:"me@stuff.it",password:"pass"}).then(function(res){
        f = res;
      }); //end login

      //this trigger the promise
      $rootScope.$digest();

      //this trigger the http request
      $httpBackend.flush();

      expect(f).toEqual({success: true, user:{"id":"8490394","username": "me","token": "asd8u09u900asduijjaijjHJ"}});
    }); //end inject
  });

如果我从app.js中移除假后端配置,它们可以正常工作,相反如果我将其留在那里,Karma报告:Error: No pending request to flush !

我认为这是因为app.js中声明的拦截器被触发并阻止在请求中触发测试中定义的$ httpBackend。

关于如何解决这个问题的任何想法?

提前致谢

2 个答案:

答案 0 :(得分:0)

ngMockE2E会使您的httpBackend在单元测试中无用。我挣扎着同样的事情。我现在已经将所有模拟对象放在一个模块my.mocks或其他任何模块中,然后在e2e测试和单元测试中使用它。

对于e2e测试和后端开发,我有一个appDev模块,它被引导并需要app模块,my.mocks模块和ngMockE2E模块。 / p>

对于单元测试,我加载app然后模拟基本上和我的appDev代码基本相同,我复制的东西真的看起来很傻但同时我经常想要使用会引发错误的数据进行测试,我发现自己除了e2e响应之外还有一些自定义单元测试响应。

答案 1 :(得分:0)

int unSelectedSum = 0; for(int i = 1; i<creditCard.length(); i=i+2) { //first we will take every even-placed digit. int evenDigit = Character.getNumericValue(creditCard.charAt(i)); //next, we will multiply it by 2 evenDigit = evenDigit*2; //And finally, we will add the digits to unselectedSum if(num/10 == 0) { unselectedSum = unselectedSum + evenDigit; } else { unselectedSum = unselectedSum + evenDigit/10 + evenDigit%10; } } 不会让您的生活变得轻松,而且非常以角度为中心,这意味着您的应用中未通过Angular完成的任何XHR都无法返回您定义的假数据。

另一种方法是使用Monkey-patch $httpBackend来拦截对您要模拟的服务的调用,并将它们传递给在客户端运行的伪RESTful服务。这正是FakeRest所做的,所以你可能想看看它。