Angular-Material mat-form-field输入框ngModel单元测试值同步问题

针对你遇到的测试失败（Expected '' to equal 'Open Travel'），可以尝试以下几种修复方式：

1. 添加变更检测 #

手动修改输入框值并触发事件后，需要通知Angular执行变更检测，才能让组件属性同步更新：

fit('some test definition', () => {
  fixture.whenStable().then(() => {
    expect(component.name).toEqual('');

    const inputName = fixture.debugElement.nativeElement.querySelector('#name');
    
    inputName.value = 'Open Travel';
    inputName.dispatchEvent(new Event('input', { bubbles: true })); // 确保事件冒泡
    fixture.detectChanges(); // 触发变更检测

    expect(component.name).toEqual('Open Travel');
  });
});

2. 使用DebugElement触发事件 #

通过Angular的DebugElement来触发事件，更符合Angular测试规范：

import { By } from '@angular/platform-browser';

fit('some test definition', () => {
  fixture.whenStable().then(() => {
    expect(component.name).toEqual('');

    const inputDebugEl = fixture.debugElement.query(By.css('#name'));
    inputDebugEl.nativeElement.value = 'Open Travel';
    inputDebugEl.triggerEventHandler('input', { target: inputDebugEl.nativeElement });
    fixture.detectChanges();

    expect(component.name).toEqual('Open Travel');
  });
});

3. 检查测试模块依赖 #

确保测试模块中已导入必要模块，否则ngModel和mat-form-field无法正常工作：

import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

TestBed.configureTestingModule({
  imports: [
    FormsModule,
    MatFormFieldModule,
    MatInputModule
  ],
  declarations: [YourComponent]
});

4. 用async/await简化异步逻辑 #

替换then链式调用，让代码更清晰，同时确保所有异步操作完成：

fit('some test definition', async () => {
  await fixture.whenStable();
  expect(component.name).toEqual('');

  const inputName = fixture.debugElement.nativeElement.querySelector('#name');
  
  inputName.value = 'Open Travel';
  inputName.dispatchEvent(new Event('input', { bubbles: true }));
  fixture.detectChanges();
  await fixture.whenStable(); // 等待异步更新完成

  expect(component.name).toEqual('Open Travel');
});

内容的提问来源于stack exchange，提问作者AlexMitDemBart