Angular2 트리거 버튼 유닛 테스트에서 클릭하고 이벤트 처리를 확인하십시오.

Question

클릭 이벤트가 올바르게 처리되었는지 테스트하려고합니다. 단추에 클릭 이벤트를 트리거하고 라우터에서 적절한 호출이 실행되었는지 확인하려고합니다.

<div class="col-lg-3 col-md-4 col-xs-6 thumb project" *ngFor="let project of projects"> 
    <div class = "thumbnail"> 
     <img class="img-responsive img-rounded" src="{{project.imgUrl}}" alt=""> 
     <div class = "caption"> 
     <h4 id='titleHeader'>{{project.title}}</h4> 
     <div class="btn-group" role="group" style="all"> 
      <button class="btn btn-primary">Order</button> 
      <button id='customizeButton' class="btn btn-info" (click)="onCustomize(project.id)">Customize</button> 
     </div> 
    </div> 
</div> 

구성 요소 코드 :

public errorMessage = ''; 
public projects = []; 

constructor(private router: Router, private projectListService: ProjectListService) { 
} 

public ngOnInit() { 
    this.getProjects(); 
} 

public getProjects() { 
    this.projectListService.getAllProjects() 
     .subscribe(
      (projects) => this.projects = projects, 
      (error) => this.errorMessage = <any> error); 
} 

public onCustomize(id: string) { 
    console.log(id); 
    let navigate = this.router.navigate(['design', id]); 
} 

사양 코드 :

describe('GalleryComponent (inline template)',() => { 

    let comp: GalleryComponent; 
    let fixture: ComponentFixture<GalleryComponent>; 
    let projectListService: ProjectListService; 
    let spy: jasmine.Spy; 
    let de: DebugElement[]; 
    let stubRoute: Router; 
    let stubRouteSpy: jasmine.Spy; 

    beforeEach(() => { 
     stubRoute = <Router> { navigate: ([]) => {}}; 
     TestBed.configureTestingModule({ 
      declarations: [GalleryComponent], 
      providers: [ 
       ProjectListService, 
       {provide: Router, useValue: stubRoute}, 
       {provide: Http, useValue: {}} 
       ], 
     }); 

     fixture = TestBed.createComponent(GalleryComponent); 
     comp = fixture.componentInstance; 

     // ProjectListService actually injected into the component 
     projectListService = fixture.debugElement.injector.get(ProjectListService); 

     // Setup spy on the `getAllProjects` method 
     let fakeProjects = [new Project(1, 'title1', ''), new Project(2, 'title2', '')]; 
     spy = spyOn(projectListService, 'getAllProjects') 
      .and.returnValue(Observable.of<Project[]>(fakeProjects)); 

     stubRouteSpy = spyOn(stubRoute, 'navigate'); 
    }); 

    it('should navigate to designer when customize button clicked', async(() => { 
     fixture.detectChanges(); // init 
     fixture.whenStable().then(() => { // wait for async getAllProjects 
      fixture.detectChanges(); // update view with projects 

      fixture.nativeElement.querySelectorAll('#customizeButton')[0].click(); 
      expect(fixture.nativeElement.querySelectorAll('#customizeButton').length).toBe(2); // this pass 

      fixture.detectChanges(); 

      expect(stubRouteSpy.calls.any()).toBe(true, 'navigate called'); // this is false 
     }); 
    })); 
}); 

는 (마지막 기대는 실패) 이동

템플릿 코드를 왜 stubRouteSpy가 등록되지 않은 전화를 몰라

Answer 1

문서 here에 따르면 제공된 인젝터에서 RouterStub.

설명서의 예제를 사용하는 것이 좋습니다.

스텁 클래스 :

class RouterStub { 
    navigateByUrl(url: string) { return url; } 
} 

제공 :

{ provide: Router,  useClass: RouterStub } 

GET 인젝터 :

routerStub = fixture.debugElement.injector.get(RouterStub);