Javascript 使用jasmine为angular中的表单元素编写测试用例

我正在尝试使用angular testing框架测试angular 4中的输入框。但是，我无法获取表单中输入框的值。 参考角度测试文档，我可以看到我需要触发某种类型的输入事件，但是没有太多的解释，我无法让测试正常工作

我如何告诉angular检测我对模型所做的更改，以便在测试规范中验证它们？测试规范中的输入值始终为空-空字符串。我只是想弄清楚为什么这失败了

视图的代码为：

//template-driven-form.component.html
<form  #myForm="ngForm" (ngSubmit)='onSubmit()'>

  <div>
    <Label for="name">Hero Name </Label>
    <input required type="text" id="name" name = 'name' [(ngModel)]='heroes[currentHero].name' #name='ngModel' #nameSpy>
  </div>
  <div>
    <Label for="alter-ego">Alter Ego </Label>
    <input type="text" id="alter-ego" name="alterEgo" [(ngModel)]="heroes[currentHero].alterEgo" #alterEgo="ngModel" #alterEgoSpy>
  </div>
  <div>
    <Label for="powers">Power</Label>
    <select name="powers" id="powers"  [(ngModel)]="heroes[currentHero].power" #power="ngModel" #powerSpy>
      <option *ngFor="let power of powers" >{{power}}</option></select>
  </div>
  <div><button type='submit' [disabled]='!myForm.form.valid'>submit</button></div>

</form>

测试用例：

import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import {DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {TemplateDrivenFormComponent} from './template-driven-form.component';

import { FormsModule, NgForm } from '@angular/forms';
//import { RouterTestingModule } from '@angular/router/testing';



describe('Template Driven Form Component should ', () => {

  let page: Page;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [TemplateDrivenFormComponent]
    }).compileComponents();
  }));

  beforeEach(() => {
    page = new Page(TestBed.createComponent(TemplateDrivenFormComponent));
  });

  it(' bind the values to the input components ', () => {
    page.fixture.detectChanges();

    page.component.heroes = [{ name: 'A', alterEgo: 'B', power: 'cry' }];

    page.alterEgoInput.dispatchEvent(new Event('input'));


    page.fixture.detectChanges();

    expect(page.alterEgoInput.value).toBe('A');
    expect(page.nameInput.value).toBe('B');
    expect(page.powerInput.value).toBe('cry');


  });

});



class Page {
  nameInput: any;
  alterEgoInput: any;
  powerInput: any;

  component: TemplateDrivenFormComponent;
  debugElement: DebugElement;


  constructor(public fixture: ComponentFixture<TemplateDrivenFormComponent>) {
    let inputs = fixture.debugElement.queryAll(By.css('input'));
    this.nameInput = inputs[0].nativeElement;
    this.alterEgoInput = inputs[1].nativeElement;
    this.powerInput = fixture.debugElement.query(By.css('select')).nativeElement;
    this.component = fixture.componentInstance;
  }
}

从'@angular/core/testing'导入{TestBed，ComponentFixture，async}；
从“@angular/core”导入{DebugElement}；
从“@angular/platform browser”导入{By}”；
从“./template-drivenform.component”导入{TemplateDrivenFormComponent}；
从'@angular/forms'导入{FormsModule，NgForm}；
//从“@angular/router/testing”导入{RouterTestingModule}；
描述（'模板驱动表单组件应'，（）=>{
让页面：页面；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
导入：[FormsModule]，
声明：[TemplateDrivenFormComponent]
}).compileComponents（）；
}));
在每个之前（（）=>{
页面=新页面（TestBed.createComponent（TemplateDrivenFormComponent））；
});
它（'将值绑定到输入组件'，（）=>{
page.fixture.detectChanges（）；
page.component.heroes=[{name:'A'，alterEgo:'B'，power:'cry'}]；
page.alterEgoInput.dispatchEvent（新事件（'input'））；
page.fixture.detectChanges（）；
expect（page.alteregoint.value）.toBe（'A'）；
expect（page.nameInput.value）.toBe（'B'）；
expect（page.powerInput.value）.toBe（'cry'）；
});
});
类页{
名称输入：任意；
输入：任何；
电源输入：任意；
组件：TemplateDrivenFormComponent；
debugElement：debugElement；
构造函数（公共设备：ComponentFixture）{
让输入=fixture.debugElement.queryAll（By.css（'input'）；
this.nameInput=输入[0].nativeElement；
this.alteregoint=inputs[1].nativeElement；
this.powerInput=fixture.debugElement.query（By.css（'select'））.nativeElement；
this.component=fixture.componentInstance；
}
}

我在让模板驱动的表单测试正常工作时遇到问题。你学会怎么做了吗？我在让模板驱动的表单测试正常工作时遇到了问题。你学会怎么做了吗？

import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import {DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {TemplateDrivenFormComponent} from './template-driven-form.component';

import { FormsModule, NgForm } from '@angular/forms';
//import { RouterTestingModule } from '@angular/router/testing';



describe('Template Driven Form Component should ', () => {

  let page: Page;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [TemplateDrivenFormComponent]
    }).compileComponents();
  }));

  beforeEach(() => {
    page = new Page(TestBed.createComponent(TemplateDrivenFormComponent));
  });

  it(' bind the values to the input components ', () => {
    page.fixture.detectChanges();

    page.component.heroes = [{ name: 'A', alterEgo: 'B', power: 'cry' }];

    page.alterEgoInput.dispatchEvent(new Event('input'));


    page.fixture.detectChanges();

    expect(page.alterEgoInput.value).toBe('A');
    expect(page.nameInput.value).toBe('B');
    expect(page.powerInput.value).toBe('cry');


  });

});



class Page {
  nameInput: any;
  alterEgoInput: any;
  powerInput: any;

  component: TemplateDrivenFormComponent;
  debugElement: DebugElement;


  constructor(public fixture: ComponentFixture<TemplateDrivenFormComponent>) {
    let inputs = fixture.debugElement.queryAll(By.css('input'));
    this.nameInput = inputs[0].nativeElement;
    this.alterEgoInput = inputs[1].nativeElement;
    this.powerInput = fixture.debugElement.query(By.css('select')).nativeElement;
    this.component = fixture.componentInstance;
  }
}