2016-09-13 7 views
0

現在のAngular2バージョン(RC6)でディレクティブをテストしたいと考えています。新しいコンポーネントを作成しないAngular2ディレクティブのテスト

私はNG2 Test recipesから、あなたの指示文をテンプレートに実装するアドホックなコンポーネントを作成しています。

@Component({ 
    selector: 'container', 
    template: `<div log-clicks (changes)="changed($event)"></div>`, 
    directives: [logClicks] 
}) 
export class Container { 
    @Output() changes = new EventEmitter(); 
    changed(value){ 
    this.changes.emit(value); 
    } 
} 

describe('Directive: logClicks',() => { 
    let fixture; 
    beforeEachProviders(() => [ TestComponentBuilder ]); 

    beforeEach(injectAsync([TestComponentBuilder], tcb => { 
    return tcb.createAsync(Container).then(f => fixture = f); 
    })); 

    //specs 
    it('should increment counter', done => { 
    //... actual test 
    })); 
}) 

今、このソリューションは少しハックようだと、独自のエラーを作成することができ、クラスを追加することにより、簡単なテストが複雑に。この目的のためだけに新しいコンポーネントを生成したくない場合はどうすればよいですか?指令をテストするための直接的な方法はありますか?

マイディレクティブ:

import { Directive, Input, OnInit } from '@angular/core'; 
import { NgControl, Form} from '@angular/forms'; 

@Directive({ 
    selector: '[autoSave][formControlName],[autoSave][formControl],[autoSave][ngModel]' 
}) 

export class AutoSave implements OnInit { 
    constructor(public genericControl: NgControl) { } 
    @Input('autoSave') label: string; 

    ngOnInit() { 
     //stuff happens 
    } 
} 

答えて

1

あなたが直接指令/コンポーネントに対してテストすることができるはずです。

import { addProviders, async, inject, describe, expect, beforeEach, it, beforeEachProviders } from '@angular/core/testing'; 
import { logClicks } from './logClicks'; 

describe('App: List',() => { 
    var component: logClicks; 

    beforeEach(() => { 
    component = new logClicks(); 
    }); 

    it('should create the app',() => { 
     expect(component).toBeTruthy(); 
    }); 
}); 

あなたはコードが含まれていなかったように私はあなたのディレクティブに関するいくつかの仮定を作っていますが、あなたはあなたの指示に対して、このようなテストを作成することができるはずです。

+0

ご迷惑をおかけして申し訳ございません。私のディレクティブのコードを追加しました。 – Bolza

関連する問題