$ httpBackend 및 angular-translate 지시문을 사용하여 테스트

Question

변환 기능이 여전히 작동하는지 테스트하기 위해 $ httpBackend와 angular-translate가 함께 작동하는 방법을 이해하는 데 많은 시간을 할애하고 있습니다.

나는이 시점에 있으며,이 문제를 해결하는 방법을 모르겠다.

'use strict'; 

describe('Directive: translate', function() { 

    beforeEach(function() { 
     angular.module('myApp', ['pascalprecht.translate']); 
    }); 

    var element, 
     $compile, 
     $rootScope, 
     $http, 
     $httpBackend; 

    beforeEach(inject(function (_$rootScope_, _$compile_, _$httpBackend_, _$http_) { 
     $compile = _$compile_; 
     $rootScope = _$rootScope_; 
     $http = _$http_; 
     $httpBackend = _$httpBackend_; 
    })); 

    afterEach(function() { 
     $httpBackend.verifyNoOutstandingExpectation(); 
     $httpBackend.verifyNoOutstandingRequest(); 
    }); 

    it('should translate to English', function() { 
     element = $compile('<p translate>discover_more</p>')($rootScope); 
     $rootScope.$digest(); 

     $httpBackend.expect('GET', 'langs/en.json').respond(200); // Should I return some data at this point? 
     $http.get('langs/en.json').then(function() {}); // Should I do something here? 
     $httpBackend.flush(); 

     expect(element.html()).toBe('Discover more'); 
    }); 

}); 

물론 내 테스트는 실패합니다. 문제는 1) 실제로 JSON을 데이터로 가져 오는 방법과 2) 지시어를 "여기에 데이터로 보내고 작업을 수행하는 방법"을 알 수 없다는 것입니다.

편집 :

좋아, 문제를 통해 어떤 빛. 에,

'use strict'; 

describe('Directive: translate', function() { 

    beforeEach(function() { 
     angular.module('gajoApp', ['pascalprecht.translate']); 
    }); 

    var element, 
     $compile, 
     $rootScope; 

    beforeEach(module('pascalprecht.translate', function ($translateProvider) { 
     $translateProvider 
      .translations('en', { 
       'discover_more': 'Discover more' 
      }) 
      .preferredLanguage('en'); 
    })); 

    beforeEach(inject(function (_$rootScope_, _$compile_) { 
     $compile = _$compile_; 
     $rootScope = _$rootScope_; 
    })); 

    it('should translate to English', function() { 
     element = $compile('<p translate>discover_more</p>')($rootScope); 
     $rootScope.$digest(); 

     expect(element.html()).toBe('Discover more'); 
    }); 
}); 

내가 좋아하는 것이 무엇, 그러나, JSON을 반환 적절한 AJAX 호출이 솔루션을 결합이다 : 난 그냥이 각 모듈 (https://github.com/angular-translate/angular-translate/tree/master/test/unit/directive)의 시험을보고 있었고, 난 그것이 작동되도록 할 수 이것이 역시 행해졌다는 것을 시험하십시오.

Answer 1

요소의 discover_more을 실제로 대체해야하는 각도 변환이 무엇이든 예상 GET 요청에서 반환해야합니다.

beforeEach(function() { 
    $httpBackend.when(
     'GET', 
     'langs/en.json' 
    ).respond({'discover_more': 'Discover more'}); 
}); 

각도 변환이 예상하는 excact 개체는 알지 못하므로 참고 사항과 다를 수 있습니다. 어쨌든 GET 요청이 감지되면이를 반환하십시오.

또한 테스트 중에 직접 GET 요청을하지 않아도됩니다. 모든 것이 올바르게 설정되면 예상 GET 요청에 기대 수익을 더하면 작동합니다.

Answer 2

불행하게도 그것은 restrictions on angular-translate 때문입니다,하지만 당신은 하나에 의해 실제 JSON 로케일 파일을 사용할 수 있습니다 :

1) 요청에게 그것을 각도 - 번역 할 때 로케일 파일을로드 $httpBackend와 함께 load JSON files에 플러그인을 사용. 플러그인에 의해 읽기 JSON과 $translateProvider.translations() 방법으로 앱의 번역을 재정의

beforeEach(inject(function (_$httpBackend_) { 
    $httpBackend = _$httpBackend_; 

    $httpBackend.whenGET('locale-pt.json').respond(readJSON('langs/en.json')); 
    $httpBackend.flush(); 
}))); 

2)이 당신의 beforeEach(module('myApp')); 이하이어야한다

beforeEach(module(function ($translateProvider) { 
    $translateProvider.translations('en', readJSON('langs/en.json')); 
})); 

주 JSON 파일을로드하거나 당신은 $injector 오류가 발생합니다.