Angular Test enabled button by selectedRowIndex

Question

i'm trying to test to enabled or disabled button by selection of rowIndex in angular 11, it fails in expect(component.deleteRoleButtonDisabled).toBeFalse(); and goes always true! have any one of you any idea?

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;
}

SPEC:

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(...) is called on click event which is not triggered at all in your test, so no reason for deleteRoleButtonDisabled to become false.