测试角度绑定

Question

有人可以就这个问题给出一些提示吗？ 我使用 Component1 中的函数 save() 在 db 中保存患者姓名。

 <form  name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
 
 <input #inputValid type="text" class="form-control" name="nombre" id="field_nombre"
	                [(ngModel)]="paciente.nombre" required/>

此表单在保存时自行关闭，我应该在另一个组件 Component2 的 html 页面上看到结果。它的html是这样的：

    <div class="table-responsive" *ngIf="pacientes">
     <tr *ngFor="let paciente of pacientes ;trackBy: trackId">
                <td>{{paciente.nombre}}</td>
                ....

我实际测试过数据是保存的，我是指保存功能，还有按钮提交调用保存。

我想使用 Jasmine 对前端部分进行单元测试，我之前保存的这些数据会出现在我的表中。我怎样才能做到这一点？到目前为止，我可以使用 ViewChild 来获取输入和表格的引用，但我需要一个关于如何实际测试它的提示。关于测试的角度教程不包括这样的示例。 谢谢，

Answer 1

试试这个，你可以给你的 tr 元素一个类名，并在提交后计算 ngfor 元素并检查它是否不等于 0 并且元素长度从 0 传递到 1 并在你的表单中添加一个 id ” id='FormId'"

<form  id="FormId" name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">


<tr class="patient" *ngFor="let paciente of pacientes ;trackBy: trackId">

这里是测试，新元素插入到最后，所以它的索引是length-1，你可以检查它的值是否等于你的输入值

it('should submit the form and save data', async(() => {
   let formElement: DebugElement;
   formElement = fixture.debugElement.query(By.css('#FormId'));
   formElement .triggerEventHandler('ngSubmit', null);
   expect(component.save).toHaveBeenCalledTimes(1); // check that save is called on sybmit
   const tableLength = fixture.debugElement.queryAll(By.css('.patient')).length;
   expect(tableLength ).toBe(1) // check that the element is added and length pass from 0 to 1
   expect(fixture.debugElement.queryAll(By.css('.patient'))[tableLength-1].nativeElement.value).toEqual(component.paciente.nombre)

  }))