Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Access DebugElement of nested component when using native view encapsulation

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?

like image 574
ovangle Avatar asked Dec 02 '16 09:12

ovangle


2 Answers

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

like image 181
yurzui Avatar answered Oct 19 '22 16:10

yurzui


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")
like image 5
Matheus CAS Avatar answered Oct 19 '22 18:10

Matheus CAS