Javascript 单元测试中的绑定输入值

我有一个简单的带有文本输入的角度组件，它使用ngModel绑定。组件工作正常，但单元测试不正常

helloworld.component.html：

<div>
  <input [(ngModel)]="name" >
  <p>{{msg}} {{name}}</p>
</div>

helloworld.component.spec.ts：

import { async, ComponentFixture, TestBed, fakeAsync, tick } from 
'@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { HelloWorldComponent } from './helloworld.component';

describe('HelloWorldComponent', () => {
  let component: HelloWorldComponent;
  let fixture: ComponentFixture<HelloWorldComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HelloWorldComponent ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HelloWorldComponent);
    component = fixture.componentInstance;
  });

  it('should print the name on input', ()=>{
    component.msg = "Hi";
    fixture.detectChanges();

    var nameInput: HTMLInputElement = fixture.nativeElement.querySelector('input');
    var label: HTMLElement = fixture.nativeElement.querySelector('p');

    nameInput.value = 'John';
    nameInput.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    expect(component.msg).toBe('Hi');
    expect(component.name).toBe('John');
    expect(label.textContent).toBe('Hi John');
  });
});

import{async，ComponentFixture，TestBed，fakeAsync，tick}from
'角度/核心/测试'；
从'@angular/core'导入{CUSTOM_ELEMENTS_SCHEMA，NO_ERRORS_SCHEMA}；
从“./helloworld.component”导入{HelloWorldComponent}；
描述（'HelloWorldComponent'，（）=>{
let组件：HelloWorldComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[HelloWorldComponent]，
模式：[自定义元素模式，无错误模式]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（HelloWorldComponent）；
组件=fixture.componentInstance；
});
它（'应在输入时打印名称'，（）=>{
component.msg=“Hi”；
fixture.detectChanges（）；
变量nameInput:HTMLInputElement=fixture.nativeElement.querySelector（'input'）；
变量标签：HTMLElement=fixture.nativeElement.querySelector（'p'）；
nameInput.value='John'；
nameInput.dispatchEvent（新事件（'input'））；
fixture.detectChanges（）；
expect（component.msg）.toBe（'Hi'）；
expect（component.name）.toBe（'John'）；
expect（label.textContent）.toBe（'Hi John'）；
});
});

测试失败，因为名称未设置为“John”，但仍具有默认值“World”。在我看来，提供的代码相当于Angular文档中的示例（）

有一些文章解释如何在async（）中执行测试，并在更改输入值后使用fixture.whenStable（）.then（）

我还发现了在fakeAsync（）中运行测试并使用tick（）等待输入值绑定到name的提示。两个人都没用

---

我错过了什么

尝试使用

tick（）；fixture.detectChanges（）在
fixture.detectChanges（）之后，看看这是否有帮助。谢谢，但这也没有帮助。
import { async, ComponentFixture, TestBed, fakeAsync, tick } from 
'@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { HelloWorldComponent } from './helloworld.component';

describe('HelloWorldComponent', () => {
  let component: HelloWorldComponent;
  let fixture: ComponentFixture<HelloWorldComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HelloWorldComponent ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HelloWorldComponent);
    component = fixture.componentInstance;
  });

  it('should print the name on input', ()=>{
    component.msg = "Hi";
    fixture.detectChanges();

    var nameInput: HTMLInputElement = fixture.nativeElement.querySelector('input');
    var label: HTMLElement = fixture.nativeElement.querySelector('p');

    nameInput.value = 'John';
    nameInput.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    expect(component.msg).toBe('Hi');
    expect(component.name).toBe('John');
    expect(label.textContent).toBe('Hi John');
  });
});