无法触发点击事件未定义元素

Question

I need to test click event on mat-table row. Below is my mat-table code

<table
    mat-table
    [dataSource]="dataSource"
    matSort
    matSortActive="formCode"
    matSortDirection="asc"
  >
    <caption></caption>
    <ng-container matColumnDef="isChecked">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row">
        <mat-checkbox
          (click)="$event.stopPropagation()"
          (change)="$event ? selection.toggle(row) : null"
          [checked]="selection.isSelected(row)"
        >
        </mat-checkbox>
      </td>
    </ng-container>
    <ng-container matColumnDef="code">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Référence</th>
      <td
        mat-cell
        *matCellDef="let element"
        class="clickable-link"
        (click)="openSummary(element.code)"
      >
        {{ element.code }}
      </td>
    </ng-container>
</table>

I try to find a row by css and I do something like this: ngMocks.click('.clickable-link') ; or ngMocks.click('mat-checkbox') but it return undefined I already try fixture.debugElement.query(By.css('mat-checkbox')) but nothing changed. This my spec.ts file:

it('should open summary',async ()=>{  
     filesService.getFormByCode.and.returnValue(of(formList));
      ngMocks.click('.clickable-link');
       fixture.detectChanges();
       expect(filesService.getFormByCode).toHaveBeenCalled();
    })

How can I access click event on the table's row?

Answer 1

You have to access the mat-table before the class of td what happens if you tried ngMocks.click('table td.clickable-link');

Answer 2

When using mockbuilder, did you .keep(MatTableModule) ?

If you don't, it's probably getting mocked, which means your table probably isn't getting rendered.