get two divs by class name in karma test (Angular 4.0)

Question

I have something like this in view:

<div>
 <div class="header-title">Example title 1</div>
</div>

<div>
 <div class="header-title">Example title 2</div>
</div>

In my karma test I would like to investigate all divs by class name and check if inner text is correct so I have following code in test:

[...]
debugTest = fixture.debugElement.query(By.css('.header-title'));
elementTest = debugTest.nativeElement;
[...]

it('should component div has a correct value', () => {
    fixture.detectChanges();
    const content = elementTest.textContent;
    expect(content).toContain('Example Title 1');
});

Following code works but I always get the first dom with .header-title class. How to extract next one? What if I have 20 divs with the same class name how to test them all?

Answer 1

Use queryAll() instead of query(), which returns an array.

query() returns single DebugElement which is always the first matching element, whereas queryAll() returns DebugElement[].

debugTest = fixture.debugElement.queryAll(By.css('.header-title')); 

So that you can access like

elementTest1 = debugTest[0].nativeElement;
elementTest2 = debugTest[1].nativeElement;