What exactly to unit test in frontend frameworks? Template vs class

Viewed 29

I have a general question regarding unit testing of modern frontend frameworks with example in Angular.

I have a bunch of methods which return boolean, which are used both in the class and in the template.

amICo3pmCompany({ company3pmid }: Request3pmResponse.AsObject): boolean {
    return company3pmid === this.userService.getUserInfo()?.company?.id;
}

noActiveAgreement(request: Request3pmResponse.AsObject) {
    return (
        !request.id ||
        (!this.amICo3pmCompany(request) &&
            ![Request3pmStatus.INVITED, Request3pmStatus.CONFIRMED].includes(request.status) &&
            this.wallet.mandatory3pmstatus !== Mandatory3pmStatus.AWAITING_FUNDS)
    );
}

and template:

<atm-third-party-mandate-agreement
    *ngIf="noActiveAgreement(request); else requestExists"
></atm-third-party-mandate-agreement>

<ng-template #requestExists>
    <ng-container *ngIf="amICo3pmCompany(request); else non3pmCompany">
        <atm-third-party-mandate-company-co3pm
        ></atm-third-party-mandate-company-co3pm>
    </ng-container>

    <ng-template #non3pmCompany>
        <atm-third-party-mandate-company-c
        ></atm-third-party-mandate-company-c>
    </ng-template>
</ng-template>

What exactly should I unit test? Unit testing by the definition means we should test the atomic parts of the app, hence class methods. But frontend apps' main goal is to show user some stuff, so it's important to check whether components are rendered properly, based on some combination of methods and checks.

So should I test only the template, only the component class or both of them in my unit test?

0 Answers
Related