Angular Select初始值未触发valueChanges事件的单元测试问题

问题背景 #

使用Angular的MatSelect组件，期望实现三个核心行为：

• 从服务获取选项列表
• 组件默认选中第一个选项
• 所有值变更事件（包括初始选中）都触发数据请求

当前实现的模板代码：

<mat-form-field>
  <mat-select [formControl]="selectOption">
    <mat-option *ngFor="let option of (options$ | async)" [value]="option.value">
      {{option.displayName}}
    </mat-option>
  </mat-select>
</mat-form-field>
<div *ngIf="(data$ | async) as data">
  <!-- some charts and other components -->
</div>

组件代码：

interface Option {
  value: number,
  displayName: string
}

@Component()
export class FooComponent implements OnInit {
  readonly selectOption: FormControl<Option>;
  readonly options$: Observable<Option[]>;
  readonly data$: Observable<Data>;

  constructor(private readonly dataService: DataService) {
    this.options$ = this.dataService.listOptions();

    this.selectOption = new FormControl<Option>(DEFAULT_OPTION);

    this.data$ = this.getData();
  }

  ngOnInit() {
    this.options$.subscribe((options) => {
      if (options.length > 0) {
        this.selectOption.setValue(options[0]);
      }
    })
  }

  private getData(): Observable<Data> {
    return this.selectOption.valueChanges.pipe(
      switchMap((value) => this.dataService.queryData(value))
    );
  }
}

现有问题 #

• 开发环境中功能正常：能选中第一个选项并触发数据请求，切换选项也正常
• 单元测试中getData()未执行，selectOption.valueChanges未触发
• 尝试将初始值设置移到ngAfterViewInit时，出现ExpressionChangedAfterItHasBeenCheckedError错误

问题根源分析 #

1. 单元测试失败原因 #

valueChanges是冷Observable，只有当有订阅者时才会发出值。当前data$虽然在构造函数中初始化，但如果测试中没有触发模板的async管道订阅（比如未渲染模板、未手动订阅data$），valueChanges不会被激活，自然不会触发后续的switchMap逻辑。

另外，若测试中options$同步返回数据，ngOnInit中设置初始值的操作会早于data$的订阅，这次初始值变更不会被valueChanges捕获。

2. ExpressionChangedAfterItHasBeenCheckedError原因 #

Angular变更检测完成一轮后，ngAfterViewInit阶段修改FormControl的值，会导致组件视图表达式值在检测后发生变化，触发Angular的变更检测校验错误。

修复方案 #

方案一：合并流逻辑，确保初始与变更都触发请求 #

重构data$逻辑，结合选项流设置默认值，同时用startWith捕获初始值：

@Component()
export class FooComponent implements OnInit {
  readonly selectOption: FormControl<Option>;
  readonly options$: Observable<Option[]>;
  readonly data$: Observable<Data>;

  constructor(private readonly dataService: DataService) {
    this.options$ = this.dataService.listOptions();
    this.selectOption = new FormControl<Option>(null as unknown as Option);
    
    this.data$ = this.options$.pipe(
      switchMap(options => {
        // 设置默认选中第一个选项
        if (options.length > 0) {
          this.selectOption.setValue(options[0]);
        }
        // 合并初始值与valueChanges流
        return this.selectOption.valueChanges.pipe(
          startWith(this.selectOption.value),
          switchMap(value => this.dataService.queryData(value))
        );
      })
    );
  }

  ngOnInit() {}
}

方案二：手动触发初始请求 #

保留原有结构，给data$添加初始请求逻辑：

@Component()
export class FooComponent implements OnInit {
  readonly selectOption: FormControl<Option>;
  readonly options$: Observable<Option[]>;
  readonly data$: Observable<Data>;

  constructor(private readonly dataService: DataService) {
    this.options$ = this.dataService.listOptions();
    this.selectOption = new FormControl<Option>(DEFAULT_OPTION);
    
    this.data$ = this.getData().pipe(
      startWith(this.dataService.queryData(this.selectOption.value))
    );
  }

  ngOnInit() {
    this.options$.subscribe((options) => {
      if (options.length > 0) {
        this.selectOption.setValue(options[0]);
      }
    })
  }

  private getData(): Observable<Data> {
    return this.selectOption.valueChanges.pipe(
      switchMap((value) => this.dataService.queryData(value))
    );
  }
}

单元测试注意事项 #

测试中需确保：

1. 渲染组件模板，触发async管道对data$的订阅
2. 模拟异步选项流（用of(options).pipe(delay(0))），确保初始值设置在data$订阅之后

示例测试片段：

it('should trigger data request on initial selection', fakeAsync(() => {
  const mockOptions: Option[] = [{value: 1, displayName: 'Option 1'}];
  const mockData: Data = {/* mock data */};
  
  spyOn(dataService, 'listOptions').and.returnValue(of(mockOptions).pipe(delay(0)));
  spyOn(dataService, 'queryData').and.returnValue(of(mockData));

  fixture = TestBed.createComponent(FooComponent);
  fixture.detectChanges();
  tick();

  expect(dataService.queryData).toHaveBeenCalledWith(mockOptions[0]);
}));

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