为什么Angular单元测试中无法读取表单及绑定变量的属性值？

问题原因 #

• 核心原因是测试代码调用异步函数enterNickAndClickRegister时未添加await关键字：该函数内部包含多个异步操作（获取组件Harness、给输入框赋值），直接调用时函数还没有执行完成，后续的打印和断言逻辑就已经运行，此时表单和组件变量还未被赋值，所以输出为空。
• 次要问题是模板代码同时混用了响应式表单的formControlName、模板驱动的[(ngModel)]以及手动绑定的[value]，三者同时作用可能在变更检测时出现状态冲突，生产环境运行正常不代表测试场景下时序稳定，测试对变更检测的执行时机敏感度更高，更容易出现异常。

修复方案 #

1. 修正测试异步调用逻辑 #

在调用enterNickAndClickRegister前添加await关键字，等待所有异步操作执行完成后再运行后续逻辑：

// 原错误写法
// enterNickAndClickRegister(false);
// 修正后写法
await enterNickAndClickRegister(false);

如果修改后仍偶现时序异常，可以在fixture.detectChanges()后补充await fixture.whenStable()，等待Angular所有异步任务执行完成后再继续执行后续代码。

2. 优化模板代码（可选但推荐） #

响应式表单场景下不需要额外使用[(ngModel)]和[value]绑定，直接通过formControl管理值即可，修改输入框代码：

<!-- 原混写代码 -->
<!-- <input matInput type="text" id="playerNick" formControlName="playerNick" [value]="playerNick" [(ngModel)]="playerNick"> -->
<!-- 修改为仅保留响应式表单绑定 -->
<input matInput type="text" id="playerNick" formControlName="playerNick">

如果需要同步组件的playerNick变量，可以通过订阅formControl的valueChanges事件实现，或者在需要取值的时候直接从registrationForm.get('playerNick').value获取即可。

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