Karma Jasmine在Angular模板驱动的表单中测试注册表单

Question

我对Angular很陌生。我试图在模板驱动的表单上进行Jasmine测试，但我被卡住了。

这是我的.html文件

<form name="Registerform" #Registerform="ngForm" (ngSubmit)="registerUser()" class="form">
<div class="form-header">
<h1 style="text-align: center;font-weight: bold; ">Register</h1>
</div>
<small class="text-danger">{{msg}}</small>
<div class="row">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" placeholder="Enter email" name="email"
[(ngModel)]="user.emailId" required pattern="^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$" #email="ngModel"
[class.is-invalid]="email.invalid && email.touched">
<!--<small class="text-danger" [class.d-none]="email.valid || email.untouched">Email Id is required
field</small>-->
<div *ngIf="email.errors && (email.invalid && email.touched)">
<small class="text-danger" *ngIf="email.errors.required">Email Id is required</small>
<small class="text-danger" *ngIf="email.errors.pattern">Enter the valid valid email id</small>
</div>
</div>
</div>
<button [disabled]=" Registerform.form.invalid" type="submit" class="btn btn-primary">Register</button>
<small class="float-right" [routerLink]="['/login']">Having an Account ? <a href="/login">Login</a>
here</small>
</form>

这是.ts文件

export class RegisterComponent implements OnInit {
user = new User();
msg = "";
roles: any = ['Admin', 'Employee'];
constructor(private _service: RegistrationService, private _router: Router) { }
ngOnInit(): void {
}
radioChangedHandler(event: any) {
this.user.role = event.target.value;
}
registerUser() {
this._service.registerUserFromRemote(this.user).subscribe(
data => {
console.log("response received");
this.msg = "Registration Successful"
this._router.navigate(['/login']);
},
error => {
console.log("exception occured")
// this.msg = error.error();
}
)
}
}

这是用户级

export class User {
id: number | undefined;
emailId: string | undefined;
userName: string | undefined;
password: string | undefined;
cpassword: string | undefined;
role: string | undefined;
walletAmt: number | undefined;
constructor() { }
}

我试着为组件和电子邮件做一个测试用例。但我得到了"；没有期望"；错误

这是我的.spec文件

it('email should be correct', async () => {
fixture.whenStable().then(() => {
let email = component.user.emailId;
email = "[e-mail]";
expect(email).toBeTruthy();


});
})
it('email should be false', async () => {
fixture.whenStable().then(() => {
let email = component.user.emailId;
let val = component.registerUser()
email = '';
expect(email).toBeFalsy();
});
})

Answer 1

期望值在不可访问的代码中。采用这种方法的then回调将在测试结束后执行。您可以利用非常方便的await语法使其可访问。

it('email should be correct', async () => {
await fixture.whenStable();
let email = component.user.emailId;
expect(email).toBeTruthy();
})

it('email should be false', async () => {
await fixture.whenStable();
let val = component.registerUser()
let email = component.user.emailId;
expect(email).toBeFalsy();
})

在研究测试代码时，掌握测试内容并不容易。

PS：模板驱动的表单在单元测试中表现不佳。一般来说，这种方法不如反应形式强大。我宁愿避免尝试用测试来覆盖这些内容，并将时间投入到学习被动形式上。