許多簡單的* 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

您可以使用此組件進行一系列可能的測試：

1. 設置組件，然后查詢DOM元素以確保它們存在，就我個人而言，如果ngIf s則不執行這些ngIf但如果是關鍵操作，則必須進行調用，這是您的應用程序。
2. 由於ngIf檢查語句的真實性，因此請對該語句進行單元測試，即：setup組件，檢查所有這些語句的真實性。 再次，根據上下文，由於這是從父級獲取數據，因此您應該考慮如何確定將對這些數據進行防御性編程。 如果有可能破裂，只需進行如下廉價測試即可。
3. 就像我在2中所說的ngIf ，有時測試ngIf毫無意義，這可能是浪費時間，因為它要么是真實的，要么不是真實的，因此，如果您可以控制它，那么此組件將非常簡單。
4. 另外，您可以在規范中創建父測試組件以進行集成測試，這非常復雜，但是如果此組件樹很關鍵或很復雜，則這通常是非常可靠的測試（個人很少這樣做）。

關於您上面的組件的好處是它很簡單，因此測試可以很簡單。 我會親自做選擇2