2

我有简单的组件

@Component({
    selector: 'app-certificate-panel',
    templateUrl: './certificate.component.html'
})
export class CertificateComponent {
    @Input()
    public certificate: Certificate;
}

带模板

<h3 translate>General</h3>
<x-form-row label="{{'Version' | translate}}">
    {{ certificate.version }}
</x-form-row>
<x-form-row label="{{'Serial Number' | translate}}">
    {{ certificate.serialNumber }}
</x-form-row>
<h3 translate>Issued From</h3>
<x-form-row label="{{'Common Name (CN)' | translate}}" *ngIf="certificate.issuedFrom.commonName">
    {{ certificate.issuedFrom.commonName }}
</x-form-row>
<x-form-row label="{{'Organization Unit (OU)' | translate}}" *ngIf="certificate.issuedFrom.organizationUnit">
    {{ certificate.issuedFrom.organizationUnit }}
</x-form-row>

显示了更多属性。此模板中有几个*ngIf。

现在我想编写单元测试。我应该测试每个*ngIf吗？不是在测试框架功能吗？

4

1 回答 1

0

您可以使用此组件进行一系列可能的测试：

  1. 设置组件然后查询 DOM 元素以确保它们存在，就个人而言，我不这样做 if ngIfs 但如果它很重要，那么你必须拨打电话，这是你的应用程序。
  2. 因为ngIf检查语句的真实性，所以对语句进行单元测试，即：设置组件，检查所有这些语句的真实性。同样，根据上下文，由于这是从父级获取数据，因此您应该考虑如何确定这将被填充，并进行防御性编程。如果它有可能破裂，只需进行这样的廉价测试即可。
  3. 有时测试毫无意义ngIf，就像我在 2 中所说的那样，这可能是浪费时间，因为它要么是真实的，要么不是真实的，所以如果你可以控制它，那么这个组件就非常简单。
  4. 您也可以在规范中创建一个父测试组件来进行集成测试，这非常复杂，但是如果这个组件树很关键或很复杂，这通常是非常健壮的测试（个人很少这样做）。

上面的组件的好处是它很简单，因此测试也很简单。我个人会做选项2

于 2018-05-02T20:39:05.467 回答