재스민 테스트 각도templateUrl을 사용하는 JS 지시어

재스민 테스트 각도templateUrl을 사용하는 JS 지시어

앵귤러에 대한 지시 테스트를 쓰고 있어요JS와 Jasmine 및 templateUrl을 함께 사용합니다.https://gist.github.com/tanepiper/62bd10125e8408def5cc

그러나 테스트를 실행하면 Gest에 포함된 오류가 나타납니다.

Error: Unexpected request: GET views/currency-select.html

의사록에서 읽은 바로는 올바르게 하고 있다고 생각했지만, 그렇지 않은 것 같습니다.여기서 놓치고 있는 것은 무엇입니까?

감사해요.

ngMockE2E 또는 ngMock을 사용하는 경우:

모든 HTTP 요청은 사용자가 지정한 규칙을 사용하여 로컬로 처리되며 서버에 전달되지 않습니다.템플릿은 HTTP를 통해 요청되므로 로컬에서도 처리됩니다.앱이 접속을 시도할 때 수행할 작업을 지정하지 않았기 때문에views/currency-select.html어떻게 대처해야 할지 모르겠다는 거죠.ngMockE2E에게 템플릿 요청을 전달하도록 쉽게 지시할 수 있습니다.

$httpBackend.whenGET('views/currency-select.html').passThrough();

필요에 따라 라우팅 경로에서 정규 표현을 사용하여 모든 템플릿을 통과할 수도 있습니다.

상세한 것에 대하여는, 다음의 문서를 참조해 주세요.http://docs.angularjs.org/api/ngMockE2E.$httpBackend

그렇지 않으면 다음을 사용합니다.

를 사용해야 합니다.$injector새로운 백엔드에 액세스 합니다.링크된 문서에서:

var $httpBackend;
beforeEach(inject(function($injector) {
  $httpBackend = $injector.get('$httpBackend');
  $httpBackend.whenGET('views/currency-select.html').respond(200, '');
}));

Karma 방법은 템플릿html을 $templateCache에 동적으로 로드하는 것입니다.여기에 설명된 바와 같이 html2carma의 카르마를 미리 사용할 수 있습니다.

이는 conf.processors 파일의 파일에 템플릿 '.processors'를 추가하는 것과 프리프로세서 = {.processors': 'processors2params'};

및 사용

beforeEach(module('..'));

beforeEach(module('...html', '...html'));

js 테스트 파일에 저장

유닛 테스트인 경우 다음 항목에 액세스 할 수 없습니다.$httpBackend.passthrough()엔드 투 엔드 테스트에서는 ngMock2E2에서만 사용할 수 있습니다.다음과 같은 답변에 동의합니다.ng-html2js(옛날에는 html2js로 이름 붙여져 있었습니다만, 여기에 완전한 솔루션을 제공하기 위해서, 그것들을 확대해 나가고 싶습니다.

지시문을 렌더링하기 위해 Angular는$http.get()템플릿을 가져오다templateUrl이것은 유닛 테스트이기 때문에angular-mocks로딩되어 있습니다.angular-mocks에의 콜을 대행 수신하다$http.get()그리고 당신에게Unexpected request: GET에러. 이걸 통과시키는 방법을 찾을 수 있지만, 그냥 angular's를 사용하는게 훨씬 더 간단해.$templateCache템플릿을 프리로드합니다.이쪽입니다.$http.get()문제가 되지 않을 겁니다

이것이 ng-html2js 프리프로세서가 하는 일입니다.동작시키려면 , 다음의 순서로 인스톨 합니다.

$ npm install karma-ng-html2js-preprocessor --save-dev

다음 '하다/어울리다'에 다음 를 추가합니다.karma.conf.js

{
    files: [
      //
      // all your other files
      //

      //your htmp templates, assuming they're all under the templates dir
      'templates/**/*.html'
    ],

    preprocessors: {
        //
        // your other preprocessors
        //

        //
        // tell karma to use the ng-html2js preprocessor
        "templates/**/*.html": "ng-html2js"
    },

    ngHtml2JsPreprocessor: {
        //
        // Make up a module name to contain your templates.
        // We will use this name in the jasmine test code.
        // For advanced configs, see https://github.com/karma-runner/karma-ng-html2js-preprocessor
        moduleName: 'test-templates',
    }
}

코드에 'Know'를 사용합니다.test-templates작성한 모듈입니다. 더하면 돼요.test-templates에서 beforeEach 이렇게요.

beforeEach(module('myapp', 'test-templates'));

여기서부터는 순조로운 항해일 것이다.이 테스트 시나리오 및 기타 지시적인 테스트 시나리오에 대한 자세한 내용은 이 게시물을 참조하십시오.

것도 수 있을 거예요.$templatecache 그런 으로 요.

$templateCache.put("views/currency-select.html","<div.....>");

<div.....>이치노

그 후 디렉티브를 셋업하면 정상적으로 동작합니다.

그래도 작동하지 않으면 fiddler를 사용하여 htmltojs 프로세서에 의해 동적으로 생성된js 파일의 내용을 확인하고 템플릿파일 경로를 확인합니다.

이런 느낌일 거예요

angular.module('app/templates/yourtemplate.html', []).run(function($templateCache) {
  $templateCache.put('app/templates/yourtemplate.html', 

제 경우, 문제의 원인이 되고 있는 실제 지시와 다릅니다.

템플릿 보유모든 장소에서 똑같은 URL로 연결되었습니다.

요청에 따라 코멘트를 답변으로 변환합니다.

---

Yooman 앱에서 @Lior의 답변을 활용하고 싶은 분:

에서 템플릿이 참조되고 그 Karma Configuration에서 생성된 됩니다.ng-html2js은 일치하지 않습니다.templateUrl「」의 「」의 「」
하여 "Module Names"와시켜야 합니다.templateUrls.
을 사용하다

• https://github.com/karma-runner/karma-ng-html2js-preprocessor#configuration
• 요점: https://gist.github.com/vucalur/7238489

다음으로 templateUrl로 partial을 사용하는 디렉티브를 테스트하는 예를 나타냅니다.

describe('with directive', function(){
  var scope,
    compile,
    element;

  beforeEach(module('myApp'));//myApp module

  beforeEach(inject(function($rootScope, $compile, $templateCache){
   scope = $rootScope.$new();
   compile = $compile;

   $templateCache.put('view/url.html',
     '<ul><li>{{ foo }}</li>' +
     '<li>{{ bar }}</li>' +
     '<li>{{ baz }}</li>' +
     '</ul>');
   scope.template = {
     url: 'view/url.html'
    };

   scope.foo = 'foo';
   scope.bar = 'bar';
   scope.baz = 'baz';
   scope.$digest();

   element = compile(angular.element(
    '<section>' +
      '<div ng-include="template.url" with="{foo : foo, bar : bar, baz : baz}"></div>' +
      '<div ng-include="template.url" with=""></div>' +
    '</section>'
     ))(scope);
   scope.$digest();

 }));

  it('should copy scope parameters to ngInclude partial', function(){
    var isolateScope = element.find('div').eq(0).scope();
    expect(isolateScope.foo).toBeDefined();
    expect(isolateScope.bar).toBeDefined();
    expect(isolateScope.baz).toBeDefined();
  })
});

require와 함께 jasmine-maven-plugin을 사용하는 경우JS 텍스트 플러그인을 사용하여 템플릿 내용을 변수에 로드한 다음 템플릿 캐시에 넣을 수 있습니다.

define(['angular', 'text!path/to/template.html', 'angular-route', 'angular-mocks'], function(ng, directiveTemplate) {
    "use strict";

    describe('Directive TestSuite', function () {

        beforeEach(inject(function( $templateCache) {
            $templateCache.put("path/to/template.html", directiveTemplate);
        }));

    });
});

언급URL : https://stackoverflow.com/questions/14761045/jasmine-tests-angularjs-directives-with-templateurl