如何测试材质表单元格内的内容？

Question

有两个简单的测试来查找元素并将它们与数字进行比较。第一组元素位于 之外。第二组元素位于

<td mat-cell>

内部。

分别是，第一次单元测试成功，第二次单元测试失败。我需要所有测试才能成功。请帮助我修复第二个单元测试。

笑话测试：

it('test1', () => {
  const elements = fixture.debugElement.queryAll(By.css('[data-test="q1"]'));
  const elementsLength = elements.length;
  expect(elementsLength).toBe(3);
});

it('test2', () => {
  const elements = fixture.debugElement.queryAll(By.css('[data-test="q2"]'));
  const elementsLength = elements.length;
  expect(elementsLength).toBe(3);
});

角度模板：

<div data-test="q1">q1</div>
<div data-test="q1">q1</div>
<div data-test="q1">q1</div>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element">

    <div data-test="q2">q2</div>
    <div data-test="q2">q2</div>
    <div data-test="q2">q2</div>

    {{element.position}}
   </td>
  </ng-container>

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

现场演示就在这里。

Answer 1

你的测试失败的原因是你有超过 3 个这样的元素。这是因为你循环渲染它们。

在代码中，您为包含 10 个元素的表指定

dataSource

：

  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

对于循环渲染表格行的每个元素：

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef> No. </th>
  <td mat-cell *matCellDef="let element">
  <div data-test="q2">q2</div>
  <div data-test="q2">q2</div>
  <div data-test="q2">q2</div>
  {{element.position}}
 </td>
</ng-container>

所以会有 30 个元素，而不是 3 个。

您最好的选择是测试实际金额：

expect(elementsLength).toBe(30);

如果您对特定的表行感兴趣，还可以指定唯一的测试 ID。