Question

我希望这个问题可以让很多人了解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：use of viewchild on DOM How to get ngForm variable reference in the component class

我的组件文件是这样的：

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

我编写表单测试的spec文件是这样的：

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

}));

现在我已经将输入作为HTMLelement获取，但我没有找到任何方法来检查它是否与paciente.nombre的ngModel值相等。我在示例中这样做，结果是错误：

类型名称字符串中不存在属性值。我做错了什么？

类型名称字符串中不存在Error-Property值

0 个答案: