각도 + 카르마 + 재스민 - 가짜 백엔드가있는 테스트 및 앱

Question

각도 웹 애플리케이션을 개발 중이며 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(); 
}); 

그리고 내가 worte 테스트를 (실행하려고 할 때이 문제가 시작 grunt serve

와 응용 프로그램을 실행할 때 제대로 작동 대신 만약 내가 제작을

'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에서 가짜 백엔드 설정을 제거하면 그들은 완벽하게 작동 : 재스민과 실행 저점 카르마)에, 여기은 샘플 테스트입니다 그곳에 카르마 리포트 : Error: No pending request to flush !

나는 app.js에 선언 된 인터셉터가 beacause라고 생각하고 테스트에서 정의 된 $ httpBackend가 요청에 의해 트리거되는 것을 막습니다.

이 문제를 해결하는 방법에 대한 아이디어가 있으십니까? 사전에

덕분에

Answer 1

ngMockE2E 단위 테스트에 httpBackend 쓸모 만들 것입니다. 나는 똑같은 일로 고투했다. 나는 지금 내 모든 모의 객체를 모듈 my.mocks 또는 무엇이든간에 넣은 다음 단위 테스트와 마찬가지로 e2e 테스트에서 사용합니다. E2E 테스트 및 backendless 개발을위한

, 나는 부트 스트랩과 app 모듈의 my.mocks 모듈 및 ngMockE2E 모듈이 필요 누가 받 appDev 모듈을 가지고있다.

단위 테스트의 경우 app을로드하고 mocks가 내 appDev 코드와 동일한 경우()는 기본적으로 동일한 작업을 수행하지만 실제로는 복제하는 것이 어리석은 일이지만 동시에 데이터를 사용하여 테스트하려고합니다. 그것은 오류를 던질 것이고 나는 e2e 응답을 제외하고 사용자 정의 단위 테스트 응답으로 자신을 발견 할 것이다.

Answer 2

$httpBackend 당신의 인생을 쉽게 만들어주지는 않을 것이며 매우 각도 중심적입니다. 즉, 앱에서 Angular를 통해 수행되지 않은 XHR은 정의한 가짜 데이터를 반환하지 않습니다.

또 다른 대안은 monkey-patch XMLHttpRequest에 시뮬레이트하려는 서비스에 대한 호출을 가로 채어 클라이언트 측에서 실행되는 의사 -RESTful 서비스에 전달하는 것입니다. 그게 바로 FakeRest의 기능입니다. 그래서 당신이 그것을보고 싶을 수도 있습니다.