如何以角度为模板驱动形式执行单元测试

Question

我想对模板驱动的表单执行单元测试，我已经创建了简单的模板驱动的表单，任何人都可以帮助我编写和执行测试用例。 如何为单独的输入字段编写测试用例。

我想为我的输入字段编写并执行测试用例。如何为此表单输入字段编写测试用例。

comp.html

 bill : {
    id : 1

    lineItems : [
    {
        stockId : 10,
        qty : 5,
     },

     {
        stockId : 11,
        rate : 40   
     }
    ]
    }

comp.ts

<form #newUserForm="ngForm" (ngSubmit)="onSubmit(newUserForm)">
        <mat-card class="example-card">
          <h3 class="color" id="num">Login form</h3>
          <p class="error-message" *ngIf="errorMessage">{{ errorMessage }}</p>
          <mat-card-content class="login-container">
            <mat-form-field class="example-full-width">
              <input
                matInput
                type="text"
                placeholder="userName"
                [(ngModel)]="name"
                name="name"
                required
                #userName="ngModel"
              />
              <mat-error *ngIf="userName.invalid && userName.touched">
                <mat-error *ngIf="userName.errors?.required">
                User name is required!
                </mat-error>
              </mat-error>
            </mat-form-field>
            <mat-form-field class="example-full-width">
              <input
                matInput
                type="password"
                placeholder="Password"
                required
                [(ngModel)]="password"
                name="password"
                #userPassword="ngModel"
                [type]="hide ? 'password' : 'text'"
              />
              <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
                <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
                </button>
              <mat-error *ngIf="!userPassword.valid && userPassword.touched">
                Password is required!
              </mat-error>
            </mat-form-field>
          </mat-card-content>
          <button
            mat-raised-button
            color="primary"
            type="submit"
            [disabled]="!newUserForm.form.valid"
          >
            Register
          </button>&nbsp;
          <!-- <button
            mat-raised-button
            color="primary"
            type="button"
            (click)="newUserForm.reset()"
          >
            Reset
          </button> -->
        </mat-card>
      </form>

comp.spec.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from "@angular/router";
import { UserService } from '../services/user.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  hide = true;
  name: string;
  password: any;
  errorMessage: string;
  form:NgForm;

  constructor(
    private router: Router,
    private userService: UserService
  ) { }

  ngOnInit() {
  }

  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log(form.value);
      this.userService.loginPage(form.value).subscribe(
        (data: any) => {
          if (data) {
            console.log(data);
            // this.userService.updateLoginData(data.message);
            this.router.navigate(["infohub"]);
          } else {
            // this.errorMessage = data.message;
            console.log(data);
          }
        },
        err => {
          console.log(err);
        }
      );
    }
  }
}