Angular 5自定义Select组件单元测试预设选中失效排查

你遇到的问题是自定义Select组件在单元测试中无法预设选中指定ID的选项，测试始终显示选中第一项。我帮你梳理了下问题所在，主要有两个层面的原因：测试代码的变更检测触发缺失，以及组件本身的状态同步逻辑存在漏洞。

问题根源拆解 #

1. 测试代码未触发变更检测 #

在你的测试用例中，设置component.selectedOption = '2'后，没有通知Angular进行变更检测。Angular的数据流是单向的，只有触发变更检测，TestComponent中的selectedOption变化才会传递给子组件app-my-select，组件根本不知道选中项已经更新，自然不会渲染出正确的选中状态。

2. 组件状态同步逻辑不完善 #

• 模板绑定冗余且冲突：你手动给每个<option>设置[selected]属性，但原生<select>的选中状态优先由自身的value属性决定，手动设置的[selected]可能和Angular的ngModel同步逻辑冲突，导致选中状态不更新。
• ControlValueAccessor实现不完整：writeValue方法只更新了组件内部的selectedOption变量，但没有同步到原生<select>元素。即使模板有绑定，在初始化阶段也可能因为元素未完全渲染导致状态不同步。

修复方案 #

第一步：修复测试代码 #

在设置选中项后，调用fixture.detectChanges()触发变更检测，让Angular同步数据到子组件：

it('should init with given id', () => {
  component.selectedOption = '2';
  fixture.detectChanges(); // 新增：触发变更检测
  const select = fixture.debugElement.query(By.css('select'));
  fixture.whenStable().then(() => {
    expect(select.nativeElement.selectedIndex).toEqual(2);
    expect(select.nativeElement.value).toEqual('2');
    expect(component.selectedOption).toEqual('2');
  });
});

第二步：优化组件代码 #

简化模板绑定，去掉手动[selected]

把原生<select>改成用[(ngModel)]绑定selectedOption，让Angular自动处理选中状态，避免手动判断的冗余和冲突：

<select #select [(ngModel)]="selectedOption" (change)="onChange($event)" (blur)="onBlur()">
  <option *ngFor="let optionItem of options" [value]="optionItem.id !== undefined ? optionItem.id : optionItem.key">
    {{ optionItem.value }}
  </option>
</select>

完善writeValue方法，同步原生select状态

确保通过ngModel传入值时，不仅更新组件内部变量，还同步到原生元素（初始化阶段的保险措施）：

writeValue(obj: any) {
  if (obj !== undefined && obj !== null) {
    this.selectedOption = '' + obj;
    // 同步到原生select元素（如果元素已初始化）
    if (this.selectElement) {
      const selectEl = this.selectElement.nativeElement as HTMLSelectElement;
      selectEl.value = '' + obj;
    }
  } else {
    this.selectFirstOption();
    this.propagateAndEmitValue();
  }
}

优化ngOnChanges，确保options变化时同步选中状态

当选项列表更新后，如果已有选中项，同步到原生select：

ngOnChanges(changes: SimpleChanges) {
  if (changes.options && changes.options.currentValue && changes.options.currentValue.length > 0) {
    if (!this.isSelectedOptionAvailableInOptions()) {
      this.selectFirstOption();
    }
    // 同步选中状态到原生select
    if (this.selectElement && this.selectedOption) {
      const selectEl = this.selectElement.nativeElement as HTMLSelectElement;
      selectEl.value = this.selectedOption;
    }
  }
}

验证效果 #

修改后重新运行测试，Angular会在测试中触发变更检测，将选中值传递给自定义组件，组件通过完善的同步逻辑更新原生select的选中状态，测试用例应该就能顺利通过了。

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