Angular 7测试-使用去抖动时间模拟输入事件

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
  template: `
    <input [(ngModel)]="inputValue" (input)="onInput()">
    <div>{{ outputValue }}</div>
  `
})
class TestComponent {
  inputValue: string;
  outputValue: string;

  private inputSubject = new Subject<string>();

  constructor() {
    this.inputSubject.pipe(debounceTime(300)).subscribe(value => {
      this.outputValue = value;
    });
  }

  onInput() {
    this.inputSubject.next(this.inputValue);
  }
}

describe('TestComponent', () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [TestComponent]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should debounce input events', () => {
    const inputElement = fixture.nativeElement.querySelector('input');
    const outputElement = fixture.nativeElement.querySelector('div');

    inputElement.value = 'test';
    inputElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();

    expect(component.outputValue).toBeUndefined();

    fixture.whenStable().then(() => {
      expect(component.outputValue).toBe('test');
      expect(outputElement.textContent).toBe('test');
    });
  });
});