我有一个简单的组件,它在 form
元素中包含两个输入字段。单击提交按钮时,它会调用组件上的 addUser
函数。
组件模板如下:
<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;
});
}
}
它工作正常。但是,在我的单元测试中,当我尝试测试在提交按钮上调用单击时,将调用 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 上但这也没有帮助。
最佳答案
示例代码如下: 1:将 Xcomponent 替换为您的组件名称 2:将 formID 替换为您的表单 ID。
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {FormsModule} from '@angular/forms';
import {By} from '@angular/platform-browser';
describe('Xcomponent', () => {
let component: Xcomponent;
let fixture: ComponentFixture<Xcomponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [FormsModule],
declarations: [Xcomponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(Xcomponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should call save() method on form submit', () => {
/*Get button from html*/
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
// Supply id of your form below formID
const getForm = fixture.debugElement.query(By.css('#formID'));
expect(getForm.triggerEventHandler('submit', compiled)).toBeUndefined();
});
});
关于unit-testing - Angular2 - 单元测试表单提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40723016/