单元测试 – Angular2 – 单元测试表单提交

组件模板如下：

<div>
  <form [formGroup]="signupForm" (submit)="addUser($event)" role="form" class="form-horizontal">
      <label>Firstname:</label>
      <input type="text" formControlName="firstName"> 
      <label>Lastname:</label>
      <input type="text" formControlName="lastName">
      <input type="submit" id="btnSubmit" class="btn btn-primary btn-lg" value="Register" />
  </form>
</div>

组件定义如下：

@Component({
  moduleId: module.id,templateUrl: 'user.component.html'  
})
export class UserComponent {

  registered = false;

  constructor(
    private router: Router,private fb: FormBuilder,public authService: AuthService) {

      this.signupForm = this.fb.group({
            'firstName': ['',Validators.required],'lastName': ['',Validators.required]
        });        
  }

  addUser(event: any) {
      event.preventDefault();
      this.addUserInvoked = true;
      ......
      ......
      this.authService.register(this.signupForm.value)
        .subscribe(
        (res: Response) => {
            if (res.ok) {
                this.registered = true;
            }
        },(error: any) => {
            this.registered = false;                                
        });
  }
}

它工作正常.但是,在我的单元测试中,当我尝试测试在提交按钮上调用click时,然后调用addUser.但不幸的是,没有调用addUser函数.

以下是我的样本单元测试

class RouterStub {
  navigateByUrl(url: string) { return url; }
}


let comp: UserComponent;
let fixture: ComponentFixture<UserComponent>;

describe('UserComponent',() => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ UserComponent ],schemas:      [NO_ERRORS_SCHEMA]
    });
  });

  compileAndCreate();
  tests();
});

function compileAndCreate() {
  beforeEach( async(() => {
    TestBed.configureTestingModule({
      providers: [        
        { provide: Router,useClass: RouterStub },{ provide: AuthService,useValue: authServiceStub },FormBuilder
      ]
    })
    .compileComponents().then(() => {
      fixture = TestBed.createComponent(UserComponent);
      comp = fixture.componentInstance;
    });
  }));
}

function tests() {
    it('should call addUser when submitted',() => { 
        const spy = spyOn(comp,'addUser');  

        //*************below method doesn't work and it refreshes the page***************
        //let btnSubmit = fixture.debugElement.query(By.css('#btnSubmit'));
        //btnSubmit.nativeElement.click();

        let form = fixture.debugElement.query(By.css('form'));
        form.triggerEventHandler('submit',null);
        fixture.detectChanges();

        expect(comp.addUser).toHaveBeenCalled();
        expect(authServiceStub.register).toHaveBeenCalled();
        expect(comp.registered).toBeTruthy('user registered'); 
    });

}

我试过了

fixture.debugElement.query(By.css('#btnSubmit')).nativeElement.click()

和

fixture.debugElement.query(By.css('form')).triggerEventHandler('submit',null)

但我仍然无法调用addUser函数.我已经在SO here上看到了一个问题,但它也没有用.