Karma-Jasmine Testing register form in Angular template driven forms

Question

I'm very new to Angular. I'm trying to do Jasmine testing on template-driven forms but I got stuck.

This is my .html file

<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>

This is .ts file

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();
      }
    )

  }
}

This is User Class

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() { }

}

I have tried to make an test case for component and email.But i'm getting "no expectation" error.

This is my .spec file

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();
        });
    })

Answer 1

the expectations are inside unreachable code. then callback with such approach would be executed after the test is finished. You can leverage very convenient await syntax to make it reachable.

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();
})

While looking into the test code it is not that easy to grasp what is tested.

PS: template-driven forms are not playing well with unit tests. And in general, this approach is less powerful than reactive forms. I would rather avoid attempts to cover those with tests and invest time in learning reactive forms.