测试属性指令

Question

有谁知道我可以在Angular 2中测试这个属性指令吗？我正在寻找一些例子，但我还没有找到它。如果有人有一个例子来展示我或者让我有办法做到这一点，它会帮助我。

import { Directive, SimpleChanges, Input, OnChanges, ElementRef, Renderer} from '@angular/core'; 

@Directive({ 
    selector: '[highlightData]' 
}) 
export class HighlightDataDirective implements OnChanges { 
    private _highlightData: string; 

    @Input() set highlightData(value: string) { 
    const prev = this._highlightData; 
    this._highlightData = value; 
    const cur = value; 
    } 

    constructor(private _elementRef: ElementRef, private _render: Renderer) { 

    } 

    ngOnChanges(changes: SimpleChanges) { 
    if (changes['highlightData'] && !changes['highlightData'].isFirstChange()) { 
     const prev: string = changes['highlightData'].previousValue; 
     const cur: string = changes['highlightData'].currentValue; 

     if (cur !== prev) { 
     this._render.setElementClass(this._elementRef.nativeElement, 'animate', true); 

     setTimeout(() => { 
      this._render.setElementClass(this._elementRef.nativeElement, 'animate', false); 
     }, 3000); 
     } 
    } 
    } 

} 

谢谢。

Answer 1

您应该创建一个在其模板中使用指令的主机组件。类似的东西将工作：

import {HighlightDataDirective} from './highlight-data.directive'; 
import {Component, DebugElement} from '@angular/core'; 
import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing'; 
import {By} from '@angular/platform-browser'; 

@Component({ 
    selector: 'test', 
    template: '<div [highlightData]="show" (click)="show = !show">test appHighlightData</div>' 
}) 
export class TestComponent { 
    show = false; 
} 

fdescribe('HighlightDataDirective',() => { 

    let fixture: ComponentFixture<TestComponent>, comp: TestComponent, debugElement: DebugElement, 
    element: HTMLElement; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [HighlightDataDirective, TestComponent] 
    }); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(TestComponent); 
    comp = fixture.componentInstance; 
    debugElement = fixture.debugElement; 
    element = debugElement.nativeElement; 
    }); 

    it('should apply style of click', async(() => { 
    fixture.detectChanges(); 
    const directive = debugElement.query(By.directive(HighlightDataDirective)); 
    directive.nativeElement.click(); 
    fixture.detectChanges(); 
    expect(directive.nativeElement.classList).toContain('animate'); 
    })); 

    it('should remove style after timeout', fakeAsync(() => { 
    fixture.detectChanges(); 
    tick(); 
    const directive = debugElement.query(By.directive(HighlightDataDirective)); 
    directive.nativeElement.click(); 
    tick(); 
    fixture.detectChanges(); 

    expect(directive.nativeElement.classList).toContain('animate'); 
    tick(3000); 
    expect(directive.nativeElement.classList).not.toContain('animate'); 
    })); 
});