我希望这个问题能澄清很多人关于测试 Angular 文档几乎没有提到的模板驱动表单。我在此表单中有一个要测试的输入。我想使用 Jasmine 在 Angular 中测试一个简单的 DOM。这是一个使用 NgForm 的模板驱动表单,如下所示:
<form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
<input #inputtotest type="text" class="form-control" name="nombre" id="field_nombre"
[(ngModel)]="paciente.nombre" required/>
我只想测试:
- 如果此标签的此输入使用 NgModel 发送数据(paciente.nombre),或者如果其属性为 paciente.model 则更好。
根据此响应,我们可以使用ViewChild
:在 DOM 上使用 viewchild 如何在组件类中获取 ngForm 变量引用
我的组件文件是这样的:
//all the other imports
import { ViewChild } from '@angular/core';
@Component({
...
})
export class PacienteDialogComponent implements OnInit
{
@ViewChild('inputtotest') inputtotest: **ElementRef**; //Create a viewchild of my input s I can obtain its value
paciente: Paciente; //Paciente is a modal that initializes the nombre
...
}
我为表单编写测试的规范文件是这样的:
//All te Angular imports
describe('Component Tests', () => {
describe('Paciente Management Dialog Component', () => {
let comp: PacienteDialogComponent;
let fixture: ComponentFixture<PacienteDialogComponent>;
//starts my code
let input: HTMLElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
.....angular imports
}));
beforeEach(() => {
fixture = TestBed.createComponent(PacienteDialogComponent);
comp = fixture.componentInstance;
input = `fixture.debugElement.query(By.css('inputtotest')).nativeElement;`
});
测试:
it ('The form should call save method on submit', async(() => {
fixture.detectChanges();
spyOn(comp,'save');
savebutton.click();
expect(comp.save).toHaveBeenCalledTimes(0);
}));
it ('The form should have the input for paciente.nombre', async(() => {
fixture.detectChanges();
expect(inputname.getAttribute.value).toEqual(paciente.nombre);
}));
现在我已经获得了作为 HTML 元素的输入,但我没有找到任何方法来检查它是否等于 paciente.nombre 的 ngModel 值。我在示例中这样做,结果是错误:
类型名称字符串中不存在属性值。我做错了什么吗?