새 구성 요소를 만들지 않고 Angular2 지시문을 테스트하십시오.

Question

현재 Angular2 버전 (RC6)으로 지시문을 테스트하고 싶습니다.

저는 NG2 Test recipes에서 템플릿에 지침을 구현하는 ad-hoc 구성 요소를 만드는 방법을 읽었습니다.

@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 
    } 
} 

Answer 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(); 
    }); 
}); 

나는 코드를 포함하지 않았다로 지시어에 대한 몇 가지 가정을 만드는 중이라서,하지만 당신은 당신의 지시에 대해이 같은 테스트를 만들 수 있어야합니다.