I'm testing a component like the following
@Component({
selector: 'my-component',
template: `
<my-nested-component [state]="state"></my-nested-component>
`,
encapsulation: ViewEncapsulation.Native
})
export class MyComponent {}
When unit testing my component, I want to obtain a reference to the nested component MyOtherComponent
. If my-component
used no encapsulation, or if it used emulated encapsulation, I could use:
let fixture = TestBed.createComponent(MyComponent);
let nestedComponent = fixture.debugElement.query(By.directive(MyNestedComponent))
to obtain a reference to the component.
But in this case, query
just queries the light DOM children of the component (mimicking the behaviour of querySelector
), so nestedComponent
is null
when using native view encapsulation.
How are you supposed to get a reference to the DebugElement
(and therefore the component instance) of the nested component?
Let's say we have the following components:
@Component({
selector: 'my-nested-component',
template: `
<h1>Nested component - {{ state }}</h1>
`,
})
export class NesterComponent {
@Input() state: number;
}
@Component({
selector: 'my-app',
template: `
<my-nested-component [state]="state"></my-nested-component>
`,
encapsulation: ViewEncapsulation.Native
})
export class TestComponent {
state = 1;
}
So i would write test like this:
let fixture = TestBed.createComponent(TestComponent);
let component = fixture.componentInstance;
const shadowRoot: DocumentFragment = fixture.debugElement.nativeElement.shadowRoot;
const nestedComponentNativeElement = shadowRoot.querySelector('my-nested-component');
const nestedComponentDebugElement = <DebugElement>getDebugNode(nestedComponentNativeElement);
var nestedComponentInstance: NesterComponent = nestedComponentDebugElement.componentInstance;
// here can be your code
component.state = 2;
fixture.detectChanges();
de = nestedComponentDebugElement.query(By.css('h1'));
expect(de.nativeElement.textContent).toBe('Nested component - 2');
You can also try this test as a live example in plunker
Let me update the correct answer based on newer versions of used tools:
Here's how it worked for me, using "@angular/core": "^5.2.6"
, "typescript": "~2.4.2"
and "jasmine-core": "2.5.2"
const shadowRoot: DocumentFragment = fixture.debugElement.nativeElement
const nativeElement = shadowRoot.querySelector("html-element")
const debugElement = getDebugNode(nativeElement) as DebugElement
const instance: NestedComponent = debugElement.componentInstance
expect(debugElement.query(By.css("h1")).nativeElement.textContent).toBe("ExpectedText")
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With