Question

我有一个名为MatSelectControls的自定义组件，其用法如下：

<component-im-testing>
   <mat-select>
      <mat-select-controls></mat-select-controls>
      <mat-option *ngFor="..."></mat-option>
   </mat-select>
</component-im-testing>

在测试中，我可以像这样检索MatSelect实例：

const matSelectRef = fixture.debugElement.query(By.directive(MatSelect));
const matSelect = matSelectRef.componentInstance as MatSelect;
matSelect.open();

但是我真正追求的是MatSelectControls组件。尝试以相同方式选择它不起作用：

const matControlsRef = fixture.debugElement.query(By.directive(MatSelectControls)); //returns null

我认为这是行不通的，因为MatSelectControls实际上呈现在MatSelect创建的cdk覆盖内。

即使MatSelectControls组件实例实际上在cdk叠加层中呈现，我该如何检索呢？

Answer 1

没有完整的代码很难帮助，但是您可以做的只是通过父组件中的mat-select-controls添加对@ViewChild()组件的引用：

@ViewChild(MatSelectControls) matSelectControls: MatSelectControls;

然后在测试中使用它：

component.matSelectControls.abc

角度单元测试-如何在覆盖容器内获取子组件

1 个答案: