如何正确测试带默认值的ngForm reset功能？

Angular模板驱动表单（NgForm）的resetForm方法不会立刻同步更新组件中绑定的表单字段变量，值的同步需要等变更检测周期执行完成才会生效。你在测试中调用reset()后直接断言，此时变更检测还未触发，所以component.message还是旧的空值。

你需要按以下步骤调整测试用例：

• 首先修正测试代码中的拼写错误：第二条断言里的signatur拼写漏了末尾的e，应该改为signature
• 调用reset()方法后，手动触发测试夹具的变更检测，等待表单值同步到组件变量后再执行断言

it('should reset form', () => {
    const signature = 'Best regards';                                  
    component.user.signature = signature;                              
    component.reset();

    // 手动触发变更检测，让ngForm完成值的同步
    fixture.detectChanges();
    // 可额外加whenStable等待异步操作完成，适配更复杂的场景
    fixture.whenStable().then(() => {
      expect(component.user.signature).toEqual(signature);               
      expect(component.getDefaultMessage()).toContain(signature);        
      expect(component.message).toEqual(component.getDefaultMessage());  
    })
});

如果你不想依赖组件绑定的message变量做断言，也可以直接从表单实例里取值验证，不需要等变更检测：

expect(component.form.value.message).toEqual(component.getDefaultMessage());

这种方式因为直接读取表单实例的内部值，resetForm调用后就会立刻更新，可以直接断言。

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