Angular2 NgModel 在 Jasmine 测试中没有获得价值

Question

我在 Angular 2 中使用模板驱动的表单，我正在尝试先测试开发它们。我已经搜索了这个网站和互联网的其他部分，并且我基本上已经尝试了我能找到的所有东西（主要是一堆 tick() 语句和在 fakeAsync 中随处可见的 detectChanges()），以将 NgModel 附加到我的输入以获取值，以便可以将其传递给我的 onSubmit 函数。输入元素的值设置正确，但 NgModel 永远不会更新，这意味着 onSubmit 函数没有从 NgModel 中获取正确的值。

这是模板：

建立一个锻炼

注意：我知道发送给 ngSubmit 的值会导致测试失败，但这意味着我可以在函数中设置断点并检查 NgModel。

这是组件：

从'@angular/core'导入{组件，OnInit}； 从“../model/skill-service”导入{SkillService}； 从“@angular/forms”导入 {NgModel}； @零件（{ 选择器：'app-startworkout', templateUrl: './startworkout.component.html', styleUrls: ['./startworkout.component.css'] }) 导出类 StartworkoutComponent 实现 OnInit { 公共技能计数：字符串； 构造函数（公共技能服务：技能服务）{} showWorkout（值：NgModel）：无效{ console.log('断点', value.value); } ngOnInit() { } }

这是规格：

/* tslint:disable:no-unused-variable */ 从'@angular/core/testing'导入{async，ComponentFixture，TestBed，fakeAsync，tick}； 从 '@angular/platform-b​​rowser' 导入 {By, BrowserModule}； 从“@angular/core”导入 { DebugElement }； 从'./startworkout.component'导入{ StartworkoutComponent }； 从“../model/skill-service”导入{SkillService}； 从“../core/store”导入{Store}； 从“../model/sport-service”导入 {SportService}； 从“@angular/forms”导入 {FormsModule}； 从“@angular/platform-b​​rowser/testing/browser_util”导入 {dispatchEvent}； 描述('StartworkoutComponent', () => { 让组件：StartworkoutComponent； 让夹具：ComponentFixture； 让元素：调试元素； 让技能服务：技能服务； beforeEach(异步(() => { var storeSpy:any = jasmine.createSpyObj('store', ['getValue', 'storeValue', 'removeValue']); var stubSkillService:SkillService = new SkillService(storeSpy); TestBed.configureTestingModule({ 声明：[ StartworkoutComponent ]， 提供者：[{provide:Store, useValue:storeSpy}, SportService, SkillService], 进口：[BrowserModule，FormsModule] }) .compileComponents(); })); beforeEach(() => { 夹具 = TestBed.createComponent(StartworkoutComponent); 组件=fixture.componentInstance； 元素=fixture.debugElement； 夹具.detectChanges(); }); it('应该创建', () => { 期望（组件）.toBeTruthy（）； }); describe('没有锻炼', () => { 让 createWorkout:DebugElement; 让技能计数：HTMLInputElement； 让 submitButton:HTMLButtonElement; beforeEach(() => { createWorkout = element.query(By.css('#createWorkout')); SkillCount = element.query(By.css('#skillCount')).nativeElement; submitButton = element.query(By.css('#buildWorkout')).nativeElement; }); it('有 createWorkout 表格', () => { 期望（createWorkout）.toBeTruthy（）； 期望(skillCount).toBeTruthy(); }); it('提交值', fakeAsync(() => { spyOn(component, 'showWorkout').and.callThrough(); 打钩（）; 技能计数.value = '10'; dispatchEvent(skillCount, '输入'); 夹具.detectChanges(); 勾号（50）； submitButton.click(); 夹具.detectChanges(); 勾号（50）； 期望(component.showWorkout).toHaveBeenCalledWith('10'); })); }); });

我确定我错过了一些基本/简单的东西，但过去一天我一直在梳理我能找到的所有东西，但没有运气。

编辑：

我认为也许人们关注的是错误的事情。在这一点上，我很确定我缺少有关 ngForm 和 ngModel 工作原理的一些基本知识。当我添加

<p>{{cwf.value | json}}</p>

进入表格，它只显示{}。我相信它应该显示一个代表输入的成员属性。如果我在该字段中输入，该值不会改变。如果我尝试绑定到 SkillCountFld，也会发生类似的事情。所以我认为基本表单设置在某种程度上是不正确的，并且在输入正确连接到 SkillCountFld 控制器之前，测试永远不会起作用。我只是看不出我错过了什么。

Answer 1

在 Angular 网站上有很多成功的测试 无需等待 whenStable https://github.com/angular/angular/blob/874243279d5fd2bef567a13e0cef8d0cdf68eec1/modules/%40angular/forms/test/template_integration_spec.ts#L1043

即可设置

这是因为当您在beforeEach 内触发fixture.detectChanges(); 时，这些测试中的所有代码都在fakeAsync 区域内执行。所以fakeAsync zone 不知道其范围之外的异步操作。当您第一次调用detectChanges 时，ngModel 被初始化

 NgModel.prototype.ngOnChanges = function (changes) {
            this._checkForErrors();
            if (!this._registered)
                this._setUpControl(); //<== here

并获得正确的输入事件回调

NgForm.prototype.addControl = function (dir) {
  var _this = this;
  resolvedPromise.then(function () { // notice async operation
      var container = _this._findContainer(dir.path);
      dir._control = (container.registerControl(dir.name, dir.control));
      setUpControl(dir.control, dir); // <== here

在setUpControl 中，您可以看到input 事件将调用的函数

dir.valueAccessor.registerOnChange(function (newValue) {
  dir.viewToModelUpdate(newValue);
  control.markAsDirty();
  control.setValue(newValue, { emitModelToViewChange: false });
});

1) 因此，如果您将 fixture.detectChanges 从 beforeEach 移动到您的测试中，那么它应该可以工作：

 it('submits the value', fakeAsync(() => {
   spyOn(component, 'showWorkout').and.callThrough();
   fixture.detectChanges();

   skillCount = element.query(By.css('#skillCount')).nativeElement;
   submitButton = element.query(By.css('#buildWorkout')).nativeElement;

   tick();
   skillCount.value = '10';
   dispatchEvent(skillCount, 'input');
   fixture.detectChanges();

   submitButton.click();
   fixture.detectChanges();
   expect(component.showWorkout).toHaveBeenCalledWith('10');
}));

Plunker Example

但这个解决方案似乎非常复杂，因为您需要重写代码以在每个 it 语句中移动 fixture.detectChanges（skillCount、submitButton 等也存在问题）

2) 正如 Dinistro 所说，async 和 whenStable 也应该对您有所帮助：

it('submits the value', async(() => {
  spyOn(component, 'showWorkout').and.callThrough();
  fixture.whenStable().then(() => {
    skillCount.value = '10';
    dispatchEvent(skillCount, 'input');
    fixture.detectChanges();

    submitButton.click();
    fixture.detectChanges();

    expect(component.showWorkout).toHaveBeenCalledWith('10');
  })
}));

Plunker Example

但是等等，为什么我们必须更改我们的代码？

3) 只需将 async 添加到您的 beforeEach 函数中

beforeEach(async(() => {
  fixture = TestBed.createComponent(StartworkoutComponent);
  component = fixture.componentInstance;
  element = fixture.debugElement;
  fixture.detectChanges();
}));

Plunker Example

Answer 2

我认为 whenStable 应该可以解决您的问题：

it('submits the value',() => {
    fixture.whenStable().then(() => {
        // ngModel should be available here 
    })
});

更多信息在这里：https://angular.io/docs/ts/latest/guide/testing.html#!#when-stable

编辑： 如果您直接操作 DOM 元素的值，ValueAccessor 似乎不会注意到变化。但是应该注意，如果你直接用ValueAccessor写值：

const skillCount= fixture.debugElement.query(By.directive(NgModel));
const ngModel= skillCount.injector.get(NgModel);

ngModel.valueAccessor.writeValue('10')