Recently, I've been tasked with enhancing my skill set by writing Jasmine/Karma tests for an Angular 9 application. After completing an online tutorial and doing some research via Google, I began working on my initial test cases independently. However, I seem to have hit a roadblock that I'm struggling to overcome.
The HTML code I am working with is as follows:
<div class="container-fluid">
<div class="center">
<div class="welcome-container">
<div class="title">PCPlan</div>
</div>
<mat-card>
<div class="login-form">
<div class="inputs">
<mat-form-field class="formfield-min-width">
<input matInput type="text" placeholder="AD Username" [(ngModel)]="model.username" (keyup.enter)="login()" tabindex="0" autofocus="true"/>
<button mat-button *ngIf="model.username" matSuffix mat-icon-button aria-label="username" (click)="model.username=''" tabindex="-1">
<i class="fas fa-times-circle"></i>
</button>
</mat-form-field>
<mat-form-field class="formfield-min-width">
<input matInput type="password" placeholder="Password" [(ngModel)]="model.password" (keyup.enter)="login()" tabindex="0" autofocus="true"/>
<button mat-button *ngIf="model.password" matSuffix mat-icon-button aria-label="password" (click)="model.password=''" tabindex="-1">
<i class="fas fa-times-circle"></i>
</button>
</mat-form-field>
</div>
<button mat-raised-button color="primary" (click)="login()" class="login-button">LOG IN</button>
<div>
<div *ngIf="errMsg" style="color:indianred; font-weight: bold">{{errMsg}}</div>
</div>
</div>
</mat-card>
</div>
My .ts file includes the following:
[Insert TypeScript content here]
Lastly, here is a snippet from my spec file:
[Include information about the spec file here]
I am currently facing an issue where the error message "Expected undefined to be truthy" is being displayed. Despite my efforts, I haven't been able to resolve this issue. I suspect there might be some simple mistake that I am overlooking. Any assistance or guidance would be greatly appreciated.