Таблица тестирования углового материала показывает правильные данные - PullRequest
Новая
       12

Таблица тестирования углового материала показывает правильные данные

0 голосов
/ 18 января 2019

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

<table mat-table [dataSource]="dataSource" multiTemplateDataRows matSort matSortActive="email" matSortDirection="asc">
  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
    <td mat-cell *matCellDef="let user" class="user-email"><a [routerLink]="['/users', user.id]">{{user.email}}</a></td>
  </ng-container>

  <ng-container matColumnDef="created">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Created</th>
    <td mat-cell *matCellDef="let user">{{user.created | date: 'medium'}}</td>
  </ng-container>

  <ng-container matColumnDef="roles">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Roles</th>
    <td mat-cell *matCellDef="let user">{{user.roles.join(', ')}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let user; columns: displayedColumns;"
      class="user-row">
  </tr>
</table>

У меня есть модульные тесты, чтобы определить, загружены ли данные в компонент, однако я также хотел бы проверить, правильно ли данные были отображены в шаблоне. Для этого я пытаюсь использовать следующий тестовый код: 

it('should display the users email', () => {
  expect(component.users).toBe(testUsers);

  fixture.detectChanges();
  console.log(fixture.isStable()); // displays false
  fixture.whenRenderingDone().then(() => {
    console.log(fixture.isStable()); // displays true
    const emailElement = fixture.debugElement.query(By.css('.user-email'));
    console.log(emailElement);
  });
});

Я бы ожидал, что emailElement будет списком каждого из td элементов с классом user-email, однако он всегда равен нулю.

Есть ли способ проверить, что таблица содержит правильные значения?

1 Ответ

0 голосов
/ 18 января 2019

Вы никогда не назначаете класс .user-email в своем примере кода.Вы назначаете только класс .user-row элементу tr.Если вы хотите получить элементы по классам, вы можете использовать классы, назначенные Angular Material.Каждый элемент td получает класс формата mat-column-{columnName}, например, mat-column-email в вашем случае.

Вот как я бы его протестировал: 

it('should test the table ', (done) => {
  expect(component.users).toEqual(testUsers);

  fixture.detectChanges();
  fixture.whenStable().then(() => {
    fixture.detectChanges();

    let tableRows = fixture.nativeElement.querySelectorAll('tr');
    expect(tableRows.length).toBe(4);

    // Header row
    let headerRow = tableRows[0];
    expect(headerRow.cells[0].innerHTML).toBe('Email');
    expect(headerRow.cells[1].innerHTML).toBe('Created');
    expect(headerRow.cells[2].innerHTML).toBe('Roles');

    // Data rows
    let row1 = tableRows[1];
    expect(row1.cells[0].innerHTML).toBe('dummy@mail.com');
    expect(row1.cells[1].innerHTML).toBe('01-01-2020');
    expect(row1.cells[2].innerHTML).toBe('admin,standard');

    // Test more rows here..

    done();
  });
});

Вы можете найтирабочий стекблиц здесь .

...