在对 FormGroup 进行更改后，如何在单元测试中触发 valuesChanged 可观察对象？

Question

我正在为包含反应式表单 (FormGroup) 和对 valueChanges 的订阅的组件编写单元测试代码，但我还没有弄清楚如何确保 FormGroup 发出 valueChanges 事件。

// In the component under test:
this.formGroup.get('field').valueChanges
     .subscribe((obj: any[]) => {
         debugger; // BREAKPOINT
         dataObject.fieldValues = [ ... ];
         ... details here should be unimportant ...
     });

// In the unit test:
it('should set dataObject from field component', fakeAsync(() => {
        [
    values: string[] = [ ... ];

    component.formGroup.get('field').setValue(values);
    component.formGroup.get('field').updateValueAndValidity({ emitEvent: true });
    fixture.detectChanges();
    tick();

    expect(component.dataObject.fieldValues.length).toEqual(values.length);

}));

我无法让单元测试规范命中组件订阅代码中的断点。

Answer 1

你的tick()和fixture.detectChanges()的顺序是关键。

预计在设置 componentInstance 的 beforeEarch 循环中已经有一个 fixture.detectChnages()，那么您需要做的是：

首先调用 tick()，因此测试会一直等到设置值。之后，您就可以像您期望的那样从组件内部访问该值。如果您随后希望模板内部发生变化，则需要触发 fixture.detectChanges 将您的组件与模板同步。

但重要的是，您在 fixture.detectChanges()

之前调用 tick()

// In the component under test:
this.formGroup.get('field').valueChanges
     .subscribe((obj: any[]) => {
         debugger; // BREAKPOINT
         dataObject.fieldValues = [ ... ];
         ... details here should be unimportant ...
     });

// In the unit test:
it('should set dataObject from field component', fakeAsync(() => {
        [
    values: string[] = [ ... ];

    component.formGroup.get('field').setValue(values);
    component.formGroup.get('field').updateValueAndValidity({ emitEvent: true });

    tick();
    fixture.detectChanges(); // OPTIONAL

    expect(component.dataObject.fieldValues.length).toEqual(values.length);

}));

在对 FormGroup 进行更改后，如何在单元测试中触发 valuesChanged 可观察对象？

How do I trigger the valuesChanged observable in a unit test after making changes to a FormGroup?

unit-testing

angular

angular-reactive-forms