lundi 13 mars 2017

How to test this directive in Angular 2

I have this Directive that i apply to a component the directive works fine but now i want to write test cases for the same i am stuck at how to procede with writing the spec file please help

import {Directive, Input, HostListener} from '@angular/core';

@Directive({
  selector: '[appConfirm]'
})
export class ConfirmDirective {
  @Input() value:string;

  @HostListener('click',['$event'])
  confirm(){
      const confirmed = window.confirm("Are you Sure ?");
      if(confirmed){
        window.alert("This is Value ["+this.value+"] Passed by the Component to the Directive")
      }
  }

  constructor() { }

}

Template

<button type="button" appConfirm value = "Rahul">Click to Send to Directive</button>

My spec file so far

import { ConfirmDirective } from './confirm.directive';
import { TestBed } from "@angular/core/testing";
import { DirectivesComponent } from "./directives.component";
import { ComponentFixture } from "@angular/core/typings/testing";
import { DebugElement } from "@angular/core";
import { By } from "@angular/platform-browser";

describe('ConfirmDirective', () => {
  let component: DirectivesComponent;
  let fixture: ComponentFixture<DirectivesComponent>;
  let inputEl: DebugElement;


  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [DirectivesComponent,ConfirmDirective]
    });
    fixture = TestBed.createComponent(DirectivesComponent);
    component = fixture.componentInstance;
    inputEl = fixture.debugElement.query(By.css('button'));
  });

  it('clicking on Button', () => {
    inputEl.triggerEventHandler('click', ['$event']);
    fixture.detectChanges();

  });

  });

I am stuck after this Please help new to Angular Testing

Aucun commentaire:

Enregistrer un commentaire