如何在Angular 2中测试此指令

我有这个指令，我适用于一个组件该指令工作良好，但现在我想为同一个组件编写测试用例，我被困在如何继续编写规范文件请帮助

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() { }

}

模板

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

单击以发送到指令

到目前为止我的规范文件

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();

  });

  });

从“/confirm.directive”导入{ConfirmDirective}；
从“@angular/core/testing”导入{TestBed}；
从“/directives.component”导入{DirectivesComponent}；
从“@angular/core/typings/testing”导入{ComponentFixture}”；
从“@angular/core”导入{DebugElement}；
从“@angular/platform browser”导入{By}”；
描述（'ConfirmDirective'，（）=>{
let组件：DirectivesComponent；
let夹具：组件夹具；
let inputEl:DebugElement；
在每个之前（（）=>{
TestBed.configureTestingModule({
声明：[DirectivesComponent，ConfirmDirective]
});
fixture=TestBed.createComponent（DirectivesComponent）；
组件=fixture.componentInstance；
inputEl=fixture.debugElement.query（By.css（'button'））；
});
它（'点击按钮'，（）=>{
triggerEventHandler（'click'，['$event']）；
fixture.detectChanges（）；
});
});

---

在此之后我被卡住了请帮助新手进行角度测试

您确定您没有尝试进行e2e测试吗？如果您希望对Hostlistener进行单元测试，请将

confirm

更改为

public confirm（event）{}

，然后在测试中使用类似于

const event={}as MouseEvent

的语句，并将其传递给我希望使用的confirm方法helps@methgaard你能告诉我吗？我对角度测试还不熟悉。所以，如果你能解释一下。一定要提前谢谢你。你能做一个扑克牌吗？这会让我更容易解释，你也更容易理解。@methgaard我从来没有使用过plunker，我的代码是在Angular4 rc 3中运行的，所以如果可能的话，你能在这里解释一下吗？很抱歉给你带来不便，我很高兴，但我不太明白你想测试什么？您要测试alertbox是否显示正确的文本，还是要测试confirm方法？