0

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

  • are you sure you are not trying to make an e2e test? If you wish to unittest you Hostlistener, change the `confirm` to `public confirm(event){}`, then in you test say something like `const event = {} as MouseEvent` and pass it to the confirm method I hope it helps – kodeaben Mar 13 '17 at 19:59
  • @methgaard can you please elloborate i m new to Angular testing . So if you and explain . Thanks in advance –  Mar 13 '17 at 21:44
  • Certainly. Could you make a plunker? It would make it easier for me to explain and you to understand. – kodeaben Mar 14 '17 at 07:16
  • @methgaard i have never used plunker and my code is running in Angular4 rc 3 so if possible can you explain it here sorry for the inconvenience –  Mar 14 '17 at 18:05
  • gladly, but i can't quite figure out what you are trying to test? Do you want to test that an alertbox is shown with the correct text, or do you want to test the confirm method? – kodeaben Mar 14 '17 at 20:08
  • @methgaard I want to tets the alert box –  Mar 15 '17 at 14:22
  • Okay. Then you need to look at e2e testing. protractor is the most used in Angular – kodeaben Mar 15 '17 at 15:25
  • okay will check that , but if we need to test confirm we can use karma ? –  Mar 15 '17 at 17:18
  • Then we are talking unittests in which karma and jasmine are most often used, yes :) – kodeaben Mar 15 '17 at 17:23
  • @methgaard will be great if you just gave me headsup on that as i didnot find any suitable tutorial for the same thanks –  Mar 15 '17 at 17:51

0 Answers0