如何在Angular 2中测试该指令

时间:2017-03-13 18:17:29

标签: angular testing karma-jasmine angular2-testing

我有这个指令,我申请组件指令工作正常,但现在我想写相同的测试用例我坚持如何处理编写规范文件请帮助

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

  });

  });

我被困在这之后请帮助新的角度测试

0 个答案:

没有答案