Angular 按 selectedRowIndex 测试启用按钮

Question

我正在尝试通过在 angular 11 中选择 rowIndex 来测试启用或禁用按钮，它在 expect(component.deleteRoleButtonDisabled).toBeFalse() 中失败了；永远正确！你们有什么想法吗？

HTML:

<tr class="roles-list" mat-row *matRowDef="let row; columns: displayedColumns;"
           (click)="highlight(row)" [ngClass]="{'highlight': selectedRowIndex == row.id}" 
           id="highlightRow"></tr>

TS:

selectedRowIndex: number | undefined;
deleteRoleButtonDisabled = true;

highlight(row: RoleAssignmentTableRowData) {
this.selectedRowIndex = row.id;
this.deleteRoleButtonDisabled = false;
}

规格：

it('should enable delete role button if one role is selected', () => {

     component.selectedRowIndex = 1;
     expect(component.selectedRowIndex).toBe(1);
     expect(component.highlight).toBeTrue();
     expect(component.deleteRoleButtonDisabled).toBeFalse(); // this goes to be always true!
   });

Answer 1

highlight(...) 是在您的测试中根本没有触发的点击事件上调用的，因此没有理由让 deleteRoleButtonDisabled 变为 false。

Angular 按 selectedRowIndex 测试启用按钮

Angular Test enabled button by selectedRowIndex

angular

unit-testing

selected

angular11