테스트 : 하위 구성 요소의 구성 요소 인스턴스를 찾는 방법

Question

많은 하위 구성 요소가있는 테스트중인 구성 요소가 있습니다. 내 테스트에서 이러한 하위 구성 요소 중 일부에 대한 개체에 대한 참조를 얻으려면 해당 속성을 검사하여 올바르게 작동하는지, 대화 형으로 변경되는지 확인하십시오. (예 : 세그먼트 버튼 구성 요소가 어떤 상태인지 확인하거나 수동으로 다른 상태로 강제 설정)

각도에 대한 테스트 설명서를보고 있지만이 방법은 없습니다. 나는 어쩌면 내가 조명기의 debugElement에 대한 쿼리를 수행하여 하위 구성 요소에 대한 디버그 요소를 찾은 다음이 장치를 componentInstance에 액세스 할 수 있다고 생각했지만 항상 null 인 것으로 보입니다.

예를 들어 워드 프로세서보고 : 나는 TestHostComponent 내부 DashboardHeroComponent에 대한 참조를 얻을 수있는 방법을 싶습니다 https://angular.io/docs/ts/latest/guide/testing.html#!#component-inside-test-host

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
    declarations: [ DashboardHeroComponent, TestHostComponent ], //  declare both 
}).compileComponents(); 
})); 

beforeEach(() => { 
    // create TestHostComponent instead of DashboardHeroComponent 
    fixture = TestBed.createComponent(TestHostComponent); 
    testHost = fixture.componentInstance; 
    heroEl = fixture.debugElement.query(By.css('.hero')); // find hero 
    fixture.detectChanges(); // trigger initial data binding 
}); 

. 누구든지이 작업을 수행하는 방법을 알고 있습니까?

Answer 1

클래스 .hero은 구성 요소가 아닌 구성 요소 뷰의 내부 div에 설정됩니다.

heroEl = fixture.debugElement.query(By.css('dashboard-hero')); // find hero 

또는 By.directive

를 사용 : - (당신이 재산 selector 주석 @Component의이 찾을 수 있습니다이 경우 태그 이름)는 componentInstance가 componentInstance 적절한 선택기를 사용 얻으려면

을 부착하지 않는 이유

heroEl = fixture.debugElement.query(By.directive(DashboardHeroComponent));