javascript - 测试角度表单提交
问题描述
我正在测试一个角度应用程序,尤其是这个 HTML 输入:
<form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
<input type="text" name="nombre" id="field_nombre"
[(ngModel)]="paciente.nombre" required/>
(etc. f.e. button on submit...)
imports....
export class PacienteDialogComponent implements OnInit {
paciente: Paciente;
....
save() {
this.isSaving = true;
if (this.paciente.id !== undefined) {
this.subscribeToSaveResponse(
this.pacienteService.update(this.paciente));
} else {
this.subscribeToSaveResponse(
this.pacienteService.create(this.paciente));
}
}
}
export class Paciente implements BaseEntity {
constructor(
public id?: number,
public nombre?: string,
public sexo?: Sexo,
.....
describe('Paciente Management Dialog Component', () => {
let comp: PacienteDialogComponent;
let fixture: ComponentFixture<PacienteDialogComponent>;
let debugElement: DebugElement; //create a debgElement for testing
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [OncosupTestModule,
OncosupSharedModule,
BrowserModule,
FormsModule,
],
declarations:...
],
providers: [
...
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PacienteDialogComponent);
comp = fixture.componentInstance;
debugElement = fixture.debugElement;
});
//a default generated test which controls if the save method really saves a new patient with its name, id, sex, etc.
it('Should call create service on save for new entity',
inject([],
fakeAsync(() => {
// GIVEN
const entity = new Paciente();
spyOn(service, 'create').and.returnValue(Observable.of(new HttpResponse({body: entity})));
comp.paciente = entity;
// WHEN
comp.save();
tick(); // simulate async
// THEN
expect(service.create).toHaveBeenCalledWith(entity);
expect(comp.isSaving).toEqual(false);
expect(mockEventManager.broadcastSpy).toHaveBeenCalledWith({ name: 'pacienteListModification', content: 'OK'});
expect(mockActiveModal.dismissSpy).toHaveBeenCalled();
})
)
);
// And teh second thing I want to test is if ngSubmit is really calling the save() function
it ('should call the onSubmit method', async(() => {
//fixture.detectChanges();
spyOn(comp,'save');
var1 = debugElement.query(By.css('button')).nativeElement;
console.log('print button ' + var1);
var1.click();
expect(comp.save).toHaveBeenCalledTimes(0);//verify...
}));
//And also if isSaving is set to true
it ('should set isSaving to true', async(() => {
comp.save();
expect(comp.isSaving).toBeTruthy();
}));
1.现在我有这些问题:第一个测试是默认生成的,不是我写的。在这一行const entity = new Paciente();
中我应该调用 Paciente 的参数吗?像 id、sex、name 或者默认这样不带参数。第一个测试的目的是检查 save() 函数是否真的保存了患者及其数据,例如 id、sex 等。
2.对于第二个测试,我在 Angular 教程中读到:HaveBennCalled(0)是测试这个间谍是否被调用以及调用多少次的正确方法。但无论如何,它是否真的测试按钮是否调用函数 save()。我认为它只检查之前是否没有调用过按钮,而不是现在在保存功能中调用它。
3.这 3 项测试是否足以完成表单提交?
解决方案
根据我的评论,这里是如何测试表单是否正确提交。
假设您有一个接口Patient
:
export interface Patient {
id: number;
name: string;
}
在您的组件中,您有一个表单,您可以通过以下方式提交它submit()
:
submit() {
this.patientService.savePatient(this.patient).subscribe(result => {
console.log('Patient created');
});
}
现在您的服务进行 HTTP 调用并检查字段是否正常:
savePatient(patient: Patient): Observable<any> {
if (typeof patient.id !== number) { return Observable.throw('ID is not a number'); }
if (typeof patient.name !== string) { return Observable.throw('Name is not a string'); }
return this.http.post<any>(this.url, patient);
}
那么你的测试应该是这样的。首先,组件:
it('Should call the service to save the patient in DB', () => {
// Spy on service call
// Expect spy to have been called
});
it('Should log a message on success', () => {
// Spy on console log
// Expect console log to have been called with a string
});
您还可以测试错误是否被正确处理,是否有错误代码等。
现在在服务中:
it('Should throw an error if the ID is not a number', () => {
// Mock a patient with a string ID
// Expect an error to be thrown
});
// Same thing for the name, you get the idea
it('Should make an HTTP call with a valid patient', () => {
// Spy on the HttpTestingController
// Expect the correct endpoint to have been called, with the patient as the payload
});
这些测试的总体思路是涵盖任何可能发生的情况。这将允许您防止副作用:例如,如果有一天您决定将您的 ID 传递给字符串,单元测试将失败并告诉您
你希望我发送一个字符串,但我只传递一个数字
这就是单元测试的目的。
推荐阅读
- javascript - cURL JSON 数据 Node.js
- xml - perl 的 XML::SemanticDiff 可以硬塞到两个 XML 文件的顺序不可知比较中吗?
- javascript - 我有一个关于 js Async Await 行为结构的问题
- vb.net - 如何查找包含具有给定扩展名的文件的文件夹
- javascript - 输入和退格后显示 Google 脚本 HTML 数据列表
- bash - 无法通过 Bash 创建文件
- python-3.x - 通过拆分字符串使用 matplot 绘制时间序列数据
- reactjs - React 项目运行 React 本机启动命令
- angular - 如何以角度从对话框组件传递和访问数据?
- python - 如何计算两个坐标系之间的平均/最佳旋转?