CODEWITHSUNDEEP
angularunit-testingangularjs-directivejasmine
Marcio M.
Marcio M.

Reputation: 371

Testing attribute directive

Does anyone know how I can test this attribute directive in Angular 2? I'm looking for some examples, but I have not found it. If someone has an example to show me or show me a way to do it, it would 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);
      }
    }
  }

}

Thanks.

Upvotes: 4

Views: 2875

Answers (1)

Julia Passynkova
Julia Passynkova

Reputation: 17869

You should create a host component that use the directive in its template. something like that 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');
  }));
});

Upvotes: 4

Related Questions