Angular2 - 使用 debounceTime 测试调用

# Angular2 中的 debounceTime：测试和调用的完整指南

typescript
import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { MyComponent } from './my.component';
import { FormsModule } from '@angular/forms';
describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture;
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [MyComponent],
    });
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
  });
  it('should debounce input events', fakeAsync(() => {
    const inputElement = fixture.nativeElement.querySelector('input');
    const inputValue = 'test';
    inputElement.value = inputValue;
    inputElement.dispatchEvent(new Event('input'));
    expect(component.handleInput).not.toHaveBeenCalled();
    tick(300); // Adjust the debounce time as needed
    expect(component.handleInput).toHaveBeenCalledWith(inputValue);
  }));
});

typescript
import { Component } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
@Component({
  selector: 'app-my-component',
  template: `
    
  `,
})
export class MyComponent {
  private inputSubject = new Subject();
  constructor() {
    this.inputSubject
      .pipe(debounceTime(300)) // Adjust the debounce time as needed
      .subscribe((value) => this.handleInput(value));
  }
  onInput(event: any): void {
    this.inputSubject.next(event.target.value);
  }
  handleInput(value: string): void {
    // Process the input value after debounce time
    console.log('Input value:', value);
  }
}