1

I have a piece of HTML in my component:

<div [ngSwitch]="data.mode" class="data-mode">
    <span ngSwitchWhen="mode1">Mode 1 Activated</span>
    <span ngSwitchWhen="mode2">Mode 2 Activated</span>
</div>

and I want to test it through karma-jasmine. I can get the root element

const headerMode = fixture.debugElement.query(By.css(".data-mode"));

This returns the root node with 2 child elements but I cannot see which of the two is active.

How do I do this?

Mike M
  • 4,879
  • 5
  • 38
  • 58

2 Answers2

1

By.css('.data-mode > span') should return the activated element. Remember to call fixture.detectChanges(); to force Angular's change detection to run and affect the elements in the test before hand.

Borquaye
  • 756
  • 3
  • 9
0
 const headerElement : HTMLElement = fixture.nativeElement;
 expect(headerElement.querySelector('span').innerText).toBe('Mode 1 Activated');

This could be helpful to test ngSwitch .

Manusha Karunathilaka
  • 139
  • 2
  • 8