Angular 9 单元测试 ngModel 和 POST 请求

Question

@Component({
  selector: 'app-save-filter',
  templateUrl: './save-filter.component.html',
  styleUrls: ['./save-filter.component.scss']
})
export class SaveFilterComponent {
  @Input() objectType: string;
  @Input() savedQuery: string;
  @Output() newFilter = new EventEmitter<boolean>();
  queryName = '';
  defaultFlag = false;
  private QUERY_URL = 'search/query';

  constructor(private apiService: ApiService) {}

  onSave() {
    if (this.queryName.trim()){
      const body = {
        defaultFlag: this.defaultFlag,
        objectType: this.objectType,
        queryName: this.queryName,
        savedQuery: this.savedQuery
      };
      this.apiService.post(this.QUERY_URL, body).subscribe((response: QueryModelResponse) => {
        this.toast.show('', 'We have saved your filter "' + response.queryName + '"');
        this.activeModal.close();
        this.newFilter.emit(true);
        this.advancedSearch.refreshFiltersAfterAddNew(response.objectType);
      });
    } else {
      this.toast.show('', 'Error: You need a name for your filter.');
    }
  }
}

HTLM

  <div class="row">
    <div class="col-12">
      <input class="form-control" placeholder="Filter Name" id="queryName" [(ngModel)]="queryName" (keydown.enter)="onSave()">
    </div>
  </div>
  <div class="row my-3">
    <div class="col-12">
      <input class="mr-1" type="checkbox" id="defaultFlag" [(ngModel)]="defaultFlag" [ngModelOptions]="{standalone: true}"><span>Set As Default</span>
    </div>
  </div>

测试

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule, RouterTestingModule, FormsModule, ReactiveFormsModule],
      declarations: [ BulkExportProfilesComponent ],
      providers: [
        ApiService,
        {
          provide: Window,
          useValue: window
        }
      ]
    })
      .compileComponents();
  }));

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

  afterEach(() => {
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should set the filter name', fakeAsync(() => {
    const queryName = fixture.debugElement.query(By.css('#queryName')).nativeElement;
    queryName.value = "Filter";
    queryName.dispatchEvent(new Event('input'));
    tick();
    fixture.whenStable().then(() => {
      expect(component.queryName).toEqual('Filter');
    });
  }));
});

当我运行测试时，我得到一个失败的结果，“预期”等于“过滤器”。

我认为在 fakeAsync 中添加 whenStable 可以解决问题。 我还有两个问题，如何测试 onSave() function？ 我想确保我正确设置了主体并发出 output。 您可以指出我测试@Input/@Output 的任何资源吗？ 谢谢你。