具有双向绑定的 Angular 4 单元测试表单。从视图更新模型时出现问题

Question

我偶然发现了一个奇怪的问题。我正在使用基于模板的表单和双向绑定执行单元测试。以下是测试代码：

describe('Template Forms Input', () => {

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

  it('DOM input value changes the component model', fakeAsync(() => {

    const fixture = TestBed.createComponent(DummyFormsComponent);
    fixture.detectChanges();
    const dummyInputDe = fixture.debugElement.query(By.css('input'));
    const dummyInputEl = dummyInputDe.nativeElement;

    dummyInputEl.value = 'Super dummy';
    dummyInputEl.dispatchEvent(new Event('input'));

    tick();
    fixture.detectChanges();

    expect(fixture.debugElement.query(By.css('h2')).nativeElement.textContent).toEqual('Super dummy');
  }));
});

@Component({
  selector: 'dummy-forms',
  template: `
    <form>
      <input name="title" [(ngModel)]="model.anotherDummyValue">
    </form>
    <h2>{{model.anotherDummyValue}}</h2>
  `
})
class DummyFormsComponent {

  model = { anotherDummyValue: '', date: '' };
}

我无法通过测试。h2总是空的。然而。如果我删除<代码>

我认为我对异步行为做了一些错误的事情。有人有什么想法吗？

Answer 1

尝试在代码中添加组件实例。更多 我在您的组件中看不到 ngOnInit 或构造函数。

组件=fixture.component实例；

我们通常以以下方式进行

describe('EditComponent', () => {
  let component: EditComponent;
  let fixture: ComponentFixture<EditComponent>;
  let displayText: DebugElement;
  let editableText: DebugElement;

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

  beforeEach(() => {
    fixture = TestBed.createComponent(EditComponent);
    component = fixture.componentInstance;
    component.text = 'test input in the editor';
    displayText = fixture.debugElement.query(By.css('.row'));
    editableText = fixture.debugElement.query(By.css('.editor-form'));
  });

  it('should be created', () => {
    component.ngOnInit();
    fixture.detectChanges();
    expect(component).toBeTruthy();
  });
....

在beforeEach中声明您的组件。

Answer 2

面对与您类似的问题（请参阅下面的Angular环境详细信息），搜索了所有关于单元测试的InternetNgModel。最后，我发现仅将值设置为查询的输入（实际上是通过NgModel绑定的）是不够的。即dummyInputEl.value='超级假人'；和调度事件（'输入'）在您的情况下永远不会启动并运行实际的NgModel操作。

为了解决这个问题，您必须从绑定的输入中获取注入的NgModel实例，并通过写值方法通过其值访问器属性设置值，然后在DOM本机元素上发出'输入'事件。

...
const ngModel = dummyInputDe.injector.get(NgModel);

tick();                    // <== Important to wait until stable before writing value

ngModel.valueAccessor.writeValue('Super dummy');
dummyInputDe.nativeElement.dispatchEvent(new Event('input'));

fixture.detectChanges();                   // <= force updates to the view


expect(fixture.debugElement.query(By.css('h2'))
  .nativeElement.textContent).toEqual('Super dummy');                // <= Viola!
...

请注意，在写入 NgModel 值访问器之前，我们必须在 fakeAsync 中提供刻度。可能是因为 NgModel 的访问器需要一部分时间来准备，然后才能在其上写入值（在这方面感谢反馈）。

而在没有fakeAsync区域的规范的情况下，应该使用fixture.whenStable（）解析的promise来处理相同的场景以获得所需的结果。

注意：关于Web上单元测试的每个主题，尤其是当NgModel有问题时，这在任何地方都没有被提及。甚至官方的Angular留档也没有。不确定新的Angular版本（尤其是FormsMoules实现中的更改）是否强制进行了此更改。

< Li > Angular < code > v 5 . 2 . 0 < Li > Karma < code > v 2 . 0 . 0 < Li > Jasmine(Jasmine-core)< code > v 2 . 8 . 0