如何触发（matSortChange）=“sortData（i，$ event）”进行角度app中的单元测试

Question

I am running unit test for an angular app. I want to manually trigger a matSortChange event and ensure a method is called upon firing this event

<table matSort (matSortChange)="sortData(i, $event)" matSortActive="enddate" matSortDirection="asc" matSortDisableClear style="margin:0px;" class="table table-striped table-bordered">

<tr>
  <ng-container *ngFor="let subheader of subheaders; let j = index">
  <ng-container *ngIf="subheader[1] == 'activationid'; else second">
    <th class="headers" style="width:300px;" mat-sort-header=" 
     {{subheader[1]}}">{{subheader[0]}} </th>
</tr>

Answer 1

Didn't try it in unit test's but the matSortChange is triggered when the arrow for sorting is clicked. you could access the arrow from the DOM like

document.getElementsByClassName('mat-sort-header-arrow')[indexOfTheColumn].click()

This should fire the matSortChange event and don't forget to spy on sortData method to check the result.

Answer 2

Hope this helps to answer my question, this is the angular generated code, I saw this in the inspect element

 <div class="mat-sort-header-container">
  <button class="mat-sort-header-button" type="button" aria-label="Change sorting for 
   count"> Count </button>

  <div class="mat-sort-header-arrow ng-trigger ng-trigger-arrowPosition" 
   style="transform: translateY(25%); opacity: 0;">
    <div class="mat-sort-header-stem"></div><div class="mat-sort-header-indicator ng- 
     trigger ng-trigger-indicator" style="transform: translateY(0px);">
       <div class="mat-sort-header-pointer-left ng-trigger ng-trigger-leftPointer" 
        style="transform: rotate(-45deg);"></div>
       <div class="mat-sort-header-pointer-right ng-trigger ng-trigger-rightPointer" 
        style="transform: rotate(45deg);"></div>
       <div class="mat-sort-header-pointer-middle"></div>
     </div>
   </div>
</div>