代码之家 › 专栏 › 技术社区 › Tester

测试角度绑定

unit-testing angular html javascript

Tester · 技术社区 · 6 年前

有人能对这个问题提些提示吗? 我有一个角度的表单,其中有一个输入,用于使用函数save()将患者姓名保存在数据库中。 部件1 .

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

此表单在保存时自动关闭,我应该在其他组件组件2的HTML页面上看到结果。其HTML如下:

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

我已经测试过数据是否保存了我指的是保存功能,还有按钮提交调用保存。

我想使用jasmine对前端部分进行单元测试,我以前保存的数据会显示在我的表中。我该怎么做?到目前为止,我可以使用viewschild获取输入和表的引用,但是我需要一个关于如何实际测试它的提示。关于测试的角度教程不包括这样的例子。谢谢,

1 回复 | 直到 6 年前

Fateh Mohamed 6 年前

尝试这样做,您可以给tr元素一个类名,并在提交后对ngfor元素进行计数,检查它是否不等于0,元素长度是否从0传递到1,并向表单“id='formid”添加一个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)

  }))

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前