许多简单 *ngIf 的单元测试

Question

我只有组件

@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 吗？不是测试框架功能吗？

Answer 1

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

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

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

许多简单 *ngIf 的单元测试

unit testing of many simple *ngIf

angular

unit-testing

typescript

angular-test