Как запустить (matSortChange)= "sortData(i, $event)" для модульного тестирования в приложении angular

#angular #unit-testing

#angular #модульное тестирование

Вопрос:

Я запускаю модульный тест для приложения angular. Я хочу вручную запустить событие matSortChange и убедиться, что при запуске этого события вызывается метод

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

Ответ №1:

Не пробовал это в модульных тестах, но matSortChange срабатывает при нажатии стрелки для сортировки. вы можете получить доступ к стрелке из DOM подобного

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

Это должно вызвать matSortChange событие и не забудьте шпионить за sortData методом, чтобы проверить результат.

1. document.getElementsByClassName(‘mat-sort-header-arrow’)[0]; возвращает мне неопределенный

2. document.getElementsByClassName(‘mat-sort-header-arrow’) возвращает HTML-объекты

3. хм, объекты HTML являются элементами со стрелками?

4. test=document.getElementsByClassName(‘mat-sort-header-arrow’); console.log(тест. длина);//выводит 0

5. он возвращает пустой массив

Ответ №2:

Надеюсь, это поможет ответить на мой вопрос, это сгенерированный angular код, я видел это в элементе проверки

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