我正在使用 Angular Material 表来显示用户列表,包括电子邮件、创建日期和 Angular 色。我的模板如下所示:
<table mat-table [dataSource]="dataSource" multiTemplateDataRows matSort matSortActive="email" matSortDirection="asc">
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
<td mat-cell *matCellDef="let user" class="user-email"><a [routerLink]="['/users', user.id]">{{user.email}}</a></td>
</ng-container>
<ng-container matColumnDef="created">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Created</th>
<td mat-cell *matCellDef="let user">{{user.created | date: 'medium'}}</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Roles</th>
<td mat-cell *matCellDef="let user">{{user.roles.join(', ')}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let user; columns: displayedColumns;"
class="user-row">
</tr>
</table>
我有单元测试来确定数据是否加载到组件中,但是我还想测试数据是否在模板中正确呈现。为此,我尝试使用以下测试代码:it('should display the users email', () => {
expect(component.users).toBe(testUsers);
fixture.detectChanges();
console.log(fixture.isStable()); // displays false
fixture.whenRenderingDone().then(() => {
console.log(fixture.isStable()); // displays true
const emailElement = fixture.debugElement.query(By.css('.user-email'));
console.log(emailElement);
});
});
我希望 emailElement
成为每个 td
的列表类的元素 user-email
,但它始终为空。有没有办法测试该表是否包含正确的值?
最佳答案
您实际上从未分配过类(class) .user-email
在您的代码示例中。您只是在分配类(class) .user-row
到元素 tr
.如果要按类获取元素,可以使用 Angular Material 分配的类。每个td
element 获取格式为 mat-column-{columnName}
的类,例如mat-column-email
在你的情况下。
这是我将如何测试它:
it('should test the table ', (done) => {
expect(component.users).toEqual(testUsers);
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
let tableRows = fixture.nativeElement.querySelectorAll('tr');
expect(tableRows.length).toBe(4);
// Header row
let headerRow = tableRows[0];
expect(headerRow.cells[0].innerHTML).toBe('Email');
expect(headerRow.cells[1].innerHTML).toBe('Created');
expect(headerRow.cells[2].innerHTML).toBe('Roles');
// Data rows
let row1 = tableRows[1];
expect(row1.cells[0].innerHTML).toBe('dummy@mail.com');
expect(row1.cells[1].innerHTML).toBe('01-01-2020');
expect(row1.cells[2].innerHTML).toBe('admin,standard');
// Test more rows here..
done();
});
});
您can find a working StackBlitz here .
关于angular - 测试 Angular Material 表正在呈现正确的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54251273/