Access DebugElement of nested component when using native view encapsulation

Question

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?

Answer 1

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

Answer 2

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")

Answer 3

With Angular v6.1.8 and component with Shadow root . Example:

  const fixture = TestBed.createComponent(AppComponent);
  const app = fixture.debugElement.componentInstance as AppComponent;
  const shadowRoot: DocumentFragment = fixture.debugElement.nativeElement.shadowRoot;

  app.active = true;
  app.title = 'Title';
  fixture.detectChanges();

  expect(shadowRoot.querySelector('.bz-modal__header_title').textContent).toEqual('Title');