2

私のディレクティブはブラウザで正常に動作します。それは私がうまくいかないように見える単なる単体テストです。ディレクティブは単純なスライダーを作成し、スコープにいくつかの値を設定します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がありますが、不思議なことに $compile を通過することさえできません。これは、私がローカルで抱えている問題とは異なります。JSFiddle が役に立つかどうかはわかりません。1 つではなく 2 つの不可解な問題が発生したためです。

4

1 に答える 1

4

私が他のことに取り組んでいる間、何ヶ月も答えもコメントもありませんでしたが、今、答えを見つけました. それは本当に簡単です：

$httpBackend.flush();

$httpBackend.whenGET()単体テストで使用する場合は、常にフラッシュする必要があります。したがって、templateUrl を使用してディレクティブをテストするときは、$compile() の後に flush() する必要があります。

これが誰かに役立つことを願っています。

于 2014-10-14T15:25:12.757 に答える