유닛 테스트에서 지시어가있는 요소가 제대로 컴파일되지 않았습니다.

Question

지시문이 브라우저에서 제대로 실행됩니다. 내가 일하는 것 같지 않은 단위 테스트 일뿐입니다. 지시문은 간단한 슬라이더를 만들고 min을 포함하여 범위에 몇 가지 값을 설정합니다.

단위 테스트에서 $ compile (element)은 다른 것을하지 않고 jqlite로 감싸는 것처럼 보입니다. 잘, 그것은 또한 그것에게 범위를 명백하게 준다. 그러나 범위에 아무것도 없다. 템플릿도 적용되지 않았습니다.

내 단위 테스트가 :

describe('Given the slider directive', function() { 

beforeEach(function() { 
    module('app'); 
}); 

beforeEach(inject(function($httpBackend){ 
    // necessary because .whenGET().passThrough() doesn't seem to work 
    $httpBackend.whenGET('partials/slider.html').respond('<div class="slider horizontal">'+ 
     '<div class="min">{{min}}</div>'+ 
     '<div class="max">{{max}}</div>'+ 
     '<a slider-handle class="handle" ng-class="{focus: focus}"'+ 
     'role="slider"'+ 
     'aria-valuemin="{{min}}" aria-valuemax="{{max}}" aria-valuenow="{{slider.value}}" aria-labelledby="{{id}}-label" aria-controls="{{id}}-value"'+ 
     'tabindex="0"'+ 
     'ng-keydown="handleKeyDown($event)" ng-keypress="handleKeyPress($event)"'+ 
     'ng-focus="handleFocus($event)" ng-blur="handleBlur($event)"'+ 
     'ng-mousedown="handleMouseDown($event)"'+ 
     'ng-style="{\'left\': slider.left}"></a>'+ 
     '<div ng-style="{\'left\': slider.left}" ng-show="showVals" id="{{id}}-value" class="slider-value" role="presentation">{{slider.value}}</div>'+ 
    '</div>'); 
})); 

it('should compile and set the scope correctly', inject(function($compile, $rootScope) { 
    var element = $compile('<div slider min="6" max="18" step="1" ng-model="value"></div>')($rootScope); 
    $rootScope.$digest(); 

    var iScope = element.scope(); 

    iScope.$digest(); 

    console.log(iScope); 
    console.log(iScope.min); 
    console.log(element.html()); 
    console.log(element); 

    expect(element.html()).toContain("6"); 
    expect(element.find('div[class=min]').html()).toBe(6); 
    expect(iScope.min).toBe(6); 

})); 
}); 

이의 콘솔 출력은 다음과 같습니다

Scope{$id: '00T', $$childTail: null, $$childHead: null, $$prevSibling: null, $$nextSibling: null, $$watchers: null, $parent: null, $$phase: null, $root: Scope{$id: '00T', $$childTail: null, $$childHead: null, $$prevSibling: null, $$nextSibling: null, $$watchers: null, $parent: null, $$phase: null, $root: Scope{$id: ..., $$childTail: ..., $$childHead: ..., $$prevSibling: ..., $$nextSibling: ..., $$watchers: ..., $parent: ..., $$phase: ..., $root: ..., this: ..., $$destroyed: ..., $$asyncQueue: ..., $$postDigestQueue: ..., $$listeners: ..., $$isolateBindings: ..., safeApply: ...}, this: Scope{$id: ..., $$childTail: ..., $$childHead: ..., $$prevSibling: ..., $$nextSibling: ..., $$watchers: ..., $parent: ..., $$phase: ..., $root: ..., this: ..., $$destroyed: ..., $$asyncQueue: ..., $$postDigestQueue: ..., $$listeners: ..., $$isolateBindings: ..., safeApply: ...}, $$destroyed: false, $$asyncQueue: [], $$postDigestQueue: [], $$listeners: Object{}, $$isolateBindings: Object{}, safeApply: function (a) { ... }}, this: Scope{$id: '00T', $$childTail: null, $$childHead: null, $$prevSibling: null, $$nextSibling: null, $$watchers: null, $parent: null, $$phase: null, $root: Scope{$id: ..., $$childTail: ..., $$childHead: ..., $$prevSibling: ..., $$nextSibling: ..., $$watchers: ..., $parent: ..., $$phase: ..., $root: ..., this: ..., $$destroyed: ..., $$asyncQueue: ..., $$postDigestQueue: ..., $$listeners: ..., $$isolateBindings: ..., safeApply: ...}, this: Scope{$id: ..., $$childTail: ..., $$childHead: ..., $$prevSibling: ..., $$nextSibling: ..., $$watchers: ..., $parent: ..., $$phase: ..., $root: ..., this: ..., $$destroyed: ..., $$asyncQueue: ..., $$postDigestQueue: ..., $$listeners: ..., $$isolateBindings: ..., safeApply: ...}, $$destroyed: false, $$asyncQueue: [], $$postDigestQueue: [], $$listeners: Object{}, $$isolateBindings: Object{}, safeApply: function (a) { ... }}, $$destroyed: false, $$asyncQueue: [], $$postDigestQueue: [], $$listeners: Object{}, $$isolateBindings: Object{}, safeApply: function (a) { ... }} 
undefined 
'' 
{0: <div slider="" min="6" max="18" step="1" ng-model="value" class="ng-scope"></div>, length: 1} 

나는 JSFiddle with the entire (slightly cleaned up) code있어,하지만 거기에 신비 심지어 $ 컴파일 과거를 얻을하지 않습니다, 그건 내가 로컬에 가지고있는 것과 같은 문제가 아니다. JSFiddle을 사용하는 것이 확실하지 않은 이유는 하나가 아닌 두 가지 신비한 문제가 있기 때문입니다.

Answer 1

다른 것들에 대해 작업하는 동안 아무런 대답이나 의견이없는 달, 지금은 답을 찾았습니다. 정말 간단합니다 : 당신이 단위 테스트에 $httpBackend.whenGET()을 사용하는 경우

$httpBackend.flush(); 

, 당신은 항상 세척해야합니다. 따라서 templateUrl을 사용하여 지시문을 테스트 할 때 $ compile()을 수행 한 후에 flush()를 수행해야합니다.

나는 누군가가 유용하다고 생각합니다.