[英]Testing Angular Material table is rendering correct data
我正在使用Angular Material表顯示用戶列表,包括電子郵件,創建日期和角色。 我的模板如下所示:
<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
是類user-email
的每個td
元素的列表,但是始終為null。
有沒有一種方法可以測試該表包含正確的值?
在您的代碼示例中,您實際上從未分配過.user-email
類。 您只將.user-row
類分配給元素tr
。 如果要按類獲取元素,則可以使用Angular Material分配的類。 每個td
元素都有一個格式為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();
});
});
您可以在這里找到有效的堆疊閃電戰。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.