Угловая Жасмин FormControl Unit Test valueChanges

Question

Я хочу провести модульное тестирование моего следующего метода:

  this.boxValue = '';

  subscribeToFilterChanges(): void {
    this.filterBox.valueChanges
      .subscribe(
        data => {
          if (data) {
            this.boxValue = data.trim().toLowerCase();
          }
        }
      );
   }

filterBox - это FormControl:

filterBox = new FormControl('');

HTML это:

    <mat-form-field appearance="standard">
      <input matInput [formControl]="filterBox"
            id="filterBox-input">
    </mat-form-field>

У меня естьзаписал модульный тест следующим образом:

it('verify filter changes', () => {

    let filterBoxInput = fixture.debugElement.query(By.css('#filterBox-input'));
    filterBoxInput.nativeElement.value = 'dummy';
    filterBoxInput.nativeElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(component.boxValue).toBe('dummy1');
    });
  });

Этот тест должен завершиться неудачей, но он все равно отображается как пройденный, даже если в .toBe ()

указано неправильное значение * В чем может быть проблема?

Я ссылался на Угловое тестирование: FormControl valueChanges Observable и использовал его в своем коде, как показано выше, но это не решило проблему.

Answer 1

Я думаю, что проблема в том, что ваш компонент не инициализирован должным образом во время манипулирования вашим input.

. Вы должны указать Angular выполнить передачу данных, вызвав fixture.detectChanges(); сразу после созданиякомпонент:

const fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();

Также, как уже упоминалось в комментариях, whenStable здесь не требуется.

Завершенный тест может выглядеть так:

it('verify filter changes', () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const component = fixture.debugElement.componentInstance;
  let filterBoxInput = fixture.debugElement.query(By.css('#filterBox-input'));
  filterBoxInput.nativeElement.value = 'dummy';
  filterBoxInput.nativeElement.dispatchEvent(new Event('input'));
  fixture.detectChanges();
  expect(component.boxValue).toBe('dummy'); // should pass
});

Ng-run Пример