时间戳

首页 > 解决方案 > Angular 模板驱动表单中的 Karma-Jasmine 测试注册表单

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

问题描述

我对 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 = "abc@gmail.com";
            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();
        });
    })

标签： angularunit-testingkarma-jasmine

解决方案

期望在无法访问的代码中。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：模板驱动的表单在单元测试中表现不佳。总的来说，这种方法不如反应形式强大。我宁愿避免试图用测试覆盖那些，并花时间学习反应形式。

推荐阅读