How to test the contents inside the material table cell?

there are two simple tests that look for elements and compare them to a number. First group of elements is located outside the . Second group of elements is located inside the <td mat-cell>.

Respectively, first unit-test is successfull, second unit-test is failed. I need all tests to be successful. Please help me to fix second unit-test.

jest tests:

it('test1', () => {
const elements = fixture.debugElement.queryAll(By.css('[data-test="q1"]'));
const elementsLength = elements.length;
expect(elementsLength).toBe(3);
});

it('test2', () => {
const elements = fixture.debugElement.queryAll(By.css('[data-test="q2"]'));
const elementsLength = elements.length;
expect(elementsLength).toBe(3);
});


angular template:

<div data-test="q1">q1</div>
<div data-test="q1">q1</div>
<div data-test="q1">q1</div>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element">

<div data-test="q2">q2</div>
<div data-test="q2">q2</div>
<div data-test="q2">q2</div>

{{element.position}}
</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>


live demo is here.

Continue reading...