Test Attribute Directive
Does anyone know how I can check this attribute directive in Angular 2? I'm looking for some examples, but I didn't find it. If anyone has an example to show me or show me a way to do this, it will help me.
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);
}
}
}
}
Thank.
+3
source to share
1 answer
You should create a host component that uses the directive in its template. something like this will work:
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');
}));
});
+3
source to share