Testing: How to lookup component instance for sub-component

Question

I have a component I am testing that has a large number of subcomponents. In my test I would like to get a reference to the objects for some of these subcomponents to I can check their properties to see if they are behaving correctly and to interactively cause them to change. (ex: check what state a segment button component is in or manually force it into a different state)

I have been looking at the testing documentation for angular, but I can't see a way to do this. I had expected that maybe I could do a query on the fixture's debugElement to find the debug element for the subcomponent and then access it's componentInstance, but that seems to always be null.

For example looking at the docs: 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
});

I would like a way to get a reference to the DashboardHeroComponent inside the TestHostComponent. Does anyone know how to do this?

do you add .hero class to a component using @HostBinding ? Or you use it in @Component selector? — RomanHotsiy
– RomanHotsiy, Commented Nov 21, 2016 at 21:17
The complete example from the docs is here: angular.io/resources/live-examples/testing/ts/… Looks like it uses the component selector. — Allen
– Allen, Commented Nov 21, 2016 at 21:36

RomanHotsiy · Accepted Answer · 2016-11-21 22:18:47Z

3

Class .hero is set not on a component but on inner div of component view. That's why it doesn't have componentInstance attached

To get componentInstance use an appropriate selector (in this case tag name - you can find this in property selector of @Component annotation):

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

or use By.directive

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

answered Nov 21, 2016 at 22:18

RomanHotsiy

5,1482 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Testing: How to lookup component instance for sub-component

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related