Как мне вызвать значения valuesChanged, наблюдаемые в модульном тесте после внесения изменений в FormGroup?

Question

Я пишу код модульного тестирования для компонента, который включает в себя реактивную форму (FormGroup) и подписку на valueChanges, и я не выяснил, как обеспечить, чтобы событие valueChanges передавалось FormGroup.

// 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() является ключом.

Ожидая, что у вас уже есть fixture.detectChnages() внутри цикла beforeEarch, где установлен componentInstance, тогда вам нужно сделать следующее:

сначала вызовите tick (), поэтому тест ждет, пока значение не будет установлено. После этого вы уже можете получить доступ к значению внутри компонента, как вы и ожидали. Если затем вы захотите ожидать изменения внутри вашего шаблона, вам нужно вызвать fixture.detectChanges, который синхронизирует ваш компонент с шаблоном.

Но важно то, что вы звоните tick() до fixture.detectChanges()

// 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);

}));