javascript - 测试 Angular 绑定(bind)

Question

有人可以对这个问题给出一些提示吗？ 我有一个 Angular 形式的表单，其中包含一个输入，使用 Component1 中的函数 save() 将患者姓名保存在数据库中。

 <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 来获取输入和表格的引用，但我需要有关如何实际测试它的提示。关于测试的 Angular 教程不包括这样的示例。 谢谢，

Answer 1

尝试一下，您可以为您的 tr 元素指定一个类名，并在提交后对 ngfor 元素进行计数，并检查它是否不等于 0，并且元素长度是否从 0 传递到 1，并向您的表单添加一个 id ” id='表单Id'"

<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)

  }))