Тестирование: как искать экземпляр компонента для подкомпонента

Question

У меня есть компонент, который я тестирую, который имеет большое количество подкомпонентов. В моем тесте я хотел бы получить ссылку на объекты для некоторых из этих подкомпонентов, чтобы я мог проверить их свойства, чтобы убедиться, что они ведут себя правильно и интерактивно заставить их измениться. (например: проверьте, в каком состоянии находится компонент кнопки сегмента или вручную принудительно его в другое состояние)

Я смотрел на тестовую документацию для углового, но я не вижу способа сделать это. Я ожидал, что, возможно, я мог бы сделать запрос на debugElement файла fixture, чтобы найти элемент отладки для подкомпонента, а затем получить доступ к нему componentInstance, но это всегда будет null.

Например, глядя на документы: 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 
}); 

Я хотел бы способ получить ссылку на DashboardHeroComponent внутри TestHostComponent. Кто-нибудь знает как это сделать?

Answer 1

Класс .hero установлен не на компоненте, а на внутреннем div вид детали. Вот почему он не имеет componentInstance прилагается

Чтобы получить componentInstance использовать соответствующий селектор (в данном случае имя тега - вы можете найти это в свойстве selector из @Component аннотацию):

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

или использовать By.directive

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